SlideShare a Scribd company logo
1 of 45
Download to read offline
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?
(kost veel werk en dus geld)
“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
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 in
diverse browsers. Creëer geen illusie dat je
hier net zoveel controle over hebt als bij print.
Denk in relatieve eenheden en percentages.
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-intelligent-cropping-of-responsive-images/
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. 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/
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)
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’
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 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
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
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
verschillende stadia, of het nu gaat
om desktops, mobiele telefoons of
iets geheel anders”.
Nicklas Persson
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.
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
 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.
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 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.
Design for Mobile
Lezen
 Reader: hoofdstuk 2
Design for Mobile
Vragen? Feedback?
Contactinfo

More Related Content

Viewers also liked

Webtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenWebtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenFerry den Dopper
 
Usability Testing - Beyond the basics
Usability Testing - Beyond the basicsUsability Testing - Beyond the basics
Usability Testing - Beyond the basicsFerry den Dopper
 
Social Media Research - MIE 2012
Social Media Research - MIE 2012Social Media Research - MIE 2012
Social Media Research - MIE 2012MarketResponse
 
IAD 2 - les 4 - Navigation
IAD 2 - les 4 - NavigationIAD 2 - les 4 - Navigation
IAD 2 - les 4 - NavigationFerry den Dopper
 
Interaction Design 3.4: Hints, Help & Errors
Interaction Design 3.4: Hints, Help & ErrorsInteraction Design 3.4: Hints, Help & Errors
Interaction Design 3.4: Hints, Help & ErrorsFerry den Dopper
 
IAD 5 - les 4 - Design for Touch
IAD 5 - les 4 - Design for TouchIAD 5 - les 4 - Design for Touch
IAD 5 - les 4 - Design for TouchFerry den Dopper
 
CMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-offCMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-offFerry den Dopper
 
Interaction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisitedInteraction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisitedFerry den Dopper
 
Interaction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form DesignInteraction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form DesignFerry den Dopper
 
IAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - CardsortingIAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - CardsortingFerry den Dopper
 
IAD 2 - les 3 - Geur van informatie
IAD 2 - les 3 - Geur van informatieIAD 2 - les 3 - Geur van informatie
IAD 2 - les 3 - Geur van informatieFerry den Dopper
 
Interaction Design 3.2: Form Elements
Interaction Design 3.2: Form ElementsInteraction Design 3.2: Form Elements
Interaction Design 3.2: Form ElementsFerry den Dopper
 
Interaction Design 3.3: Form Organization
Interaction Design 3.3: Form OrganizationInteraction Design 3.3: Form Organization
Interaction Design 3.3: Form OrganizationFerry den Dopper
 
Interaction Design 3.5: Inline Validation & Smart Defaults
Interaction Design 3.5: Inline Validation & Smart DefaultsInteraction Design 3.5: Inline Validation & Smart Defaults
Interaction Design 3.5: Inline Validation & Smart DefaultsFerry den Dopper
 
IAD 2 - les 1 - Information Architecture
IAD 2 - les 1 - Information ArchitectureIAD 2 - les 1 - Information Architecture
IAD 2 - les 1 - Information ArchitectureFerry den Dopper
 

Viewers also liked (20)

Webtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenWebtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minuten
 
Usability Testing - Beyond the basics
Usability Testing - Beyond the basicsUsability Testing - Beyond the basics
Usability Testing - Beyond the basics
 
Social Media Research - MIE 2012
Social Media Research - MIE 2012Social Media Research - MIE 2012
Social Media Research - MIE 2012
 
IAD 2 - les 4 - Navigation
IAD 2 - les 4 - NavigationIAD 2 - les 4 - Navigation
IAD 2 - les 4 - Navigation
 
Interaction Design 3.4: Hints, Help & Errors
Interaction Design 3.4: Hints, Help & ErrorsInteraction Design 3.4: Hints, Help & Errors
Interaction Design 3.4: Hints, Help & Errors
 
IAD 5 - les 4 - Design for Touch
IAD 5 - les 4 - Design for TouchIAD 5 - les 4 - Design for Touch
IAD 5 - les 4 - Design for Touch
 
De geur van informatie
De geur van informatieDe geur van informatie
De geur van informatie
 
CMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-offCMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-off
 
