Rocking The Responsive Web

One Site. Every User. Every Device.

Who am I?

( Josh Broton! )

  • Interactive Design Lead / Front-End Developer at VistaComm in Sioux Falls, SD
  • Computer & Network Security / Computer Science at DSU
  • joshbroton.com
  • twitter.com/joshbroton


Responsive == ?

  1. A flexible, grid-based layout
  2. Flexible images and media
  3. Media queries used to determine layout
http://www.alistapart.com/articles/responsive-web-design/
http://www.alistapart.com/articles/dao/

Why RWD?

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn't have the same constraints, and design for this flexibility. But first, we must 'accept the ebb and flow of things.'
-John Allsopp in "A Dao of Web Design"

Why Do Responsive?

What does he mean by "the ebb and flow of things?"
Better question: What do we see that is changing the way people use the web?
Even better question: What is changing the way you use the web?

Why Do Responsive?

How do you access the Internet?

Some Stats

  • 55%: US Adults that access the web via mobile devices
  • 31%: US Adults whose primary browsing device is mobile
  • 2013: The year mobile phones will overtake PCs as the most common Web access devices

Desktop vs. Mobile


Desktop-only sites need to die.

Desktop vs. Mobile

  • 480 million: Android devices activated
  • 400 million: iOS devices activated
  • 1 billion: Total Windows machines sold as of June 2012
Android and iOS have been around for 4 years. Windows 1 was released on Nov. 20, 1985.

More Stats

  • Q3 2012: When smartphones shipments surpassed PC shipments
  • 600%: Growth in mobile web traffic in 2010

It's
About
This
Guy


UX IS
KING

Impact?

  • 61% leave a site if it isn't mobile-ready
  • 79% search for another site
  • 50% look outside an established relationship
  • 48% said if a site didn't work on a mobile device, they didn't feel the company valued their business

Native vs. Mobile

2.5/month vs. 24/day
(user app downloads vs. user site visits)
source: zeldman.com


Making the Web Responsive


Flexible Grids

  • Grid systems are used to create uniform space allocation.
    • 960px = standard
    • 960 Grid System, etc

960 Grid System

.grid_1 { width:60px; }
.grid_2 { width:140px; }
.grid_3 { width:220px; }
.grid_4 { width:300px; }
.grid_5 { width:380px; }
.grid_6 { width:460px; }
.grid_7 { width:540px; }
.grid_8 { width:620px; }
.grid_9 { width:700px; }
.grid_10 { width:780px; }
.grid_11 { width:860px; }
.grid_12 { width:940px; }

960 grid system


One problem: Not flexible!

960px used to be fine


But then this happened...



And
then
this:



Things You Can Do

Now*

Flexible Grids

Pixels are out. Percents are in.


100% Grid System

.one { width:8.3333333333%; } 
.two { width:16.6666666667% } 
.three { width:25%; } 
.four { width:33.3333333333%; } 
.five { width:41.6666666667%; } 
.six { width:50%; } 
.seven { width:58.3333333333%; } 
.eight { width:66.6666666667%; } 
.nine { width:75%; } 
.ten { width:83.333333333%; } 
.eleven { width:91.666666667%; } 
.twelve { width:100%; }

Important CSS

* {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}                       
.row {
    width: 100;
    max-width:1600px;
    clear:both;
}
.column, .columns {
    float:left;
    position:relative;
    min-height:1px;
    padding:0 15px;
}

Media Queries

  • Different layouts for different screens
  • Device agnostic

Media Queries

@media only screen and (min-width: 480px) {
    /* CSS FOR SCREENS WIDER THAN 480PX GOES HERE */
}
@media only screen and (min-width: 600px) {
    /* CSS FOR SCREENS WIDER THAN 600PX GOES HERE */
}
@media only screen and (min-width: 768px) {
    /* CSS FOR SCREENS WIDER THAN 768PX GOES HERE */
}
@media only screen and (min-width: 992px) {
    /* CSS FOR SCREENS WIDER THAN 992PX GOES HERE */
}
@media only screen and (min-width: 1382px) {
    /* CSS FOR SCREENS WIDER THAN 1382PX GOES HERE */
}

Viewport Meta

<meta name="viewport" content="initial-scale=1.0, 
width=device-width" />
  • "initial-scale=1.0" sets zoom to 100%
  • "width=device-width" sets viewport to device size

Other Meta tags

<meta name="MobileOptimized" content="320">
<meta name="HandheldFriendly" content="True">
For older feature phones

JS Polyfills

<!--[if (lt IE 9) & (!IEMobile)]>
    <script src="/scripts/selectivizr.min.js">
    <script src="/scripts/imgsizer.js">
    <script src="/scripts/respond.min.js">
<![endif]-->
Fixes for IE8

Your Best Friend

<script src="/scripts/modernizr.min.js">
Don't believe me?

Modernizr

Modernizr.load({
    test: Modernizr.cssgradients,
    yep : 'geo.js',
    nope: 'geo-polyfill.js'
});
More help for IE8!

Two More Things!

  • HTML5 Shiv
  • Classes on <html> listing supported/unsupported features

(you should be using Modernizr, even if you're not making responsive sites)

OMG MOAR

CODE




Things You Can Do

Soon*

CSS3 Template

body {
    display: 'a'
             'b'
             'c'
             'd';
}

CSS3 Template

body {
    display: 'a a a'
             'b b c'
             'd d d';
}

CSS3 Flex Box

section {
    display:box;
    box-orient:horizontal;
}


RESS

  • "Responsive Development + Server Side Components"
  • Serving different images and media to different devices



The holy-freaking-grail of responsive design





tl;dr

People want mobile-friendly sites now, not two years from now. Responsive design is ready. Do it now.

THANK YOU!


Questions?


 twitter.com/joshbroton
joshbroton.com