Downloaded 10 times
Uploaded byFITC
Things To Keep In Mind When Working In The World Of Responsive Design
The document discusses the principles of responsive web design (RWD), introduced by Ethan Marcotte, highlighting key elements like fluid grids, flexible images, and media queries. It emphasizes the importance of adapting designs for various devices and encourages the use of preprocessors and modular CSS for maintaining large projects. The document concludes with reflections on the evolving landscape of web design and the necessity of creating user-friendly experiences across all platforms.
More Related Content
Similar to Things To Keep In Mind When Working In The World Of Responsive Design
![Number_Guessing_Game_Dsbsbssbzboc[1].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/numberguessinggamedoc1-251206215042-a076fc05-thumbnail.jpg?width=640&height=640&fit=bounds)
Things To Keep In Mind When Working In The World Of Responsive Design
- 1. this is aslide
- 2. we will seelots of them
- 3. things to keepin mind when working in the world of responsive design
- 4.
- 5. booklets + website+ etc
- 6.
- 7.
- 8.
- 9. the hype isreal
- 10. slow down thehype train
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42. “… a differentway of thinking”
- 43.
- 44.
- 45. features + tools+ tips + pointers
- 46.
- 47.
- 48.
- 49.
- 50.
- 52. no longer about individualelements
- 53.
- 54.
- 55.
- 56. flow of flexchildren
- 57.
- 58.
- 59.
- 60. “what width doesx need to be?”
- 61. “what width/ratio doesx need to be relative to its siblings?”
- 63.
- 64.
- 65. how do theseitems flow together
- 66.
- 69.
- 70.
- 71.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87. %, em, rem,vh, vw
- 88.
- 89.
- 90. h1 { font-size: 70px; } p.large{ font-size: 16px; }
- 91. h1 { font-size: 70px; } p.large{ font-size: 16px; } @media query { h1 { font-size: 50px; } p.large { font-size: 13px; } }
- 92. html { font-size: 14px; } h1{ font-size: 3rem; } p.large { font-size: 1.2rem; }
- 93. html { font-size: 14px; } h1{ font-size: 3rem; } p.large { font-size: 1.2rem; } @media query { html { font-size: 10px; } }
- 94.
- 95.
- 96.
- 97.
- 98. <link rel="stylesheet" type="text/css"media="screen and (min-device-width: 480px)" href="small.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-device-width: 760px)" href="medium.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-device-width: 960px)" href="big.css" />
- 99. @media screen andmin-width(480px) { //css } @media screen and min-width(760px) { //css } @media screen and min-width(960px) { //css }
- 100. if you noticeyourself doing this:
- 101. @media screen andmin-width(480px) { //css } @media screen and min-width(490px) { //css } @media screen and min-width(530px) { //css }
- 102.
- 103. avoid fixed measurements+ absolute positioning + magic numbers
- 104.
- 105.
- 106.
- 108.
- 109.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118. @mixin breakpoint($point) { @if$point == desktop { @media (min-width: 70em) { @content ; } } @else if $point == tablet { @media (min-width: 50em) { @content ; } } @else if $point == mobile { @media (max-width: 37.5em) { @content ; } } }
- 119. .something { @include breakpoint(mobile){ padding: 10px; } }
- 120.
- 121.
- 122. active discussion and propermaintenance
- 123.
- 124. separate your cssinto ‘objects’ and ‘concerns’
- 125. // main.scss @import ‘base’; @import‘typography’; @import ‘wrapper’; @import ‘buttons’; @import ‘tiles’;
- 126. // _base.scss body { margin:0; } * { box-sizing: border-box; }
- 127. // _tiles.scss .tile { padding:30px; @include breakpoint(mobile) { padding: 10px; } }
- 128. keeps all coderelated to a module together
- 129. helpers + utilityclasses
- 130.
- 131. // _helpers.scss .h-textCenter { text-align:center; } .h-textCenter-mobile { @include breakpoint(mobile) { text-align: center; } }
- 132.
- 133.
- 134.
- 135. better reusable and maintainableresponsive code
- 136.
- 137.
- 138.
- 139.
- 140. iPad, iPhone, acouple others
- 141.
- 142.
- 143. Hundreds of devicesizes + pixel density
- 144.
- 145. HD TV +IE/Edge + Kinect
- 146.
- 147.
- 148. never leave afeature unusable on supported platforms
- 149.
- 150. media queries +device detection + feature detection
- 154.
- 155.
- 159.
- 162. do you evenneed one?
- 163.
- 164. hiding menu items reducevisibility and impact ux
- 170. don’t just makethings fit
- 171.
- 172. rwd is moreimportant than ever
- 173.
- 174.
- 175.
- 176.
- 177.
- 178.
- 179. algorithm updates thatwill have a “significant impact” on mobile search results worldwide for mobile searchers
- 181.
- 182.
- 183.
- 184.
- 188.
- 189.
- 191.
- 195.
- 196. looking ahead +things i’m excited about
- 197. more amp +instant articles
- 198.
- 199.
- 200.
- 201.
- 202.
- 204.
- 205.
- 206.
- 207.
- 208.
- 209.
- 210.
- 212.
- 213.
- 214.
- 215.
- 216.
- 217.
- 219.
- 220.
- 221.
- 222. “Responsive Web Designis an approach to creating websites that can respond to all known web browsing devices, with content delivery and UI interaction optimized to the greatest degree possible for all visitors.”
- 223.
- 224.