IAD 2 - les 5 - Metadata
IAD 2 - les 5 - MetadataIAD 2 - les 5 - Metadata
IAD 2 - les 5 - Metadata
 
Interaction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisitedInteraction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisited
 
Interaction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form DesignInteraction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form Design
 
IAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - CardsortingIAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - Cardsorting
 
IAD 2 - les 3 - Geur van informatie
IAD 2 - les 3 - Geur van informatieIAD 2 - les 3 - Geur van informatie
IAD 2 - les 3 - Geur van informatie
 
Interaction Design 3.2: Form Elements
Interaction Design 3.2: Form ElementsInteraction Design 3.2: Form Elements
Interaction Design 3.2: Form Elements
 
Interaction Design 3.3: Form Organization
Interaction Design 3.3: Form OrganizationInteraction Design 3.3: Form Organization
Interaction Design 3.3: Form Organization
 
IAD 5 - les 2 - Apps
IAD 5 - les 2 - AppsIAD 5 - les 2 - Apps
IAD 5 - les 2 - Apps
 
Interaction Design 3.5: Inline Validation & Smart Defaults
Interaction Design 3.5: Inline Validation & Smart DefaultsInteraction Design 3.5: Inline Validation & Smart Defaults
Interaction Design 3.5: Inline Validation & Smart Defaults
 
IAD 2 - les 1 - Information Architecture
IAD 2 - les 1 - Information ArchitectureIAD 2 - les 1 - Information Architecture
IAD 2 - les 1 - Information Architecture
 
IAD 1 - les 2 - personas
IAD 1 - les 2 - personasIAD 1 - les 2 - personas
IAD 1 - les 2 - personas
 
IAD 2 - les 7 - Zoeken
IAD 2 - les 7 - ZoekenIAD 2 - les 7 - Zoeken
IAD 2 - les 7 - Zoeken
 

Similar to IAD 5 - les 3 - Responsive Design

Iad2 0910 q4 les 1 ontwerpen met patronen
Iad2 0910 q4 les 1   ontwerpen met patronenIad2 0910 q4 les 1   ontwerpen met patronen
Iad2 0910 q4 les 1 ontwerpen met patronenHans Kemp
 
Het ontwerptraject voor mobiel
Het ontwerptraject voor mobielHet ontwerptraject voor mobiel
Het ontwerptraject voor mobielSharineDulos
 
Waarom je een Responsive Design website moet hebben
Waarom je een Responsive Design website moet hebbenWaarom je een Responsive Design website moet hebben
Waarom je een Responsive Design website moet hebbenHans-Peter Harmsen
 
Whitepaper responsive design voor een betere ux
Whitepaper   responsive design voor een betere uxWhitepaper   responsive design voor een betere ux
Whitepaper responsive design voor een betere uxPaul Immerzeel
 
Apps voor mobiele toestellen
Apps voor mobiele toestellenApps voor mobiele toestellen
Apps voor mobiele toestellenKaren De Groof
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesignSybren Wartna
 
Interaction Design by Ultrafris
Interaction Design by UltrafrisInteraction Design by Ultrafris
Interaction Design by UltrafrisAnna Witteman
 
Info Nl Exploding Webzicht Ext
Info Nl Exploding Webzicht ExtInfo Nl Exploding Webzicht Ext
Info Nl Exploding Webzicht ExtInfo.nl
 
Web Ontwikkelingstrends om naar uit te kijken in 2017
Web Ontwikkelingstrends om naar uit te kijken in 2017Web Ontwikkelingstrends om naar uit te kijken in 2017
Web Ontwikkelingstrends om naar uit te kijken in 2017Rasin Bekkevold
 
Agile Projectaanpak
Agile ProjectaanpakAgile Projectaanpak
Agile ProjectaanpakThijs Weenk
 
Usabilityweb magazine nr. 7
Usabilityweb magazine nr. 7Usabilityweb magazine nr. 7
Usabilityweb magazine nr. 7srprs.me
 
INXCO / 9 fouten voor mobiele sites
INXCO / 9 fouten voor mobiele sitesINXCO / 9 fouten voor mobiele sites
INXCO / 9 fouten voor mobiele sitesINXCO
 
Responsive Design beyond layout
Responsive Design beyond layoutResponsive Design beyond layout
Responsive Design beyond layoutANGI studio
 
