Your SlideShare is downloading. ×
Boeiende Babbel Responsive Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Boeiende Babbel Responsive Design

101
views

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 …

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
101
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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 metbehulp 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 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. Voorbeeld responsive designStudiodomano.be (website Not on Paper)Desktop versie Tablet portrait mobiel
  • 6. Voorbeeld responsive designCacaotour.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, isresponsive design wel de juiste optie?• Contentplan• Breakingpoints bepalen• Module boards inzetten
  • 9. Moduleboards• Oldskool papier en foamboard• Waarom? Nadenken en makkelijk schuiven met optieshttp://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 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. Vragen / opmerkingen?Neem dan contact met ons op:notonpaper.nlfacebook.com/wearenotonpaper