Webbsidor som är optimerade för användning på mobila enheter skiljer sig från de som visas på stationära och bärbara datorer. De sistnämnda är designade för stora skärmar och exakta musklick, medan mobilwebbsidor är anpassade för mindre skärmar och oprecis fingerknackning.
- Utformad för mindre skärmar och oprecis fingerknackning.
- Utformad för stora skärmar med exakt musklickning.
Med tanke på att majoriteten av webbplatsbesöken kommer från mobila enheter, har webbplatsdesigner i uppdrag att tillhandahålla versioner som fungerar med både mobila enheter och stationära datorer. Det vanligaste tillvägagångssättet är att använda responsiv webbdesign, som automatiskt levererar rätt version baserat på användarens enhet och skärmstorlek, som detekteras av webbläsaren.
Mobilvänliga webbsidor skiljer sig i alla fall från datorversioner på flera sätt.
Siddesign: Mobilskärmar har mindre utrymme
- Skärmar för smartphones och surfplattor är 4 till 10 tum diagon alt.
- Hopfällbara eller expanderbara menywidgetar ersätter vanligtvis sidofält och skrymmande rubrikmenyer.
-
Fullbreddsgrafik med rättslig användning av utrymme mellan text.
- De flesta stationära bildskärmar mäter 19 tum till 24 tum diagon alt.
- Sponsrade länkar och stora bannerannonser vanligare.
- Tätare text med mer spelrum för grafik.
Den mest uppenbara skillnaden mellan stationära och mobila webbsidor är skärmfastigheten. Medan de flesta stationära bildskärmar mäter minst 19 tum till 24 tum diagon alt, är surfplattor vanligtvis runt 10 tum. Smartphones är cirka 4 tum diagon alt. Att bara zooma ut konverterar inte en webbsida till en mobilvänlig version eftersom det gör texten oläslig och kräver ett extra steg från webbplatsbesökaren. Dessutom blir det omöjligt att knacka exakt på små element.
För att åtgärda problemet kan designers ta bort sidofält och grafik som inte är absolut nödvändiga. Istället använder de mindre grafik, ökar teckensnittsstorlekarna och komprimerar innehåll till expanderbara widgets. Denna fastighetsbegränsning har drivit ett helt annat slags tänkande bland webbdesigners.
Också, hopfällbara eller expanderbara menywidgetar ersätter vanligtvis sidofält och skrymmande rubrikmenyer. I sin strävan att få varje millimeter skärmutrymme att räknas tar designers bort överflödigt vitt utrymme, samtidigt som de håller ett noggrant öga på läsbarheten.
En skara sponsrade länkar och stora bannerannonser fungerar helt enkelt inte på en telefon eller en liten surfplatta. Istället är små popup-annonser vanligare på mobila webbsidor.
Layouter som innehåller text som lindas runt en grafik fungerar inte bra på mobila enheter. Istället ger designers ofta den här grafiken hela skärmens bredd och kör texten under eller ovanför. På samma sätt delar bra webbdesign upp text i bitar för läsbarhet; ingen vill läsa solida väggar av text. Detta blir ännu viktigare på små skärmar. Att använda blankt utrymme på ett klokt sätt är avgörande.
Sidkontroller: Desktop Precision vs. Mobile Blobs
- Stora tryckområden eller hotspots för mer exakt navigering.
- Annan URL: lägger till bokstaven "m." Ofta ett alternativ för att se skrivbordsversionen av en webbplats.
- Inloggningsuppgifter har ofta dedikerat utrymme, ibland med fingeravtryck.
- Mer exakta markörbaserade länkar och knapp.
Till skillnad från en exakt muspekare på skrivbordet är det mänskliga fingret en klump, och knacka kräver stora mål på skärmen för hyperlänkar. Mobilanpassade webbplatser erbjuder stora avlyssningsområden (eller hotspots) för att underlätta korrekt navigering.
Mobilvänliga webbsidor innehåller också ofta bokstaven m i sina adresser; till exempel är Facebooks mobiladress m.facebook.com. Den mobila webbadressen väljs vanligtvis åt dig automatiskt när du surfar med en mobil surfplatta eller smartphone. I vissa fall kommer du att se en klickbar länk som låter dig byta till den vanliga skrivbordsversionen av sidan.
Inloggnings- och lösenordsfält avsedda för stationära och bärbara datorer blir små och oanvändbara på en telefon, så webbpublicister gör dessa större och ibland ger dem sina egna sidor för att underlätta användningen. Att logga in med ett fingeravtryck eller ett annat konto, som Google eller Facebook, blir allt vanligare i takt med att enhetens och tjänstens kapacitet utvecklas.
Varför spelar det någon roll?
Mobila webbsidor är designade för handhållna enheter och skiljer sig ganska mycket från sidor gjorda för skrivbordsläsning. Även om du vanligtvis kan se skrivbordsversionen av en webbsida på en mobil enhet och vice versa, är de utformade på olika sätt för att göra innehållet lättare att se, läsa och navigera i.
