Users are dropping their desktops/laptops in favor of their phone or tablet at an impressive rate. If these platforms make our site difficult to use it will create a negative impression on our users, ultimately costing our companies business. To survive this trend we must go responsive. This session will discuss the basic principals of a responsive site: Flexible Images, Media Queries, and Fluid Grids. Without the assistance of a framework we will face lift a non-responsive site. Lastly, we will compare and contrast several of the simple and complete responsive frameworks that are available today: Bootstrap, Foundation, and Responsive Grid System. #codemash

1. GOING RESPONSIVE
ROBERT COCHRAN
@COCHRARJ

2. ROBERT COCHRAN
• Consultant with Manifest
Solutions
• Practicing and teaching
responsive web development
for over 2 years.
• Author of cuke_sniffer, an open
source library used to root out
code smells in your Cucumber
projects using ruby.

3. ROBERT COCHRAN
r-cochran
@cochrarj

4. SOURCE
HTTPS://GITHUB.COM/R-COCHRAN/GOING_RESPONSIVE

5. GOALS
Understand what it means to be responsive
Explore options for going responsive
Learn about the core concepts of creating a
responsive site
Walk through an update to a existing site applying
the core concepts
Compare and contrast different libraries and
frameworks in the responsive space

6. WHAT MAKES A SITE
RESPONSIVE?

7. WHAT MAKES A SITE RESPONSIVE?
Responsive web design (RWD) is a web design
approach aimed at crafting sites to provide an
optimal viewing experience—easy reading and
navigation with a minimum of resizing, panning, and
scrolling—across a wide range of devices (from
mobile phones to desktop computer monitors).
-Wikipedia

8. 1300px

9. 820px

10. 400px

11. 1300px

12. 820px

13. 400px

14. SIGNS OF A NON RESPONSIVE SITE
Side scrolling
Overlapping elements/text
Hard to click controls
Having to zoom in to read anything
Modals/popups that can’t be removed
Tables in markup

15. TABLES
Side scrolling

16. SIGNS OF A NON RESPONSIVE SITE
That slowly burning
feeling as a vein is about
to burst in your head from
having to use this site one
more timeRAGE
Poor user experience.
RAGE

17. OPTIONS

18. 1. IGNORE IT!
Too much work/time/
money to fix it!
We only support desktops
and IE 6 through 8!
We’ll fix it later! (Technical
Debt)

19. PROBABLY NOT.
CAN WE AFFORD IT?
50.2% 49.8%

20. BROWSER TRACKING OPTIONS

21. 2. BUILD A DEDICATED
MOBILE SITE

23. SHOULD WE DO IT?
Duplication
Maintenance
Different teams
Requirements
Design
Experience
Confusing to Users

24. 3. DESIGN FOR MOBILE FIRST

25. 3. DESIGN FOR MOBILE FIRST
Only applicable for new pages/sites
Prevents technical debt

26. 4. PAY THE TECHNICAL DEBT

28. 4. PAY THE TECHNICAL DEBT
Slowly crawl your app making updates
Potential for drastic changes to site and functionality
One code base

29. RESPONSIVE MECHANICS
Fluid Grids
Flexible Images
Media Queries
– Chris Judd
“[it’s all just] Black Magic.”

30. FLUID GRIDS
Relative Units
Target / Context = Result

31. Sidebar: 300px / 960px = 31.25%
Main Content: 640px / 960px = 66.6%
Margin: 20px / 960px = 2.08%

32. 400px
266px125px
Sidebar: 125px / 400px = 31.25%
Main Content: 266.4px / 400px = 66.6%
Margin: 8.32px / 400px = 2.08%

33. FLEXIBLE IMAGES

36. FLEXIBLE IMAGES

37. CSS.
SIMPLE FIX

38. 500px

39. MEDIA QUERIES

40. MEDIA QUERIES
Conditional Styles
Chained conditions
Group Styles

41. MEDIA TYPES
braille
embossed
handheld
print
projection
screen
tty
tv
all

42. MEDIA FEATURES
color
color-index
device-aspect-ratio
device-height
device-width
grid
height
monochrome
resolution
scan
width

43. MEDIA FEATURES
-MIN & -MAX

