IAD 5 - les 2 - Responsive Design

Interaction Design 201 Vragen of feedback? @ferrydendopper

Responsive Design


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


Responsive Design


Flexibele grids


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.


Flexibele media


Breakpoints:Niet alleen schalen, maar ook her-indelen


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/




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)


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’


Valkuil: mooie Apple plaatjes


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


Begin bij de content

“Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!”

Stephen Hay


Data weglaten in complexe datatabellen?

Wel netjes om gebruikers dan het laatste woord te geven


…of stapelen.


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

http://www.webstandardistas.com/2011/07/content-choreography-in-the-age-of-responsive-design.php




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.


En de navigatie dan?

http://bradfrostweb.com/blog/web/responsive-nav-patterns/

http://bradfrostweb.com/blog/web/responsive-nav-patterns/


“Do nothing approach”

Zo lijken alle pagina’s het zelfde.


Toggle


Left nav fly-out


Select menu


Footer anchor


Footer only


Pull Down for Navigation

http://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-solution/

http://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-solution/


Oefening: het Juridisch Loket


Oefening: het Juridisch Loket

Maak een responsive design voor de• Homepage• Vraag• Contact


Nieuwe werkwijze?

“Ontwerp systemen (van componenten) in plaats van pagina’s.”

Stephen Hay, Karen McGrane


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.


Maak een design (pattern) library

http://www.den-dopper.com/wp-content/uploads/2013/04/rd_styleguide.png


Ontwerp vanuit de browser

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.


Lezen

Reader: hoofdstuk 2


Vragen? Feedback?

[email protected]

@ferrydendopper

IAD 5 - les 2 - Responsive Design

Design

Transcript of IAD 5 - les 2 - Responsive Design