際際滷

際際滷Share a Scribd company logo
Responsivt design
Anne Cathrine Wind Fallesen
Cand. IT i Digital Design og Kommunikation
Hvem er jeg?
 Er 27 奪r
 L脱ser Digital Design og Kommunikation
p奪 ITU, med specialisering i Digitale
Oplevelser
 Skriver speciale om bruger adoption af
mobil betaling
 Er web assistent hos COWI
 Hj脱lpel脱rer p奪 kurset Design til Digitale
Kommunikationsplatforme
 Skribent for Geek Girl Mag
Jeg h奪ber jeg kan inspirere jer!
 Jeg kan ikke give jer en 1-2-3 guide til
hvordan man skal lave responsivt
design.
 MEN jeg vil fors淡ge at inspirere jer til at
t脱nke responsivt!
Hvad er responsivt design?
 If淡lge Wikipedia:
Responsive web design is a webdesign
approach aimed at crafting sites to
provide an optimal viewing experience
across a wide range of devices
Hvad er responsivt web design?
 Ethan Marcotte definerer tre
delelementer
1. Et fleksibelt grid baseret layout
2. Flexible billeder og medier
3. Media queries.
Nyere koncepter
 Luke W taler om Mobile First
 Brad Frost snakker om Future Friendly
Hvad er responsivt design?
 JEG mener:
at dit design skal v脱re opm脱rksom p奪
at der findes forskellige platforme og
devices
Det vigtigste er konteksten
The constraints of the mobile context
force us to focus on what content is
essential and how to present that
content as quickly as possible.
Brad Frost
Men hvor skal jeg s奪 starte?
Mobile First  ideelt set
Mobile first - hvordan?
 Informations arkitekturen
 Hvor skal der v脱re break points?
 Sketch l淡s af id辿er
Hvilke breakpoints?
 Klassiske media queries baseret p奪
sk脱rmst淡rrelser (adaptivt)
 Grids  eks. Skeleton
 Design breakpoints, lavet ud fra dit
eget design (responsivt)
Skeleton grid
Responsiv Design, WordCampCPH 14
Eks. Tiger
Eks. Robot or Not
Eks. Robot or Not
Eks. Robot or Not
Eks. The Next Web
Eks. The Next Web
Wordpress temaer
 Twentythirteen  med child theme
 www.klimamodel.dk
Klimamodel.dk
Klimamodel.dk
Wordpress temaer
 Bones  opsat efter givent design
 http://basrec.net/
Basrec.net
Basrec.net
De tre vigtigste pointer
 Informationsarkitektur
 Tro ikke du ved alt om dine bes淡gende
 Billeder og grafiske elementer
 Kontekst og indhold
Inspiration
Generel inspiration
 http://mediaqueri.es/
 http://www.awwwards.com/websites/res
ponsive-design/
Wp temaer
 http://responsivethemes.org/
 https://premium.wpmudev.org/blog/30-
free-responsive-and-stunning-wordpress-
themes/
V脱rkt淡jer
 http://www.responsinator.com/
 http://lab.maltewassermann.com/vie
wport-resizer/
 http://www.dimensionstoolkit.com/
 http://cssmediaqueries.com/
SPRGSML?
Tak for jeres tid!!
Litteratur/Kilder
B淡ger
 Mobile First
 Responsive Web Design
 Content Strategy for Mobile
 Responsive Design with WordPress
 Responsive Design Workflow
Litteratur/Kilder
Hjemmesider
 This is Responive
 Responsive vs. Adaptive design
 What we mean when we say responsive
 Defining Responsiveness
 Responsive Design - Guide to responsive design
 My experience with navigation in responsive
design (link nederst til forskellige muligheder)
 How to create awesome responsive menues in
WP
 Which responsive image solution should you use

More Related Content

Responsiv Design, WordCampCPH 14

Editor's Notes

  • #8: - Jason Grigsby Take comfort ignoring the definitions and instead asking these questions about a design and its implementation: Does it adapt to screen size? Tilpasser det sig sk脱rmst淡rrelser Does it take advantage of device capabilities? Tager det nogle af de specifikke device muligheder til sig Is it accessible anywhere? Er det tilg脱ngeligt over alt? Does it work well? Virker det? (godt) For our users, those are the things that matter.
  • #9: Det v脱rste er n脱sten at n奪r man t脱nker context og content f淡r design, s奪 bliver komprimering af billeder endnu vigtigere, jeg er derfor ogs奪 klar over at det er et omr奪de, jeg stadig mangler stor viden omkring.. Eller som Brad Frost ogs奪 skriver, context skal t脱nkes ind i dit design: The constraints of the mobile context force us to focus on what content is essential and how to present that content as quickly as possible. - hvilket ogs奪 er en walk through guide ift. responsive design i html5, css3 og JavaScript
  • #10: Mit forslag er at man altid skal t脱nke MOBILE FIRST! > jeg er stor fan af Luke! Desv脱rre er den verden hvor vi vidste hvordan folk s奪 vores sider v脱k, muligvis den aldrig har eksisteret i den tid jeg har leget med web, og derfor acceptere jeg det m奪ske en smule nemmere end flertallet ville g淡re.. Men det jeg s奪 siger er, at man I de aller tidligste faser skal t脱nke dette ind! Det nytter ikke noget med et l脱kkert design af en hjemmeside til en 15 tommer sk脱rm, og man s奪 bare siger ja og den er selvf淡lgelig responsiv og svarer til alle standarder, s奪dan en designer har jeg arbejdet sammen med, og jeg ved hvis man sidder som udvikler, river man sig selv i h奪rene, for det er ikke altid bare responsivt, man skal overveje sit design, er der nogle fancy slidere, som er irrelevante p奪 en mobil, da de bliver for sm奪, eller gemmer man en masse indhold i en tung menu, og hvordan skal den s奪 blive nem for brugerne at navigere? Der er masser af sp淡rgsm奪l vi skal stille os selv, b奪de som designere og udviklere, f淡r vi sidder med en halvf脱rdig hjemmeside, 奪bner den p奪 telefonen og t脱nker shit! Side note: (optimering I forhold til load tid er ogs奪 relevant!) Jeg vil ogs奪 脱rligt indr淡mme at der er dele af den responsive verden der skr脱mmer mig - billeder! Nogen gange ville jeg 淡nske man kunne lave l脱kkert design uden et eneste billede, for det virker altid som et k脱mpe hovedbrud, hvordan dette skal l淡ses bedst muligt. I den ideelle verden skal man jo b奪de tage h淡jde for lang loade tid hos brugerne, forskellige optimal visning, og sk脱ring af billederne til alle de forskellige sk脱rmst淡rrelser! Det er mit v脱rste mareridt, kan jeg godt v脱re 脱rlig og sige!