Vanliga mobila webbdesignfel
Mobil Internetanvändning stiger, och världen av webbdesign fortsätter att utvecklas, så designers måste lära sig att passa mobila enheter. Tänkande "Åh, mina användare kommer inte att besöka min hemsida på en mobil enhet" är det värsta misstaget för alla.
Ingen kan stoppa mobilanvändningen från att öka, och oddsen är att varje webbplats kommer att få besökare på mobila enheter. Så den bästa strategin är att vara så förberedd som möjligt.
Att bara tänka på mobila användare räcker inte för att ta itu med situationen. Många misstag begås fortfarande under processen, och att veta vad de är är det första steget att effektivt undvika dem i framtida projekt.
Följande är de vanligaste misstagen på mobila webbplatser.
Anger inte för enhetens bredd
Det här låter uppenbart, men en hel del webbplatser ser ut så här på en mobil enhet (i det här fallet iPhone):
Du bör förstå den maximala bredden som elementen på en sida borde ha, samt kunna formatera ett helt HTML-dokument för att ta hänsyn till olika skärmstorlekar.
I skärmbilden ovan till vänster formateras webbplatsen för variabla enhetens bredder, men dess element är inte. Webbplatsen till höger är inte formaterad för variabla enheter bredder, så dess element förefaller alltför små. Även om body elementet sattes till en smalare bredd (till exempel 320 pixlar), det skulle bara skjutas längst till vänster om skärmen och fortfarande vara liten och oläslig.
Detta kan fixas med en enkel HTML-linje i av varje dokument:
Denna lilla detalj, tillsammans med formaterade element, kommer att göra en bra mobilupplevelse.
Låt användarna fylla i långa formulär
Att fylla i formulär är irriterande även på stationära datorer, och det är ännu mer tråkigt på en mobil skärm. Att utforma en webbformulär för mobila enheter är en komplex uppgift. fokusera på att bygga enkla former som inte frågar mycket av användarna.
Ange vilken typ av ingång som begärs från användaren, så att tangentbordet har de element som användaren behöver när de fokuserar på fältet. Till exempel anger du ett fältets inmatningstyp som number ställer in tangentbordet för att visa nummer som standard istället för bokstäver.
Inte ompröva innehållet
Överföring av innehåll från webbskärmar med storskärm har kommit att involvera sin egen strategi, som när innehållet måste överföras från skriv till web. Rymd- och fokusbegränsningar på mobila enheter är betydligt större än de på datorer.
Luke Wroblewskis "design for mobile first" -metod definierar ett starkt sätt att ta fram. Det motverkar oss från att generera en uppsättning innehåll för skrivbordswebben och en annan uppsättning för mobilwebben. Ett mobildesignteam bör överväga huruvida innehåll som inte kommer att visas i mobilversionen är till och med nödvändigt? Kanske behöver det inte ens visas i skrivbordet.
Användning av innehåll för dekorativa ändamål eller bara för att fylla utrymme garanterar nästan att det kommer att tas bort senare, varför inte bara överväga nödvändigt innehåll från början?
Att gå igenom denna process kan avslöja andra vanliga misstag och problem.
Eliminerar innehåll och funktionalitet utan anledning
Att revidera innehåll kan vara knepigt och snabba scheman kan tvinga det att hända snabbare än det borde. Detta resulterar ofta i att avlägsna innehåll och funktionalitet felaktigt, i själva verket nästan slumpmässigt.
Processen innefattar en djup analys innan redigerings- och curating-början. Befintlig innehåll behöver ses över för att skilja innehåll som lägger till värde och uppfyller användarnas förväntningar från innehåll som bara distraherar eller fyller ut utrymme.
För att bättre förstå strategin för att skapa och redigera innehåll, kolla in boken Innehållsstrategi för webben av Kristina Halvorson. Den täcker varje detalj, från grundläggande innehållsstrategi till revision och redigering av väsentligt material.
Glömmer storleken och begränsningarna av ett finger
När du använder en dator använder vi exakta musklick för varje uppgift. Vi kan enkelt klicka på en 16 × 16 ikon; processen innebär inga svårigheter.
En mobilanvändare har å andra sidan precisionen av ett finger - ett finger som nästan aldrig är tunt.
Apple har bestämt sig för 44 pixlar som minsta acceptabel storlek för mobila kontroller (44 × 30, för att vara exakt) och har implementerat denna standard över sina produkter.
Förutom storleken på element ignoreras ofta mellanrummet mellan dessa element. Tänk på en lista med alternativ, som åtföljs av en radioknapp, med en linjehöjd på 0 mellan dem. Användare är skyldiga att göra misstag, även om de tar sin tid. Varför skulle vi komplicera saker på detta sätt?
Luke Wroblewski har kanske gått vidare än någon för att identifiera standardstorlekar för mobil design, genom att sammanställa rekommendationer från flera plattformar. Enligt Windows Phone UI och Interaction Guide bör standardstorleken mellan element vara 8 pixlar, minimum.
Längstidsbelastningstider: Tunga bildfiler
Tunga bildfiler har varit ett problem från början i webbdesign. Och mobilwebben presenterar ännu större utmaningar, eftersom laddningstider tenderar att öka när du kombinerar de begränsade egenskaperna hos vissa enheter med variabla dataöverföringssignaler (som beror på vilken typ av Internetanslutning).
Bildoptimering fortsätter också att vara ett viktigt övervägande i mobildesign.
Längstidsbelastningstider: För många bilder
Många små bilder utgör samma handikapp som en enda tungviktsbild.
Detta är särskilt ett problem när konstruktörer försöker efterlikna utseendet på inbyggda smartphone-applikationer, inklusive graderingar och avrundade hörn av iOS-huvud och knappar.
Det leder till ännu ett vanligt misstag ...
Utnyttja inte CSS3 och HTML5-funktioner
Många typer av bilder kan undvikas helt och hållet nu att HTML5 och CSS3 finns runt. Plus, mobila webbläsare ger oss mycket mer frihet än skrivbords-webbläsare eftersom nästan alla byggdes på Webkit motor, som stöder både HTML5 och CSS3.
Varför inte dra nytta av detta? De element i HTML5 kan minska behovet av bilder, liksom de nya CSS3-egenskaperna som ger grundläggande stilar som gradienter och rundade hörn. Det är ett viktigt sätt att spara på sidladdningstider.
Nog med grafiken nu. Att använda för många bilder är inte det enda sättet att skada en mobil design, och bilder är inte de enda saker som saktar ner det heller.
Längstidsbelastningstider: För mycket import
Vi ses huvudsakligen med ramar (och plug-ins för dessa ramar). Låt oss möta det: det händer mycket nu, och det har hänt sedan ankomsten av de oh-så nödvändiga och hjälpsamma AJAX-ramarna som jQuery och MooTools. jQuery-utvecklare gick till och med så långt som att skapa en mobil förbättring som heter jQuery Mobile.
Dessa gör jobbet så mycket enklare att många designers oroa sig inte för konsekvenserna av att de är mycket beroende av dem. Du har förmodligen sett något liknande i a märka:
Och låt oss inte glömma importen jQuery Mobile:
Varje enskild import i denna rubrik är en återuppringning till servern, och det saktar ner sidan precis som en laddningsbild skulle.
Det finns vägar kring denna fråga. Du kan syntetisera importen. Varför importera flera små skript om du kan ringa en stor? Du kan också utvärdera om du behöver en ram alls. Är det verkligen värt det? Kan du få jobbet gjort dig själv med mindre komplexitet ?.
Längstidsbelastningstider: Meddela inte handlingar tydligt
Låt oss säga att vissa åtgärder på din mobilwebbplats tar längre tid att ladda än andra. Det är okej; Det är inte något att bli galet om du har gjort en riktig insats för att påskynda sakerna. Det viktiga att tänka på nu är hur man gör väntetiden mer tålamod för användaren?
Lösningen är att göra konstruktionen så transparent som möjligt. Vad händer? Användaren ska kunna svara på denna fråga hela tiden. För varje laddningsåtgärd i designen bör det finnas ett tydligt uttalande som berättar användaren om det.
Underskatt aldrig kraften i den enkla "Loading ..." -strängen.
Det går inte att ange en startsida-ikon
Ingen vill att genvägen till deras mobilwebbprogram ska se ut som någon av dem till vänster ovan. DeviantART-ikonen till höger är mycket mer attraktiv och mer sannolikt att klickas på.
Saken med användare är att de tenderar att inte läsa. Och en startskärm full av genvägar utan särskiljande ikoner gör användarna 100% beroende av titlarna. (Och även då komprimeras långa titlar och fylls i med ellipser, enligt ovan, vilket gör dem ännu mindre identifierbara).
Att ställa in en startskärmsikon är inte alls svårt. Efter att ha skapat ikonen som en PNG-fil (som ska vara 158 × 158 pixlar), lägg till följande rad kod till av ditt HTML-dokument:
Enkelt och användbart. Den här koden fungerar också på Android-telefoner. Du behöver inte ens lägga till glans eller avrundade hörn. iPhone lägger till det automatiskt.
Inte responsiv
Responsiv webbdesign är ett svar på alla dessa frågor. Det är knepigt att genomföra, men effektivt när det är gjort bra. Ethan Marcotte skrev nyligen en hel bok om ämnet. Jag rekommenderar det starkt om du vill komma in på detta i mycket mer detalj.
Responsiv design handlar om att skapa en design som anpassar sig snyggt, oavsett behållarens storlek. Det handlar om överväganden som vätskenät (där elementen omorganiseras när webbläsaren ändras i storlek) och bilder som anpassar sig som sidan expanderar och kontrakterar.
Marcotte skrev också en detaljerad introduktion till responsiv design , vilket kan hjälpa dig att bättre förstå ämnet.
Har du personlig erfarenhet av mobila designutmaningar? Vilka problem har du stött på? Har du som mobilanvändare stött på andra problem än de som nämns här?