Embed Size (px)
DESCRIPTION
Danish speak on the concept of responsive webdesign, co
Citation preview
Responsivt design
Anne Cathrine Wind FallesenCand. 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 medier3. 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)
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-f
ree-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/
SPØRGSMÅL?
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 desi
gn (link nederst til forskellige muligheder)
• How to create awesome responsive menues in WP
• Which responsive image solution should you use
