Responsive web design

Don't get set into one form, adapt it and build your own, and let it grow, be like water.

Empty your mind, be formless, shapeless — like water.

Now you put water in a cup, it becomes the cup;

You put water into a bottle it becomes the bottle;

You put it in a teapot it becomes the teapot.

Now water can flow or it can crash.

…Be water, my friend.

Henrik Ekelöf

Robert Piirainen

RESPONSIVE WEB DESIGN

VAD DET INTE ÄR:— ett nytt häftigt sätt att bygga

mobilwebb

FAKTUM ÄR:

Det finns ingen mobilwebb

Det finns inte en specifik webb för mobila enheter.

Allt är samma webb.

640 x 480 800 x 600

1024 x 768

1024 x 768

320x

480

1024 x 768320x

480

1024 3207681024 768 320

The long and short of it is that we’re designing for more devices, more input types, more resolutions than ever before. The web has moved beyond the desktop, and it’s not turning back.

— Ethan MarcotteResponsive web design

Skapa en sammanhängande upplevelse för alla,

oberoende enhet eller skärmstorlek.

TEKNIKER?

Flexibla bilderFlexibel grid Media queries

FLEXIBEL GRID

GRIDDING THE 960

+

target ÷ context = result

220px

960px

220 ÷ 960 = 0.22916

= 22.916%

FLEXIBLA BILDER & MEDIA

img {

max-width: 100%;

}

MEDIA QUERIES

width

height

device-width

device-height

orientation

aspect-ratio

device-aspect-ratio

color

color-index

monochrome

resolution

scan

grid

320px

480px

768px

1024px

1200px

Små skärmar - portrait läge

Små skärmar - landscape läge

iPad - portrait läge

iPad / Laptop - landscape läge

Widescreen

Flexibla bilderFlexibel grid Media queries

Hur man gör ...

Fixa din viewport!

Lägg till Media Queries

Zoom-buggen i iPhone

Inte så!

Inte så!

Gamla versioner av Internet Explorer

Håll koll på vad som laddas ner

Safari på bred skärm

Mobile Safari på iPhone

Safari på bred skärm

Mobile Safari på iPhone

Optimera bilder

RESPONSIVE DESIGNby

http://en.wikipedia.org/wiki/Canons_of_page_construction

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility.

— John AllsoppA dao of web design

FLEXIBELT

Stora variationer på skärmupplösningar

Olika enheter med olika egenskaper

Kontext och användning

RESPONSIVE & ADAPTIVELAYOUT

Text

http://www.macdonaldhotels.co.uk/

http://www.informationarchitects.jp

Prioritet: 1Eftersom en allt större variation i skärm- och fönsterstorlekar finns bland användare är den allra bästa lösningen att skapa en layout som är flexibel och kan anpassa sig efter användarens förutsättningar och önskemål. Undvik att göra en webbplats med låst layout.

— 24-timmarswebbenSkapa en design som fungerar oavsett fönster- och skärmstorlek

RESPONSIVA VERKTYG

Rendering av typsnitt skiljer sig från webbläsare och andra operativsystemSvårt med typografiska ändringar på en större skalaOlikheter i webbläsareOmöjligt att visualisera en responsiv / fluid layout

CSS

http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic

dowebsitesneedtolookexactlythesameineverybrowser.com/

PRESENTERARESPONSIV DESIGN

Don't get set into one form, adapt it and build your own, and let it grow, be like water.

Empty your mind, be formless, shapeless — like water.

Now you put water in a cup, it becomes the cup;

You put water into a bottle it becomes the bottle;

You put it in a teapot it becomes the teapot.

Now water can flow or it can crash.

…Be water, my friend.

TACK FÖR OSS!

Henrik Ekelöf@henrikekelof

Robert Piirainen@robertpiira