Responsive Web DesignAf No Zebra

Hvem er vi ?

Dennis Søberg VintherDigital AD, UX-Designer, Kreativ ildsjæl, musik producer og gadget freak...

Jakob WesthausenFrontend developer, kød elsker og software freak...

Kort om No Zebra

• Vi har leveret digitale løsninger siden 1999

• Vi er 28 dedikerede ildsjæle, som sammen skaber værdi for vores kunder

• Vi er webspecialister med forstand på forretning, design og teknologi

Agenda

Hvorfor responsive design ?

Hvordan designer man responsive ?

Teknikken bag Metode

Hvordan kommer du

i gang ?

Hvorfor responsive design ?

Over 200 forskellige skærmstørrelser...

... og flere i fremtiden ?

Brandværdi og genkendelighed bibeholdes

Slipper for forskellige URL adresser + falske links

Win Win!

Redaktør

Bruger

Brugerne vil gerne se det samme indhold...

... Derfor responsive

Hvordan designer man responsive web ?

Grid• Grid består som regel af12, 16 eller 24 kolonner

• Spare frontend-udvikler for en masse arbejde

• Kan skifte antal koloner afhængig af skærmstørrelse

• Strømlinet design

Hvor meget skal man så designe ?

Handler om dialog med frontender

Let’s talk together

Når man designer til smartphones og tablets...

Gør brug af gestures

En pegefinger er i gennemsnittet 57 px...

Giv brugeren feedback

Hvad nu med navigationen ?

Accordion menu

http://www.de5gaarde.dk/

Venstre til højre

http://www.sony.com/

Skjul level 2 navigation

http://worldwildlife.org

Teknikken bag...

Pixels er ikke “bare” pixels

“There are two viewports and three kinds of pixels, and they interact in all kinds of weird

ways—ways that depend on the browser.”Peter-Paul Kock

CSS pixelsCSS pixels er en abstrakt enhed og kan veksle i størrelse ved fx. zoom.

Device pixelsDevice pixels er de fysiske pixels på en enhed.

Density-independent pixels (dips)

“The number of dips is equal to the number of CSS pixels that is optimal for viewing a website on the device.”Peter-Paul Kock

640 / 320 = 2

Flere viewportsPå desktop er der kun én viewport

Mobilvisning (ikke responsive)

Hvis mobile enheder kun havde én viewport og ikke tog hensyn til den visuelle viewport.

Meta viewport

<meta name=”viewport” content=”width = device-width”>

Layout viewporten = Device width

Media queries

DEMO!

Frameworks

Kildekode

Metode

Wireframes

Design

Prototype

Test KUNDE Responsive designPrototype

Planlægning af indhold og struktur

Hvordan kommer du igang ?God læsning..

bradfrostweb.com

ethanmarcotte.com

Følg med på twitter

@Nozebra

@rwd@beep@brad_frost@lukew

@grigs@scottjehl@stephanhay

Smashingmagazine.com

quirksmode.org

lea.verou.me

Værktøjer og frameworks

www.guideguide.me

CodeKit

susy.oddbird.net

sass-lang.com

Stil spørgsmål på twitter...

@Nozebra

Tak for nu!www.nozebra.dk

@Nozebra