Design trends på mobile web apps

Webbranchen er hele tiden under forandring. Det stiller krav til løbende at tilpasse sig og udvikle sine færdigheder for at holde sig ajour med de seneste trends. I de sidste par år, har en af ​​de største områder inden for forandringer på internettet været den mængde af Internet brugere, som pludselig får adgang til websites på mobiltelefoner.

Jeg har i dette blogindlæg forsøgt at konkretisere tidens trends og huskeregler, når du arbejder med design på mobile web apps. For design på mobile enheder kræver en strategisk tilgang fra både min og udviklerens side af.

1) Hav kun simple valgmuligheder

En mobil hjemmeside bør kun indeholde få simple overskrifter og links. Når det kommer til mobile websites, så er det enkelhed, som er vejen frem til en succesfuld løsning. På grund af den manglende plads på skærmen, og internetforbindelser som ofte er langsommere på mobilen, er det vigtigt for de besøgende at have adgang til kun det allermest nødvendige.

I en tid, hvor de fleste websites er overfyldte med information og links, så kan enkelheden på de mobile websites være forfriskende. Det er kun den vigtigste information som skal være synligt, og alt overskydende information skal skæres fra. Det handler virkelig om at skære alt ind til benet, hvilket i virkeligheden gør det mobile site langt mere brugervenligt. En anden god huskeregel er, at en større typografi øger læsbarheden, og større knapper er lettere at ramme med fingrene.

2) Variationen af skærmstørrelser

En af de vigtigste faktorer, når du designer en mobil webløsning, er skærmstørrelsen. Skærmstørrelsen er som regel en udfordring, fordi der er et ønske om at få så meget med som muligt. Selvom vi er vant til at håndtere varierende skærmstørrelser, så er udfordringen endnu større når det drejer sig om mobile designs.

Det skyldes blandt andet, at mobil teknologien konstant er under forandring. Heldigvis har de moderne mobiltelefoner større skærme og højere opløsninger end for blot et par år siden. Men derfor er de ældre telefoner stadig i brug, og dem skal der fortsat tages hensyn til.

Amerikanske undersøgelser viser, at 240 x 320 (aka QVGA) bør være standard for mobil udvikling. Mange nyere mobiltelefoner og smartphones har større skærme, mens de mindre er ved at være fortid. Jeg vil vove og påstå, at denne tendens fortsætter i takt med populariteten af både iPhone og Android telefoner.

3) Manglende billeder

Høj hastigheds-internetforbindelser er blevet mere almindelige i de senere år, og derfor har vi designere kunne tage flere friheder med videoer og billeder. Men når det kommer til mobildesign, så skader overdreven brug af billeder ofte mere end de gavner. Billeder på en mobiltelefon gør nemlig blot siden langsommere.

Derudover kan størrelsen på skærmen (som nævnt ovenfor) gøre billeder svære at se, og indholdet sværere at læse. Af disse grunde er det meget almindeligt at se minimal brug af billeder i mobile web-designs. Fordelen ved en smartphone med touch skærm er, at billederne er i bedre kvalitet, og så har brugeren mulighed for at tappe, swipe og zoome på et billede.

4) Brug sub-domæner eller tilpas størrelsen

Det er i Danmark blevet mere almindeligt, at virksomheder anvender et sub-domæne som f.eks. m.adapt.dk til de mobile sites. En af de store fordele ved at bruge et sub-domæne er, at virksomheden holder alt på ét domæne, i stedet for at sprede tingene ud og potentielt forvirre de besøgende.

Vi anbefaler, at du udover at lave et subdomæne, også tilpasser selve løsningen så når en bruger vælger at besøge din hjemmeside fra en mobilskærm, så sendes de automatisk videre til den mobile version. Det er således skærmens størrelse, der afgør om du bliver sendt til hjemmesiden, iPad versionen eller den mobile version.

5) Prioriter dit indhold

Alle websites skal være brugervenlige, men da de fleste hjemmesider drives kommercielt til erhvervsmæssige formål, er der ofte elementer, der ikke nødvendigvis er vigtigt for den besøgende som f.eks. bannerreklamer. Disse bliver valgt fra på en mobil version af hjemmesiden, da de fylder for meget, og blot er et forstyrrende element. Og mens reklamer i vid udstrækning er blevet en accepteret del af internettet, så er de fleste mobile webløsninger reklame frie.

Det handler om at vælge de vigtigste ting ud, som brugeren har behov for på farten. Det kan f.eks. være at se eller læse mere om et produkt, bruge søgefunktionen, finde nærmeste butik eller se kontaktinfo og åbningstider. Logikken er, at den besøgende formentlig er på farten, og derfor har noget meget konkret i tankerne. Måske leder vedkommende efter en butik i nærheden af ​​han/hendes nuværende position. GPS positionering kalder jeg for kontekstuelt design, og er en funktionalitet, der kun giver mening i forhold til mobil webdesign.

6. Vær opmærksom på navigation

De fleste hjemmesider har en primær navigationsmenu meget højt på siden. Det har en mobil version også, men her er de mobile navigationsmuligheder skaleret ned. Navigationen skal ofte ændres, fordi det er umuligt at vise en hel hovedmenu. Løsningen er at arbejde med en synlig dropdown-menu, der indeholder samtlige hovedmenupunkter når du klikker på den.

Et andet vigtigt nøgleord er lister. På en mobil version laver du i stedet lister, som er klikbare. Scrolling er en nødvendighed på mobile enheder, og her har listevisningen vist sig at være uovertruffen. Ikke mindst fordi den skal kunne skalere ved henholdsvis horisontal og vertikal skærmvisning.

Du er nu godt på vej mod en mobil version af dit website!

Det var et par tip fra min verden. Der er mange nye udfordringer og mange ting, som du skal være opmærksom på. Men med ovenstående for øje er du allerede godt på vej til at lave en god og brugervenlig mobil version af dit website. Til yderligere inspiration kan du på også se en række amerikanske mobile e-handels websites, som jeg synes gør det ret godt.