DevBridge Group presents an Intro to Responsive Web Design (RWD). Responsive Web Design addresses the growing need to cater online content to a variety of devices through a single website: from tablets, to smartphones, to desktops. The class will cover industry insights and trends, creative workflow for designing responsive websites, and a technology workshop explaining media queries and advantages of RWD.

1. RESPONSIVE WEB DESIGN
DevBridge Group Presents:
DEVBRIDGE.COM
Kristin Duhaime
Vlad Shapochnikov
kristin@devbridge.com
vlad.shapochnikov@devbridge.com

2. RESPONSIVE WEB DESIGN
DevBridge Group Presents:
DEVBRIDGE.COM
Kristin Duhaime
Vlad Shapochnikov
kristin@devbridge.com
vlad.shapochnikov@devbridge.com

3. WHAT’S HAPPENING IN US MARKET?

4. Shi! in how we are accessing the internet.

5. THE MOBILE INVASION

6. Earth population Active mobile connections
(phones, tablets, readers, etc.)
7 BILLION 6 BILLION

7. Market Saturation
37% of the US population
are smartphone owners.

8. In 2015
58% of the US population
will be smartphone owners
in 2015.

9. Web Traffic
23% of web traffic was from
mobile devices

10. What about the tablet?
0
100,000
200,000
300,000
400,000
500,000
2012 2013 2014 2017
PC (Desk-Based and Notebook) Tablet

11. This mass invasion of Smartphones
and Tablets changes the way we
view the web.

12. WHAT DOES THIS MEAN FOR OUR
FRIEND THE WEBSITE

13. Clumsy & Awkward

14. Old Context

15. New Contexts

16. 25% own tablet
50% own smartphone
From laptop owners
Distribution

17. Smartphone vs. Tablet
0
17.5
35
52.5
70
Books Movies TV Shows News Social Networking Downloaded Music
Tablet Smartphone

18. THE SOLUTION

19. A website that is designed to live
beyond the device, context, or
technology that they were originally
intended for.

20. Your Options

21. Your Options
Choose Wisely

22. NATIVE
APPS
HYBRID
APPS
WEB
APPS
SEMI
NATIVE
MOBILE
SITES
RWD
Platform IndependenceDevice Hardware Integration

23. NATIVE
APPS
HYBRID
APPS
WEB
APPS
SEMI
NATIVE
MOBILE
SITES
RWD
Per platform (iOS, Android, Windows RT)

24. NATIVE
APPS
HYBRID
APPS
WEB
APPS
SEMI
NATIVE
MOBILE
SITES
RWD
One solution for all platforms

25. Choose the solution that best suits the
needs of the user.

26. They all want a great experience.

28. WHY GO RESPONSIVE?

29. “This is Google’s recommended
configuration.
“

30. Easy To Manage
Single Publishing Platform
1

31. Future Friendly
Adapts to all web enabled devices
2

32. User & Content Focused
Device specific elements become secondary
3

33. Great For Commerce
An increase in mobile transactions
4

34. Increase in Page Visits
Decrease in bounce rates
5

35. ESTIMATING AND BUDGETING FOR
RESPONSIVE WEB DESIGN

36. Value vs. Cost
Two vs. Multiple Breakpoints

37. A dedicated mobile site will have
maintenance redundancy and,
therefore, reoccurring costs.

38. Maintenance on a responsive site
decreases over time.

39. How do you budget for a
responsive project?

40. Set aside time to educate both the
client and the team.
1

41. Set aside time to educate both the
client and the team.
1
Built in time for process changes2

42. Set aside time to educate both the
client and the team.
1
Built in time for process changes2
More Testing and QA Time3

43. ADAPTING TO A
RESPONSIVE WORKFLOW

44. WHY WE CANNOT USE OUR USUAL
CREATIVE PROCESS

45. No Longer One Size Fits All

46. New Things To Consider

47. New Things To Consider

48. CHANGE IN WORKFLOW

49. Piece by Piece

50. CONTENT
FIRST
WIRE
FRAMES
SKETCH LAYOUTS
Our Puzzle Pieces

51. CONTENT & MOBILE FIRST

