Mobil website design er kompliceret, da en mobilversion af et websted muligvis ikke er kompatibel med alle enheder. Designerne skal være opmærksomme på bedste designpraksis for at gøre din mobil tilstedeværelse meningsfuld og værdig.
Der er en løbende debat blandt webudviklere om, hvilken måde at oprette en mobiloptimeret hjemmeside på er den bedste. Der er tre førende metoder til udvikling af en mobilwebsite.
Disse er:
- Responsive Webdesign.
- Dedikerede mobile hjemmesider.
- RESS: Server-side programmering gør CSS og HTML, afhængigt af typen af enhed.
Hver metode har sine fordele og ulemper. En webudvikler skal være opmærksom på hver teknik til at gennemføre det bedste for situationen.
3 måder at designe en mobil hjemmeside
Responsive Web Design (RWD)
RWD er afhængig af CSS3-medieforespørgsler for at justere layoutet på en webside med størrelsen af et enheds synsfelt. Den samme HTML-kode bruges til at præsentere forskellige webside layouts til tabletter, mobilenheder, desktops og andre gadgets.
Fordele:
- Din hjemmeside vil have lignende indhold og HTML-markering, så mobile besøgende vil have den samme oplevelse, uanset hvilken type enhed de bruger.
- En enkelt webadresse gør det nemmere for brugerne at linke til og dele indhold. (Hvis websiden er tilgængelig under mere end en webadresse, kan brugerne blive forvirrede.)
Ulemper:
Det er ikke muligt at optimere mobilindhold separat. Derfor kan en designer, der bruger RWD, ikke skræddersy indhold separat til mobile brugere.
Ifølge januar 2013 data fra HTTP arkiv, en gennemsnitlig webside er omkring 1,3 MB. Men de fleste RWD-websteder er forholdsvis større. Denne større størrelse mindsker udførelsen af mobile websteder, hvilket gør dem langsommere.
Mobilbrugere er mere tilpasset til mobilspecifikke brugergrænseflades designmønstre. Desuden er mobile brugere vant til multi-tasking. Medmindre navigationsstrukturen er tilpasset til bestemte enheder, kan brugerne stå over for problemer, når de forsøger at udføre flere opgaver samtidigt.
Dedikerede mobilwebsteder
Denne metode forbedrer mobilbrugernes oplevelse ved at oprette en helt separat hjemmeside.
Fordele:
- Enkel forvaltning: Der kræves separate ændringer til mobil- og desktop-websteder. De foretagne ændringer er begrænset til hver enkelt version. Det betyder, at ændringer, der er beregnet til den mobile platform, ikke kan hentes fra skrivebordet.
- Da du udvikler en mobilspecifik hjemmeside, bliver det lettere at strømline og optimere det specifikt for den pågældende publikum.
- Indholds- og navigationsstruktur kan tilpasses til mobilbrugere.
Ulemper:
Deling af en webside via sociale medier bliver vanskeligere, da der med dedikerede mobilwebsteder er flere webadresser til sider. Når stationære brugere klikker på mobilwebadresser, der deles på sociale medier, kan de utilsigtet modtage mobilversionen af webstedet i stedet for desktopversionen.
For at undgå duplikat indholdsproblemer skal webudvikleren bruge rel = "alternative" og rel = "canonical" meta tags. Hvis en mobilbruger søger Google og klikker på en stationær webadresse, vil brugeren enten se desktopversionen eller blive omdirigeret til mobilversionen af websiden. Hvis den mobile version ikke findes, modtager brugeren en fejlmeddelelse.
Oprettelse af en helt anden hjemmeside til mobile brugere betyder, at webstedet vil blive skræddersyet specifikt til mobile brugere. For at opfylde dette formål skal webudviklere dog skære ud funktionalitet og indhold, som viser sig at være et mareridt for dem.
Responsive Web Design+ Server side komponenter (RESS)
Denne metode afhænger af server-side programmering for at levere brugerdefineret HTML og CSS til forskellige enheder. Koden til mobile brugere vil være forskellig fra den af desktopbrugere.
Hovedformålet bag denne implementering er at forbedre hjemmesidenes ydeevne. Denne metode fungerer godt, når den kombineres med lydhør webdesign. Derfor kan denne implementering henvises til som Responsive Web Design + server side komponenter (RESS).
Fordele:
- Navigationsstrukturen kan tilpasses til forskellige opgaver udført af desktop- og mobilbrugere.
- Udviklere kan fjerne sideelementer fra HTML og CSS for at opnå det ønskede display.
- Det er muligt at fjerne unødvendigt JavaScript fra HTML, som frigør CPU ressourcer, hukommelse og cache af mobile enheder.
Ulemper:
- Dynamisk HTML øger belastningen på serveren.
- Enhedsdetektering kan ikke påberåbes.
- HTML og CSS er optimeret til mobil ydeevne. Desktop version bruger flere HTTP-anmodninger og Java Scripts.
Hvilken metode kan du vælge?
Beslutningen om at designe et mobiloptimeret websted afhænger af de produkter, du sælger, din målgruppe, den nødvendige investering, din konkurrence, konverteringsfrekvenser osv. Den designmetode, der fungerer bedst afhænger stort set af skærmformater, operativsystemer, browsere og resolutioner.
De mest lydhørige webdesignsider implementeres ikke optimalt, og som følge heraf tager disse websteder mere tid til at indlæse. Da konkurrencen er hård, kan du miste kunderne, hvis dit websted udføres langsommere. En bruger vil simpelthen skifte til et andet websted, der tager mindre tid at åbne. Selv om det er muligt at oprette websteder med kortere belastningstider med dedikerede mobilwebsteder, er der også forskellige ulemper ved denne implementering.
RESS giver fordele ved RWD at overvinde sine to hoved ulemper. Den største ulempe ved RESS er, at enhedsdetektering er upålidelig. Du skal ofte teste for nye enheder for at sikre, at processen fortsætter med at fungere korrekt.
Der er tjenester som DeviceAtlas, WURFL og andre, der kan registrere nye enheder. Det vil være en stor hjælp til at opdatere nye enheder i din database.
Mobil webdesign er kun vellykket, når en hjemmeside vises korrekt på en mobil enhed. Selvom det er en skræmmende opgave for designere at repræsentere alle de væsentlige dele af et desktop-websted i et lille mobilvindue, fremkommer hver dag nye teknikker for at gøre mobilwebsites bedre, hurtigere og mere fuldt udstyret.
Mobil hjemmeside foto via Shutterstock
15 kommentarer ▼
