Design Bilder till iPhone och iPad - dummies

Med snygga bilder på din webbplats är ett av de bästa sätten att locka bildmedvetna iPhone- och iPad-entusiaster. Men det går inte att förstå en bild med hög upplösning som kan blåsas upp till affischstorleken på en iPhone-skärm. Inte bara skulle bilderna inte visas korrekt, men att ladda ner en fil som stor skulle också ta en ganska lång tid och dina besökare skulle troligen överge din webbplats.

I stället för att tvinga besökare att ladda ner stora bilder på hemsidan på din mobila webbplats, vilka iPhone-användare skulle få tillgång till, bör du se till att dina mönster uppfyller de begränsningar som dina användare arbetar med.

Om du planerar att lägga bilder på din mobilwebbplats går designprocessen mer smidigt om du har en strategi för att hantera olika skärmstorlekar, upplösningar och bildförhållanden.

• Storlek på en bild som passar båda skärmarna: Ett praktiskt och tidsbesparande sätt att skapa bilder som är optimerade för att fungera på både iPhone och iPad är att skapa en webboptimerad bild som ser bra ut på båda enheter.

  Det är inte en perfekt vetenskap, men både iPad och iPhone 4 har så snygga bildskärmar att du kan skala en bild upp eller ner ganska och det kan fortfarande se ganska bra ut. Även om den här metoden inte är idiotsäker, är det enklaste alternativet att skapa en optimerad bild och det kommer att fungera för många webbplatser.

• Använda flera bildstorlekar: Om du har resurser och tid, är den bästa lösningen att skräddarsy en webbplats för varje enhetens kapacitet och skärmstorlek.

  Med detta tillvägagångssätt skapar du flera versioner av varje bild i olika storlekar, från 320 pixlar breda till 1024 pixlar (om du vill att bilden ska sträckas över iPadens skärm i landskapsläge). Sedan levererar du den storlek som bäst passar enheten med någon typ av enhetsdetekteringskript.

  Eftersom det är komplicerat att skapa enhetsdetektering, är det komplicerat att skapa flera versioner av varje bild, vilket ger mycket arbete till den genomsnittliga webbplatsen, många använder tjänster, till exempel Galleria, för att snabbt skapa bildspel med många optimerade bilder för varje enhet som de levereras.

• Visar bildportföljer eller gallerier: Om du utformar portföljwebbplatser - där hela poängen är att ge kunderna möjlighet att visa sitt jobb var som helst, när som helst (och se deras absolut bästa) - du kan ha en legitim måste inkludera högupplösta bilder med större filstorlekar.

  Det bästa sättet att hantera denna situation är att skapa en sida med miniatyrbilder med låg upplösning eller korta textbeskrivningar och länka sedan till de större bilderna.Du kan se ett exempel på detta tillvägagångssätt på den inplainsight konstwebbplatsen. Som visas i bilden länkar miniatyrerna längst upp på sidan till större versioner, som visas på sidan nedan.

  På så sätt laddas dina viktigaste sidor snabbt med små versioner av dina bilder som alla besökare kan visa, och de som är intresserade av högupplösta bilder kan välja att ladda ner de större versionerna en och en.

  

  Kredit: Bilder av konstnärer Amy Baur och Brian Boldon, www. inplainsightart. com

Du har många sätt att skapa gallerier som fungerar på både iPhone och iPad. Det viktigaste konceptet att komma ihåg är att inte använda Flash.

När du utformar gallerier som dessa, kom ihåg att en av skillnaderna mellan en webbläsare på en stationär dator och en pekskärm är att du inte kan rulla över en bild med en mus på en iPhone eller iPad. Istället konverteras överlämningshändelser, som de som vanligtvis används med ett bildgalleri, till länkar på en iPad eller iPhone.