responsive web design: from mobile to desktop, and beyond

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

What is A Responsive WebSITE?

A fluid layout and flexible images adapted with media queries

Responsive vs. Adaptive

A fluid grid layout

Additional changes applied with Media Queries

Multiple fixed width layouts

Layout changes at set breakpoints (with Media Queries)

Basic Components

A flexible, grid-based layout

Flexible images and media

Media queries for specific adjustments

Fluid on smaller screens + fixed maximum size

Hybrid Approaches

One column flexible + one column fixed

Let’s Get Started! AmeliaMarschall.com

Fluid wrapper: #page { ! width: 90%;! max-width: 960px; ! margin: 15px auto; }!

or #page { width: 960px; max-width: 90%; margin: 15px auto; }!

Set a fluid grid

Float columns: !

#LeftColumn { float: left; width: 70%; }!!

#RightColumn { float: right; width: 30%; }!

Set a fluid grid

Set Fixed Margins (really, It’s Ok!)

Use CSS Box Sizing

Standard box model:

Padding & border added on to width/height

box-sizing: content-box!

New box model:

Padding & border subtracted from width/height

box-sizing: border-box!

#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

Set Fixed Margins (Actually padding)

Nested Columns

Widths set with percentage are relative to their container element!

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; }!

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)”>!

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) { }!

Or, go “mobile first”: •  @media (min-width: 480px) { }!•  @media (min-width: 720px) { }!•  Etc…!

Better for performance!

Make Changes with Media Queries

Make Changes with Media Queries

@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

Media Queries & IE

Example Site Queries

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

@media (max-width: 900px)!

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

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;!!! } }!

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%;!} }!

Example Site Queries

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.

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)

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.

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!

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.

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>!

1. Flow the menu onto two lines

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

Tutorial: http://designshack.net/articles/css/ code-a-responsive-navigation-menu

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

1. Flow the menu onto two lines

2. Switch a horizontal menu to vertical

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; }!

Tutorial to include dropdown submenus: http://ejhansel.com/a-responsive-drop-down-navigation-menu

•  Based on Suckerfish dropdowns •  Uses :hover to expand submenus

2. Switch a horizontal menu to vertical

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

3. Switch to an expandable menu button

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>!

•  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>

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

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

3. Switch to an expandable menu button

4. Switch to a dropdown (select) menu

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 !

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

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

4. Switch to a dropdown (select) menu

Remember the Viewport

Ensure mobile browsers will scale to view your site correctly

Include in the <head> :

<meta name="viewport" content="width=device-width”>!

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

!

Amelia Marschall-Miller

Gravity Works Design + Development Partner & Creative Director

GravityWorksDesign.com

AmeliaMarschall.com

@MimiAmelia

Questions?