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

1. this is a slide

2. we will see lots of them

3. things to keep in mind when working
in the world of responsive design

4. firstly

5. booklets + website + etc

6. long a** title

7. haris
mahmood
@harismahmood89

8. excited

9. the hype is real

10. slow down the hype train

11. $#!+

12. shopify

13. hackeryou

14. ladies learning code

15. freelancer
meetharis.com

16. focuspocus.io

17. devtoast.io

18. repitsupply.com

19. repitsupply.com

20. haris
mahmood
@harismahmood89

21. kingpin
@harismahmood89

22. emma watson

23. our story starts

24. 300 BC

25. table layouts

28. time went by

29. mobile browsers

30. website.com

31. m.website.com

32. ibm

33. 2010

34. ethan marcotte

35. responsive web design

36. three main features

37. fluid grids

38. flexible images

39. media queries

40. technical ingredients
of rwd

41. most importantly

42. “… a different way of
thinking”

43. 6 years later

44. continuously changing
landscape

45. features + tools + tips
+ pointers

46. I

47. css layouts

48. floats

49. focus on individual
elements

50. flexbox

52. no longer about
individual elements

53. flow

54. container

55. flow of elements

56. flow of flex children

57. direction, alignment, etc

58. cohesive whole

59. sizing

60. “what width does x
need to be?”

61. “what width/ratio does x
need to be relative to its
siblings?”

63. width: 66% width: 33%

64. flex-grow: 2 flex-grow: 1

65. how do these items
flow together

66. common layout
example

69. absolute positioning

70. absolute position
margin-top
/
padding-top

71. yuck.

73. flexbox

74. flex-direction: row-reverseflex-direction: row

75. flex-direction: row-reverse

76. display: inline-block

77. inline-blockinline-block

78. direction: rtlinline-blockinline-block

79. control content flow

80. II

81. sizing + measurements

82. px

83. fixed pixel based
layouts

84. percentage based

85. width: 100%;
max-width: 1200px;

86. push further

87. %, em, rem, vh, vw

88. foundation 5

89. bootstrap 4

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. explore + implement

95. rip px

96. III

97. media queries

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 and min-width(480px) {
//css
}
@media screen and min-width(760px) {
//css
}
@media screen and min-width(960px) {
//css
}

100. if you notice yourself
doing this:

101. @media screen and min-width(480px) {
//css
}
@media screen and min-width(490px) {
//css
}
@media screen and min-width(530px) {
//css
}

102. you’re doing
something wrong

103. avoid fixed measurements +
absolute positioning + magic
numbers

104. width: 43px;

105. width: 43px;

106. shitty magic

108. IV

109. rwd at scale

111. maintain + organize

112. large projects

113. large teams

114. two recommendations

115. preprocessed css

116. sass, less, stylus,
postcss

117. breakpoint mixin

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. defined set of
breakpoints

121. ensures consistency

122. active discussion and
proper maintenance

123. modular css

124. separate your css into
‘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 code related
to a module together

129. helpers + utility classes

130. @import ‘helpers’;

131. // _helpers.scss
.h-textCenter {
text-align: center;
}
.h-textCenter-mobile {
@include breakpoint(mobile) {
text-align: center;
}
}

132. oocss + bem

133. harry roberts

134. shopify

135. better reusable and
maintainable responsive
code

136. really sexy code

137. oh. you bet.

138. V

139. “desktop” vs “mobile”

140. iPad, iPhone, a couple
others

141. no longer sufficient

142. devices + interactions

143. Hundreds of device sizes
+ pixel density

144. iPhone VS iPhone

145. HD TV + IE/Edge + Kinect

146. apple watch

147. apple watch

148. never leave a feature unusable
on supported platforms

149. hover states

150. media queries + device
detection + feature detection

154. google’s material design

155. facebook app

159. navigation structures

162. do you even need one?

163. seriously.

164. hiding menu items
reduce visibility and
impact ux

170. don’t just make things fit

171. purpose + reason

172. rwd is more important
than ever

173. mobile > desktop

174. mediocre experiences
on mobile

175. watered down versions

176. no longer sufficient

177. harmful to business,
conversions, etc

178. google ranking

179. algorithm updates that will have a
“significant impact” on mobile search
results worldwide for mobile searchers

181. google amp

182. accelerated mobile
pages

183. html subset

184. built for performance

188. mobile only

189. <html ⚡>

191. facebook instant articles

195. incredibly fast

196. looking ahead + things
i’m excited about

197. more amp + instant
articles

198. css grid layout

199. new css spec

200. two dimensional
content flow

201. early days

202. browser support is
horrendous

204. experimental flags

205. gridbyexample.com

206. web components

207. modular elements

208. ‘scoped’ css

209. html video element

210. polymer

212. element queries

213. css spec

214. js polyfill

215. VR

216. 360 experiences

217. minority report

219. my hope

220. responsive web design

221. just web design

222. “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.”

223. make emma proud

224. #oneLove
@harismahmood89