6.1 Stilmall för mobila enheter

Genom att ha separerat presentation från innehåll med stilmallar blir det enklare att göra webbplatsens innehåll tillgängligt även i mobila enheter, se även 3.3.4 Separera innehåll från design. Presentationen av innehållet behöver ofta göras på ett sätt som passar en mobil användning. Skapa därför en stilmall för mobila enheter. I sin absolut enklaste form är en sådan stilmall helt enkelt en stilmall utan design. Innehållet presenteras då ungefär som det skulle se ut med stilmallarna avstängda.

Flera mobiltelefoner har begränsade möjligheter att presentera text på annat sätt än det förinställda teckensnittet. Därför går det inte att förlita sig på att ändrat utseende på texter och rubriker visas i alla enheter. Skillnaderna mellan olika mobila enheters möjlighet att presentera innehåll gör det svårt att testa webbplatsen på en tillfredsställande mängd enheter.

Teknisk lösning

Ange stilmall för mobila enheter (handheld):

<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css" />

Utforma stilmallen för mobila enheter så att det går att ta del av innehållet med skärmbredden 120 pixlar och större, se 3.3.3 Skapa en design som fungerar oavsett fönster- och skärmstorlek.

För att skapa en snabbare laddning av sidorna ska stilmallen enbart innehålla stilar som används. Om du använder display:none för att dölja innehåll med handheld-stilmallen, tänk på att enheten ändå laddar ner det innehållet.

En del mobila enheter klarar inte av gif-bilder som är sammanflätade, transparenta eller animerade. Andra enheter kan enbart visa ett begränsat antal färger.

Mätbarhet

Brister i och skillnaderna mellan dagens mobila webbläsare gör det svårt att säkerställa att webbplatsen fungerar i alla mobila webbläsare.

• Med webbläsaren Opera kan du simulera hur webbplatsen ser ut i en mobil webbläsare. Under menyn Visa, välj Liten skärm.
• Många mobiltelefontillverkare tillhandahåller program som simulerar hur deras telefoner hanterar webbinnehåll.
• Testa att använda webbplatsen med ett par olika mobila enheter.
• Se till att webbplatsen fungerar med grafik och javaskript avstängda

Fördjupning

• Genom att gå in på sidan: http://htmldog.com/test/handheld.html med din mobiltelefon kan du testa om den stödjer handheld-stilmallar.
• Stilmallselement som stöds av mobila webbläsare som klarar handheld-stilmallar.
• W3C Mobile Web Best Practices ger exempel på prestanda för en typisk mobil enhet.

Riktlinjer i detta avsnitt

• 6.1.1 Anpassa navigationen för små skärmar
• 6.1.2 Skapa god överblick för små skärmar
• 6.1.3 Presentera enbart innehåll som användaren efterfrågar
• 6.1.4 Förenkla inmatning av text

Senast uppdaterad 2008-12-10