44. BREAKPOINTS
http://workbysimon.com/observatory/responsive-web-design-breakpoints-or-fluid/

47. 800px
600px

48. PITFALLS
Order of style
Inline styles
!important styles

49. Order of style

50. Inline style

51. !important

52. CSS RULES TO NOT PULL YOUR
HAIR OUT.
Don’t use inline styles.
Include media queries in a separate css file that is
included last.
Use !important sparingly.

53. REVIEW
Fluid Grids - make it flow/fit
Flexible Images - make it fit
Media Queries - make it work

54. TACKLING
THE
PROBLEM
UPDATING A NON
RESPONSIVE SITE.

55. SHRINK TEST / PHONE TEST
Side scrolling
Overlapping elements/text
Tables in markup
Hard to click controls
Having to zoom in to read anything
Modals/popups that can’t be removed

56. DEBT
• Overlapping title bar
and menu
• Difficult to click menu
• Menu takes up a lot of
real estate always
• Side scrolling
• Small text
• Difficult to click buttons
• Theme disrupted
(numbers against photo)
• Immortal modal

57. DEBT - EASY
• Overlapping title bar
and menu
• Difficult to click menu
• Menu takes up a lot of
real estate always
• Side scrolling
• Small text
• Difficult to click buttons
• Theme disrupted
(numbers against photo)
• Immortal modal

58. DEBT - MEDIUM
• Overlapping title bar
and menu
• Difficult to click menu
• Menu takes up a lot of
real estate always
• Side scrolling
• Small text
• Difficult to click buttons
• Theme disrupted
(numbers against photo)
• Immortal modal

59. DEBT - HARD
• Overlapping title bar
and menu
• Difficult to click menu
• Menu takes up a lot of
real estate always
• Side scrolling
• Small text
• Difficult to click buttons
• Theme disrupted
(numbers against photo)
• Immortal modal

60. PAYING THE EASY DEBT

61. OVERLAPPING TITLE BAR

62. OVERLAPPING TITLE BAR

63. MENU TAKES UP A LOT OF REAL
ESTATE ALWAYS
• Too tall
• Takes up almost a
fifth of the page at all
times

64. MENU TAKES UP A LOT OF REAL
ESTATE ALWAYS

65. SIDE SCROLLING

66. SIDE SCROLLING

67. SMALL TEXT
400px

68. SMALL TEXT - RULES
+2 to +6 pixels for fonts, more for hyperlinks
Reduce Padding and use all your available space
Use web fonts

69. SMALL TEXT - RULES
+2 to +6 pixels for fonts, more for hyperlinks
Reduce Padding and use all your available space
Use web fonts

70. SMALL TEXT - RULES
+2 to +6 pixels for fonts, more for hyperlinks
Reduce Padding and use all your available space
Use web fonts

71. SMALL TEXT

72. DIFFICULT TO CLICK BUTTONS
Thumb
The average thumb
is 45 - 57 pixels
wide

73. BUTTON RULES
Enlarge the text/icons
Take up 1/3rd of the screen at narrowest, full width
being best
Margins to reduce targets in area of button

74. DIFFICULT TO CLICK BUTTONS
Thumb

75. PAYING THE MEDIUM DEBT

76. SITE THEME

77. SITE THEME

78. SITE THEME
Flexible Grid

79. SITE THEME RULES
Identify your supported breakpoints and build your
grid around them
Avoid non-mobile features
Avoid tables

80. IMMORTAL MODALS

81. IMMORTAL MODALS - QUICK AND
FLAWED
Bind escape to close the modal

82. IMMORTAL MODALS

83. PAYING THE HARD DEBT

84. MENUS
Hover based menus - replaced
Treated like buttons
Reuse the existing menu if possible
Reduced footprint
hide it all together
Thumb

85. ADDING THE BUTTON

86. ADDING THE BUTTON

87. TOGGLING THE MENU

88. STYLING THE MENU
Thumb

89. DEBT
• Overlapping title bar
and menu
• Difficult to click menu
• Menu takes up a lot of
real estate always
• Side scrolling
• Small text
• Difficult to click buttons
• Theme disrupted
(numbers against photo)
• Immortal modal

90. BATTLE PLAN
1. Address issues that make your site unusable.
2. Identify breakpoints
3. High footprint items
4. Flexible grids and images
5. Individual Styling

