As mobile device usage continues to expand, the variety of screen sizes, resolutions, and capabilities of mobile phones and tablets is becoming more and more diverse. It's possible, and important, to ensure your site provides an optimal experience for whatever device your audience is using. Responsive web design allows your site to seamlessly adjust and fit the screen its viewed on, and can easily be implemented in most major CMS systems. Learn how to design and plan your responsive site, develop your layouts with a fluid grid, and test to ensure your site looks great on tons of devices!

2. What? Why? How?
What is responsive web design?
How to create a responsive layout
How to ensure all site elements work
in that layout
Setting breakpoint changes with
Media Queries
Responsive menu options

3. What is A Responsive WebSITE?
A fluid layout and flexible images adapted
with media queries

4. Responsive vs. Adaptive
A fluid grid layout Multiple fixed width
layouts
Additional changes Layout changes at
applied with Media set breakpoints
Queries (with Media Queries)

5. Basic Components
A flexible, grid-based layout
Flexible images and media
Media queries for specific adjustments

6. Hybrid Approaches
Fluid on smaller screens
+ fixed maximum size
One column flexible
+ one column fixed

7. Let’s Get Started!
AmeliaMarschall.com

8. Set a fluid grid
Fluid wrapper:
#page { !
width: 90%;!
max-width: 960px; !
margin: 15px auto; }!
or
#page {
width: 960px;
max-width: 90%;
margin: 15px auto; }!

9. Set a fluid grid
Float columns:
!
#LeftColumn {
float: left;
width: 70%; }!
!
#RightColumn {
float: right;
width: 30%; }!

10. Set Fixed Margins (really, It’s Ok!)
Use CSS Box Sizing
Standard box model: New box model:
Padding & border Padding & border
added on to width/ subtracted from
height width/height
box-sizing: box-sizing:
content-box! border-box!

11. Set Fixed Margins (Actually padding)
#LeftColumn {
padding: 10px 20px;
!
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;!
box-sizing:border-box; }!
#RightColumn {
padding: 10px;
!
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;!
box-sizing:border-box;
border: 1px solid #627A7E; }!
IE Polyfill: (Natively supported in IE8+)
https://github.com/Schepp/box-sizing-polyfill

12. Nested Columns
Widths set with percentage are relative to
their container element!

13. Nested Columns
#dnn_ContentLeft {
float: left;
width: 60%;
padding-right: 40px;
box-sizing: border-box; }!
#dnn_ContentRight {
float: left;
width: 40%;
box-sizing: border-box; }!

14. Make Changes with Media Queries
Media queries serve different CSS based
on your browser size or type
Include directly in your CSS file, at the end:
@media (max-width: 900px) { }!
!
Or link separate CSS files from your HTML:
<link rel=“stylesheet” type=“text/
css” href=“style.css” media=“all
and (min-width: 481px)”>!

15. Make Changes with Media Queries
Define regular (desktop site) styles, then:
• @media (max-width: 900px) { }!
• @media (max-width: 720px) { }!
• @media (max-width: 480px) { }!
• @media (max-width: 320px) { }!

16. Make Changes with Media Queries
Or, go “mobile first”:
• @media (min-width: 480px) { }!
• @media (min-width: 720px) { }!
• Etc…!
Better for performance!

17. Make Changes with Media Queries

18. Media Queries & IE
@media only works in IE 9 +
• Javascript polyfill for IE 8 and below:
– https://github.com/scottjehl/Respond
– Adds support for media queries set with
min-width/max-width
• For wider media query support:
– http://code.google.com/p/css3-mediaqueries-js
• Or use conditional comments to link to IE CSS

19. Example Site Queries
@media (max-width: 900px) {
!#ContentLeft, #ContentRight {!
! ! width:100%; !
!
padding:0; !
!}
}!

20. @media (max-width: 900px)!

21. Example Site Queries
@media (max-width: 730px) {
#LeftColumn, #RightColumn { ! !
! width: 100%;! !
!}
#FooterLeft, #FooterMiddle, !
! #FooterRight {! !
width: 100%; ! !
margin: 0 0 20px 0; !
! !}
}!

23. Example Site Queries
@media (max-width: 650px) {
#primary .show-mobile {! !
! display: block; ! !
padding: 20px 20px 20px 64px;
! ! background: url(images/mobile-
! ! menu.png) no-repeat #8CC8D8;!
!
! }
}!

25. Example Site Queries
@media (max-width: 470px) {
!#page {! !
width:96%; ! !
margin:5px auto; } !
!#branding hgroup { !
width: 100%; } ! !
#primary {! !
margin: 0 0 10px 0;! !
width:100%; }
#primary .show-mobile { ! !
width:100%;!}
}!

27. Set Font Sizes
Set font sizes in em’s:
• body { font-size: 100%; }
( 16px )
• h1 { font-size: 1.5 em }
( 24px / 16px = 1.5 )
• Change body size in @media to adjust all
site fonts
Use Fittext.js for scalable headlines that fit
the width of its surrounding element.

28. Set (or don’t set) Media Sizes
Ensure media always stays within set columns:
• img, object, embed, iframe, video
{ max-width:100%; }
!
• Do not set inline height and width of
images or media
• Use Fitvidsjs.com for video (unless actually
using the <video> element)

