2. 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
3. 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!
4. 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
5. Hvad er responsivt web design?
Ethan Marcotte definerer tre
delelementer
1. Et fleksibelt grid baseret layout
2. Flexible billeder og medier
3. Media queries.
6. Nyere koncepter
Luke W taler om Mobile First
Brad Frost snakker om Future Friendly
7. Hvad er responsivt design?
JEG mener:
at dit design skal v脱re opm脱rksom p奪
at der findes forskellige platforme og
devices
8. 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
10. Mobile first - hvordan?
Informations arkitekturen
Hvor skal der v脱re break points?
Sketch l淡s af id辿er
11. Hvilke breakpoints?
Klassiske media queries baseret p奪
sk脱rmst淡rrelser (adaptivt)
Grids eks. Skeleton
Design breakpoints, lavet ud fra dit
eget design (responsivt)
30. Litteratur/Kilder
B淡ger
Mobile First
Responsive Web Design
Content Strategy for Mobile
Responsive Design with WordPress
Responsive Design Workflow
31. 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
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!