Ondanks dat je met een iPhone behoorlijk goed kunt surfen op het internet, is het in sommige gevallen raadzaam om een mobiel geoptimaliseerde website of pagina aan te bieden aan de bezoekers van je website of weblog.
Door gebruik van een simpel javascript in je website kun je de zgn. browser agent uitlezen van je bezoeker en kun je deze automatisch doorsturen naar een aparte internet website of pagina.
Ook zonder technische kennis kun je dit relatief eenvoudig zélf doen.
Mensen die een website hebben die draait op WordPress kunnen een WordPress plug-in installeren die uitleest of de bezoeker de website bekijkt met een mobiel apparaat en of er een alternatieve opmaak moet worden aangeboden. Het voordeel van deze plug-in is dat je complete website direct geoptimaliseerd is voor mobiele gebruikers en dat alle beschikbare content goed te lezen is. Een nadeel is echter wel dat de plug-in geen rekening houdt met de look-and-feel van je website zoals die eruit ziet als je hem met een normale computer zou bezoeken. Er zijn wel verschillende sub-thema’s beschikbaar met verschillende kleurstellingen, maar wil je je mobiele website echt volledig in lijn maken met de huisstijl van de website, dan ontkom je er niet aan de code in te duiken.
Uiteraard zijn er voor websites zonder WordPress tal van manieren om bezoekers een mobiel geoptimaliseerde website aan te bieden. Zo bestaan er verschillende javascript frameworks die de bekende elementen van de grafische user-interface (GUI) als buttons, achtergronden en pijlen uit iOS hebben verwerkt in de verschillende pagina’s van het framework. Niet alleen de interface is gelijk aan die native iPhone applicaties, ook sliden de verschillende pagina’s in elkaar over. Hierdoor heb je (in ieder geval voor iPhone gebruikers) een herkenbare manier van navigeren door je website. Hetgeen uiteraard een positieve uitwerking heeft op de beleving van de website door je (mobiele) bezoekers. Voorbeelden van zo’n framework is JQTouch. Dit is een voorbeeld van zo’n framework zoals we die voor de website van 2Rocks Estate Investments hebben opgeleverd. Deze frameworks zijn over het algemeen minder complex dan het aanpassen van beschikbare plug-ins. Voor mensen die enigszins thuis zijn in het ontwerpen en bouwen voor websites, zal het aanpassen van de grafische elementen (achtergrond afbeeldingen, pijlen, etc…) relatief eenvoudig zijn. Sowieso kun je door het aanpassen van de kleurwaardes in de CSS al snel aanpassen hoe je mobiele website er uit komt te zien. Een nadeel is echter wel dat de inhoud van pagina’s hard-coded zitten verwerkt in het framework en dat er dus (standaard) geen koppeling is met het beheersysteem dat je mogelijkerwijs gebruikt.
Als je geen WordPress website hebt (of de standaard thema-varianten niet mooi vindt) en de beschikbare frameworks niet vindt passen bij je website, dan is het altijd nog mogelijk om je eigen iPhone website te ontwerpen en te bouwen.
Op het eerste gezicht lijkt het ontwerpen van een iPhone website niet heel lastig, maar toch moet je weer met hele andere dingen rekening houden dan bij het ontwerpen van een normale website. Niet alleen heeft een iPhone een kleiner scherm en zul je daar met de groottes van je teksten en knoppen rekening mee moeten houden, ook heb je te maken met verschillende resoluties. Resoluties, want de iPhone 4 met retina scherm heeft een hogere resolutie (960 x 460 pixels) dan de iPhone 3G en zijn voorgangers (480 x 230 pixels).
Doordat de iPhone 4 nu twee keer zoveel pixels kan weergeven (326 pixels per inch (PPI)) in een scherm dat net zo groot is als de 3G met ‘slechts’ 163 PPI, zul je hier rekening mee moeten houden tijdens de ontwerpfase van de website.
Voordat je een nieuw document aanmaakt in Photoshop of Illustrator, is het wellicht makkelijk om direct de kant-en-klare PSD van de interface van de iPhone te downloaden die reeds de juiste afmetingen heeft van het retina scherm. Je ontwerp de website dus eigenlijk voor de resolutie van de nieuwe iPhone 4. Zou je dit ontwerp omzetten naar HTML (verder in dit artikel) en deze bezoeken met een oudere iPhone dan zul je zien dat de website 4 keer te groot is. Dit is ook logisch, want de oude iPhone heeft een resolutie dat een kwart is van het retina display.
Het verschil in resolutie tussen de telefoons die ogenschijnlijk weinig van elkaar verschillen, zorgen dus eigenlijk voor best een hoop verwarring en meerwerk. Want het komt er eigenlijk op neer dat je een de website ontwerpt op een hoge resolutie, deze vervolgens opknipt en opslaat voor de iPhone 4. Vervolgens moet je in Photoshop de resolutie van je PSD document verlagen naar 480 x 230 pixels en moet je hem wederom knippen alleen dan voor de iPhone 3G. Eigenlijk bouw je dus een tweetal websites voor één type telefoon.
Kan dat niet gemakkelijker? Ja en nee. De iPhone ondersteunt dan wel geen vectoren in de vorm van Flash, maar wel in de vorm van scalable vector graphics (SVG bestanden). Vectoren zijn in tegenstelling tot pixels oneindig schaalbaar zonder dat de kwaliteit achteruit gaat. Het rotte is alleen dat Photoshop met name een pixel georienteerd programma is en dat de ondersteuning (en vooral de exporteerbaarheid) van vector objecten (zoals paths) e.d. beperkt is. In die zin ontkom je er niet aan dat je naast de layout die je reeds hebt gemaakt in Photoshop moet namaken in Illustrator. Het is dus raadzaam om zoveel mogelijk elementen van je website te ontwerpen in Illustrator en deze te plakken als smart-object in Photoshop. Op deze manier kun wel gebruik maken van het ontwerp-grid zoals hierboven beschreven en behoud je de flexibiliteit om bestanden op te slaan als SVG-bestand. Voor foto’s en illustraties obv. van pixels zul je (helaas) twee versies moeten aanbieden, als je optimaal gebruik wilt maken van de resolutie van het retina display.
Naast het voordeel van scalability zijn SVG bestanden vaak ook kleiner dan de pixel-versie in dezelfde ‘resolutie’. Ondanks dat SVG dus alleen maar voordelen lijkt te hebben voor mobiel gebruik, wordt het niet ondersteund door bijvoorbeeld Google’s HTC. Ook worden niet alle effecten die bijvoorbeeld wel zichtbaar zijn in Illustrator ook getoond in de Safari browser van de iPhone. (zo wordt een dropshadow door Illustrator niet weergegeven op de iPhone).
Ook op het gebied van custom lettertypes zijn er verschillen met een conventionele website. Zo zijn veel gebruikte tekst-vervang scripts als bijvoorbeeld Cúfon kwalitatief ontoereikend voor de iPhone. Cúfon zet het font om naar pixels dmv. javascript. Het gevolg is dat je heel veel truuks moet uithalen om het goed eruit te laten zien op de iPhone 4. Het makkelijkste is om een custom font mbv CSS3 @font-face te converteren naar een ‘web-compatible’ font. Zéker omdat fonts standaard worden gealiased is de kwaliteit indrukwekkend en hoeft de tekst niet meer te worden vervangen dmv. javascript, hetgeen ten goede komt aan de laadtijd en snelheid van je website.
Nu we het ontwerp hebben opgeslagen als losse elementen (schaalbare elementen als SVG bestand, afbeeldingen in een tweetal resoluties), is het tijd om de HTML op te maken. (Ik ga er van uit dat je ervaring hebt met het bouwen van HTML templates voor websites en zal dus niet stap voor stap de omzetting van een PSD naar HTML beschrijven) In principe lijkt deze erg op normale HTML templates met enkele verschillen:
Om te voorkomen dat Safari de website schaalt (en dus uitzoomt) moet de viewport worden gedefinieerd. Dit doe je door simpel weg een meta-tag toe te voegen in de HEAD van je pagina: <meta name=”viewport” content=”width=device-width” />. Nu kun je daar nog meer zaken definiëren om de weergave in de browser te beïnvloeden, als het uitzetten van het kunnen pinchen van pagina’s, maar dat laten we voor nu achterwege.
Vervolgens bouw je de mobiele website in de resolutie zoals je dat voor de iPhone 3G hebt gedaan (480 x 230 pixels). De reden om de website wel in een hoge resolutie PSD te ontwerpen, is dus puur om foto’s en illustraties die gebaseerd zijn op pixels in voldoende hoge kwaliteit kunnen worden opgeslagen.
Je zult zien dat als je vervolgens de template bekijkt op een iPhone 4 naast een iPhone 3G dat de kwaliteit van de elementen die zijn opgeslagen als SVG hetzelfde is. Dit komt omdat de iPhone 4 de SVG elementen gewoon opschaalt naar een hogere resolutie (ook al staat er in je HTML of CSS dat het dezelfde afmeting heeft). Je zult vervolgens ook zien dat elementen die je hebt opgeslagen als PNG, JPG of GIF op de iPhone 4 er slecht uitzien. Vanzelfsprekend is dat omdat de iPhone 4 de afbeelding van (bijvoorbeeld 200 x 200 pixels) opschaald (naar 400 x 400 pixels). Als het goed is heb je een tweetal versies van de afbeelding opgeslagen. We moeten er dus voor zorgen dat als de bezoeker een retina scherm heeft, deze de hoge resolutie versie (400 x 400 pixels) te zien krijgt van de afbeelding ipv de lage resolutie (200 x 200 pixels).
Door middel van een simpele toevoeging in de HEAD van je pagina kun je een aparte CSS inladen als je met een iPhone 4 de pagina bezoekt:
<link rel=”stylesheet” type=”text/css” href=”iphone_retina.css” media=”only screen and (-webkit-min-device-pixel-ratio: 2)”>
Door in dat CSS bestand een andere background-image te definiëren dan in de algemene CSS, zul je zien dat deze CSS dat overruled.
Belangrijk is wél dat je in de algemene CSS de afmetingen van de background-image van de lage resolutie vermeld:
div.background{background-size:200px 200px;}
Het is niet ondenkbaar dat Apple binnenkort komt met een iPad met een retina scherm. Theoretisch heb je het dan over een resolutie van 2048 x 1536 pixels, hetgeen uiteraard weer grote gevolgen heeft voor ons als website designers en ontwikkelaars.
