Hoe ontwerp en ontwikkel je een website, intranet of extranet voor zowel desktop als mobiel, tablet, TV en andere devices? En welke rol speelt content daarin? De traditionele ‘waterval’-aanpak is verre van ideaal. Daarom een nieuwe aanpak: het 'sustainable'-model.

1. De rol van
in (responsive) web design & development
Christiaan W. Lustig
Breda, donderdag 1 november 2012
Foto: http://www.flickr.com/photos/jpaxonreyes/5034760960/

4. “Responsive design is
design for content”
— Mark Mitchell
http://studio.headshift.com/2011/05/10/design-for-the-changing-web-responsive-web-design/

5. “Content first,
navigation second.”
— Luke Wroblewski
http://www.uie.com/BSAL/trans/Luke_Wroblewski_WAMT_transcript.html

6. “… well-structured flexible
reusable set of content…”
“… a multi-
resolution, standards-
compliant cradle…”

7. “You need human judgment
to decide what actually
matters.”
— Karen McGrane
http://www.lukew.com/ff/entry.asp?1493

9. Foto: http://www.flickr.com/photos/--mike--/4096343398/

13. 1. Maak wireframes in HTML/CSS
2. Vul met echte content
3. Maak breekpuntindicatie
4. Conceptcomposities voor elk breekpunt
5. Composities + wireframe in HTML-prototype
6. Presenteer screenshots (!)
7. Test prototype
8. Hergebruik code in development
Foto: http://www.flickr.com/photos/wheatfields/3921008838/

14. 1. IO
2. Design
3. Bouw
4. Test
5. Wassen, spoelen en herhalen
Foto: http://www.flickr.com/photos/dynamosquito/3553548908/

16. Online Content
Strategy Research
strategy strategy
Content
Functional
Scope specs
require-
ments
Content Composite Art
Structure IA
outlines design direction
Database Content Interaction
Skeleton design production design
Web design
Content Interaction Frontend Backend
Sprints production design
Web design
dev. dev.

18. Foto: http://www.flickr.com/photos/caterhamf1/8131160591/

19. Zo gaat het web werkelijk over
, over , over
en met echte
.
Foto: http://www.flickr.com/photos/indigoskies/6523275513/

20. Frankwatching
http://www.frankwatching.com/archive/2012/10/22/responsive-design-development-en-content-in-een-flexibele-aanpak/
.Net Magazine
http://www.netmagazine.com/features/content-first-content-left-right-and-centre
@ChristiaanWLstg
LinkedIn.com/in/ChristiaanWLustig