91. LIBRARIES/FRAMEWORKS

92. LIBRARIES/FRAMEWORKS
CONS
Update lots of DOM to
include classes and
adding wrappers
Magic
PROS
Built in responsive grid
Nest-able grids
Components/Javascript
CSS Precompilers

93. RESPONSIVE GRID SYSTEM

94. RESPONSIVE GRID SYSTEM
(LIBRARY)
PROS
CSS library not a framework.
Supplies different flexible grids
Plug and play css from
website
Good documentation
No javascript
CONS
Not as widely used as Bootstrap/
Foundation
Only breakpoints set at 480px

95. USING THE GRID SYSTEM
Wrapper Classes
Base Width

96. BOOTSTRAP

97. BOOTSTRAP (FRAMEWORK)
PROS
12 column grid
multiple breakpoints
Additional styles for other
components to be
responsive (images/inputs/
buttons)
Components
css pre compiler easy to
customize styles. {less} and
SASS.
Widely used, easy to
stackoverflow

98. BOOTSTRAP (FRAMEWORK)
Cons
Lots of javascript magic
Update lots of DOM to include classes and adding wrappers
Large files (even minified)
Vanilla
Parts don’t work when javascript is disabled
Significant changes from version to version

99. USING THE GRID SYSTEM
Wrapper Classes
Device Size
Width
Column Width: 1 - 12Devices:
l : > 1200px
md: > 991 px
sm: > 767px,
xs

100. COMPONENTS
Glyphicons
Dropdowns
Button groups
Input groups
Checkbox and radios addons
Button addons
Navs
Tabs
Pills
Navbar
Breadcrumbs
Pagination
Labels
Badges
Jumbotron
Page header
Thumbnails
Alerts
Progress bars
Media objects
List group
Panels
Responsive Embed
Wells

101. SIMPLE COMPONENTS
Wrapper Class
DecoratorBase

102. COMPLEX COMPONENTS

103. JAVASCRIPT
Modals
Dropdown
Scrollspy
Tab
Tooltip
Popover
Alert
Button
Collapse
Carousel
Affix

104. BOOTSTRAP
FOUNDATION
BOOTSTRAP

105. FOUNDATION (FRAMEWORK)
Pros
Block Grid
Building Blocks
Form Validation (Abide)
Interchange (responsive images)
SASS.
doesn’t look like bootstrap

106. FOUNDATION (FRAMEWORK)
Cons
Large files (even minified)
Huge project structure

107. USING THE GRID SYSTEM
Wrapper Class
Device Size Width Base

108. USING THE BLOCK GRID
ColumnsDevice Size

109. COMPONENTS
Grid
Flex Grid
Forms
Visibility Classes
Float Classes
Typography
Button
Button Group
Close Button
Slider
Switch
Callout
Dropdown
Media Object
Off-canvas
Reveal
Table
Tabs
Media
Badge
Flex Video
Label
Overview
Menu
Dropdown Menu
Drilldown Menu
Accordion Menu
Top Bar
Responsive Navigation
Magellan
Pagination
Breadcrumbs
Accordion
Orbit
Progress Bar
Thumbnail
Tooltip
Plugins
Abide
Equalizer
Interchange
Toggled
Sticky

110. JAVASCRIPT
Interchange Responsive Content
Off-Canvas
Top Bar
Magellan Sticky Nav
Orbit Slider
Clearing Lightbox
Range Sliders
Abide Validation
Split Buttons
Dropdown Buttons
Reveal Modal
Alerts
Prompts
Tooltips
Joyride
Dropdowns
Accordion
Tabs
Equalizer

111. RECOMMENDATIONS
Small simple site?
Large Site with out of the box
working components?
Don't want to be married to a
framework?
Want to deal with magic?
Something that has support?
Something that has be google
debugged easy?

112. GOALS
Understand what it means to be responsive
Explore options for going responsive
Learn about the core concepts of creating a
responsive site
Walk through an update to a existing site applying
the core concepts
Compare and contrast different libraries and
frameworks in the responsive space

113. QUESTIONS?

114. ROBERT COCHRAN
r-cochran
@cochrarj
HTTPS://GITHUB.COM/R-COCHRAN/GOING_RESPONSIVE