Mobil nettside design er komplisert, siden en mobilversjon av et nettsted kanskje ikke er kompatibel med alle enheter. Designerne må være oppmerksomme på beste designpraksis for å gjøre din mobile tilstedeværelse meningsfull og verdig.
Det er en kontinuerlig debatt blant webutviklere om hvilken måte å skape et mobiloptimalisert nettsted på, er det beste. Det er tre ledende metoder for å utvikle en mobil nettside.
Disse er:
- Responsivt webdesign.
- Dedikerte mobile nettsteder.
- RESS: Server-side programmering gjør CSS og HTML, avhengig av typen enhet.
Hver metode har sine fordeler og ulemper. En webutvikler må være oppmerksom på hver teknikk for å implementere det beste for situasjonen.
3 måter å designe en mobil nettside
Responsive Web Design (RWD)
RWD er avhengig av CSS3 medieforespørsler for å justere layoutet til en nettside med størrelsen på visningsområdet til en enhet. Den samme HTML-koden brukes til å presentere ulike websidelayouter for tabletter, mobilenheter, skrivebord og andre gadgets.
Fordeler:
- Nettstedet ditt vil ha lignende innhold og HTML-markering, så mobile besøkende vil ha den samme opplevelsen, uansett hvilken type enhet de bruker.
- En enkelt nettadresse gjør det lettere for brukerne å koble til og dele innhold. (Hvis nettsiden er tilgjengelig under mer enn en nettadresse, kan brukerne bli forvirret.)
ulemper:
Det er ikke mulig å optimalisere mobilinnholdet separat. Derfor kan en designer som bruker RWD, ikke skreddersy innholdet separat for mobile brukere.
Ifølge januar 2013 data fra HTTP arkiv, en gjennomsnittlig nettside er ca 1,3 MB. Imidlertid er de fleste RWD-nettsteder relativt større. Denne større størrelsen reduserer ytelsen til mobile nettsteder, noe som gjør dem langsommere.
Mobilbrukere er mer tilpasset til mobilspesifikke brukergrensesnittdesignmønstre. Videre er mobile brukere vant til multi-tasking. Med mindre navigasjonsstrukturen er tilpasset bestemte enheter, kan brukerne møte problemer når man forsøker å utføre flere oppgaver samtidig.
Dedikerte mobilnettsteder
Denne metoden forbedrer opplevelsen av mobilbrukere ved å skape et helt eget nettsted.
Fordeler:
- Enkel administrasjon: Det kreves separate endringer for mobile og stasjonære nettsteder. Endringene som gjøres er begrenset til hver enkelt versjon. Dette betyr at endringer som er ment for mobilplattformen, ikke kan nås fra skrivebordet.
- Når du utvikler et mobilspesifikt nettsted, blir det lettere å strømlinjeforme og optimalisere det spesielt for det publikum.
- Innholds- og navigasjonsstruktur kan tilpasses for mobilbrukere.
ulemper:
Deling av en nettside via sosiale medier blir vanskeligere, siden med dedikerte mobile nettsteder er det flere nettadresser for sider. Når stasjonære brukere klikker på mobilnettadresser som deles på sosiale medier, kan de ved utilsiktet motta mobilversjonen av nettstedet i stedet for desktopversjonen.
For å unngå dupliserte innholdsproblemer må webutvikleren bruke rel = "alternative" og rel = "canonical" meta tags. Hvis en mobil bruker søker Google og klikker på en stasjonær nettadresse, vil brukeren enten se på desktopversjonen eller bli omdirigert til mobilversjonen av nettsiden. Hvis den mobile versjonen ikke eksisterer, mottar brukeren en feilmelding.
Å skape en helt annen nettside for mobilbrukere betyr at nettstedet skal skreddersys spesielt for mobilbrukere. Men for å oppfylle den hensikten må webutviklere kutte ut funksjonalitet og innhold, som viser seg å være et mareritt for dem.
Responsivt webdesign+ Server side komponenter (RESS)
Denne metoden avhenger av server-side programmering for å gi tilpasset HTML og CSS for forskjellige enheter. Koden for mobilbrukere vil være annerledes enn for desktop-brukere.
Hovedformålet bak denne gjennomføringen er å forbedre nettstedets ytelse. Denne metoden fungerer bra når den kombineres med lydhør webdesign. Derfor kan denne gjennomføringen bli referert til som Responsive Web Design + server side komponenter (RESS).
Fordeler:
- Navigasjonsstrukturen kan tilpasses for ulike oppgaver utført av stasjonære og mobile brukere.
- Utviklere kan fjerne sideelementer fra HTML og CSS for å oppnå ønsket visning.
- Det er mulig å fjerne unødvendig JavaScript fra HTML, som frigjør CPU-ressursene, minnet og cachen av mobile enheter.
ulemper:
- Dynamisk HTML øker belastningen på serveren.
- Enhetsdeteksjon kan ikke påberopes.
- HTML og CSS er optimalisert for mobil ytelse. Desktop-versjonen bruker flere HTTP-forespørsler og Java-skript.
Hvilken metode å velge?
Beslutningen om å designe et mobiloptimalisert nettsted avhenger av produktene du selger, målgruppen din, investeringen som kreves, konkurransen din, konverteringsfrekvenser etc. Designmetoden som vil fungere best, avhenger stort sett av skjermformater, operativsystemer, nettlesere og resolusjoner.
Mest responsive webdesign-nettsteder er ikke implementert optimalt, og som et resultat tar disse sidene mer tid å laste. Siden konkurransen er hard, kan du miste kunder hvis nettstedet ditt fungerer saktere. En bruker vil bare bytte til et annet nettsted som tar mindre tid å åpne. Selv om det er mulig å lage nettsteder med kortere belastningstider med dedikerte mobilnettsteder, er det også ulike ulemper knyttet til denne implementeringen.
RESS gir fordeler med RWD å overvinne sine to hoved ulemper. Den største ulempen ved RESS er at deteksjon av enheten er upålitelig. Du må teste ofte for nye enheter for å sikre at prosessen fortsetter å fungere skikkelig.
Det finnes tjenester som DeviceAtlas, WURFL og andre som kan oppdage nye enheter. Det vil være en god hjelp til å oppdatere nye enheter i databasen.
Mobil webdesign er vellykket bare når et nettsted vises riktig på en mobil enhet. Selv om det er en skremmende oppgave for designere å representere alle viktige deler av et skrivebordsside i et lite, mobilt vindu, kommer nye teknikker hver dag til å gjøre mobile nettsteder bedre, raskere og mer fullverdige.
Mobil Nettstedsfoto via Shutterstock
15 kommentarer ▼
