Ontwerp Afbeeldingen voor de iPhone en iPad - dummies

Het hebben van opvallende afbeeldingen op uw website is een van de beste manieren om beeldbewuste iPhone- en iPad-enthousiasten aan te trekken. Maar een afbeelding in hoge resolutie die kan worden opgeblazen tot posterformaat op een iPhone-scherm klopt niet. Niet alleen zouden de foto's niet correct worden weergegeven, maar het downloaden van een bestand dat groot is zou ook een buitensporig lange tijd in beslag nemen en uw bezoekers zouden uw site waarschijnlijk verlaten.

In plaats van bezoekers te dwingen om grote afbeeldingen te downloaden op de startpagina van uw mobiele site, waartoe gebruikers van de iPhone toegang zouden moeten hebben, moet u ervoor zorgen dat uw ontwerpen voldoen aan de beperkingen die uw gebruikers hanteren.

Als u van plan bent afbeeldingen op uw mobiele website te plaatsen, verloopt het ontwerpproces soepeler als u een strategie hebt om de verschillende schermafmetingen, resoluties en beeldverhoudingen te verwerken.

• Eén afbeelding op beide schermen instellen: Een praktische en tijdbesparende manier om afbeeldingen te maken die zijn geoptimaliseerd om op zowel de iPhone als de iPad te werken, is het maken van een voor internet geoptimaliseerde afbeelding die er goed uitziet op beide schermen. apparaten.

  Het is geen perfecte wetenschap, maar zowel de iPad als de iPhone 4 hebben zulke prachtig uitziende schermen dat je een afbeelding een flink stuk omhoog of omlaag kunt schalen en dat het er nog best goed uit kan zien. Hoewel deze methode niet waterdicht is, is het maken van een geoptimaliseerde afbeelding de eenvoudigste optie en deze werkt voor veel sites.

• Meerdere afbeeldingsformaten gebruiken: Als u over de bronnen en de tijd beschikt, is de beste oplossing om een ​​site af te stemmen op de mogelijkheden en schermgrootte van elk apparaat.

  Met deze aanpak maakt u meerdere versies van elke afbeelding in verschillende grootten, van 320 pixels breed tot 1024 pixels (als u wilt dat de afbeelding zich in de liggende modus over het iPad-scherm uitstrekt). Vervolgens levert u de grootte die het beste bij het apparaat past met een soort apparaatdetectiescript.

  Omdat het instellen van een apparaatdetectiescript complex is en het maken van meerdere versies van elke afbeelding veel werk toevoegt aan de gemiddelde website, gebruiken veel mensen services, zoals Galleria, om snel diavoorstellingen te maken met veel afbeeldingen die zijn geoptimaliseerd voor elk apparaat wanneer ze worden afgeleverd.

• Afbeeldingsportfolio's of -galerieën weergeven: Als u portfoliosites ontwerpt - waarbij het in het algemeen gaat om klanten in staat te stellen overal en op elk moment hun werk te laten zien (en er hun absoluut beste uit te zien), hebt u mogelijk een legitiem moet afbeeldingen met een hogere resolutie bevatten met grotere bestandsgroottes.

  De beste manier om met deze situatie om te gaan, is door een pagina te maken met thumbnails met een lage resolutie of korte tekstbeschrijvingen en vervolgens te linken naar de grotere afbeeldingen.U kunt een voorbeeld van deze aanpak bekijken op de inplainsight-kunstwebsite. Zoals in de afbeelding te zien is, linken de miniaturen bovenaan de pagina naar grotere versies, zoals te zien is op de pagina eronder.

  Op deze manier worden uw belangrijkste pagina's snel geladen met kleine versies van uw afbeeldingen die al uw bezoekers kunnen bekijken en diegenen die geïnteresseerd zijn in afbeeldingen met een hoge resolutie kunnen ervoor kiezen de grotere versies één voor één te downloaden.

  

  Credit: afbeeldingen van artiesten Amy Baur en Brian Boldon, www. inplainsightart. com

Je hebt veel manieren om galerieën te maken die zowel op de iPhone als iPad werken. Het belangrijkste concept om te onthouden is niet om Flash te gebruiken.

Bedenk dat tijdens het ontwerpen van dergelijke galerijen een van de verschillen tussen een webbrowser op een desktopcomputer en een touchscreen is dat je een afbeelding niet met een muis op een iPhone of iPad kunt rollen. In plaats daarvan worden kant-en-klare gebeurtenissen, zoals die gewoonlijk worden gebruikt in een afbeeldingengalerij, omgezet in koppelingen op een iPad of iPhone.