lillbra.se

Bloggposter taggade som ‘mobila webben’

Så utvecklar du för iPad

Igår släpptes Apples iPad i USA, och med den kommer en ny gren inom webbutveckling: iPad-anpassade webbplatser. Vita Huset har gjort det, Nike och CNN likaså, och listan på sajter som är “iPad-ready” växer hela tiden. Även Gmail finns i en sprillans ny iPad-tappning.
Så hur gör man då sin egna sajt iPad-vänlig? Här kommer några praktiska tips:

1. Identifiera en iPad-användare

För att avgöra om man ska visa iPad-versionen för en besökare är det bästa sättet att känna av vilken User-Agent besökaren har. Så här ser User-Agent-strängen ut för iPad:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

Ett alternativ till automatisk avkänning är att istället skapa en egen url för den iPad-specifika versionen, något som inte är helt ovanligt för redan existerande iphone/tablet-sajter, t.ex. touch.facebook.com.

2. Håll koll på skärmbredden

iPadens skärmupplösning är 1024×768 pixlar. Safari på iPad försöker automatiskt skala om sajter för att se bra ut i bredden 768 pixlar (porträttformat). För att undvika en sådan automatzoomning sätter du meta-taggen viewport såhär:

<meta name="viewport" content="width=device-width" />

En liten hake är att Safari alltid räknar sin bredd som 768 pixlar oavsett hur man håller sin iPad. Så om du roterar iPaden till landskapsformat, rendreras innehållet inte om utan skalas bara upp för att passa den ökade bredden.

Uppdatering 2010-04-10

Men med hjälp av CSS Media Queries kan man känna av vilken ledd som iPaden hålls (landscape eller portrait), och ha olika css-filer beroende på det:
<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css">
<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>

CSS Media Queries kan också alltså komma väl till pass för att servera en css speciellt för iPaden – läs mer om detta hos x7 Labs och hos Cloud Four.

3. Utnyttja touch-events

Safari på iPad stöder DOM TouchEvents. Med touchstart, touchmove, touchend, och touchcancel kan du identifiera hur användaren pekar på sajten. Till hands finns även
jQTouch – ett intelligent jQuery-plugin som t.ex. hjälper dig att känna av när användaren gör en swipe.
Notera att, samtidigt som nya events finns, är det andra som saknas: mouseover, mouseout och mousemove finns inte tillgängliga, och inte heller pseudo-klassen :hover i css.

4. Skippa Flash

Kom ihåg att Safari på iPad inte stöder några plugins. Så om du använder dig av Flash så kommer det inte att visas. Använd istället html5-element som <video> eller <audio> för bild och ljuduppspelning, eller javascript och css-animationer för animeringar och bildspel.

5. Testning

Om du inte har en egen iPad och vill testa hur sajten ser ut för iPad-användare så kan du använda Chris Pedericks suveräna User Agent Switcher till Firefox för simulering. Du kan även testa i iPhone-simulatorn som finns tillgänglig om man är medlem i Apples iPhone Developer Program.

För fler detaljer runt utveckling för iPad rekommenderar jag Apples egna Technical Note TN2262: Preparing Your Web Content for iPad (via Ajaxian). Lycka till!

ps. Frågan om man bör utveckla en iPad-sajt eller inte återstår ju, men det tar vi i nästa bloggpost ;)

Mer på lillbra.se om: , , , , , ,

Andra bloggar om om: , apple , css , ipad , iphone , mobila webben , tablet

Rullar på Wordpress med modifierat Guerrilla-tema