Your SlideShare is downloading. ×
IAD 5 - les 3 - 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

IAD 5 - les 3 - Responsive Design

708

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
708
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
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. Design for Mobile Responsive Design
  • 2. Design for Mobile
  • 3. Design for Mobile
  • 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. “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. Design for Mobile Responsive Design
  • 7. Design for Mobile Basisingrediënten  Flexibel grid  Flexibele media  Media Query’s / Breakpoints
  • 8. Design for Mobile Flexibele grids
  • 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. Design for Mobile Flexibele media
  • 11. Design for Mobile Flexibele media
  • 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. Design for Mobile Breakpoints: Niet alleen schalen, maar ook her-indelen
  • 14. Design for Mobile
  • 15. Design for Mobile
  • 16. Design for Mobile
  • 17. Design for Mobile
  • 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. 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. 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. Design for Mobile Valkuil: mooie Apple plaatjes
  • 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. 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. Design for Mobile Data weglaten in complexe datatabellen? Wel netjes om gebruikers dan het laatste woord te geven
  • 25. Design for Mobile …of stapelen.
  • 26. Design for Mobile
  • 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. 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. Design for Mobile En de navigatie dan? http://bradfrostweb.com/blog/web/responsive-nav-patterns/
  • 30. Design for Mobile “Do nothing approach” Nadeel: zo lijken alle pagina’s het zelfde.
  • 31. Design for Mobile Toggle
  • 32. Design for Mobile Toggle
  • 33. Design for Mobile Inzwevend linkermenu
  • 34. Design for Mobile Dropdown lijstje
  • 35. Design for Mobile Footer-menu (met link bovenaan)
  • 36. Design for Mobile Alleen in de footer
  • 37. Design for Mobile Pull down menu http://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-solution/
  • 38. Design for Mobile Oefening: het Juridisch Loket
  • 39. Design for Mobile Oefening: het Juridisch Loket Maak een responsive design voor de homepage
  • 40. Design for Mobile Nieuwe werkwijze? “Ontwerp systemen (van componenten) in plaats van pagina’s.” Stephen Hay, Karen McGrane
  • 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. Design for Mobile Maak een design (pattern) library
  • 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. Design for Mobile Lezen  Reader: hoofdstuk 2
  • 45. Design for Mobile Vragen? Feedback? Contactinfo

×