Mobil webbdesign är komplicerad, eftersom en mobilversion av en webbplats kanske inte är kompatibel med varje enhet. Designern måste vara medveten om bästa designpraxis för att göra din mobila närvaro meningsfull och värdig.
Det finns en kontinuerlig debatt bland webbutvecklare om vilket sätt att skapa en mobiloptimerad webbplats är bäst. Det finns tre ledande metoder för att utveckla en mobilwebbplats.
Dessa är:
- Responsiv webbdesign.
- Dedikerade mobila webbplatser.
- RESS: Serverns programmering gör CSS och HTML, beroende på vilken typ av enhet som helst.
Varje metod har sina fördelar och nackdelar. En webbutvecklare måste vara medveten om varje teknik för att genomföra det bästa för situationen.
3 sätt att designa en mobil hemsida
Responsive Web Design (RWD)
RWD är beroende av CSS3-mediafrågor för att anpassa layouten på en webbsida med storleken på en områdes visningsområde. Samma HTML-kod används för att presentera olika webbsidor för tabletter, mobila enheter, stationära datorer och andra prylar.
fördelar:
- Din webbplats kommer att ha liknande innehåll och HTML-markering, så mobila besökare kommer att ha samma erfarenhet, oavsett vilken typ av enhet de använder.
- En enda URL gör det enklare för användare att länka till och dela innehåll. (Om webbsidan är tillgänglig under mer än en webbadress kan användarna bli förvirrade.)
nackdelar:
Det går inte att optimera mobilinnehållet separat. Därför kan en designer som använder RWD inte skräddarsy innehåll separat för mobila användare.
Enligt januari 2013 data från HTTP arkiv, en genomsnittlig webbsida är cirka 1,3 MB. De flesta RWD-webbplatser är dock relativt större. Denna större storlek minskar prestandan hos mobila webbplatser, vilket gör dem långsammare.
Mobila användare är mer anpassade till mobilspecifika användargränssnittsmönster. Dessutom är mobila användare vana vid multi-tasking. Om inte navigationsstrukturen anpassas för specifika enheter kan användarna möta problem när de försöker utföra flera uppgifter samtidigt.
Dedikerade mobilwebbplatser
Denna metod förbättrar upplevelsen hos mobilanvändare genom att skapa en helt separat webbplats.
fördelar:
- Enkel hantering: Separata ändringar krävs för mobila och stationära webbplatser. Ändringarna är begränsade till respektive version. Det innebär att ändringar som är avsedda för mobilplattformen inte kan nås från skrivbordet.
- När du utvecklar en mobilspecifik hemsida blir det lättare att effektivisera och optimera det specifikt för den publiken.
- Innehålls- och navigationsstruktur kan anpassas för mobila användare.
nackdelar:
Att dela en webbsida via sociala medier blir svårare, eftersom med dedikerade mobila webbplatser finns flera webbadresser för sidor. När stationära användare klickar på mobila webbadresser som delas på sociala medier, kan de oavsiktligt få mobilversionen av webbplatsen i stället för skrivbordsversionen.
För att undvika dubbla innehållsproblem måste webbutvecklaren använda rel = "alternative" och rel = "canonical" metataggar. Om en mobilanvändare söker Google och klickar på en stationär webbadress, kommer användaren antingen att se skrivbordsversionen eller omdirigeras till mobilversionen av webbsidan. Om den mobila versionen inte finns kommer användaren att få ett felmeddelande.
Att skapa en helt annan webbplats för mobilanvändare innebär att webbplatsen ska skräddarsys specifikt för mobila användare. Men för att uppfylla detta syfte måste webbutvecklare klippa ut funktionalitet och innehåll, vilket visar sig vara en mardröm för dem.
Responsive Web Design+ Serversidekomponenter (RESS)
Denna metod beror på programmering av serverns sida för att tillhandahålla anpassad HTML och CSS för olika enheter. Koden för mobilanvändare kommer att skilja sig från skrivbordets användare.
Huvudmålet bakom denna implementering är att förbättra webbplatsens prestanda. Denna metod fungerar bra när den kombineras med lyhörd webbdesign. Därför kan denna implementering kallas Responsive Web Design + server-sidkomponenter (RESS).
fördelar:
- Navigationsstrukturen kan anpassas för olika uppgifter som utförs av stationära och mobila användare.
- Utvecklare kan ta bort sidelement från HTML och CSS för att uppnå önskad visning.
- Det är möjligt att ta bort onödigt JavaScript från HTML, vilket frigör CPU-resurser, minne och cache för mobila enheter.
nackdelar:
- Dynamisk HTML ökar belastningen på servern.
- Enhetsdetektering kan inte åberopas.
- HTML och CSS är optimerade för mobila prestanda. Desktop-versionen använder fler HTTP-förfrågningar och Java-skript.
Vilken metod att välja?
Beslutet att designa en mobiloptimerad webbplats beror på vilka produkter du säljer, din målgrupp, den investering du behöver, din tävling, omvandlingsfrekvensen etc. Designmetoden som fungerar bäst beror till stor del på skärmformat, operativsystem, webbläsare och resolutioner.
De mest mottagliga webbdesignsidorna implementeras inte optimalt och som ett resultat tar dessa platser mer tid att ladda. Eftersom konkurrensen är hård kan du förlora kunder om din webbplats utför långsammare. En användare kommer helt enkelt att byta till en annan webbplats som tar mindre tid att öppna. Även om det är möjligt att skapa webbplatser med kortare lasttider med dedikerade mobilwebbplatser, finns det också olika nackdelar med denna implementering.
RESS ger fördelar med RWD att övervinna de två största nackdelarna. Den största nackdelen med RESS är att detektering av enheter är opålitlig. Du måste testa ofta för nya enheter för att säkerställa att processen fortsätter att fungera korrekt.
Det finns tjänster som DeviceAtlas, WURFL och andra som kan upptäcka nya enheter. Det kommer att vara en utmärkt hjälp att uppdatera nya enheter i din databas.
Mobil webbdesign lyckas bara när en webbplats visas korrekt på en mobil enhet. Även om det är en skrämmande uppgift för designers att representera alla väsentliga delar av en skrivbordsplats i ett litet mobilfönster, kommer nya tekniker varje dag att göra mobila webbplatser bättre, snabbare och mer fullständiga.
Mobil Webbsida Foto via Shutterstock
15 kommentarer ▼
