0
Design for Mobile
Responsive Design
Design for Mobile
Design for Mobile
Design for Mobile
Het probleem
Moet je allemaal losse sites maken
voor desktop, tablets, touch phones
en smartphones?
(kos...
“If your information is not
available on small screen,
it doesn’t exist for all the
people that rely on their
mobile phone...
Design for Mobile
Responsive Design
Design for Mobile
Basisingrediënten
 Flexibel grid
 Flexibele media
 Media Query’s / Breakpoints
Design for Mobile
Flexibele grids
Design for Mobile
Pixel-perfect?
De realiteit is dat je niet exact kunt bepalen
hoe een website op verschillende devices i...
Design for Mobile
Flexibele media
Design for Mobile
Flexibele media
Design for Mobile
Flexibele media
Met behulp van ‘Focal Point’ CSS
http://designshack.net/articles/css/focal-point-intelli...
Design for Mobile
Breakpoints:
Niet alleen schalen, maar ook her-indelen
Design for Mobile
Design for Mobile
Design for Mobile
Design for Mobile
Design for Mobile
Wat kan er gebeuren bij down-scaling?
 Content verschuift, bv. onder elkaar.
 Content verkleint, bv. a...
Design for Mobile
Down-scaling?
“Responsive web design is not a
down-scaling. it’s an optimization
for the different viewp...
Design for Mobile
Content verwijderen?
“Truncation is not a content
strategy. Don’t just chop content off
to make it fit o...
Design for Mobile
Valkuil: mooie Apple plaatjes
Design for Mobile
Begin bij de content
“You need to know what matters most. Thanks
to progressive enhancement (and let’s f...
Design for Mobile
Begin bij de content
“Start with the small screen first, then
expand until it looks like shit. Time for ...
Design for Mobile
Data weglaten in complexe datatabellen?
Wel netjes om gebruikers
dan het laatste woord te
geven
Design for Mobile
…of stapelen.
Design for Mobile
Design for Mobile
Content choreografie
“We ontwerpen content die
beweegt, van vorm verandert
en transformeert in zijn
vers...
Design for Mobile
Content-first en mobile-first ontwerpen
 Probeer zo vroeg mogelijk de content vast te stellen die op de...
Design for Mobile
En de navigatie dan?
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
Design for Mobile
“Do nothing approach”
Nadeel: zo lijken alle pagina’s het zelfde.
Design for Mobile
Toggle
Design for Mobile
Toggle
Design for Mobile
Inzwevend linkermenu
Design for Mobile
Dropdown lijstje
Design for Mobile
Footer-menu (met link bovenaan)
Design for Mobile
Alleen in de footer
Design for Mobile
Pull down menu
http://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-solution/
Design for Mobile
Oefening: het Juridisch Loket
Design for Mobile
Oefening: het Juridisch Loket
Maak een responsive design voor de
homepage
Design for Mobile
Nieuwe werkwijze?
“Ontwerp systemen (van componenten)
in plaats van pagina’s.”
Stephen Hay, Karen McGrane
Design for Mobile
Atomic Design
 Atomen: de meest elementaire bouwstenen, zoals
labels, formuliervelden, knoppen
 Molecu...
Design for Mobile
Maak een design (pattern) library
Design for Mobile
Ontwerp vanuit de browser ipv Photoshop
 Je doet geen werk om het daarna nog een keer te
doen;
 Het we...
Design for Mobile
Lezen
 Reader: hoofdstuk 2
Design for Mobile
Vragen? Feedback?
Contactinfo
Upcoming SlideShare
Loading in...5
×

IAD 5 - les 3 - Responsive Design

741

Published on

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

No notes for slide

Transcript of "IAD 5 - les 3 - Responsive Design"

  1. 1. Design for Mobile Responsive Design
  2. 2. Design for Mobile
  3. 3. Design for Mobile
  4. 4. Design for Mobile Het probleem Moet je allemaal losse sites maken voor desktop, tablets, touch phones en smartphones? (kost veel werk en dus geld)
  5. 5. “If your information is not available on small screen, it doesn’t exist for all the people that rely on their mobile phones for access.” Pew Research
  6. 6. Design for Mobile Responsive Design
  7. 7. Design for Mobile Basisingrediënten  Flexibel grid  Flexibele media  Media Query’s / Breakpoints
  8. 8. Design for Mobile Flexibele grids
  9. 9. Design for Mobile Pixel-perfect? De realiteit is dat je niet exact kunt bepalen hoe een website op verschillende devices in diverse browsers. Creëer geen illusie dat je hier net zoveel controle over hebt als bij print. Denk in relatieve eenheden en percentages.
  10. 10. Design for Mobile Flexibele media
  11. 11. Design for Mobile Flexibele media
  12. 12. Design for Mobile Flexibele media Met behulp van ‘Focal Point’ CSS http://designshack.net/articles/css/focal-point-intelligent-cropping-of-responsive-images/
  13. 13. Design for Mobile Breakpoints: Niet alleen schalen, maar ook her-indelen
  14. 14. Design for Mobile
  15. 15. Design for Mobile
  16. 16. Design for Mobile
  17. 17. Design for Mobile
  18. 18. Design for Mobile Wat kan er gebeuren bij down-scaling?  Content verschuift, bv. onder elkaar.  Content verkleint, bv. afbeeldingen.  Content wordt verborgen, bv. door alinea’s in te vouwen en de kop klikbaar te maken.  Content verdwijnt (responsive text). Velen zijn hierop tegen.  Content kan een andere prioriteit krijgen. http://blog.braintraffic.com/2012/01/content-strategy-and-responsive-design/
  19. 19. Design for Mobile Down-scaling? “Responsive web design is not a down-scaling. it’s an optimization for the different viewports of today… if it’s done right!” Markus (onbekend)
  20. 20. Design for Mobile Content verwijderen? “Truncation is not a content strategy. Don’t just chop content off to make it fit onto small screens” Karen McGrane Truncation: ‘snoeien’, ‘afhakken’ of zelfs ‘mutileren’
  21. 21. Design for Mobile Valkuil: mooie Apple plaatjes
  22. 22. Design for Mobile Begin bij de content “You need to know what matters most. Thanks to progressive enhancement (and let’s face it, responsive design done right is a perfect example of progressive enhancement) we can serve up the content that people want and display it to the best ability of any particular device. That’s the key difference: start with the content, not the device.” Luke Wroblewski
  23. 23. Design for Mobile Begin bij de content “Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!” Stephen Hay
  24. 24. Design for Mobile Data weglaten in complexe datatabellen? Wel netjes om gebruikers dan het laatste woord te geven
  25. 25. Design for Mobile …of stapelen.
  26. 26. Design for Mobile
  27. 27. Design for Mobile Content choreografie “We ontwerpen content die beweegt, van vorm verandert en transformeert in zijn verschillende stadia, of het nu gaat om desktops, mobiele telefoons of iets geheel anders”. Nicklas Persson
  28. 28. Design for Mobile Content-first en mobile-first ontwerpen  Probeer zo vroeg mogelijk de content vast te stellen die op de site moet komen. Maak een sitemap.  Stel per pagina de lineaire content-opbouw vast. • Welke content-elementen moeten er op de pagina komen? • Hoe groot schat je ieder element in? Hoe ziet het er in grove lijnen uit? • In welke volgorde zou je alles plaatsen als je maar 1 kolom gebruikt waarin alles onder elkaar komt te staan? Wat is de meest effectieve volgorde? • Schets dit in een smal canvas. Dit is zowel je ‘content first’ als je ‘mobile first’ basis.  Denk na welke content bijvoorbeeld ingeklapt kan worden om de pagina overzichtelijker en minder lang te maken. Schets dit.  Nu begint de choreografie: Verbreed je canvas en schets hoe de content zich aanpast aan de beschikbare ruimte. Herhaal deze stap totdat je een lay-out hebt geschetst voor de grootste schermen.
  29. 29. Design for Mobile En de navigatie dan? http://bradfrostweb.com/blog/web/responsive-nav-patterns/
  30. 30. Design for Mobile “Do nothing approach” Nadeel: zo lijken alle pagina’s het zelfde.
  31. 31. Design for Mobile Toggle
  32. 32. Design for Mobile Toggle
  33. 33. Design for Mobile Inzwevend linkermenu
  34. 34. Design for Mobile Dropdown lijstje
  35. 35. Design for Mobile Footer-menu (met link bovenaan)
  36. 36. Design for Mobile Alleen in de footer
  37. 37. Design for Mobile Pull down menu http://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-solution/
  38. 38. Design for Mobile Oefening: het Juridisch Loket
  39. 39. Design for Mobile Oefening: het Juridisch Loket Maak een responsive design voor de homepage
  40. 40. Design for Mobile Nieuwe werkwijze? “Ontwerp systemen (van componenten) in plaats van pagina’s.” Stephen Hay, Karen McGrane
  41. 41. Design for Mobile Atomic Design  Atomen: de meest elementaire bouwstenen, zoals labels, formuliervelden, knoppen  Moleculen: samengestelde controls, zoals een zoekveld (veld + knop)  Organismen: herbruikbare blokken die uit verschillende modulen bestaat, bv. een header (logo, hoofdnavigatie, metanavigatie en zoekveld)  Pagina’s: unieke combinaties van organismen.  Ontwerpen vanuit de content betekent vooral focussen op de moleculen en organismen en die volledig schaalbaar ontwerpen.
  42. 42. Design for Mobile Maak een design (pattern) library
  43. 43. Design for Mobile Ontwerp vanuit de browser ipv Photoshop  Je doet geen werk om het daarna nog een keer te doen;  Het web heeft geen vaste canvasgrootte;  Het is niet langzamer, vaak sneller;  CSS is efficiënter om wijzigingen voor alle pagina’s te doen (vraag een designer niet om 70 PSD’s aan te passen omdat de fontgrootte verandert);  Interactief;  De browser is beter in het renderen van tekst.
  44. 44. Design for Mobile Lezen  Reader: hoofdstuk 2
  45. 45. Design for Mobile Vragen? Feedback? Contactinfo
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×