Mobile hjemmesider best practices |

At udvikle mobile hjemmesider er lidt ligesom at vende tilbage til gamle dage, hvor brugerne havde modem-forbindelser, og hvor man ikke kunne være sikker på, at brugerne havde en skærm, der var meget større end 640×480. Selv om Smartphones bliver bedre og bedre med hensyn til skærm og processor, så er der stadig en lang række forholdsregler, som man bør tage, når man udvikler en hjemmeside, der er optimeret til mobiltelefoner.

Jeg har samlet følgende best practices sammen – både via research på nettet, og via egne erfaringer fra implementering af løsninger. Jeg håber, at du kan bruge disse erfaringer. Hvis du selv har gjort dig nogle erfaringer, eller hvis der er punkter,du er uenig i,så skriv gerne en kommentar.

Domæne

Simpelt domæne
Det er vigtigt, at det er så let for brugeren at indtaste hjemmesidens adresse. Derfor bør man anvende m .domain .dk i stedet for m.domain.dk/default.aspx.
Unik domæne
Brugerne skal have mulighed for at gå direkte ind på den mobile hjemmeside. Derfor anvendes f.eks. m .domain .dk
Automatisk omdirigering
Når en bruger med en smartphone eller anden mobil enhed går ind på siden, så omdirigeres brugeren automatisk til det optimerede mobile website.
Brugeren har dog stadig mulighed for at gå tilbage til det almindelige website via et link på siden.
Link til hjemmesiden
Visse brugere foretrækker at anvende den almindelige hjemmeside. Derfor bør der være mulighed for at få vist den almindelige hjemmeside – f.eks. ved et link til hjemmesiden.

Design

Genkendelighed fra hjemmeside til mobil hjemmeside
Det er vigtigt, at brugeren kan genkende virksomheden eller kommunen bag den mobile hjemmeside. Derfor bør væsentlige grafiske elementer gå igen på både hjemmeside og mobil hjemmeside.
Design til forskellige skærmstørrelser
En ting er, at der udvikles ved hjælp af principperne i Response Webdesign, men selve designet bør også optimeres imod de enkelte enheder. Der er forskel på de enkelte enheder (Smartphones, Tablets og PCere).
Undgå horisontal scroll
Brugerne vil gerne scrolle indholdet, men det er kun vertikalt og ikke horisontalt.
Husk landscape- og portraitmode
Alle smartphones er i dag i stand til at ændre på en hjemmesides bredde, når telefonen lægges ned. Dette skal der tages hensyn til i designet af den mobile hjemmeside.
Prioriter Smartphones og ikke featurephones
Statistikkerne viser, at trafikken fra smartphones er væsentlig større end trafikken fra featurephones. Da smartphones har en lang række fordele i forhold til eksempelvis skærmstørrelse, muligheder for JavaScript, hastighed, offline-kapabilitet, geolocation og en væsentligt udbygget HTML-standard, så bør man optimere til smartphones. Alternativet ville være enten at bygge siden til den laveste fællesnævner, hvilket ville udelukke en masse funktionalitet, eller bygge to forskellige hjemmesider, hvilket ville øge omkostningerne væsentligt.
Simpel konsistent navigation med meget få punkter i toppen
Mange hjemmesider indeholder en meget omfattende navigation. En sådan vil ikke kunne gentages på en mobil hjemmeside. I stedet bør der laves en simpel navigation, som blot fungerer som en inddeling af hjemmesiden.
Prominent og effektiv søgning
En god og effektiv søgning kan hjælpe brugeren, hvis der er meget information på den mobile hjemmeside. Søgningen skal være hurtig og præcis, og selve indtastningsfeltet skal hjælpe brugeren ved at komme med forslag til søgeord/sætninger. Brugen af tastatur på en smartphone er generelt besværligt, og derfor bør man hjælpe brugeren på vej.

Indhold

