lillbra.se

Arkiv för January, 2007

Att utveckla för mobila webben

postad January 25, 2007 i Mobilt, Utveckling, 1 kommentar

Att besöka webben med mobilen är annorlunda – liten skärm och oftast bara knappsatsen som inmatningsenhet är två uppenbara skillnader. När man utvecklar html för webben gäller dock i mångt och mycket samma utvecklingsprinciper som för vanliga webbsajter. Men det finns några saker som är extra viktiga för just mobil webbdesign. Riktlinjerna som presenteras här är, när inte annat anges, hämtade från W3Cs Mobile Web Best Practices 1.0.

Design och grafik

För det första så bör man använda undvika scrollning i sidled. En mobil skärm är oftast mindre än 240 pixlar bred, ibland så smal som 120 pixlar. Använd därför en enkolumns-layout som radar upp innehållet vertikalt.
Designen sätter du i ett separat stylesheet för mobiltelefoner (och handdatorer) genom att använda media-attributet med värdet handheld. Så till exempel infogar du ditt css för mobiler genom:
<link rel="stylesheet" type="text/css" href=”mobilestyles.css" media="handheld">

Tyvärr är det stor skillnad på om och hur mobilernas webbläsare tolkar stylesheetet, vilket är ett problem för mobil webbutveckling. W3C skriver också att man bör strukturera sina sidor så att dom kan tolkas utan stylesheet. Patrick Griffith har gjort en testsida för handheld media där du kan kolla om och hur din webbläsare klarar media="handheld".

På css-discuss kan man läsa att link-elementet helst ska användas till att importera css:et eftersom vissa mobila webbläsare inte klarar @import eller @media. En annan fördel med att använda link för stilmallarna är att mobilens webbläsare då inte behöver ladda in css-filer den inte behöver använda.

Stylesheetet bör hållas så litet som möjligt för att minska nedladdningstiden. Av samma anledning bör att man hålla antalet inlänkade objekt (läs bilder) så lågt som möjligt. Stora och högupplösta bilder bör undvikas helt.
W3C rekommenderar att bildernas storlek ska specifieras i koden med hjälp av attributen width och height på img-taggen. Detta eftersom man då talar om för webbläsaren hur stor plats bilden ska ta, så sidan inte behöver ritas om när hela bilden är laddad.

Information och innehåll

Ha en minimal navigationsmeny i sidans topp, så användaren kan se sidans innehåll tidigt. Om man vill kan man ha menyn i slutet av sidan också. Eller använd genvägslänkar som ”hoppa till innehållet”, ”tillbaka till toppen”.

Man bör se till att endast visa sådant innehåll som användaren specifikt har begärt – de flesta mobila användarna vet vad de letar efter. Detta är även viktigt för att hålla nere mängden trafik.
Och för att användaren ska kunna se det han/hon vill på den lilla skärmen gäller det att dela ut informationen i rätta proportioner. För stora sidor tar lång tid att ladda och är jobbigt att scrolla, för små innebär många http-anrop vilket tar tid.

Kod och struktur

På grund av plattformarnas och webbläsarnas begränsningar är det några saker man ska undvika i sin kod. Använd inte:

pop-ups eller nya fönster
inbäddade object (t.ex. flash)
scripts
ramar
cookies

Tabeller ska som vanligt inte användas till layouten, men för mobilen bör man fundera om man ens ska använda tabeller över huvud taget. Tabeller fungerar dåligt på små skärmstorlekar och tvingar ofta användaren att scrolla i sidled. Dessutom kan stödet för tabeller vara dåligt i den mobila webbläsaren.
I formulär bör man sträva efter att minimera antalet knapptryck för användaren. Använd därför droplistor, radiobuttons och andra kontroller som inte kräver att användaren skriver in saker själv.
Cameron Moll tipsar om att man kan använda ol istället för ul i menyer, för att många mobiler då tar siffrorna som accesskeys, så man kan klicka på länken genom att ange dess siffra.

Kommentarer om riktlinjer

Jag tycker riktlinjerna känns viktiga och rätt naturliga. De flesta av dem gäller som sagt för ”vanlig utveckling” också. Och de ger, som Roger Johansson påpekar, automatiskt mer användbara och tillgängliga sidor för alla sammanhang.

Att man ska sätta height och width på bilder i html-koden var något nytt för mig. Är det alltså därför height och width är tillåtna i strict doctype?

Även om det står att t.e.x. navigationsmenyer och innehåll ska vara ”minimalt” skriver W3C att man ändå ska sträva mot One Web-principen – d.v.s. samma innehåll för mobila webben och vanliga webben, vilket är viktigt att komma ihåg.
Jag håller dock inte med W3C om att mobila användare vet exakt vad de letar efter, och inte vill se något extra på sidorna. När jag surfar på mobilen är det oftast slösurf för att fördriva tid på tåg och liknande.
Lycka till med knappandet!

[tags]mobilt, webbutveckling, html, css[/tags]