Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Things To Keep In Mind When Working In The World Of Responsive Design

436 views

Published on

Things To Keep In Mind When Working In The World Of Responsive Design

Haris Mahmood

Overview

The term ‘responsive design’ has evolved over the past years to mean more than just fitting a site onto your phone’s screen. Responsiveness now caters to a wide range of needs and concerns, which isn’t always clear or easy to navigate. In this talk, we’ll explore multiple responsive concepts and techniques, their pitfalls and limitations, and explore a range of solutions, tips and tricks to help in the ways of responsive design.

Objective

To explore various concepts and techniques, pitfalls and limitations, and a range of solutions, tips and tricks revolving around the world of responsive design.

Target Audience

Web designers, UX designers, front-end developers

Five Things Audience Members Will Learn

The evolution of responsive design
What responsive design means today
A wide range of techniques used to achieve responsive design
The limitations and pitfalls of responsive design
Where the future of responsive design is headed

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Things To Keep In Mind When Working In The World Of Responsive Design

  1. 1. this is a slide
  2. 2. we will see lots of them
  3. 3. things to keep in mind when working in the world of responsive design
  4. 4. firstly
  5. 5. booklets + website + etc
  6. 6. long a** title
  7. 7. haris mahmood @harismahmood89
  8. 8. excited
  9. 9. the hype is real
  10. 10. slow down the hype train
  11. 11. $#!+
  12. 12. shopify
  13. 13. hackeryou
  14. 14. ladies learning code
  15. 15. freelancer meetharis.com
  16. 16. focuspocus.io
  17. 17. devtoast.io
  18. 18. repitsupply.com
  19. 19. repitsupply.com
  20. 20. haris mahmood @harismahmood89
  21. 21. kingpin @harismahmood89
  22. 22. emma watson
  23. 23. our story starts
  24. 24. 300 BC
  25. 25. table layouts
  26. 26. time went by
  27. 27. mobile browsers
  28. 28. website.com
  29. 29. m.website.com
  30. 30. ibm
  31. 31. 2010
  32. 32. ethan marcotte
  33. 33. responsive web design
  34. 34. three main features
  35. 35. fluid grids
  36. 36. flexible images
  37. 37. media queries
  38. 38. technical ingredients of rwd
  39. 39. most importantly
  40. 40. “… a different way of thinking”
  41. 41. 6 years later
  42. 42. continuously changing landscape
  43. 43. features + tools + tips + pointers
  44. 44. I
  45. 45. css layouts
  46. 46. floats
  47. 47. focus on individual elements
  48. 48. flexbox
  49. 49. no longer about individual elements
  50. 50. flow
  51. 51. container
  52. 52. flow of elements
  53. 53. flow of flex children
  54. 54. direction, alignment, etc
  55. 55. cohesive whole
  56. 56. sizing
  57. 57. “what width does x need to be?”
  58. 58. “what width/ratio does x need to be relative to its siblings?”
  59. 59. width: 66% width: 33%
  60. 60. flex-grow: 2 flex-grow: 1
  61. 61. how do these items flow together
  62. 62. common layout example
  63. 63. absolute positioning
  64. 64. absolute position margin-top / padding-top
  65. 65. yuck.
  66. 66. flexbox
  67. 67. flex-direction: row-reverseflex-direction: row
  68. 68. flex-direction: row-reverse
  69. 69. display: inline-block
  70. 70. inline-blockinline-block
  71. 71. direction: rtlinline-blockinline-block
  72. 72. control content flow
  73. 73. II
  74. 74. sizing + measurements
  75. 75. px
  76. 76. fixed pixel based layouts
  77. 77. percentage based
  78. 78. width: 100%; max-width: 1200px;
  79. 79. push further
  80. 80. %, em, rem, vh, vw
  81. 81. foundation 5
  82. 82. bootstrap 4
  83. 83. h1 { font-size: 70px; } p.large { font-size: 16px; }
  84. 84. h1 { font-size: 70px; } p.large { font-size: 16px; } @media query { h1 { font-size: 50px; } p.large { font-size: 13px; } }
  85. 85. html { font-size: 14px; } h1 { font-size: 3rem; } p.large { font-size: 1.2rem; }
  86. 86. html { font-size: 14px; } h1 { font-size: 3rem; } p.large { font-size: 1.2rem; } @media query { html { font-size: 10px; } }
  87. 87. explore + implement
  88. 88. rip px
  89. 89. III
  90. 90. media queries
  91. 91. <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" />
  92. 92. @media screen and min-width(480px) { //css } @media screen and min-width(760px) { //css } @media screen and min-width(960px) { //css }
  93. 93. if you notice yourself doing this:
  94. 94. @media screen and min-width(480px) { //css } @media screen and min-width(490px) { //css } @media screen and min-width(530px) { //css }
  95. 95. you’re doing something wrong
  96. 96. avoid fixed measurements + absolute positioning + magic numbers
  97. 97. width: 43px;
  98. 98. width: 43px;
  99. 99. shitty magic
  100. 100. IV
  101. 101. rwd at scale
  102. 102. maintain + organize
  103. 103. large projects
  104. 104. large teams
  105. 105. two recommendations
  106. 106. preprocessed css
  107. 107. sass, less, stylus, postcss
  108. 108. breakpoint mixin
  109. 109. @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 ; } } }
  110. 110. .something { @include breakpoint(mobile) { padding: 10px; } }
  111. 111. defined set of breakpoints
  112. 112. ensures consistency
  113. 113. active discussion and proper maintenance
  114. 114. modular css
  115. 115. separate your css into ‘objects’ and ‘concerns’
  116. 116. // main.scss @import ‘base’; @import ‘typography’; @import ‘wrapper’; @import ‘buttons’; @import ‘tiles’;
  117. 117. // _base.scss body { margin: 0; } * { box-sizing: border-box; }
  118. 118. // _tiles.scss .tile { padding: 30px; @include breakpoint(mobile) { padding: 10px; } }
  119. 119. keeps all code related to a module together
  120. 120. helpers + utility classes
  121. 121. @import ‘helpers’;
  122. 122. // _helpers.scss .h-textCenter { text-align: center; } .h-textCenter-mobile { @include breakpoint(mobile) { text-align: center; } }
  123. 123. oocss + bem
  124. 124. harry roberts
  125. 125. shopify
  126. 126. better reusable and maintainable responsive code
  127. 127. really sexy code
  128. 128. oh. you bet.
  129. 129. V
  130. 130. “desktop” vs “mobile”
  131. 131. iPad, iPhone, a couple others
  132. 132. no longer sufficient
  133. 133. devices + interactions
  134. 134. Hundreds of device sizes + pixel density
  135. 135. iPhone VS iPhone
  136. 136. HD TV + IE/Edge + Kinect
  137. 137. apple watch
  138. 138. apple watch
  139. 139. never leave a feature unusable on supported platforms
  140. 140. hover states
  141. 141. media queries + device detection + feature detection
  142. 142. google’s material design
  143. 143. facebook app
  144. 144. navigation structures
  145. 145. do you even need one?
  146. 146. seriously.
  147. 147. hiding menu items reduce visibility and impact ux
  148. 148. don’t just make things fit
  149. 149. purpose + reason
  150. 150. rwd is more important than ever
  151. 151. mobile > desktop
  152. 152. mediocre experiences on mobile
  153. 153. watered down versions
  154. 154. no longer sufficient
  155. 155. harmful to business, conversions, etc
  156. 156. google ranking
  157. 157. algorithm updates that will have a “significant impact” on mobile search results worldwide for mobile searchers
  158. 158. google amp
  159. 159. accelerated mobile pages
  160. 160. html subset
  161. 161. built for performance
  162. 162. mobile only
  163. 163. <html ⚡>
  164. 164. facebook instant articles
  165. 165. incredibly fast
  166. 166. looking ahead + things i’m excited about
  167. 167. more amp + instant articles
  168. 168. css grid layout
  169. 169. new css spec
  170. 170. two dimensional content flow
  171. 171. early days
  172. 172. browser support is horrendous
  173. 173. experimental flags
  174. 174. gridbyexample.com
  175. 175. web components
  176. 176. modular elements
  177. 177. ‘scoped’ css
  178. 178. html video element
  179. 179. polymer
  180. 180. element queries
  181. 181. css spec
  182. 182. js polyfill
  183. 183. VR
  184. 184. 360 experiences
  185. 185. minority report
  186. 186. my hope
  187. 187. responsive web design
  188. 188. just web design
  189. 189. “Responsive Web Design is 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.”
  190. 190. make emma proud
  191. 191. #oneLove @harismahmood89

×