IAD 5 - les 3 - Responsive Design

837
-1

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
837
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

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.

×