Downloaded 376 times
Uploaded byLuke Brooker
Responsive Design & Mobile First
The document discusses the concept of responsive design and mobile first approaches to web design. It notes that as mobile usage increases, web design needs to adapt to various screen sizes through flexible grids, flexible images, and media queries. A mobile first approach focuses on designing for the constraints of mobile devices first before expanding the design to larger screens, in order to prioritize usability on most common devices. This drives innovation through solutions that leverage capabilities unique to mobile like touch and location services.
More Related Content
![Responsive Design & Beyond [Code & Creativity Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codecreativityworkshop1-140506164731-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Responsive Design & Mobile First
Responsive Design & Mobile First
- 1. Responsive Design & Mobile First @lukebrooker
- 2. There is a newmovement on the web
- 3.
- 4. We assume everything canbe served on a 960px wide canvas
- 5. We are not printdesigners...
- 6.
- 7. “Today, anything that’sfixed and unresponsive isn’t web design, it’s something else. If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else. Web design is responsive design, Responsive Web Design is web design, done right.” Andy Clarke
- 8. We need tomove from prescribed design to responsive design.
- 9.
- 10. The growth ofthe mobile web has out paced the desktop web 8x
- 11.
- 12. 1 in 5 usethe mobile Internet everyday
- 13. The average timespent a day on smartphones is more than 30mins
- 14. In the next4 years mobile Internet usage will increase by a factor of 26
- 15.
- 16. Responsive design is notmobile design
- 17. About 87,000 iPads aresold a day
- 18. Add to this- 170,000 iPhones bought a day and 300,000 android devices activated a day
- 19.
- 20. We have more screensto design for than ever 320 X 768 1280 480 X X 1024 800 1920 X 1200
- 21.
- 22. Responsive Design is flexibledevice independent design for the web
- 23. OR... A flexible grid(with flexible images) that incorporates media queries to create a responsive, adaptive layout. Ethan Marcotte
- 24.
- 25. 1. Flexible Grids Fonts body{ font-size: 100%; }
- 26. 1. Flexible Grids Fonts h2{ font-size: 28px; } p { font-size: 14px; }
- 27. 1. Flexible Grids Fonts...Becomes h2 { font-size: 1.75em; /* 28px/16px */ } p { font-size: .875em; /* 14px/16px */ }
- 28. 1. Flexible Grids Layout section{ width: 960px; }
- 29. 1. Flexible Grids Layout...Becomes section { max-width: 960px; }
- 30. 1. Flexible Grids Layout figure{ float: left; width: 300px; margin: 0 10px; }
- 31. 1. Flexible Grids Layout...Becomes figure { float: left; width: 31.25%; /* 300px / 960px */ margin: 0 1.0416667; }
- 32.
- 33.
- 34. 2. Flexible Images img{ max-width: 100%; }
- 35. 2. Flexible Images img, video, object{ max-width: 100%; }
- 36. 2. Flexible Images Issue#1: IE6 Bug img, video, object { width: 100%; }
- 37. 2. Flexible Images Issue#2: Windows Image Resizing Ethan Marcottes Fix http://unstoppablerobotninja.com/entry/fluid-images
- 38. 2. Flexible Images Issue#3: Bandwidth Filament Fix http://github.com/filamentgroup/responsive-images
- 39.
- 40. 3. Media Queries @mediascreen and (max-width: 320px;) { ... } @media screen and (min-width: 800px;) { ... }
- 41. 3. Media Queries Issue#1: Browser Compatability No IE 8,7,6 No Safari 2 No Firefox 1,2 So.. http://code.google.com/p/css3-mediaqueries-js
- 42. 3. Media Queries Issue#2: Mobile Resizing <meta name=”viewport” content”width=device-width: initial-scale=1.0”>
- 43. After all thisour site will adapt to different sizes
- 48. So where does mobilefirst come in?
- 49. What is greatabout mobile websites?
- 50.
- 53.
- 54. Designing your sitefor mobile... first. yep thats it.
- 55.
- 56. Reasons to designfor mobile first
- 57. 1. Growth Opportunity 2.Constraints Focus 3. Capabilities Innovation
- 58. 1. Growth Opportunity Everyoneis on mobile
- 59.
- 60. 2. Constraints Focus "Designis the process of gradually applying constraints until an elegant solution remains"
- 61. 2. Constraints Focus • Screen Size - 320 x 480
- 62. 2. Constraints Focus • Screen Size - 320 x 480 • No Hover
- 63. 2. Constraints Focus • Screen Size - 320 x 480 • No Hover • Speed
- 64. 2. Constraints Focus • Screen Size - 320 x 480 • No Hover • Speed • Context
- 65.
- 66. 3. Capabilities Innovation • Touch
- 67. 3. Capabilities Innovation • Touch • Location
- 68. 3. Capabilities Innovation • Touch • Location • Orientation
- 69. 3. Capabilities Innovation • Touch • Location • Orientation • Voice
- 70. 3. Capabilities Innovation • Touch • Location • Orientation • Voice • And more
- 71.
- 72. It's not yourstandard workflow
- 73.
- 74.
- 75.
- 76. Frameworks 320 and Up- Andy Clarke http://stuffandnonsense.co.uk/projects/320andup/
- 77.
- 78. Thank You @lukebrooker
Editor's Notes
- #2 \n
- #3 \n
- #4 \n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 \n
- #20 \n
- #21 \n
- #22 \n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 \n
- #33 \n
- #34 \n
- #35 \n
- #36 \n
- #37 \n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 \n
- #47 \n
- #48 \n
- #49 \n
- #50 \n
- #51 \n
- #52 \n
- #53 \n
- #54 \n
- #55 \n
- #56 \n
- #57 \n
- #58 \n
- #59 \n
- #60 \n
- #61 \n
- #62 \n
- #63 \n
- #64 \n
- #65 \n
- #66 \n
- #67 \n
- #68 \n
- #69 \n
- #70 \n
- #71 \n
- #72 \n
- #73 \n
- #74 \n
- #75 \n
- #76 \n
- #77 \n
- #78 \n
- #79 \n