Det er ikke overraskende, at en nylig rapport fra FN's agentur, The International Telecoms Union , forudsagt at der vil være flere mobilabonnementer på planeten end folk inden for de næste 9 måneder. "Smartphone revolutionen" er helt sikkert på os, og som sådan har mobilwebdesign eksploderet i de seneste år.

Dette har betydet, at webudviklere har været nødt til at tage fat på mobilsite design, hvis de ønsker at konkurrere og fremtidssikre deres forretning. Med dette i tankerne har jeg fået nogle top tips for at give udviklere et udgangspunkt, med nogle ting at huske på, før de fortsætter.

Overvej hurtig teknologi

Et hurtigt kig på, hvor langt mobilenheder er kommet siden indførelsen af ​​iPad, bekræfter, at mobilteknologi er en hurtig og stadig skiftende industri, og derfor er det klogt at overveje, hvordan du kan fremtidssikre design.

Det betyder, at det er vigtigt at holde øje med de seneste tendenser, hvis du på en eller anden måde skal sikre, at hjemmesiden vil være levedygtig om få år. Responsivt design er selvfølgelig al raseri i øjeblikket, og det er sandsynligt, at dette vil indgå i din plan.

Selvom det er sikkert at antage, at de fleste af dine besøgende vil have smartphones, er det værd at overveje, at ikke alle vil, og så må du muligvis arbejde dette ind i designet. Det er umagen værd at undersøge målgruppen i planlægningsfasen, så du kan tage fat på de anvendte fælles enheder samt brugeradfærd.

Taler om brugeradfærd ...

Mobilwebbesøg har ikke nødvendigvis adgang til hjemmesider på farten, og det er noget at huske på. Ofte gøres mobil browsing, mens du venter; på toget, i bilen eller endda på sofaen derhjemme.

Dette betyder at stripping ned designet, så det er for simplistisk, kan være kontraproduktivt. Hvis du har et område med bare knogler med intet meget i vejen for indhold, kan det være off-putting til publikum, da dit websted ikke giver noget meget reel brug og kunne betragtes som intet mere end en overdimensioneret bannerannonce.

Mobilt i disse dage bruges så meget som, hvis ikke mere end skrivebordet til internetbrowsing, så tag det i tankerne under designprocessen og sørg for, at dit websted er let at bruge, men alligevel indholdsrigt.

Optimering af dit mobilsite

Optimering af mobile websteder er også afgørende, især for destinationssider, da disse er adgangspunktet for hjemmesiden. Det betyder, at en mobilwebsite skal optimeres med brugeren i tankerne, samt søgemaskinen, for at give en simpel navigationsoplevelse, klar tekst, enkle klik med et klik og relevant meta-information og alt-tags.

Filstørrelser skal overvejes i forhold til vægt, og et stærkt opkald til handling skal medtages på destinationssider. Hvis du skal bruge formularer, så hold dem så enkle som muligt med så få indtastningsfelter som muligt, så brugeren ikke bliver frustreret og forladt.

Det samme gælder for handlinger; Hold dem enkle og brug kun når det er nødvendigt. Selvom det kan være rart at have et fancy navigationssystem, hvis det er ubrugeligt, forventer en høj afvisningshastighed.

Hvor knapper skal bruges, skal du sørge for at passere 'thumb test'en, hvilket betyder at du komfortabelt skal kunne trykke på en knap ved hjælp af din tommelfinger uden at ramme andet indhold, der kan føre dig til en uønsket side.

Optimering er noget, der skal overvejes, når man bygger et lydhurtigt websted også. En masse debat har været for nylig på, hvordan responsivt design sænker internettet, og om det i det væsentlige vil betyde bortfaldet af lydhøre websteder. Der er dog betingede indlæsningsteknikker, som kan hjælpe med at fremskynde et websted for at sikre, at enheder automatisk ikke downloader den fulde desktopversion af webstedet hver gang.

