Fælles Mobile Web Design Fejl
Mobil internetforbrug er på vej, og verden af webdesign fortsætter med at udvikle sig - så designere skal lære at modtage mobile enheder. Tænker "Åh, mine brugere vil ikke besøge min hjemmeside på en mobil enhed" er den værste fejl for alle.
Ingen kan stoppe mobilforbruget fra at øge, og oddsene er, at hver hjemmeside vil modtage besøgende på mobile enheder. Så den bedste strategi er at være så forberedt som muligt.
Bare at tænke på mobile brugere er ikke nok til at løse situationen. Mange fejl er stadig begået under processen, og at vide, hvad de er, er det første skridt i at undgå dem effektivt i fremtidige projekter.
Følgende er de mest almindelige fejl på mobile websteder.
Ikke regnet for enhedens bredde
Dette lyder måske indlysende, men en forfærdelig masse websites ser sådan ud på en mobil enhed (i dette tilfælde iPhone):
Du bør forstå den maksimale bredde, som elementer på en side burde have, samt kunne formatere et helt HTML-dokument for at tage højde for forskellige skærmstørrelser.
I skærmbilledet ovenfor til venstre er hjemmesiden formateret til variable enhedsbredder, men dens elementer er ikke. Webstedet til højre er ikke formateret til variable enhedsbredder, så dets elementer virker alt for små. Selvom body elementet blev indstillet til en smalere bredde (f.eks. 320 pixels), det ville bare blive skubbet helt til venstre på skærmen og stadig være lille og ulæselige.
Dette kan løses med en simpel HTML-linje i af hvert dokument:
Denne lille detalje sammen med formaterede elementer vil skabe en god mobil oplevelse.
Gør det muligt for brugerne at udfylde lange former
Udfyldning af formularer er irriterende selv på stationære computere, og det er endnu mere kedeligt på en mobil skærm. Design af en webformular til mobile enheder er en kompleks opgave; fokusere på at opbygge enkle former, der ikke spørger meget om brugere.
Indstil den type input, der anmodes om fra brugeren, så tastaturet har de elementer, som brugeren har brug for, når de fokuserer på feltet. For eksempel indstiller du et feltets indtastetype som number vil indstille tastaturet til at vise numre som standard, i stedet for bogstaver.
Ikke genovervejer indhold
Overførsel af indhold fra websider i storskærm er kommet for at involvere sin egen strategi, som når indholdet skulle overføres fra print til web. Rum- og fokusbegrænsninger på mobile enheder er langt større end dem på computere.
Luke Wroblewski's "design for mobile first" -metode definerer en stærk tilgang, vi kan tage. Det afskrækker os fra at generere et sæt indhold til desktopwebben og et andet sæt til mobilwebben. Et mobildesignteam bør overveje, om indhold, der ikke vises i mobilversionen, endda er nødvendigt? Måske behøver det ikke engang at vises i desktop-versionen.
Brug af indhold til dekorative formål eller bare for at udfylde plads garanterer næsten, at det bliver fjernet senere, så hvorfor ikke overveje bare vigtigt indhold fra starten?
At gennemgå denne proces kan afdække andre almindelige fejl og problemer.
Eliminerer indhold og funktionalitet uden grund
At revidere indhold kan være vanskelig, og stramme tidsplaner kan tvinge det til at ske hurtigere, end det burde. Dette resulterer ofte i at fjerne indhold og funktionalitet fejlagtigt, faktisk næsten tilfældigt.
Processen indebærer dybdegående analyse inden redigering og curating begyndelsen. Eksisterende indhold skal revideres for at adskille indhold, der tilføjer værdi og opfylder brugernes forventninger fra indhold, der bare distraherer eller fylder plads.
For bedre at forstå strategien for at generere og redigere indhold, tjek bogen Indholdsstrategi for internettet af Kristina Halvorson. Det dækker alle detaljer, fra grundlæggende indholdsstrategi til revision og redigering af væsentligt materiale.
Glemmer størrelsen og begrænsningerne af en finger
Ved brug af en computer bruger vi præcise museklik for hver opgave. Vi kan nemt klikke på et 16 × 16 ikon; processen involverer ingen trængsler.
En mobilbruger har derimod en fingers præcision - en finger, der næsten aldrig er tynd.
Apple har besluttet på 44 pixels som minimum acceptabel størrelse til mobile kontroller (44 × 30, for at være præcise) og har implementeret denne standard på tværs af sine produkter.
Ud over størrelsen af elementer ignoreres mellemrummet mellem disse elementer ofte. Tænk på en liste over muligheder, hver med en radioknap, med en linjehøjde på 0 mellem dem. Brugere er forpligtet til at lave fejl, selvom de tager deres tid. Hvorfor ville vi komplicere tingene på denne måde?
Luke Wroblewski er måske gået videre end nogen til at identificere standardstørrelser til mobildesign ved at kompilere anbefalinger fra flere platforme. Ifølge Windows Phone UI og Interaction Guide skal standardstørrelsen mellem elementer være mindst 8 pixels.
Langside-load tider: Heavy billedfiler
Tungt billedfiler har været et problem fra begyndelsen i webdesign. Og mobilwebben præsenterer endnu større udfordringer, fordi indlæsningstiderne tendens til at stige, når du kombinerer de begrænsede muligheder for nogle enheder med variable dataoverførselssignaler (som afhænger af typen internetforbindelse).
Billedoptimering er også fortsat en vigtig overvejelse i mobildesign.
Langside-belastningstider: For mange billeder
Mange små billeder udgør det samme handicap som et enkelt tungt billede.
Dette er især et problem, når designere forsøger at efterligne udseendet af native smartphone-applikationer, herunder gradienter og afrundede hjørner af iOS-overskrifter og knapper.
Det fører til endnu en almindelig fejltagelse ...
Udnytter ikke CSS3 og HTML5 muligheder
Mange slags billeder kan undgås helt, nu hvor HTML5 og CSS3 er omkring. Plus giver mobilbrowsere os meget mere frihed end stationære browsere, fordi næsten alle blev bygget på Webkit motor, der understøtter både HTML5 og CSS3.
Hvorfor ikke drage fordel af dette? Det element i HTML5 kan reducere behovet for billeder, ligesom de nye CSS3-egenskaber, der giver grundlæggende stilarter som gradienter og afrundede hjørner. Det er en vigtig måde at gemme på sideindlæsningstider.
Nok med grafikken nu. Brug af for mange billeder er ikke den eneste måde at beskadige et mobil design på, og billeder er ikke de eneste ting, der sænker det enten.
Langside-belastningstider: For mange indførsler
Vi ses hovedsagelig med rammer (og plug-ins til disse rammer). Lad os se det i øjnene: det sker meget nu, og det har fundet sted siden ankomsten af de oh-så nødvendige og hjælpsomme AJAX-rammer som jQuery og MooTools. jQuery-udviklere gik endda så langt som at oprette en mobil enhancement kaldet jQuery Mobile.
Disse gør jobbet så meget enklere, at mange designere ikke bekymrer sig om konsekvenserne af, at de afhænger meget af dem. Du har sikkert set noget som dette i a tag:
Og lad os ikke glemme importen af jQuery Mobile:
Hver enkelt import i denne overskrift er et tilbagekald til serveren, og det sænker siden, ligesom et indlæsningsbillede ville.
Der er måder omkring dette problem. Du kunne syntetisere importen. Hvorfor importere flere små scripts, hvis du kan ringe til en stor en? Du kan også vurdere, om du har brug for en ramme overhovedet. Er det virkelig det værd? Kunne du få jobbet gjort dig selv med mindre kompleksitet ?.
Længdeindlæsningstider: Ikke kommunikere handlinger tydeligt
Lad os sige, at visse handlinger på din mobilwebsite tager længere tid at indlæse end andre. Det er fint; det er ikke noget at blive vanvittigt, hvis du har gjort en reel indsats for at fremskynde tingene. Den vigtige ting at overveje nu er, hvordan man gør ventetiden mere tåleligt for brugeren?
Løsningen er at gøre designet så gennemsigtigt som muligt. Hvad sker der? Brugeren skal altid kunne besvare dette spørgsmål. For hver indlæsning i designet skal der være en klar erklæring, der fortæller brugeren om det.
Undervurder aldrig kraften i den enkle "Loading ..." -streng.
Ikke indstiller et startskærmikon
Ingen ønsker genvejen til deres mobile webapplikation at ligne nogen af dem til venstre ovenfor. DeviantART-ikonet til højre er meget mere attraktivt og mere sandsynligt at blive klikket på.
Det ved brugerne er, at de ikke plejer at læse. Og en hjemmeskærm fuld af genveje uden særlige symboler gør brugerne 100% afhængige af titlerne. (Og selv da bliver lange titler komprimeret og udfyldt med ellipser, som set ovenfor, hvilket gør dem endnu mindre identificerbare).
Indstilling af et startskærmikon er slet ikke svært. Når du har oprettet ikonet som en PNG-fil (som skal være 158 × 158 pixels), skal du føje følgende linje kode til af dit HTML-dokument:
Enkel og hjælpsom. Denne linje kode fungerer også på Android-telefoner. Du behøver ikke engang at tilføje glans eller afrundede hjørner; iPhone tilføjer det automatisk.
Ikke at være lydhør
Responsive webdesign er et svar på alle disse spørgsmål. Det er vanskeligt at gennemføre, men effektivt, når det gøres godt. Ethan Marcotte skrev for nylig en hel bog på emnet. Jeg anbefaler det stærkt, hvis du vil komme ind i dette i meget mere detaljeret.
Responsive design handler om at skabe et design, der passer fint, uanset størrelsen af beholderen. Det indebærer overvejelser som væskenetværk (hvor elementer omorganiseres som browseren ændres i størrelse) og billeder, der tilpasser sig som siden udvider og kontrakter.
Marcotte skrev også en detaljeret introduktion til responsivt design , som kan hjælpe dig med at forstå emnet bedre.
Har du personlig erfaring med udfordringer inden for mobildesign? Hvilke problemer har du oplevet? Har du som mobilbruger oplevet andre problemer end dem der er nævnt her?