Responsive Design
-
Upload
sara-cannon -
Category
Technology
-
view
100.228 -
download
1
description
Transcript of Responsive Design
![Page 1: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/1.jpg)
RESPONSIVE DESIGN
![Page 2: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/2.jpg)
SARA CANNONArtist, Designer, & WordPress Developer In Birmingham, AL
Co-founder / Creative DirectorRange
sara-cannon.com @saracannon
![Page 3: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/3.jpg)
THE FUTURE OF MOBILE
![Page 4: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/4.jpg)
THE FUTURE OF MOBILETHE WEB
THE FUTURE OF MOBILETHE FUTURE OF MOBILETHE FUTURE OF MOBILETHE FUTURE OF MOBILE
![Page 5: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/5.jpg)
2015IN THE YEAR
2015
![Page 6: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/6.jpg)
INTERNATIONAL DATA CORPORATION (IDC)http://www.idc.com/getdoc.jsp?containerId=prUS23028711
The total number of people using the web on mobile devices is set to surpass desktops by 2015.
![Page 7: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/7.jpg)
DESKTOP MOBILE
2007 20152009 20132011
![Page 8: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/8.jpg)
DESKTOP MOBILE
2007 20152009 20132011
![Page 9: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/9.jpg)
THE MOBILE WEB
![Page 10: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/10.jpg)
THE WEB
![Page 11: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/11.jpg)
WHAT IS THE MOBILE WEB?
![Page 12: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/12.jpg)
ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf
![Page 13: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/13.jpg)
MOBILE SHOULD NEVER BE AN
AFTERTHOUGHT
![Page 14: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/14.jpg)
![Page 15: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/15.jpg)
CONTENT
![Page 16: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/16.jpg)
WHAT ABOUT SEPARATE MOBILE SITES?
![Page 17: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/17.jpg)
m.facebook.com
![Page 18: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/18.jpg)
WHAT ABOUT MOBILE APPS?
![Page 19: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/19.jpg)
![Page 20: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/20.jpg)
WHAT ABOUT MOBILE THEMES?
![Page 21: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/21.jpg)
![Page 22: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/22.jpg)
Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience.
““
- ETHAN MARCOTTE
alistapart.com/articles/responsive-web-design
![Page 23: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/23.jpg)
RESPONSIVE WEB DESIGN
![Page 24: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/24.jpg)
HicksDesign.co.uk
![Page 25: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/25.jpg)
hicksdesign.co.uk
![Page 26: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/26.jpg)
hicksdesign.co.ukhicksdesign.co.ukhicksdesign.co.uk
![Page 27: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/27.jpg)
hicksdesign.co.uk
![Page 28: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/28.jpg)
hicksdesign.co.uk
![Page 29: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/29.jpg)
bostonglobe.com
![Page 30: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/30.jpg)
bostonglobe.combostonglobe.combostonglobe.com
![Page 31: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/31.jpg)
bostonglobe.com
![Page 32: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/32.jpg)
bostonglobe.com
![Page 33: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/33.jpg)
pelicanfly.co.uk
![Page 34: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/34.jpg)
pelicanfly.co.ukpelicanfly.co.ukpelicanfly.co.uk
![Page 35: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/35.jpg)
pelicanfly.co.uk
![Page 36: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/36.jpg)
pelicanfly.co.uk
![Page 37: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/37.jpg)
morehazards.com
![Page 38: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/38.jpg)
morehazards.commorehazards.commorehazards.com
![Page 39: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/39.jpg)
morehazards.com
![Page 40: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/40.jpg)
morehazards.com
![Page 41: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/41.jpg)
foodsense.is
![Page 42: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/42.jpg)
foodsense.isfoodsense.isfoodsense.is
![Page 43: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/43.jpg)
foodsense.is
![Page 44: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/44.jpg)
foodsense.is
![Page 45: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/45.jpg)
HOW DO WE BECOME RESPONSIVE?
![Page 46: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/46.jpg)
1. ADAPTIVE GRIDS, IMAGES, & MEDIA2. MEDIA QUERIES
3. TESTING / CRYING TWEAKING4. ?????5. PROFIT!
![Page 47: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/47.jpg)
1. ADAPTIVE GRIDS, IMAGES, & MEDIA
![Page 48: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/48.jpg)
FLEXIBLE GRIDS
alistapart.com/articlesfluidgrids
by Ethan Marcotte
![Page 49: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/49.jpg)
GRID FRAMEWORKS
lessframework.com columnal.com
![Page 50: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/50.jpg)
GRID FRAMEWORKS
cssgrid.net getskeleton.com
![Page 51: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/51.jpg)
![Page 52: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/52.jpg)
%
![Page 53: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/53.jpg)
![Page 54: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/54.jpg)
![Page 55: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/55.jpg)
TARGET ÷ CONTEXT = RESULT
940
720 220
![Page 56: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/56.jpg)
TARGET ÷ CONTEXT = RESULT
940
720 220
76.5957447% 23.40425535%
100%
![Page 57: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/57.jpg)
![Page 58: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/58.jpg)
![Page 59: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/59.jpg)
FLEXIBLE MEDIA
![Page 60: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/60.jpg)
![Page 61: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/61.jpg)
- LANCE WILLETT, WORDPRESS.COM
The toughest challenge in
implementing the responsive bits was fluid media.
The toughest challenge in The toughest challenge in The toughest challenge in The toughest challenge in
implementing the responsive implementing the responsive “
![Page 62: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/62.jpg)
MEDIA SOLUTIONS
fitvidjs.com netmagazine.com/tutorials/create-fluid-width-videos
by Chris Coyier
![Page 63: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/63.jpg)
MEDIA SOLUTIONS
fittext.jsflex.madebymufffin.com
![Page 64: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/64.jpg)
FLEXIBLE IMAGES
![Page 65: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/65.jpg)
MAX WIDTH: 100%
![Page 66: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/66.jpg)
![Page 67: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/67.jpg)
ADAPTIVE IMAGES
![Page 68: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/68.jpg)
filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing
![Page 69: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/69.jpg)
adaptive-images.com
![Page 70: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/70.jpg)
viewportindustries.com/blog/automatic-responsive-images-in-wordpress
![Page 71: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/71.jpg)
2G IS THE NEW DIAL-UP
![Page 72: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/72.jpg)
DESKTOP MOBILE
2007 20152009 20132011
![Page 73: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/73.jpg)
THE MOBILE WEB
![Page 74: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/74.jpg)
CON
NEC
TION
SPE
ED
IMAGE SIZE
![Page 75: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/75.jpg)
CON
NEC
TION
SPE
ED
IMAGE SIZE
![Page 76: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/76.jpg)
image by Geoff Teehan
![Page 77: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/77.jpg)
EVERYTHING IS A TRADEOFF
![Page 78: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/78.jpg)
retina.js
![Page 79: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/79.jpg)
NETWORK LINK CONDITIONER
![Page 80: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/80.jpg)
2. MEDIA QUERIES
![Page 81: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/81.jpg)
![Page 82: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/82.jpg)
CSS3-MEDIAQUERIES.JScode.google.com/p/css3-mediaqueries-js
css3-mediaqueries.js is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries
![Page 83: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/83.jpg)
MOBILE FIRST
![Page 84: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/84.jpg)
3. TESTING / CRYING / TWEAKING
![Page 85: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/85.jpg)
![Page 86: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/86.jpg)
![Page 87: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/87.jpg)
![Page 88: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/88.jpg)
![Page 89: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/89.jpg)
![Page 90: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/90.jpg)
LIMIT YOUR RESOURCES
![Page 91: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/91.jpg)
EVERYTHING IS A TRADEOFF
![Page 92: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/92.jpg)
RESOURCES
![Page 93: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/93.jpg)
alistapart.com/articles/fluidgrids
![Page 94: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/94.jpg)
alistapart.com/articles/responsive-web-design
![Page 95: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/95.jpg)
alistapart.com/articles/responsive-web-design
![Page 96: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/96.jpg)
unstoppablerobotninja.com/entry/fluid-images/
![Page 97: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/97.jpg)
mediaqueri.es
![Page 98: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/98.jpg)
smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies
![Page 99: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/99.jpg)
zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/
![Page 100: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/100.jpg)
palantir.net/blog/scalable-navigation-patterns-responsive-web-design
![Page 101: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/101.jpg)
designshack.net/articles/css/sass-and-media-queries-what-you-can-and-cant-do
![Page 102: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/102.jpg)
responsive.is
![Page 103: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/103.jpg)
ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf
![Page 104: Responsive Design](https://reader037.fdocuments.in/reader037/viewer/2022110115/54c701e44a79597c678b4594/html5/thumbnails/104.jpg)
Our work is never over.Our work is never over.“- DAFT PUNK