Mixd RWD Workshop
-
Upload
aaroncthomas -
Category
Documents
-
view
93 -
download
0
description
Transcript of Mixd RWD Workshop
![Page 1: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/1.jpg)
DESIGNING FOR DEVICESAn Introduction to Responsive Web Design
http://www.flickr.com/photos/brad_frost/7387824246/
![Page 2: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/2.jpg)
Who are we?
Aaron@_acthomas
Jason@thecodezombie
![Page 3: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/3.jpg)
Who are we?
![Page 4: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/4.jpg)
Who are we?
![Page 5: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/5.jpg)
Who are we?
![Page 6: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/6.jpg)
Who are we?
![Page 7: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/7.jpg)
Who are we?
![Page 8: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/8.jpg)
What is Responsive Web Design?
http://www.flickr.com/photos/brad_frost/7387759388/
![Page 9: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/9.jpg)
What is Responsive Web Design?
“A responsively designed website is flexible to the conditions in which it will be viewed, in order to offer every user an optimised experience.”
– The Mixd definition
![Page 10: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/10.jpg)
What is Responsive Web Design?
![Page 11: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/11.jpg)
What is Responsive Web Design?
![Page 12: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/12.jpg)
Where it all started
http://www.flickr.com/photos/superpope/4835946664
![Page 13: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/13.jpg)
Where it all started
![Page 14: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/14.jpg)
Five Key Principles
Be Device Agnostic
Be fluid
Build Mobile first
Be Resolution independent
Optimise, optimise, optimise
![Page 15: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/15.jpg)
Device Agnostic
http://www.flickr.com/photos/brad_frost/7387824246/
![Page 16: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/16.jpg)
Device Agnostic
Screen size? Resolution?
Connection speed?
Touch enabled? JavaScript?
![Page 17: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/17.jpg)
The Web is Fluid
http://www.flickr.com/photos/ixdoslo/4947697567/
![Page 18: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/18.jpg)
The Web is Fluid
http://www.flickr.com/photos/ixdoslo/4947697567/
“The web has always been fluid; we’ve just wasted a good number of years forcing fixed pixels onto an inherently responsive framework. The time to stop is now.
– Elliot Jay Stocks, 2013
![Page 19: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/19.jpg)
The Web is Fluid
px%emrem
![Page 20: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/20.jpg)
Mobile First
http://www.flickr.com/photos/brad_frost/7387767300
![Page 21: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/21.jpg)
Mobile First
![Page 22: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/22.jpg)
Mobile First
O N E W E B
![Page 23: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/23.jpg)
Mobile First
![Page 24: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/24.jpg)
Resolution Independence
![Page 25: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/25.jpg)
Resolution Independence
![Page 26: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/26.jpg)
Optimisation
![Page 27: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/27.jpg)
Optimisation
![Page 28: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/28.jpg)
Five Key Principles
Be Device Agnostic
Be fluid
Build Mobile first
Be Resolution independent
Optimise, optimise, optimise
![Page 29: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/29.jpg)
Design Process
![Page 30: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/30.jpg)
Design Process
![Page 31: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/31.jpg)
Design Process
http://www.flickr.com/photos/brad_frost/7387721458/
![Page 32: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/32.jpg)
Design Process
“designers waste a shitload of time creating fully fleshed-out comps of what a website could look like [...] It’s an increasingly-pathetic process that makes less and less sense in this multi-device age.”
- Brad Frost, 2013
![Page 33: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/33.jpg)
Design Process
![Page 34: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/34.jpg)
Design Process
![Page 35: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/35.jpg)
Design Process
![Page 36: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/36.jpg)
Design Process
![Page 37: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/37.jpg)
Design Process
![Page 38: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/38.jpg)
Working responsively
![Page 39: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/39.jpg)
Working responsively
![Page 40: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/40.jpg)
Working responsively
![Page 41: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/41.jpg)
Working responsively
![Page 42: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/42.jpg)
Working responsively
![Page 43: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/43.jpg)
Working responsively
![Page 44: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/44.jpg)
Working responsively
![Page 45: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/45.jpg)
Working responsively
![Page 46: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/46.jpg)
Working responsively
![Page 47: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/47.jpg)
Working responsively
![Page 48: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/48.jpg)
Working responsively
![Page 49: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/49.jpg)
Working responsively
![Page 50: Mixd RWD Workshop](https://reader033.fdocuments.net/reader033/viewer/2022061214/549aa9a5b4795938098b457d/html5/thumbnails/50.jpg)
Let’s start!