lillbra.se

Idag är det CSS Naked Day

Precis som 2007, 2008 och 2009 är det idag åter dags för CSS Naked Day. Du som besöker den här bloggen i webbläsaren märker att det saknas stilmallar. Varför?

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on words. It’s time to show off your .

Dustin Diaz – CSS Naked Day

Är din blogg också naken? Skriv en kommentar!

ps. I slutet av förra året bytte jag mallar och utseende här på bloggen, så för er som endast läser RSS-flödet och inte sett det ännu kan jag tipsa om att när CSS Naked Day är över kolla in den “nya” designen

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

Att använda wtai för telefonnummer i länkar

Jag har tidigare skrivit om hur man kan använda tel: eller callto: i länkar för att märka ut telefonnummer och göra de möjliga att ringa upp direkt från webbläsaren. Via Isac Lagerblad hittade jag ett annat sätt att göra detta; nämligen med hjälp av wtai-schemat. Wtai står för Wireless Telephony Application Interface och är ett schema utvecklat av Open Mobile Alliance speciellt för mobiltelefoner.
Wtai-formatet ser ut enligt följande:

wtai://<library>/<function> (; <parameter>)* [! <result>]

Med schemat kan man både ringa upp nummer och lägga till kontakter. Här är två konkreta exempel på hur det kan se ut i html-kod:

<a href=”wtai://wp/mc;0845000000″>08 - 45 00 00 00</a>
<a href=”wtai://wp/ap;0845000000;Anders”>Lägg till i kontakter</a>

Funktionerna ovan är MakeCall (=mc) och AddPhoneBookEntry (=ap). Läs hela specifikationen för wtai: här (pdf).

Vilket schema ska man använda?

Om man inte gör en mobilsajt skulle jag välja att använda tel: istället för wtai:. Dels för att tel: är det officiellt registrerade och rekommenderade schemat. Men även för att wtai: är utvecklat endast för mobiltelefoner medan tel: i teorin ska fungera på andra enheter också.

Wtai har tidigare haft större stöd bland mobiler än tel:, men frågan är om det inte håller på att ändras. Iphone stöder inte wtai:, vilket naturligtvis är ett stort avbräck. Apples iPhone Dev Center rekommenderar istället tel:, vilket också kan vara en anledning att använda just det schemat.

[tags]wtai, tel, callto, URL-scheman, länkar[/tags]