RESPONSIVE DESIGN. Fleksibelt, platformuafhængigt webdesign. Frank Thomsen & Toke Fritzemeier Efterår 2012

Transkript

1 RESPONSIVE DESIGN Fleksibelt, platformuafhængigt webdesign Frank Thomsen & Toke Fritzemeier Efterår 2012

2

3 Første browser med grafik 1993

4 Første browser med grafik

5 100%

6

7 Første browser med grafik Første WAPmobiltelefon

8 example.com example.com/800 m.example.com

9 Første browser med grafik Første WAPmobiltelefon

10 100%

11 Første browser med grafik Første WAPmobiltelefon Første iphone

12 2012

13

14 W SE NW N NE E S SW

15

16 7 skærmstørrelser 5 browsere 4 operativsystemer

17 140 kombinationsmuligheder (fdim.dk melder endda om intet mindre end 200 forskellige skærmstørrelser, OS og browser ikke taget i betragtning)

18 example.com

19 Ét fleksibelt grid (med fleksibelt indhold) hvori der anvendes media queries for at adaptivt skabe et responsivt, layout E. Marcotte, 2010 (frit oversat)

20 Responsive webdesign

21 $

22 MODULARITET INDHOLDSHIERARKI

23 MOBILE FIRST

24 PROGRESSIVE ENHANCEMENT

25 Hvordan kommer jeg igang?

26 Hvordan kommer jeg i gang? 1 Afgræns målgruppen (evt. med webstatistik) Hvordan ser de indholdet?

27 Hooray, you re done!

28 Hvordan kommer jeg i gang? 1 Afgræns målgruppen (evt. med webstatistik) Hvordan ser de indholdet? Hvilket indhold ser de?

29 Hvordan kommer jeg i gang? 2Prioritér indholdet Inddel i moduler (hovedmenu, firmalogo, indholdsfelt,...)

30 Hvordan kommer jeg i gang? 3Hvad er sitets funktionaliteter? Galleri? Indsætning af programkode? Trådede samtaler?

31 Hvordan kommer jeg i gang? 4Den iterative proces, del I: Layoutskitse på baggrund af indholdshierarki

32

33 Hvordan kommer jeg i gang? 4Den iterative proces, del II: Visuelt design på baggrund af style tiles

34 Klassisk Moderne Fresh Retro

35

36 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»

37 $ $ $

38 Derfor...

39 Derfor... ( Definér mission og vision)

40 Derfor... ( Definér mission og vision) Afgræns målgruppen

41 Derfor... ( Definér mission og vision) Afgræns målgruppen Prioritér indholdet

42 Derfor... ( Definér mission og vision) Afgræns målgruppen Prioritér indholdet Beskriv sitets funktioner

43 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

44 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

45 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

46 Tak!

47 Tak! - spørgsmål?