Responsive web design
-
Upload
henrik-ekeloef -
Category
Economy & Finance
-
view
2.826 -
download
0
description
Transcript of Responsive web design
![Page 1: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/1.jpg)
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.
![Page 2: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/2.jpg)
Henrik Ekelöf
![Page 3: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/3.jpg)
Robert Piirainen
![Page 4: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/4.jpg)
RESPONSIVE WEB DESIGN
![Page 5: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/5.jpg)
VAD DET INTE ÄR:— ett nytt häftigt sätt att bygga
mobilwebb
![Page 6: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/6.jpg)
FAKTUM ÄR:
![Page 7: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/7.jpg)
Det finns ingen mobilwebb
![Page 8: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/8.jpg)
Det finns inte en specifik webb för mobila enheter.
Allt är samma webb.
![Page 9: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/9.jpg)
![Page 10: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/10.jpg)
640 x 480 800 x 600
1024 x 768
![Page 11: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/11.jpg)
![Page 12: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/12.jpg)
1024 x 768
320x
480
![Page 13: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/13.jpg)
1024 x 768320x
480
![Page 14: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/14.jpg)
![Page 15: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/15.jpg)
1024 3207681024 768 320
![Page 16: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/16.jpg)
![Page 17: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/17.jpg)
![Page 18: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/18.jpg)
![Page 19: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/19.jpg)
![Page 20: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/20.jpg)
![Page 21: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/21.jpg)
![Page 22: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/22.jpg)
![Page 23: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/23.jpg)
![Page 24: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/24.jpg)
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
![Page 25: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/25.jpg)
![Page 26: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/26.jpg)
Skapa en sammanhängande upplevelse för alla,
oberoende enhet eller skärmstorlek.
![Page 27: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/27.jpg)
TEKNIKER?
![Page 28: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/28.jpg)
Flexibla bilderFlexibel grid Media queries
![Page 29: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/29.jpg)
FLEXIBEL GRID
![Page 30: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/30.jpg)
![Page 31: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/31.jpg)
GRIDDING THE 960
![Page 32: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/32.jpg)
+
![Page 33: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/33.jpg)
target ÷ context = result
220px
960px
220 ÷ 960 = 0.22916
= 22.916%
![Page 34: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/34.jpg)
FLEXIBLA BILDER & MEDIA
![Page 35: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/35.jpg)
img {
max-width: 100%;
}
![Page 36: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/36.jpg)
MEDIA QUERIES
![Page 37: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/37.jpg)
![Page 38: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/38.jpg)
width
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid
![Page 39: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/39.jpg)
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
![Page 40: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/40.jpg)
Flexibla bilderFlexibel grid Media queries
![Page 41: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/41.jpg)
Hur man gör ...
![Page 42: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/42.jpg)
Fixa din viewport!
![Page 43: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/43.jpg)
![Page 44: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/44.jpg)
![Page 45: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/45.jpg)
![Page 46: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/46.jpg)
![Page 47: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/47.jpg)
![Page 48: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/48.jpg)
![Page 49: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/49.jpg)
Lägg till Media Queries
![Page 50: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/50.jpg)
![Page 51: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/51.jpg)
![Page 52: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/52.jpg)
![Page 53: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/53.jpg)
![Page 54: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/54.jpg)
![Page 55: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/55.jpg)
![Page 56: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/56.jpg)
Zoom-buggen i iPhone
![Page 57: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/57.jpg)
![Page 58: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/58.jpg)
Inte så!
![Page 59: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/59.jpg)
Inte så!
![Page 60: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/60.jpg)
![Page 61: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/61.jpg)
Gamla versioner av Internet Explorer
![Page 62: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/62.jpg)
![Page 63: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/63.jpg)
![Page 64: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/64.jpg)
![Page 65: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/65.jpg)
![Page 66: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/66.jpg)
![Page 67: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/67.jpg)
![Page 68: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/68.jpg)
Håll koll på vad som laddas ner
![Page 69: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/69.jpg)
![Page 70: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/70.jpg)
![Page 71: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/71.jpg)
Safari på bred skärm
Mobile Safari på iPhone
![Page 72: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/72.jpg)
![Page 73: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/73.jpg)
![Page 74: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/74.jpg)
Safari på bred skärm
Mobile Safari på iPhone
![Page 75: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/75.jpg)
Optimera bilder
![Page 76: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/76.jpg)
![Page 77: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/77.jpg)
![Page 78: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/78.jpg)
![Page 79: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/79.jpg)
![Page 80: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/80.jpg)
![Page 81: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/81.jpg)
![Page 82: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/82.jpg)
![Page 83: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/83.jpg)
![Page 84: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/84.jpg)
![Page 85: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/85.jpg)
![Page 86: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/86.jpg)
![Page 87: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/87.jpg)
![Page 88: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/88.jpg)
![Page 89: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/89.jpg)
![Page 90: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/90.jpg)
RESPONSIVE DESIGNby
![Page 91: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/91.jpg)
http://en.wikipedia.org/wiki/Canons_of_page_construction
![Page 92: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/92.jpg)
![Page 93: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/93.jpg)
![Page 94: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/94.jpg)
![Page 95: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/95.jpg)
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
![Page 96: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/96.jpg)
FLEXIBELT
![Page 97: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/97.jpg)
Stora variationer på skärmupplösningar
Olika enheter med olika egenskaper
Kontext och användning
![Page 98: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/98.jpg)
RESPONSIVE & ADAPTIVELAYOUT
![Page 99: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/99.jpg)
Text
http://www.macdonaldhotels.co.uk/
![Page 100: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/100.jpg)
http://www.informationarchitects.jp
![Page 101: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/101.jpg)
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
![Page 102: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/102.jpg)
RESPONSIVA VERKTYG
![Page 103: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/103.jpg)
![Page 104: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/104.jpg)
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
![Page 105: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/105.jpg)
![Page 106: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/106.jpg)
![Page 107: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/107.jpg)
CSS
![Page 108: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/108.jpg)
http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic
![Page 109: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/109.jpg)
dowebsitesneedtolookexactlythesameineverybrowser.com/
![Page 110: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/110.jpg)
PRESENTERARESPONSIV DESIGN
![Page 111: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/111.jpg)
![Page 112: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/112.jpg)
![Page 113: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/113.jpg)
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!
![Page 114: Responsive web design](https://reader036.fdocuments.in/reader036/viewer/2022070315/5553a160b4c9054e0a8b58b6/html5/thumbnails/114.jpg)
Henrik Ekelöf@henrikekelof
Robert Piirainen@robertpiira