• Optimaliseer je website voor iPad en iPhone

    Optimaliseer je website voor iPad en iPhone

    Met de sterk stijgende populariteit van smartphones en tablet pc's, zorg je er best voor dat websites ook op dit medium een goeie indruk maken. Niemand wil een verkeerd beeld van een website nalaten op mobiele toestellen. Ik spits mij in dit artikel toe op Apple's populaire mobiele linup. Wat zijn de do's en don'ts van webontwikkeling voor iPad en iPhone? Hieronder vind je 5 aandachtspunten.

    1. iPad versie <> mobiele versie

    Een veel voorkomend misverstand is dat een iPad een mobiele versie van je website vereist. Niets is echter minder waar. Mobiele websites zijn vooral bedoeld voor smartphones, vanwege hun klein scherm. De iPad beschikt echter over een groot scherm dat je website in volle glorie laat zien. In de meeste gevallen toon je zonder grote aanpassingen dezelfde website als op je desktop pc.

    2. Wifi vs 3G

    De laadtijd van je website laag houden is een must, zeker op mobiele toestellen zoals smartphones en tablet pc's. Ik ben echter van de mening dat deze stelling meer geldt voor smartphones dan voor tablets. Dat leid ik vooral af uit mijn eigen ervaring. Je zal bijvoorbeeld thuis, waar je een wifi verbinding hebt, praktisch nooit je smartphone gebruiken om te surfen. De meeste huishoudens hebben namelijk een computer ter beschikking, waarop je veel sneller en comfortabeler kan surfen. Maar thuis in de zetel of in je bed surfen met een tablet is zo makkelijk, dat ik dit persoonlijk verkies boven een pc. Ik gebruik m.a.w. meer m'n tablet pc binnenhuis dan onderweg.
    Buitenshuis heb je (meestal) geen wifi ter beschikking, en dan moet je beroep doen op een traag 3G netwerk. Zeggen dat ik m'n iPhone meer gebruik dan m'n iPad om te surfer buitenshuis is eigenlijk subjectief, omdat ik een iPad wifi only model heb. Ik heb geen iPad 3G gekocht omdat ik 1. geen overvolle bankrekening heb en 2. er praktisch geen mobiele websites voor iPad gemaakt worden. Daardoor zou het surfen, wat zoiezo al traag gaat op een iPhone, zeker even traag gaan op een iPad. Smartphones hebben een erg klein scherm en maken het daarom logischer om hiervoor een mobiele versie te maken dan voor iPad.

    3. Implementeer gesture based events

    Je kan ervoor opteren om gesture based events te implementeren. Ik had het er hier al eerder over. Dit brengt iets meer werk met zich mee, maar ik denk dat we in de toekomst meer en meer deze weg zullen opgaan. Het is bovendien erg intuïtief (en leuk) om bijvoorbeeld met je vinger doorheen foto's te bladeren. Je kan een klant altijd deze optie aanbieden, al dan niet voor een extra kost.

    4. Apple hates flash

    Zoals je aan m'n works kan zien, heb ik in het verleden veel gebruik gemaakt van Flash. De belangrijkste reden dat ik Flash gebruikte, was omdat ik dacht meer indruk te maken met animaties dan een 'saaie, statische website'. Met de jaren ben ik tot de conclusie gekomen dat functionaliteit primeert boven dit alles. Nu probeer ik indruk te maken met een duidelijke structuur, interessante content en een technisch correct opgebouwde website. Of dat probeer ik toch te doen :) We weten ook allemaal dat Flash niet ideaal is voor SEO, wat alweer een belangrijk minpunt is. Daarom raad ik aan het gebruik van Flash te beperken tot een absoluut minimum. Maak desnoods gebruik van html5 en jQuery. Nog een belangrijke reden om Flash niet te gebruiken is relevanter voor dit artikel. iPad en iPhone ondersteunen Flash niet. Als je dus je website opbouwt met Flash components, dan ben je bijna verplicht om een alternatieve oplossing te bieden voor i-devices. En dat brengt weer meer werk/uren met zich mee. Klanten zullen in de toekomst meer dan nu eisen dat hun website op alle toestellen optimaal bekeken kunnen worden. En gelijk hebben ze!

    5. Lay-out

    Een iPad heeft een resolutie van 1024 x 768 pixels... of 768 x 1024 pixels. Je zal er met andere woorden moeten voor zorgen dat je website zowel in portrait als landscape een goede voorstelling geeft. Als je een breedte van 960 px hanteert, zal je hierin weinig problemen ondervinden. Probeer misschien wel wat te spelen met de witruimte, zodat je in portrait mode geen grote witte gaten creëert.