Responsiv Design, WordCampCPH 14
Report
May. 25, 2014•0 likes•1,577 views
1 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Responsiv Design, WordCampCPH 14
May. 25, 2014•0 likes•1,577 views
1 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Internet
Danish speak on the concept of responsive webdesign, co
Responsiv Design, WordCampCPH 14
- 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
- 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/
- 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 design (link nederst til forskellige muligheder) • How to create awesome responsive menues in WP • Which responsive image solution should you use
Editor's Notes
- - 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.
- 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
- 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!