1011q1 design for mobile les 3 patterns for mobile
1011q1 design for mobile les 3   patterns for mobile1011q1 design for mobile les 3   patterns for mobile
1011q1 design for mobile les 3 patterns for mobileHans Kemp
 

Similar to IAD 5 - les 3 - Responsive Design (20)

Iad2 0910 q4 les 1 ontwerpen met patronen
Iad2 0910 q4 les 1   ontwerpen met patronenIad2 0910 q4 les 1   ontwerpen met patronen
Iad2 0910 q4 les 1 ontwerpen met patronen
 
Het ontwerptraject voor mobiel
Het ontwerptraject voor mobielHet ontwerptraject voor mobiel
Het ontwerptraject voor mobiel
 
Waarom je een Responsive Design website moet hebben
Waarom je een Responsive Design website moet hebbenWaarom je een Responsive Design website moet hebben
Waarom je een Responsive Design website moet hebben
 
Responsive design annotated
Responsive design annotatedResponsive design annotated
Responsive design annotated
 
Whitepaper responsive design voor een betere ux
Whitepaper   responsive design voor een betere uxWhitepaper   responsive design voor een betere ux
Whitepaper responsive design voor een betere ux
 
Apps voor mobiele toestellen
Apps voor mobiele toestellenApps voor mobiele toestellen
Apps voor mobiele toestellen
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesign
 
Interaction Design by Ultrafris
Interaction Design by UltrafrisInteraction Design by Ultrafris
Interaction Design by Ultrafris
 
Info Nl Exploding Webzicht Ext
Info Nl Exploding Webzicht ExtInfo Nl Exploding Webzicht Ext
Info Nl Exploding Webzicht Ext
 
Web Ontwikkelingstrends om naar uit te kijken in 2017
Web Ontwikkelingstrends om naar uit te kijken in 2017Web Ontwikkelingstrends om naar uit te kijken in 2017
Web Ontwikkelingstrends om naar uit te kijken in 2017
 
responsible webdesign
responsible webdesignresponsible webdesign
responsible webdesign
 
Agile Projectaanpak
Agile ProjectaanpakAgile Projectaanpak
Agile Projectaanpak
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesign
 
Responsive presentatie
Responsive presentatieResponsive presentatie
Responsive presentatie
 
test
testtest
test
 
Usabilityweb magazine nr. 7
Usabilityweb magazine nr. 7Usabilityweb magazine nr. 7
Usabilityweb magazine nr. 7
 
INXCO / 9 fouten voor mobiele sites
INXCO / 9 fouten voor mobiele sitesINXCO / 9 fouten voor mobiele sites
INXCO / 9 fouten voor mobiele sites
 
Responsive Design beyond layout
Responsive Design beyond layoutResponsive Design beyond layout
Responsive Design beyond layout
 
Webdesign
WebdesignWebdesign
Webdesign
 
1011q1 design for mobile les 3 patterns for mobile
1011q1 design for mobile les 3   patterns for mobile1011q1 design for mobile les 3   patterns for mobile
1011q1 design for mobile les 3 patterns for mobile
 

More from Ferry den Dopper

IAD 4 - les 8 - Social design patterns
IAD 4 - les 8 - Social design patternsIAD 4 - les 8 - Social design patterns
IAD 4 - les 8 - Social design patternsFerry den Dopper
 
Interaction Design 1.8: Usability test uitvoeren
Interaction Design 1.8: Usability test uitvoerenInteraction Design 1.8: Usability test uitvoeren
Interaction Design 1.8: Usability test uitvoerenFerry den Dopper
 
Interaction Design 1.7: Usability test taken opstellen
Interaction Design 1.7: Usability test taken opstellenInteraction Design 1.7: Usability test taken opstellen
Interaction Design 1.7: Usability test taken opstellenFerry den Dopper
 
IAD 4 - les 7 - Social design patterns 1
IAD 4 - les 7 - Social design patterns 1IAD 4 - les 7 - Social design patterns 1
IAD 4 - les 7 - Social design patterns 1Ferry den Dopper
 
Interaction Design 1.6: Usability test voorbereiden
Interaction Design 1.6: Usability test voorbereidenInteraction Design 1.6: Usability test voorbereiden
Interaction Design 1.6: Usability test voorbereidenFerry den Dopper
 