CSS- og JavaScript-ressourcer skal komprimeres, og der er masser af open source-software til rådighed for at hjælpe med dette. For eksempel, UglifyJS kan bruges sammen med JavaScript til at komprimere kode og Kompas kan bruges til at skabe renere markup, samt sprites og extensions, uden for meget travlt og hårdt arbejde.

Gitter og breakpoints

Når du bruger lydhørt design, er et af de vigtigste ting, der skal defineres i starten, nettet og dine breakpoints. Igen er der mange værktøjer online der kan hjælpe dig med at definere kolonner og deres bredde og tagrenge.

Nogle udviklere kan lide at indstille breakpoints baseret på opløsning, men det er ikke rigtig den bedste løsning, da der er så mange mobile enheder på markedet, og beslutninger ændres med tiden.

Det betyder, at breakpoints skal være baseret på design og indhold, snarere end opløsning. For at teste breakpoints og grids kan browservinduet bruges under designprojektet for at se, hvordan indholdet opfører sig, når størrelsen ændres.

Ideelt set bør det flyde naturligt, og du kan bruge så mange breakpoints som du har brug for for at opnå dette.

UI, kompatibilitet og retningslinjer

Ikke alle mobile operativsystemer er skabt det samme, som du ved, så det er værd at se retningslinjerne, når det kommer til at bygge til Android og iOS, og for eksempel de browsere, der kan bruges på dem.

Husk, at brugerne vil surfe på en række forskellige operativsystemer, og nogle vil være ældre versioner, så det er nyttigt at sikre, at mobilwebstedet er bagudkompatibelt. Her er det nyttigt at se på analytics for det primære websted, hvis det er relevant, da du vil kunne se, hvilke enheder dit publikum har adgang til webstedet på.

Selvfølgelig vil kigge på analyser efter færdiggørelsen af ​​hjemmesiden også hjælpe dig med at foretage nødvendige ændringer og lære for fremtiden.

Indhold, indhold, indhold

Som vi alle ved nu, er indholdet kongen af ​​nettet igen, og derfor er det vigtigt at planlægge indholdsmoduler. Indholdsmodulernes opførsel skal defineres for at sikre, at de vises som de skal, når brugeren navigerer og tager handling.

Det betyder, at du skal se på og definere, hvordan indhold vises, når du skifter mellem en skærm til skrivebordet og mobilen for at bestemme, hvordan modulerne skal stable og ombestille sig selv.

I den henseende er det ofte lettere at virkelig få dette fastgjort i planlægningsfasen. Lav en skitse over, hvordan du forestiller indholdsvisning og derefter arbejde igennem, hvordan dette kan opnås.

Prøv dog ikke at blive alt for hængt på at definere alt. Mens dine hovedsider skal bruge wireframes, følger det ikke nødvendigvis, at hver enkelt side vil. Oprettelse af et master sæt til skærmstørrelser og orientering burde virkelig være nok.

Byg en prototype først og test grundigt, og sørg for, at alle aspekter fungerer som du går sammen. Det er også klogt at holde brugeren opmærksom på, når du tester, for at sikre, at navigationen er enkel og helst højst tre lag. Prøv at finde en person, der ikke er teknologisk set, men bruger forskellige enheder til at teste webstedet på.

Konklusion

Mobilt webdesign er en nødvendig udfordring for at få fat i som designer for at tilbyde kunden en komplet service. Ligesom mange ting i livet planlægger et af de vigtigste aspekter, så du har en klar ide om, hvordan du går videre.

Effektiv planlægning og holde brugeren i tankerne vil hjælpe med at overvinde de fleste forhindringer, du sandsynligvis vil komme på tværs af, og grundig testning vil afhente resten. Tænk lydhør, hurtig og enkel, med fremragende nyttigt indhold, og du kan ikke gå for langt forkert.

Fremhævet billede / miniaturebillede, mobilwebbillede via Shutterstock.