Zoek jij ‘on the road’ ook wel eens via je mobiel het adres van het dichtstbijzijnde sushi restaurant op? Of shop jij op je iPad vanaf je eigen bank ook wel eens de ideale vakantie voor je gezin? Het aantal internetgebruikers en de hoeveelheid verschillende apparaten neemt de komende jaren alleen maar toe. Hoe ga je hier als merk mee om? Is het bijvoorbeeld nodig om voor elk device een aparte website te bouwen? Met deze ontwikkeling in haar achterhoofd heeft Claudia Angenent van Not on Paper deze maand de Boeiende Babbel bij GiDesign verzorgd. Vanuit haar functie als Frontend Developer heeft zij verteld hoe de nieuwste techniek, responsive design, kan bijdragen aan je online doelstellingen en hoe dit design tot stand komt.

1. Not on Paper
Responsive design, wat is het en hoe kunnen we het toepassen.
Claudia Angenent
Front-end developer Not on Paper
nl.linkedin.com/in/claudiaangenent/

2. Waar ga ik vanavond over babbelen
• Huidige tijdperk
• Wat is responsive design
• Responsive design is een andere manier van denken
• Hoe starten met een responsive design
• Van PSD naar HTML
• Korte samenvatting
• Vragen?

3. Het tijdperk van de verschillende apparaten
• Wie van jullie gaat er wel eens naar een website op je telefoon?
• Vanzelfsprekend?
• 2012 waren in Nederland 12,4 miljoen internetgebruikers.
• 96% in de leeftijd van 12 tot 75 jaar
• Van deze gebruikers bezoeken zes op de tien het internet met
behulp van mobile devices
• Onmogelijk om voor elk apparaat apart te designen, onbetaalbaar
• Responsive webdesign

4. Wat is responsive webdesign
• “Een website bestaande uit een flexibel grid opgebouwd door CSS media
queries en scripts die er voor zorgen dat overige media op de website ook
geschaald word.”
• De website moet de techniek hebben om automatisch zich aan te passen aan
het apparaat wat de gebruiker gebruikt.

5. Voorbeeld responsive design
Studiodomano.be (website Not on Paper)
Desktop versie Tablet portrait mobiel

6. Voorbeeld responsive design
Cacaotour.com (website extern bureau)
Desktop versie Tablet portrait mobiel

7. Responsive designen is andere manier van denken
• Niet zo simpel als “schuif maar die content onder elkaar en minder breed”.
• Responsive design is content gericht
• Starten met mobiele variant van de site
• Daarna door naar tablet en desktop
• Struikelblokken bij eerst voor desktop designen en daarna mobiel:
• Content
• Navigatie

8. Hoe starten met designen voor een responsive website
• Belangrijkste vraag van allemaal is: Wil de klant een mobiele website.
• Verwachting van de klant, responsive design is niet goedkoper, is
responsive design wel de juiste optie?
• Contentplan
• Breakingpoints bepalen
• Module boards inzetten

9. Moduleboards
• Oldskool papier en foamboard
• Waarom? Nadenken en makkelijk schuiven met opties
http://www.frenzymedia.eu/download/moduleboarding.pdf

10. Design en functies
• Designen op element niveau in het grid
• Consequent zijn met het grid
• Rekening houden met touchscreen’s
• Menu’s met mouse-overs
• Google maps
• Grote knoppen
• Enz enz
• Extra functies voor mobiel, bijvoorbeeld gebruik GPS

11. van photoshop naar html
• Design moet definitief zijn
• Photoshop design op basis van grid!
• Op basis van grid makkelijker te schuiven & verplaatsen
• HTML starten met grootste versie naar kleinste versie

12. In het kort de stappen tot een succesvolle
responsive website
• Wensen en verwachting klant
• Contentplan
• Breakingpoints bepalen
• Evt. moduleboards anders wireframes op basis van grid
• Starten met mobiel design op basis van grid
• Door ontwikkelen voor andere formaten op basis van grid
• Definitief ontwerp
• HTML starten met grootste formaat
• Back-end werk
• Testen

13. Vragen / opmerkingen?
Neem dan contact met ons op:
notonpaper.nl
facebook.com/wearenotonpaper