Interaction Design 1.5: Wireframes masterclass
Interaction Design 1.5: Wireframes masterclassInteraction Design 1.5: Wireframes masterclass
Interaction Design 1.5: Wireframes masterclassFerry den Dopper
 
Interaction Design 1.4: Wireframes
Interaction Design 1.4: WireframesInteraction Design 1.4: Wireframes
Interaction Design 1.4: WireframesFerry den Dopper
 
Interaction Design 1.3: Scenarios & Requirements
Interaction Design 1.3: Scenarios & RequirementsInteraction Design 1.3: Scenarios & Requirements
Interaction Design 1.3: Scenarios & RequirementsFerry den Dopper
 
IAD 4 - les 4+5 - Documenting Rich Interaction
IAD 4 - les 4+5 - Documenting Rich InteractionIAD 4 - les 4+5 - Documenting Rich Interaction
IAD 4 - les 4+5 - Documenting Rich InteractionFerry den Dopper
 
IAD 4 - les 2+3 - Rich Interaction
IAD 4 - les 2+3 - Rich InteractionIAD 4 - les 2+3 - Rich Interaction
IAD 4 - les 2+3 - Rich InteractionFerry den Dopper
 
Interaction Design 1.2: Persona's
Interaction Design 1.2: Persona'sInteraction Design 1.2: Persona's
Interaction Design 1.2: Persona'sFerry den Dopper
 

More from Ferry den Dopper (12)

IAD 2 - les 6 - Labeling
IAD 2 - les 6 - LabelingIAD 2 - les 6 - Labeling
IAD 2 - les 6 - Labeling
 
IAD 4 - les 8 - Social design patterns
IAD 4 - les 8 - Social design patternsIAD 4 - les 8 - Social design patterns
IAD 4 - les 8 - Social design patterns
 
Interaction Design 1.8: Usability test uitvoeren
Interaction Design 1.8: Usability test uitvoerenInteraction Design 1.8: Usability test uitvoeren
Interaction Design 1.8: Usability test uitvoeren
 
Interaction Design 1.7: Usability test taken opstellen
Interaction Design 1.7: Usability test taken opstellenInteraction Design 1.7: Usability test taken opstellen
Interaction Design 1.7: Usability test taken opstellen
 
IAD 4 - les 7 - Social design patterns 1
IAD 4 - les 7 - Social design patterns 1IAD 4 - les 7 - Social design patterns 1
IAD 4 - les 7 - Social design patterns 1
 
Interaction Design 1.6: Usability test voorbereiden
Interaction Design 1.6: Usability test voorbereidenInteraction Design 1.6: Usability test voorbereiden
Interaction Design 1.6: Usability test voorbereiden
 
Interaction Design 1.5: Wireframes masterclass
Interaction Design 1.5: Wireframes masterclassInteraction Design 1.5: Wireframes masterclass
Interaction Design 1.5: Wireframes masterclass
 
Interaction Design 1.4: Wireframes
Interaction Design 1.4: WireframesInteraction Design 1.4: Wireframes
Interaction Design 1.4: Wireframes
 
Interaction Design 1.3: Scenarios & Requirements
Interaction Design 1.3: Scenarios & RequirementsInteraction Design 1.3: Scenarios & Requirements
Interaction Design 1.3: Scenarios & Requirements
 
IAD 4 - les 4+5 - Documenting Rich Interaction
IAD 4 - les 4+5 - Documenting Rich InteractionIAD 4 - les 4+5 - Documenting Rich Interaction
IAD 4 - les 4+5 - Documenting Rich Interaction
 
IAD 4 - les 2+3 - Rich Interaction
IAD 4 - les 2+3 - Rich InteractionIAD 4 - les 2+3 - Rich Interaction
IAD 4 - les 2+3 - Rich Interaction
 
Interaction Design 1.2: Persona's
Interaction Design 1.2: Persona'sInteraction Design 1.2: Persona's
Interaction Design 1.2: Persona's
 

IAD 5 - les 3 - Responsive Design

  • 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
  • 7. Design for Mobile Basisingrediënten  Flexibel grid  Flexibele media  Media Query’s / Breakpoints
  • 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.
  • 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
  • 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
  • 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.
  • 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