Mobile Web Design 10 tips til bedre brugervenlighed

Mobil browsing er forventet at blive til den næste store internetplatform. Det er nu nemt at gennemse nettet fra næsten hvor som helst der bruger mobile enheder, der passer i hånden på grund af teknologi. At være kort i god brugbarhed implementering i mobile webdesign gør det svært at browse din vej rundt om forskellige populære mobile hjemmesider. Designing for mobile enheder skal være enklere end dets standardwebsted og mere opgavebaseret for at få jobbet gjort, fordi brugerne søger efter noget specifikt og presserende.

Du bør tage højde for, hvordan du bruger det mindste minimum af ledig plads til dit store indhold og forbliver interessant for mobile brugere. Undgå store billeder og flash animation, da det vil bremse dit websted. Husk, at funktionalitet er vigtigere end stil til mobile websteder. Hvis dit websted ikke er kodet og design korrekt, kan det se bedre ud på en telefon, værst på et andet eller værre, slet ikke vises. Test, valider og kontroller, om den er kompatibel med alle mobilenheder.

For at hjælpe dig med at skabe websider, der ikke kun er tilgængelige på stationære eller bærbare computere, men også mobile enheder, er her nogle af de ting at overveje på mobilt webdesign med eksempler på billeder sammen med den mobile webstedsversions direkte link.

1. Beslut om skærmopløsningen

Den mobile verden indeholder en rig variation af design overvejelser fra forskellige skærmstørrelser og opløsning til forskellige former. Målet er at finde en balance mellem tilstrækkelig skærmbredde og målestørrelse. Find ud af specifikationerne for de nuværende mobilenheder og brug din bedste dømmekraft. Hvad der er udfordrende for mobile udviklere, er vejen for at få en til at vise passende over en række skærmstørrelser uden at skulle genskabe sider til forskellige platforme.

Her er en liste over webresolutioner populære på mobile enheder fra februar 2011 præsenteret af Uxbooth.com med deres offentliggjorte artikel, Overvejelser for Mobile Web Design (Del 2): ​​Dimensioner, af David Leggett. Forfatteren forklarer nogle få punkter om display dimensioner og løsninger til layout design.

2. Opdel websider i små portioner

Langsigtige afsnit af teksten kan være svære at læse, så at placere dem på flere sider begrænser scrollningen til en retning. Slap af med lavt prioriteret indhold. Hold dig til en enkelt kolonne med tekst, der wraps, så der er ingen horisontal rulning.

I eksemplet nedenfor viser CBS News mobilwebsite-version kun den store nyhedssektion og bryder nyhedsartiklerne i små portioner. Mens Treehugger præsenterer sig med deres seneste artikler og seneste tweets med nogle af funktionerne på hele hjemmesiden. Begge steder har brugeren klik på en tekstlink for at se resten af ​​artiklen.

CBS News

Træelsker

3. Forenkle designet

Enkelhed svarer til anvendelighed. Lad dem bevæge sig rundt på stedet uden problemer. Undgå optagelse af tabeller, rammer og anden formatering. Hvis du bruger polstring, skal du huske at holde det til et absolut minimum langt mindre end du ville bruge til en normal webside. Sammenlignet med stationære computere, jo mere du klikker på linkene på mobile websteder, jo mere venter du på grund af indlæsningstiden. Dermed skal du fjerne og forenkle dit website med balance mellem indhold og navigation.

For vores eksempel, kun mobilversionswebstedet Best Buy-liste kun de mest vigtige produktkategorier trimning ned niveauet af hierarki for indhold. Mens YouTube-mobilsiden viser kun de fire seneste spotlight-videoer.

Bedste køb

Youtube

4. Mulighed for at se hele hjemmesiden

Giv et link til dine mobile besøgende at skifte tilbage til din fulde hjemmeside, så brugeren kan finde og se det andet indhold og funktioner, der kun er tilgængelige for desktopversionen af ​​webstedet. Dine seere vil sikkert gøre en masse lodret rulning, så hjælp dem ud med links til "Back to Top", så de kan hoppe til toppen af ​​siden.