52. “Content precedes design. Design
in the absence of content is not
design, it’s decoration.
“
JEFFREY ZELDMAN
HAPPY COG

53. Lorem Ipsum is not content.
Having actual content will help you create more
accurate designs.

54. Why Mobile First?

55. Core Message &
Functionality
1

56. Core Message &
Functionality
1
Focused Designers2

57. Core Message &
Functionality
1
Focused Designers2
Early Detection of
Usability Issues
3

58. Progressive Enhancement

59. Simplify rather than Reduce

60. “Mobile must never be a
dumbed-down, limited
experience.
“
STEVEN HOOBER
O’REILLY

61. SKETCHING & WIREFRAMES

63. UI Stencils

64. The key for mapping content in different
contexts in which it will appear.
Content Reference Wireframes

65. 1.1 Logo
1.2 Navigation
2.1 Info Panel
2.2 Info Panel
2.3 Info Panel
2.4 Info Panel
3.1 Code
3.2 Savings Info
4.1 Main Article
4.2 Secondary Article
4.3 Secondary Article
5.0 Stories
6.0 Subscribe
7.0 Footer
1.1
2.1
3.1
4.1
4.2
5
7
7
7
6
6
6
5
5
4.3
4.1
4.2
4.3
4.1
4.2
4.3
3.2
3.1 3.2 3.1
3.2
2.2 2.3 2.4 2.1
2.2
2.3
2.4
2.1
2.2
2.3
2.4
1.2 1.1 1.2 1.1 1.2

67. PATTERNS & LAYOUTS

68. Mostly Fluid
1 1 1
2 2 2
3
3
3
3
3

69. Mostly Fluid

70. Mostly Fluid

71. Column Drop
1 1 1
2 2 2
3
4
33 4
4

72. Column Drop

73. Column Drop

74. Layout Shi"er
1 1 1
2 2
2
3
3
3
4
4
4
4
4
4

75. Layout Shifter

76. Layout Shifter

77. Tiny Tweaks
1 1 1
2 2 2

78. Tiny Tweaks

79. Tiny Tweaks

80. TECHNICAL
INTRODUCTION

81. VIEWPORT

82. What is it?

83. The viewport is the part of the webpage that
the user can currently see. The scroll bars move
the viewport to show other parts of the page.
What is it?

85. How to use it and its properties?

87. Used to set Viewport width, height, and
initial scale on mobile devices.
Lives in the <head></head> portion of the HTML

88. MEDIA QUERIES

89. What is a “Media Query”?

90. What is a “Media Query”?
“Media Type” (screen, print, all, TV, etc.)
“Media Condition” (width, height, device-width,
device-height, orientation, aspect-ratio, etc.)

92. By combining a media type and a
condition you can specify how the web
content will appear on a particular
device. (Phone, Tablet, TV, etc.)

93. video demo

98. Most media conditions accept optional
“min-” or “max-” prefixes to express
“greater or equal to” or “smaller or
equal to” constrains.

99. RESPONSIVE MEDIA

100. What is it?

102. How do you make “responsive media”?

103. How do you make “responsive media”?

104. What about my
monthly 3GB
Data Plan?!
Data plans are expensive
and no one likes having to
pay overage fees.

105. Small file sizes make everyone happy! :)

106. Serving up different size and quality
video is already easy.

108. What about images?

109. What about images?
There is no single solution...yet

110. Proposed Solution
W3C Working Dra!: February 26th, 2013

111. HI-RES OR “RETINA” DISPLAYS

112. Device Pixel Densities

113. Proposed Solution
W3C Working Dra!: February 26th, 2013

114. That is the future.

115. That is the future.
What about today?

116. Credit: github.com/scottjehl/picturefill

118. Testing & Preview
ResponsivePX.com
ScreenQueri.es
QuirkTools.com
Resonsinator.com

119. TEAM WORK & COMMUNICATION

120. THANK
YOU!
DEVBRIDGE.COM
Kristin Duhaime
Vlad Shapochnikov
kristin@devbridge.com
vlad.shapochnikov@devbridge.com

121. THANK
YOU!
DEVBRIDGE.COM
Kristin Duhaime
Vlad Shapochnikov
kristin@devbridge.com
vlad.shapochnikov@devbridge.com