lillbra.se

Bloggposter taggade som ‘ipad’

Har din sajt en app-ikon för iPhone och Android?

Lägg till på hemskärmen

App-ikoner är de nya fav-ikonerna! Om en smartphone-användare gillar din sajt så kan han/hon välja att bokmärka den genom “Add to Home Screen”, eller “Lägg till på hemskärmen”.
Då skapas ett bokmärke på hemskärmen, som ser ut som en vanligt app, med tillhörande app-ikon. Om din sajt inte har någon app-ikon så skapar telefonen en liten skärmdump som används istället – inte särskilt snyggt. Men detta är snabbt åtgärdat!

För att din sajt ska få en app-ikon i iPhone eller iPad skapar du en bild som du sedan hänvisar till i din html-kod. I head-taggen lägger du in en link med rel-attributet apple-touch-icon:

<link rel="apple-touch-icon" href="/images/touch-icon.png" />

Eftersom de olika varianterna av iPhone och iPad har olika upplösning måste man skapa ikoner med olika storlekar. Bilderna ska ha följande mått, enligt Apples egna dokumentation:

  • iPhone 3GS: 57×57 pixlar
  • iPhone 4: 114×114 pixlar
  • iPad: 58×58 pixlar

Vad jag erfar så räcker det dock med de två översta – iPaden använder verkar använda den största. Måtten anges i ett sizes-attribut. Det fullständiga exemplet ser alltså ut så här:

<link rel="apple-touch-icon" href="/images/touch-icon-small.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/images/touch-icon-big.png" />

Apple lägger automatiskt till glans och rundade hörn på din ikon. Här ser du ett exempel på hur en ikon ser ut i original, jämfört med hur den visas på användarens hemskärm:

Ikonen i original och på Home Screen

Om du inte vill ha glans och runda hörn på din ikon kan du lägga till ordet precomposed i rel-attributet. Då visas ikonen i sitt originalutseende (via Sarah Parmenter):

<link rel="apple-touch-icon-precomposed" href="/images/touch-icon.png" />

Men, kanske någon undrar, hur gör man då för Android-mobiler? Svaret är enkelt: Man kan göra likadant! Android stöder nämligen också apple-touch-icon-precomposed, så om du använder det kommer din ikon alltså användas för majoriteten av smartphoneanvändare.

Vill du veta ännu mer om att skapa ikoner för iOS? Läs vidare på: How to Design App Icons for iPhone and iPad.

ps. För att uppmärksamma användaren om att de kan bokmärka/lägga till din sajt på hemskärmen kan jag tipsa om add2home.js (via Emil Stenström). Det är ett litet script som öppnar upp ett meddelande i närheten till “Add to Home Screen”-knappen för att upplysa användaren hur de bokmärker din sajt. Snyggt!

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

Andra bloggar om om: , android , app , favicon , ikoner , ipad , iphone

Ska man utveckla för iPad?

När iPhonen kom ställde jag frågan om man borde utveckla iPhone-specifika sajter, eller om man gör webben en otjänst med specialanpassade sajter. Och för någon månad sedan skrev Peter-Paul Koch om besattheten att utveckla för iPhone vs. den faktiska marknadsandelen.
Nu när det råder iPad-feber så är frågan berättigad igen. Bör man utveckla specialanpassade sajter för iPad?

Fördelar

  • Marknadsföring – Man kan utnyttja hypen och uppmärksamheten runt den nya produkten, och visa att man ligger i framkant.
  • Bättre användarvänlighet – iPads egenskaper skiljer sig från laptopen och mobiltelefonen, så för att kunna ge besökarna bästa möjliga upplevelse bör anpassningar göras.
  • Ny teknik och nya standarder – Man har chansen att utnyttja t.ex. touch-events och html5/css3 där de verkligen kommer till nytta (gärna genom progressive enhancement).
  • Alternativ till Flash – Eftersom iPaden inte stöder Flash tvingas man lämna properitära lösningar och hitta alternativ i öppna standarder.

Nackdelar

  • Fragmentering av innehåll – Hur många versioner av samma sajt kan man underhålla? Risken är att webben stympas på innehåll för vissa enheter, för att man inte kan göra anpassningar för alla.
  • Ökad popularitet för Apps – Specialanpassningar är en anledningarna att vi går mot en webb byggd på apps, ett hot mot öppenhet och sökbarhet som inte bör uppmuntras.
  • Browser sniffing is evil – Kommentarer överflödiga.
  • Liten användarbas – iPad är inte släppt i Sverige ännu, och antalet användare är inte stort. Det är osäkert om en anpassning ger någon ROI.

Personligen ser jag utveckling av specialanpassade iPad-sajter som en rolig utmaning, så länge man inte stänger ute några andra användare på bekostnad av det. Men vad tycker du? Kommer du/ni att göra en iPad-version av någon sajt?

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

Andra bloggar om om: , ipad , iphone , Mobilt , touch

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