Som et eksempel har Ars Technica deres link-knap til standardwebstedet placeret på overskriften. Mens Shangri-La har deres fulde hjemmeside link placeret på footer.

Ars Technica

Shangri la

5. Navigationsplacering

Få kendskab til dit publikum og vær opmærksom på, hvad de leder efter. Find ud af, hvordan de vil navigere på dit websted. Placer din navigationsmenu under indholdet, hvis dine målrettede mobile brugere vil se skiftende indhold hurtigt. Indholdet og overskriften skal være synlige først for ikke at komme i vejen for at se sidens indhold. For brugere, der ønsker at navigere i en bestemt kategori med det samme, skal du placere navigationen øverst på siden. Nedenfor er forskellige prøver af navigation placering brugt i mobile webdesign.

D & G

politisk

Dagligt Horoskop

6. Brug tekstforbindelser

Din hovedwebsted kan bruge whizzy fly-out menuer, rollovers eller anden dekorativ gadgetry, men en mobil browser vil sandsynligvis ikke. Vær opmærksom på, at dynamiske sideelementer og grafiske links forbruger ressourcer, så vælg velmærkede tekstforbindelser.

En liste fra hinanden

Reddit

7. Skel skelnen mellem det valgte link

Flyt markøren ned vil rulle på siden og fremhæve forbindelserne alle på én gang. Så det er vigtigt at klart rådgive brugeren om, hvilken genstand der er i fokus. Dette kan gøres ved at ændre skrifttype og baggrundsfarve på links og knapper eller ved blot at tilføje nogle polstring omkring links for at gøre det klikbare område større omkring 44px med 44px. Geek Squad og Diesel lavede brug af store skrifttyper til klikbar tekst.

Geek Squad

Diesel

8. Balanceforbindelser

Hver side download forbruger tid og systemressourcer, hvis sidstnævnte er mangelfuld, så prøv ikke at tvinge besøgende på webstedet til at grave gennem en lang række sider for at få adgang til de ønskede oplysninger. Find en balance mellem antallet af links på hver side og dybden af ​​webstedet.

Flickr

Twitter

9. Reducer brugertekstindtastning

Det er svært at indtaste tekst i mobile versioner af websteder. Udskift med radioknapper eller liste i stedet, så de kan vælge fra, hvad de har brug for med lethed. Husk, at mobilbrugere ikke har adgang til konventionelt tastatur og mus. Jo kortere URL'en, jo bedre fordi det er ensformigt at indtaste lange webadresser.

For vores prøve nedenfor anvendte Fedex tjekliste og drop down menuer. Mens Tumblr fik dig til at vælge dit sprog ved hjælp af rullemenuen.

Fedex

tumblr

10. Ingen pops eller opdateres

Mobilbrowsere understøtter normalt ikke pop op-vinduer. Og hvis de gjorde det, ville de have meget snævert plads til at komme ind i. Hold dig væk fra at bruge dem for at undgå uforudsigelige resultater. Du må også have sider, der forfriskes med jævne mellemrum for at undgå at fylde enhedens begrænsede hukommelse. Lad brugeren opdatere indholdet.

I en nøddeskal

Få kreativ og anvend dit mobile webdesign på en ny måde. Gør dit indhold tvingende nok og brugbart. Giv dine brugere, hvad de vil, når de vil have det. Brugere ønsker ikke at grave dybere på webstedet bare for at finde det, de leder efter i mobilwebben.

Har du nogle foretrukne mobile websteder, der virkelig inspirerede dig? Kan du dele nogle af dine mobile webdesign tips? Lad os vide!

Yderligere læsning

1. Responsive Web Design (Alistapart.com)
2. Gør dit websted mobilt venligt (Thinkvitamin.com)
3. W3C mobileOK Checker (W3.org)
4. iPhone Simulator