Not on PaperResponsive design, wat is het en hoe kunnen we het toepassen.Claudia AngenentFront-end developer Not on Papern...
Waar ga ik vanavond over babbelen• Huidige tijdperk• Wat is responsive design• Responsive design is een andere manier van ...
Het tijdperk van de verschillende apparaten• Wie van jullie gaat er wel eens naar een website op je telefoon?• Vanzelfspre...
Wat is responsive webdesign• “Een website bestaande uit een flexibel grid opgebouwd door CSS mediaqueries en scripts die e...
Voorbeeld responsive designStudiodomano.be (website Not on Paper)Desktop versie Tablet portrait mobiel
Voorbeeld responsive designCacaotour.com (website extern bureau)Desktop versie Tablet portrait mobiel
Responsive designen is andere manier van denken• Niet zo simpel als “schuif maar die content onder elkaar en minder breed”...
Hoe starten met designen voor een responsive website• Belangrijkste vraag van allemaal is: Wil de klant een mobiele websit...
Moduleboards• Oldskool papier en foamboard• Waarom? Nadenken en makkelijk schuiven met optieshttp://www.frenzymedia.eu/dow...
Design en functies• Designen op element niveau in het grid• Consequent zijn met het grid• Rekening houden met touchscreen’...
van photoshop naar html• Design moet definitief zijn• Photoshop design op basis van grid!• Op basis van grid makkelijker t...
In het kort de stappen tot een succesvolleresponsive website• Wensen en verwachting klant• Contentplan• Breakingpoints bep...
Vragen / opmerkingen?Neem dan contact met ons op:notonpaper.nlfacebook.com/wearenotonpaper
Upcoming SlideShare
Loading in...5
×

Boeiende Babbel Responsive Design

119

Published on

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.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
119
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Boeiende Babbel Responsive Design

  1. 1. Not on PaperResponsive design, wat is het en hoe kunnen we het toepassen.Claudia AngenentFront-end developer Not on Papernl.linkedin.com/in/claudiaangenent/
  2. 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. 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 metbehulp van mobile devices• Onmogelijk om voor elk apparaat apart te designen, onbetaalbaar• Responsive webdesign
  4. 4. Wat is responsive webdesign• “Een website bestaande uit een flexibel grid opgebouwd door CSS mediaqueries en scripts die er voor zorgen dat overige media op de website ookgeschaald word.”• De website moet de techniek hebben om automatisch zich aan te passen aanhet apparaat wat de gebruiker gebruikt.
  5. 5. Voorbeeld responsive designStudiodomano.be (website Not on Paper)Desktop versie Tablet portrait mobiel
  6. 6. Voorbeeld responsive designCacaotour.com (website extern bureau)Desktop versie Tablet portrait mobiel
  7. 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. 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, isresponsive design wel de juiste optie?• Contentplan• Breakingpoints bepalen• Module boards inzetten
  9. 9. Moduleboards• Oldskool papier en foamboard• Waarom? Nadenken en makkelijk schuiven met optieshttp://www.frenzymedia.eu/download/moduleboarding.pdf
  10. 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. 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. 12. In het kort de stappen tot een succesvolleresponsive 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. 13. Vragen / opmerkingen?Neem dan contact met ons op:notonpaper.nlfacebook.com/wearenotonpaper

×