cmd interaction design - y2 q2 les 5 - responsive design
TRANSCRIPT
Interaction Design 201 Vragen of feedback? @ferrydendopper
Responsive Design
Interaction Design 201 Vragen of feedback? @ferrydendopper
Interaction Design 201 Vragen of feedback? @ferrydendopper
Interaction Design 201 Vragen of feedback? @ferrydendopper
Het probleem
Moet je allemaal losse sites maken voor desktop, tablets, touch phones en smartphones?
(kost veel werk en dus geld)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Responsive Design
Interaction Design 201 Vragen of feedback? @ferrydendopper
Responsive <> Fluid / Liquid
Interaction Design 201 Vragen of feedback? @ferrydendopper
Niet alleen schalen, maar ook her-indelen
Interaction Design 201 Vragen of feedback? @ferrydendopper
Interaction Design 201 Vragen of feedback? @ferrydendopper
Interaction Design 201 Vragen of feedback? @ferrydendopper
Interaction Design 201 Vragen of feedback? @ferrydendopper
Interaction Design 201 Vragen of feedback? @ferrydendopper
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/
Interaction Design 201 Vragen of feedback? @ferrydendopper
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)
Interaction Design 201 Vragen of feedback? @ferrydendopper
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’
Interaction Design 201 Vragen of feedback? @ferrydendopper
Data weglaten in complexe datatabellen?
Wel netjes om gebruikers dan het laatste woord te geven
Interaction Design 201 Vragen of feedback? @ferrydendopper
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
Interaction Design 201 Vragen of feedback? @ferrydendopper
Wireframe voor responsive design
“We need to think and therefore wireframe them polymorphically [and] have to ensure that everything can morph gracefully to higher and lower resolutions. Changing layout as necessary, making use of wider resolutions more effectively and possibly omitting some of the content altogether at lower resolutions.”
Leigh Howells, Headscape
Interaction Design 201 Vragen of feedback? @ferrydendopper
Interaction Design 201 Vragen of feedback? @ferrydendopper
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
Interaction Design 201 Vragen of feedback? @ferrydendopper
En de navigatie dan?
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
Interaction Design 201 Vragen of feedback? @ferrydendopper
Let op!
Zo lijken alle pagina’s het zelfde.
Interaction Design 201 Vragen of feedback? @ferrydendopper
Aan/uit zetten
Interaction Design 201 Vragen of feedback? @ferrydendopper
Aan/uit zetten
Interaction Design 201 Vragen of feedback? @ferrydendopper
Pull Down for Navigation
http://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-solution/
Interaction Design 201 Vragen of feedback? @ferrydendopper
Oefening: het Juridisch Loket
Interaction Design 201 Vragen of feedback? @ferrydendopper
Oefening: het Juridisch Loket
Interaction Design 201 Vragen of feedback? @ferrydendopper
Oefening: het Juridisch Loket
Interaction Design 201 Vragen of feedback? @ferrydendopper
Oefening: het Juridisch Loket
Maak een responsive design voor de• Homepage• Vraag• Contact
Interaction Design 201 Vragen of feedback? @ferrydendopper
Lezen
http://blog.braintraffic.com/2012/01/content-strategy-and-responsive-design/
http://boagworld.com/design/wireframing-for-responsive-design/
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
Interaction Design 201 Vragen of feedback? @ferrydendopper
Vragen? Feedback?
@ferrydendopper