RESPONSIVE DESIGN Fleksibelt, platformuafhængigt webdesign Frank Thomsen & Toke Fritzemeier Efterår 2012
Første browser med grafik 1993
Første browser med grafik 1993 1995
100% 1995 2003
Første browser med grafik Første WAPmobiltelefon 1993 1995 1999
example.com example.com/800 m.example.com
Første browser med grafik Første WAPmobiltelefon 1993 1995 1999 2005
100% 1995 2003
Første browser med grafik Første WAPmobiltelefon Første iphone 1993 1995 1999 2005 2007
2012
W SE NW N NE E S SW
7 skærmstørrelser 5 browsere 4 operativsystemer
140 kombinationsmuligheder (fdim.dk melder endda om intet mindre end 200 forskellige skærmstørrelser, OS og browser ikke taget i betragtning)
example.com
Ét fleksibelt grid (med fleksibelt indhold) hvori der anvendes media queries for at adaptivt skabe et responsivt, layout E. Marcotte, 2010 (frit oversat)
Responsive webdesign
$
MODULARITET INDHOLDSHIERARKI
MOBILE FIRST
PROGRESSIVE ENHANCEMENT
Hvordan kommer jeg igang?
Hvordan kommer jeg i gang? 1 Afgræns målgruppen (evt. med webstatistik) Hvordan ser de indholdet?
Hooray, you re done!
Hvordan kommer jeg i gang? 1 Afgræns målgruppen (evt. med webstatistik) Hvordan ser de indholdet? Hvilket indhold ser de?
Hvordan kommer jeg i gang? 2Prioritér indholdet Inddel i moduler (hovedmenu, firmalogo, indholdsfelt,...)
Hvordan kommer jeg i gang? 3Hvad er sitets funktionaliteter? Galleri? Indsætning af programkode? Trådede samtaler?
Hvordan kommer jeg i gang? 4Den iterative proces, del I: Layoutskitse på baggrund af indholdshierarki
Hvordan kommer jeg i gang? 4Den iterative proces, del II: Visuelt design på baggrund af style tiles
Klassisk Moderne Fresh Retro
Præsentationsfelt Overskrift Underoverskrift Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac augue quis mauris Pellentesque habitant morbi tristique senectus et netus et malesuada fames Maecenas lacinia euismod tellus, non bibendum nulla sodales convallis Overskrifter og brødtekst Mulig overskrift Underoverskrift Brødtekst fusce ac convallis ipsum. Praesent nec lacus augue. Proin eu tortor lectus, ut auctor nisi. Aliquam non lectus nec nisl cursus vestibulum a vitae nisi. Nam sit amet tortor ac erat suscipit sagittis. Nunc pulvinar diam sed nibh iaculis vel adipiscing eros fringilla. Quisque venenatis, enim eu euismod malesuada, dolor erat fermentum orci, in vestibulum nulla libero vitae massa. Mauris tempus vulputate quam, vel pharetra mi eleifend quis. Sed dignissim, nunc ac volutpat aliquet, eros dolor congue libero, non convallis arcu ligula ut felis. Vivamus accumsan, erat ac luctus tincidunt, nisl neque venenatis libero, ac dictum ligula odio sed nulla. Quisque nunc eros, egestas at sodales quis, viverra eget nulla. Integer eget lacus in dolor commodo hendrerit sed sit amet nibh. Suspendisse elit turpis, vulputate sit amet fermentum vitae, ultricies venenatis magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Farver Knap-style Læs mere»
$ $ $
Derfor...
Derfor... ( Definér mission og vision)
Derfor... ( Definér mission og vision) Afgræns målgruppen
Derfor... ( Definér mission og vision) Afgræns målgruppen Prioritér indholdet
Derfor... ( Definér mission og vision) Afgræns målgruppen Prioritér indholdet Beskriv sitets funktioner
Derfor... ( Definér mission og vision) Afgræns målgruppen Prioritér indholdet Beskriv sitets funktioner Udarbejd det funktionelle layout sammen med designer og programmør
Derfor... ( Definér mission og vision) Afgræns målgruppen Prioritér indholdet Beskriv sitets funktioner Udarbejd det funktionelle layout sammen med designer og programmør Udarbejd det visuelle design sammen med designer og programmør
Derfor... ( Definér mission og vision) Afgræns målgruppen Prioritér indholdet Beskriv sitets funktioner Udarbejd det funktionelle layout sammen med designer og programmør Udarbejd det visuelle design sammen med designer og programmør Dialog og testing undervejs
Tak!
Tak! - spørgsmål?