new-mobile-website-730x270-white-bg

Mobil hemsida

Sedan smartphones börjat bli vanliga ökar behovet att skapa websidor som fungerar på den mindre typen av skärmar och begränsningar av vad som fungerar att visa.

I korthet innebär de här punkterna att anpassa din websida för mobila enehter.

  • Undvik flash eftersom iphone inte spelar upp dem
  • Placerat allt innehåll under varandra så att inte användaren behöver browsa åt sidan. (det är störande)
  • Undvik tunga bilder eller onödiga javascript eftersom uppkoppling och prestanda är sämre på smartphones.
  • Håll det så enkelt som möjligt

 

Här finns en omfattande tutorial hur du kan tänka för att göra din sida responsive

Exempel på min sida

 

Så här gör du

Media Queries

Media Queries är en funktion som innebär att du kan använda olika stylesheets beroende på i vilket media som websida öppnas på. Media Queries lyssnar efter är bland annat widht, height och color. Dvs du kan skriva in att du vill att en typ av stylesheet ska användas för en webläsare med litet fönster ( låg widht) och en webläsare för desktop(normal width).

Enklast är helt enkelt att du lägger in en Media Queries i en meta tag högst upp på sidan så här;

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

 

Här skapade jag en css fil för en vanlig upplösning och en separat för små skärmar

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

<link media="only screen and (max-device-width: 760px) and (min-device-width: 320px)" href="/slimstyle.css" type="text/css" rel="stylesheet" />

 

Förklaring till kod. Min vanliga stylesheet är widestyle.css. Raden under tar reda på om skärmen den visas på är smal, och då ersätts min vanliga stylesheet till en som är anpassad för web.

 

Upplösning för olika typer av mobiltelefoner

 

Hjälp till uppgiften

Webdesignerwall har en artikel om små skärmar