Less is more – 80/20-reglen – indhold primært målrettet mobile brugere
Der behøver ikke nødvendigvis være forskel på det indhold, som en bruger efterspørger på den mobile hjemmeside, og det indhold, som efterspørges på den almindelige hjemmeside.
Men smartphones har både begrænsninger og muligheder samt et brugsmønster, som alligevel betyder, at det kan betale sig at udvælge specifikt indhold og funktionalitet, som fremhæves på smartphones. Derfor bør man konstruere en navigation og en forside, som er målrettet smartphones, og der bør prioriteres indhold, som man ved bliver efterspurgt af mobile brugere. Dette kan undersøges ved hjælp af konkrete målinger af efterspørgslen efter indholdet på hjemmesiden.
Man bør også undgå funktionalitet, der fungerer på den almindelige hjemmeside, men som ikke fungerer på smartphones – eksempelvis selvbetjeningsløsninger.
Men….med mulighed for at brugerne alligevel kan fremsøge indhold fra hjemmesiden
Selv om man anvender 80/20-reglen og prioriterer det indhold, som primært efterspørges af brugere med smartphones, så bør der stadig være mulighed for at finde indhold, som er tilgængeligt på den almindelige hjemmeside. Rent funktionalitets- og designmæssigt sker dette ved, at der implementeres en effektiv søgemotor, som søger ned i alt indhold fra hjemmesiden. En meget stor udfordring i den forbindelse er, at separere indholdet komplet fra design – dermed stilles der også store krav til det CMS, som anvendes.
Undgå indlejrede links
Det kan være svært at ramme links, der er indlejret i artiklens tekst. Derfor bør links placeres og designes på en måde, så de er nemme at ramme med pegefingeren. Eksempelvis ved at links formateres som knapper.
Undgå indhold i eksterne filer
PDF-dokumenter kan godt læses på smartphones, men er på ingen måde optimerede til de begrænsninger, der hersker på smartphones. Man bør generelt undgå anvendelsen af eksterne dokumenter – hvilket også gælder på almindelige hjemmesider.
Sørg for kontaktinformationer på siden, og for at telefonnumre er sat op til, at brugeren kan foretage et opkald ved at klikke på nummeret
Hvis den mobile hjemmeside eksponerer geografisk information, så sørg for at udnytte mobiltelefonens GPS
Hvis indholdet er relateret til geografisk placering, så hjælp brugeren ved at anvende mobiltelefonens GPS. Eksempel: hvis en bruger søger efter busruter, så tag udgangspunkt i brugerens placering.

Implementering

Optimér alt
Brug Google Pagespeed til at vurdere om siden er optimeret. Undgå røde og gule anmærkninger.
Sørg desuden for, at især billeder og grafik optimeres automatisk til de mobile enheder. Dette kan eksempelvis ske ved, at CMS-produktet automatisk tilpasser billeder alt efter om de vises på den almindelige hjemmeside eller på den mobile hjemmeside.
Undgå Flash og Silverlight
Flash og Silverlight er generelt dårligt understøttet på smartphones. Overvej om der virkelig er brug for dynamisk funktionalitet, og hvis der er, så anvend JavaScript-frameworks.
Undgå indhold og funktionalitet, som opdateres automatisk
Funktionalitet, som opdateres automatisk, er tungt for en smartphone, og da skærmen på en smartphone er lille, så er der risiko for at brugeren bliver mere forvirret end oplyst. Eksempler på sådan funktionalitet er automatiske sliders, der med mellemrum skifter mellem forskelligt indhold.
Anvend mobilt framework – f.eks. jQuery Mobile
Der eksisterer en række mobile frameworks, som er bygget til mobile enheder. Et eksempel på dette er jQuery Mobile (http://jquerymobile.com/)
Test på forskellige Smartphones – med forskellige skærmstørrelser og browsere
Markedet for smartphones er et broget marked. Der er mange forskellige skærmstørrelser og browsere. Derfor skal den mobile hjemmeside testes i de mest udbredte telefoner og med de mest udbredte browsere.
Anvend principperne i Responsive Webdesign
Response Webdesign (http://www.alistapart.com/articles/responsive-web-design/) er design principper for et website, som automatisk tilpasser sig forskellige enheder. Det indhold, som findes på den almindelige hjemmside, skal også kunne vises på en smartphone. Derfor er det vigtigt, at indholdet præsenteres i et layout og et design, som passer til konteksten, og at eksempelvis højrekolonner udvælges og placeres på baggrund af konteksten.
Sørg for at den mobile hjemmeside validerer i henhold til W3C (HTML5 specifikationerne) og WCAG Level AA
De krav, som kommunerne står overfor, når der skal udvikles almindelige hjemmesider, står de også overfor, når de skal udvikle mobile hjemmesider. Det vil sige, at eksempelvis CSS skal adskilles fra HTML, at tabeller og frames skal undgås samt at der skal anvendes relative størrelser og ikke faste.

Relaterede indlæg

Om Peter Terkildsen

Partner og forretningskonsulent i Bleau A/S, far til tre børn, ivrig marathonløber og særdeles interesseret i al ny teknologi. Har i Bleau ansvaret for at udvikle nye spændende koncepter til vores kunder. Jeg skriver om alt, der interesserer mig, og som jeg falder over, når jeg arbejder med vores kunder.