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/
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 alineas
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. its an optimization
for the different viewports of
today if its done right!
Markus (onbekend)
20. Design for Mobile
Content verwijderen?
Truncation is not a content
strategy. Dont just chop content off
to make it fit onto small screens
Karen McGrane
Truncation: snoeien, afhakken of zelfs mutileren
22. Design for Mobile
Begin bij de content
You need to know what matters most. Thanks
to progressive enhancement (and lets 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. Thats 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 paginas het zelfde.
40. Design for Mobile
Nieuwe werkwijze?
Ontwerp systemen (van componenten)
in plaats van paginas.
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)
Paginas: unieke combinaties van organismen.
Ontwerpen vanuit de content betekent vooral
focussen op de moleculen en organismen en die
volledig schaalbaar ontwerpen.
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 paginas
te doen (vraag een designer niet om 70 PSDs aan
te passen omdat de fontgrootte verandert);
Interactief;
De browser is beter in het renderen van tekst.