29. Load Specifically-sized images
Use mobile-first media queries to only load
larger images once needed
Or use Adaptive Images: adaptive-images.com
• Detects screen size.
• Automatically creates, caches, and delivers re-scaled
versions of embedded HTML images.
• No mark-up changes needed.
• Original PHP by Matt Wilcox. Ports for .NET and Cold
Fusion, Plugins for Wordpress and Drupal.

30. Hide Content
display:none!
• Hide unnecessary content for mobile
• Add mobile only content with
display:none in the regular CSS
Important Note:
With no “link to full site”, don’t hide too much!

31. Hide Content
EXTRA Important Note:
display:none hides content but
(generally) does not improve performance!
Hiding images:
Setting parent element to display:none
will prevent the image from being loaded.

32. Responsive Menu Options
Use unordered list menu layouts:
<nav>
<ul>
<li><a href="/”>Home</a></li>
<li><a href="/About.aspx">About</a></li>
<li><a href="/Speaking.aspx">Speaking</a></li>
<li><a href="/Contact.aspx">Contact</a></li>
</ul>
</nav>!

33. 1. Flow the menu onto two lines

34. 1. Flow the menu onto two lines
What a horizontal unordered list will
naturally do
Can hide submenu dropdowns (If
accessible elsewhere)
• nav ul li ul { display:none; }!
Use media queries to reduce font sizes
before breaking to two lines

35. 1. Flow the menu onto two lines
Tutorial: http://designshack.net/articles/css/
code-a-responsive-navigation-menu

36. 1. Flow the menu onto two lines
When to use it?
Submenus don’t need to be accessed
Items will fit on two lines
Items not expected to change often
A solution without Javascript is desired
Minimal effort desired

37. 2. Switch a horizontal menu to vertical

38. 2. Switch a horizontal menu to vertical
Regular CSS:
• nav ul li { float:left; }!
Mobile-size CSS:
• @media (max-width: 480px) {
nav ul li { float:none; ! !
! width:100%; }!
}!
Can hide submenu dropdowns (If accessible
elsewhere)
• nav ul li ul { display:none; }!

39. 2. Switch a horizontal menu to vertical
Tutorial to include dropdown submenus:
http://ejhansel.com/a-responsive-drop-down-navigation-menu
• Based on Suckerfish dropdowns
• Uses :hover to expand submenus

40. 2. Switch a horizontal menu to vertical
When to use it?
More menu items
Longer page names
Can choose whether to include submenus
A solution without Javascript is desired
Minimal effort desired

41. 3. Switch to an expandable menu button

42. 3. Switch to an expandable menu button
Similar to switching a horizontal menu
to vertical, with the addition of hiding
the menu until clicked/touched
The markup:
<nav> ! !
!
<a href="#" class=”
show-mobile">Main Menu</a> !
<ul><li>…</li></ul> !
</nav>!

43. 3. Switch to an expandable menu button
• Regular CSS:
.show-mobile { display: none; }!
• CSS to show the button and hide the menu for mobile:
@media (max-width: 768px) { ! !
nav .show-mobile {
display: block; }
nav ul { !
display: none; } }!
• jQuery for the menu toggle:
<script> ! !
jQuery(".show-mobile").click(function () {
jQuery("nav ul").toggle("fast"); !
});
<script>

44. 3. Switch to an expandable menu button
An in-depth, mobile-first menu tutorial:
• http://azadcreative.com/2012/07/
responsive-mobile-first-navigation-menu
• Uses a mobile menu button toggle, and
includes submenus expanding on click/
touch

45. 3. Switch to an expandable menu button
When to use it?
Want mobile menu to fit in a small area
Want a highly stylable, flexible option
More menu items and/or longer page names
Can choose whether to include submenus
Ok with an “extra click” before selecting

46. 4. Switch to a dropdown (select) menu

47. 4. Switch to a dropdown (select) menu
Uses efficient native mobile controls
Use jQuery to dynamically swap:
<nav>
<ul>
<li><a href=“#”>…</a></li>
</ul>
</nav>
-to-
<nav>
<select>
<option value=“#”>…</option>
</select>
</nav>!
From: http://css-tricks.com/convert-menu-to-dropdown
!

49. 4. Switch to a dropdown (select) menu
Similar options that switch <ul> to <select>:
• TinyNav.js:
– Uses jQuery, small file size
– https://github.com/viljamis/TinyNav.js
• Responsive Menu:
– Uses jQuery, supports submenus, lots of settings
– https://github.com/mattkersley/Responsive-Menu
• SelectNav.js:
– Inspired by TinyNav, Independent (no jQuery),
supports submenus
– http://lukaszfiszer.github.com/selectnav.js

50. 4. Switch to a dropdown (select) menu
When to use it?
Want mobile menu to fit in a small area
Want native controls for the mobile menu
More menu items and/or longer page names
Want submenus included
Ok with an “extra click” before selecting

51. Remember the Viewport
Ensure mobile browsers will scale to view
your site correctly
Include in the <head> :
<meta name="viewport"
content="width=device-width”>!

52. Resources
• Responsive Web Design (A Book Apart 4)
Ethan Marcotte
• MediaQueri.es
• http://bradfrostweb.com/responsive-web-
design-newsletter
• http://zomigi.com/blog/essential-
considerations-for-crafting-quality-media-
queries
!

53. Questions?
Amelia Marschall-Miller
Gravity Works Design + Development
Partner & Creative Director
GravityWorksDesign.com
AmeliaMarschall.com
@MimiAmelia