kennissessie mobile proof - roos van de vooren
DESCRIPTION
Responsive of adaptive webdesign, native en hybride apps, SocialLocalMobile… Roos van de Vooren van Info.nl vertelt op heldere wijze wat deze buzzwoorden inhouden en wat u ermee kunt. Hoe zorgt u voor toegankelijke mobiele online diensten? En wat is wijsheid: een mobiele site, een native app of een responsive site?TRANSCRIPT
![Page 1: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/1.jpg)
January 24, 2013 1/26
Sleep je aeelding in dit vak
Maak vanaf deze kant beide titelvakken even breed als de tekst in elk vak
Roos van de Vooren
De mobiele revolutie in 2013 Is jouw website mobile-proo!?
![Page 2: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/2.jpg)
January 24, 2013 2/26
Wie ben ik?
§ Roos van de Vooren
§ Frontend developer
§ 6 jaar werkzaam bij Info.nl
§ Accessibility
§ Specialist mobiele optimalisatie
![Page 3: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/3.jpg)
January 24, 2013 3/26
Sleep je aeelding in dit vak
![Page 4: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/4.jpg)
January 24, 2013 4/26
De website is het hart van jouw merkbeleving
![Page 5: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/5.jpg)
January 24, 2013 5/26
Sleep je aeelding in dit vak
Maak vanaf deze kant beide titelvakken even breed als de tekst in elk vak
Is uw website daar wel klaar voor?
Is jouw website hier klaar voor? .
![Page 6: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/6.jpg)
January 24, 2013 6/26
Sleep je aeelding in dit vak
Maak vanaf deze kant beide titelvakken even breed als de tekst in elk vak
Websites op mobiel Hoe zien websites er nu uit op smartphones?
![Page 7: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/7.jpg)
January 24, 2013 7/26
Sleep je aeelding in dit vak
Maak vanaf deze kant beide titelvakken even breed als de tekst in elk vak
Etos Met moeten inzoomen verlies je gelijk
al publiek
![Page 8: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/8.jpg)
January 24, 2013 8/26
Sleep je aeelding in dit vak
Maak vanaf deze kant beide titelvakken even breed als de tekst in elk vak
Blokker Op kortingbanners na, onleesbaar en niet te navigeren zonder inzoomen
![Page 9: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/9.jpg)
January 24, 2013 9/26
Sleep je aeelding in dit vak
Maak vanaf deze kant beide titelvakken even breed als de tekst in elk vak
Bart Smit Onleesbaar, lange laadtijd en niet te navigeren
![Page 10: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/10.jpg)
January 24, 2013 10/26
Sleep je aeelding in dit vak
Maak vanaf deze kant beide titelvakken even breed als de tekst in elk vak
Wat zijn de problemen? En wat wil de gebruiker?
![Page 11: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/11.jpg)
January 24, 2013 11/26
Problemen websites op mobiel
§ Laadtijd te lang
§ Onleesbare tekst zonder inzoomen
§ Ingezoomd lastig navigeren
§ Uitgezoomd lastig links vinden en klikken
§ Tekstvelden te breed om goed te lezen
§ Elementen die niet werken op touch (denk aan sliders)
§ Websites die beginnen met popup waar je niet op kunt navigeren
§ Webshops op tablet werken vaak niet goed met betalen
![Page 12: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/12.jpg)
January 24, 2013 12/26
Wat wil de gebruiker?
§ Content gelijk duidelijk leesbaar
§ Website makkelijk te navigeren
§ Snelle laadtijd
§ Makkelijk vindbare content via zoekmachines
§ Website die niet stuk gaat op een nieuwe resolutie
![Page 13: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/13.jpg)
January 24, 2013 13/26
Maak vanaf deze kant beide titelvakken even breed als de tekst in elk vak
Mogelijke oplossingen
![Page 14: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/14.jpg)
January 24, 2013 14/26
§ Gebruik van native functionaliteit van het device (GPS en camera)
§ Snelheid
§ Specifieke gebruikservaring
§ Branding (merk staat in appstore)
Voordelen
We bouwen een app
![Page 15: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/15.jpg)
January 24, 2013 15/26
Nadelen app
§ Per platform aparte app
§ Gebruiker moet de app downloaden (laag bereik)
§ Hoge ontwikkelkosten
§ Minder controle over updates wegens goedkeuring appstore
§ Indexatie zoekmachines niet mogelijk
![Page 16: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/16.jpg)
January 24, 2013 16/26
§ In simpele vorm relatief goedkoop
§ Een apart domein (m.domein.nl) geeft meer vrijheid
§ Alleen relevante informatie tonen
§ Wordt ook gevonden in zoekmachines (maar geeft verwarring)
Een mobiele website?
![Page 17: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/17.jpg)
January 24, 2013 17/26
Nadelen mobiele site
§ Klant komt op andere website terecht dan gewend
§ Onderhouden meerdere domeinen kan intensiever zijn (aankelijk van CMS)
§ Hoe bepaal je wat relevant is?
§ Voor elk device een andere site bouwen?
![Page 18: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/18.jpg)
January 24, 2013 18/26
Sleep je aeelding in dit vak
![Page 19: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/19.jpg)
January 24, 2013 19/26
§ Voorbereid op toekomstige resoluties
§ Alle pagina’s bereikbaar
§ Indexeerbaar voor zoekmachines
§ Eén website om te onderhouden
§ Maakt gebruik van nieuwe standaard technieken en is daardoor future proof
§ Gebruiksvriendelijk
§ Bij applicatieve sites moet je keuzes maken in wat je responsive maakt
§ Het design proces kan langer duren omdat er goed nagedacht moet worden over gedrag op kleinere resoluties
Voordelen Nadelen
Responsive
![Page 20: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/20.jpg)
January 24, 2013 20/26
Sleep je aeelding in dit vak
![Page 21: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/21.jpg)
January 24, 2013 21/26
Adaptive webdesign
§ Reageert op het device
§ Benut mogelijkheden device (bijv camera)
§ Kijkt naar specifiek behoeften gebruiker (bijv. Locatie en tijd)
§ Benut backend ondersteuning
![Page 22: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/22.jpg)
January 24, 2013 22/26
Sleep je aeelding in dit vak
Wanneer doe je wat?
![Page 23: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/23.jpg)
January 24, 2013 23/26
Het startpunt is responsive
Met zowel responsive als adaptive design streven we naar de optimale gebruikservaring op elk device
Elke content-driven website bouwen wij in de basis responsive
We weten niet wat voor devices er over 2 jaar op de markt zijn,
met een responsive website ben je daar op voorbereid
![Page 24: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/24.jpg)
January 24, 2013 24/26
Conclusie
§ Met het groeiende mobiele gebruik, loopt jouw bedrijf conversie mis als de website niet mobile proof is
§ Bouw elke nieuwe website daarom reponsive / adaptive
§ Een content-driven website is gemakkelijk reponsive te bouwen
§ Onderzoek voor complexe functionaliteit mogelijkheden voor een App of mobiele website
![Page 25: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/25.jpg)
January 24, 2013 25/26
Advies
Bouw een nieuwe site vanaf de start responsive
Heb je al een website? Laat ons adviseren hoe je deze responsive kunt maken
Vraag onze accountmanagers naar de mogelijkheden
![Page 26: Kennissessie Mobile Proof - Roos van de Vooren](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c76b3d4a79593e0a8b4572/html5/thumbnails/26.jpg)
January 24, 2013 26/26
Maak vanaf deze kant beide titelvakken even breed als de tekst in elk vak
Bedankt Roos van de Vooren [email protected]