SlideShare a Scribd company logo
1 of 188
Download to read offline
Responsive Design
in the Real World
Tools & Resources to Make
Responsive Design Easier

Cleveland Web Standards Association
October 30, 2012

                              Clarissa Peterson
                                      @clarissa
What We’ll Cover:
      Frameworks
  Navigation Patterns
     Preprocessors
   Responsive Images
 Responsive Data Tables
        Polyfills
Captions added for those of you playing
           along at home!


   Almost as good as being there.*
Responsive Web Design

  This is not an introduction to responsive web design. If you’ve been doing some
 responsive design, or at least know what it is pretty well, this presentation is going
to tell you about some tools and resources that will make it easier for you to build
  responsive sites. But for those of you who need a little background, I’m going to
  explain reaaaaally quickly what responsive design is. The rest of you can just click
               forward a few slides. The non-technical description first:
When the iPhone was introduced, this is what websites looked like. They
 were very, very tiny, and you had to zoom in and out to read anything.
This kind of sucked, because if you made the text big enough to read, you couldn’t
    even see the whole line of text at once. (yes, a lot of sites are still like this)
Responsive Web Design

    Responsive design solves that problem. Instead of making the
website really tiny so it fits, the browser is able to keep the content
a normal size regardless of what size your screen is, and then it just
 kind of rearranges everything so it fits on the screen in a way that
      makes sense and takes advantage of the available space.
Go to the Boston Globe site in your browser and then make the browser
window narrower and wider — see what happens. The text stays the same
size, but the content rearranges from three columns to two and then one
 column as the browser window gets narrower. That’s responsive design.
                        http://www.bostonglobe.com
Resizing your browser window is just an easy way to see the changes all
 at once. But what we’re really talking about is the difference in how a site
  looks from one device to the next — such as a mobile phone, a tablet, a
laptop, or a desktop computer. Making your browser window very narrow
 (about 300 pixels) will give you a decent idea of what a website looks like
  on a mobile phone, but not entirely. Make sure to test on actual devices.
1. Flexible Grid
2. Flexible Images/Media
   3. Media Queries

    There are three parts to responsive design.
1. Flexible Grid
      2. Flexible Images/Media
                 3. Media Queries

The first two, the flexible grid and flexible images/media are pretty easy to explain.
I’ll demonstrate on The Boston Globe site. This
       is the site at about 1280 pixels wide.
             http://bostonglobe.com/
This is the site at a somewhat narrower width. Note that the columns have
each decreased in width in proportion to the site. So has that big picture off
on the left. That’s because everything is measured in percent instead of pixels.
                              http://bostonglobe.com/
In contrast, check out the Milwaukee Journal-Sentinel
website. It’s also a newspaper, also with three columns.
                 http://www.jsonline.com/
But look what happens at a narrower width. The columns all stayed the exact same
width, so although the empty margins gave us some room to maneuver, after those
 were gone, the browser had no choice but to chop off the right side of the page.
                              http://www.jsonline.com/
1. Flexible Grid
   2. Flexible Images/Media
               3. Media Queries
The third part of responsive design is media queries. This is the magic part of
responsive design. Okay, it’s not really magic. It’s actually pretty simple how a
     media query works. It’s just an if-then statement, if any of you are
 programmers. And even if you’re not a programmer, the concept is simple:
If X is true, then do Y. If X is not true, then don’t do Y.

    If those letters look too much like algebra, I can give you an example:
     If the time is 12:00, eat lunch. If the time is not 12:00, then don’t eat
                lunch. That sounds pretty straightforward, right?


That’s a media query. In responsive design, what we’re generally going to be
 querying is the viewport width. That is more or less the same thing as the
width of your browser, which is why we can resize our browser window to
 demonstrate responsive design. For mobile devices, the viewport width is
 essentially the same thing as the screen width, since you can’t have a non-
  full-size browser window like you can on your computer. So you’ll often
hear people referring to screen width in responsive design when they really
          mean viewport width. They know what they mean, though.
In responsive design, media queries are querying the viewport width, and telling
    the browser to do something different depending on the viewport width.
                         http://www.unitedpixelworkers.com/
So as the viewport gets wider on the United Pixelworkers site,
   you can see the site looks different. The icons at the top
    rearranged themselves a bit, and the font changed size.
                http://www.unitedpixelworkers.com/
Now, there are two columns instead of one! The media query is telling the
browser: When the viewport is wider than X pixels, do this section of the CSS to
 make it be two columns instead of one. If the viewport is not wider, ignore that
                         http://www.unitedpixelworkers.com/
And things just keep on rearranging! You can have
      as many media queries as you want.
          http://www.unitedpixelworkers.com/
And a media query can make pretty much any change to the CSS
  that is being used to render the website. For responsive design,
normally it’s going to be parts of the CSS having to do with layout.
                  http://www.unitedpixelworkers.com/
But if you wanted, you could make the entire site turn purple if the screen is
wider than X pixels. I’m not sure why you’d want to do that, but you could.
                        http://www.unitedpixelworkers.com/
@media screen and (min-width: 640px) {
  .section1, .section2 {
    float: left;
    width: 50%;
  }
}




          This is what a media query looks like.
@media screen and (min-width: 640px) {
     .section1, .section2 {
       float: left;
       width: 50%;
     }
   }



    This is the “if” part of the if-then statement. All media queries start with
 @media. Then we’re saying: if you’re displaying this page on a screen (as opposed
to print or something else), AND the viewport is a minimum of 640 pixels wide...
@media screen and (min-width: 640px) {
  .section1, .section2 {
    float: left;
    width: 50%;
  }
}




 This part in the middle is the “then.” If the query is true, then do this
  CSS. If the query is not true, then ignore this CSS. It is THAT easy!
@media screen and (min-width: 40em) {
  .section1, .section2 {
    float: left;
    width: 50%;
  }
}

You’ll notice our query was for a viewport width of 640 pixels or wider.
   Actually, a better way to do a media query is to use ems instead of
pixels, so the page will be even more flexible. Ems relate to the base font
size for the page. So if our page has a different-than-usual base font size,
either via the browser or via user preferences, things will still look okay.
Tools & Resources
You’ve probably heard that responsive design is hard. Well, it isn’t. I
mean, it’s not any harder than web design is. Sure, web design was a lot
easier in the days before computers were invented. We just sat around
   and read the paper all day, waiting for computers to be invented.
But eventually we had to learn HTML and CSS. We didn’t
           try to learn it all at once, so it wasn’t too bad. Plus, we just
             copied other people’s stuff until we got the hang of it.

 And it turns out that the awesome thing about web design is that there are a lot
 of people out there who want us to copy their stuff. In fact, they make cool stuff
   and put it on their websites for everybody to download and use. Our job as
  responsive designers is actually not all that hard, because there are people out
there who are much smarter than us, and they are doing all the hard parts for us!

 Sure, it’s nice to be a purist and code all our websites from scratch. Just like we
 make all our own clothes from fabric that we wove ourselves from cotton that
            we grew ourselves on our own farms in our backyard. Right?

        Or we can let someone else do the hard parts so that we can go
           home at a reasonable hour in time to play with our kids
                 or watch Law & Order: SVU (your choice).
Frameworks


A framework is a starting place for designing or building a website. Not
   the whole design, just a starting place. Like the frame of a house.
There are a lot of frameworks, and they’re all a bit different, so you’ll have to figure
out what works best for your project and for your style of working. Foundation is
       one of the most popular. It’s a 12-column, nestable, responsive grid.
                               http://foundation.zurb.com/
That doesn’t mean your site will have 12 columns.You can have any number of
columns up to 12, as long as the proportions are divisible by 12. For example, you
can have two columns, the first is 4/12 of the screen wide, the other is 8/12 wide.
                      http://foundation.zurb.com/grid-example1.php
Here’s a site that uses Foundation.

     http://www.zurb.com/soapbox
Once you decide what columns you want, that doesn’t have to
     apply to the whole page. Here they have 4 columns,
    (3+3+3+3) and right below that, 3 columns (4+4+4).
                  http://www.zurb.com/soapbox
When you download all the files for Foundation, you get CSS,
JavaScript, and this sample file which you can use as a template (or you
    can just start your own HTML page and not use the template).
                        http://foundation.zurb.com/
It’s responsive by default.

 http://foundation.zurb.com/
There’s only one breakpoint, and the default behavior is for the columns to stack
 vertically. This might not be what you want to happen, but you can change it to
   work however you want by adding more breakpoints or different behavior.
                             http://foundation.zurb.com/
<div class="row">
  <div class="twelve columns">
    ...
  </div>
</div>
<div class="row">
  <div class="three columns">
    ...
  </div>
  <div class="nine columns">
    ...
  </div>
</div>



           The grid is built around two key elements: rows
            and columns. Each row gets a class of “row.”
<div class="row">
  <div class="twelve columns">
    ...
  </div>
</div>
<div class="row">
  <div class="three columns">
    ...
  </div>
  <div class="nine columns">
    ...
  </div>
</div>

  The columns within the rows: each gets a class of “columns,” and then a
number that correlates as to how wide it should be out of 12. The first row
   has one column that spans the entire width of 12. The next row has a
     narrow left column (3 of 12) and a wider right column (9 of 12).
Responsive


      Foundation is by default responsive. All the widths are
  percentages. It has one breakpoint at 768 pixels, but you’re not
stuck with that; you can easily change it or add more breakpoints.
class="show-for-xlarge"
    class="show-for-large"
    class="show-for-large-up"
    class="show-for-medium"
    class="show-for-medium-down"
    class="show-for-small"


    breakpoints at:
    767 px, 1279 px, 1441 px
 There are built-in classes you can use to show or hide elements at specific widths;
for example, if you want a nav button to appear on small screens, but the full nav to
         appear on wide screens.You can change the built-in breakpoints.
class="hide-for-xlarge"
class="hide-for-large"
class="hide-for-large-up"
class="hide-for-medium"
class="hide-for-medium-down"
class="hide-for-small"


breakpoints at:
767 px, 1279 px, 1441 px
class="show-for-landscape"
 class="hide-for-landscape"

 class="show-for-portrait"
 class="hide-for-portrait"

 class="show-for-touch"
 class="hide-for-touch"

You probably won’t use these much, but there are built-in classes to show/hide
  elements depending on screen orientation, or whether it’s a touch screen.
Prototyping


You already know that prototyping/designing in PhotoShop doesn’t work when
  you need to plan for varying screen widths. Frameworks are really great for
 responsive prototyping, because you can build a basic site layout very quickly.
Frameworks generally come with built-in styles for various elements, such
as forms and buttons.You probably won’t use these basic, default styles on
   your actual design, but they are handy when doing a quick prototype.
                   http://foundation.zurb.com/docs/forms.php
And they are basic enough that the site will look like a prototype
  and not a finished design, so your client won’t be confused.

              http://foundation.zurb.com/docs/buttons.php
Typography styles are also included.

http://foundation.zurb.com/docs/typography.php
Twitter Bootstrap is another framework that is very popular. Besides giving
    you a responsive grid, there are also lots of pre-styled UI elements.

                   http://twitter.github.com/bootstrap/index.html
Skeleton is another responsive framework. It’s more lightweight (less styled
   elements), easy to use, and there are WordPress and Drupal versions.

                          http://www.getskeleton.com
320 and Up is a great framework, because it’s intended for small-screen first.
That’s the best way to design a responsive site: by starting with the small screen,
 you can focus on your content, which is the most important part of your site.
                     http://stuffandnonsense.co.uk/projects/320andup/
SimpleGrid is another responsive framework. It has three different breakpoints by
 default. Again, you can make any changes you want. It’s very simple to implement.

                                http://simplegrid.info/
The Semantic Grid System is a little more complicated, but allows
  you to set variables for things like gutter and column widths.

                         http://semantic.gs/
Frameless is not exactly a framework — you don’t
download anything — but more of a way to code your site.
                  http://framelessgrid.com/
HTML5 Boilerplate is HTML5 by default, and includes a lot of
additional styles, tools, and polyfills to help you build your site.

                     http://html5boilerplate.com/
The Golden Grid System is a “folding grid”: the columns
 collapse from 16 to 8 to 4 as the viewport narrows.

                http://goldengridsystem.com/
Resources: Frameworks


Which Is Right for Me? 22 Responsive CSS Frameworks and Boilerplates Explained
(Joshua Johnson) - August 2012
http://designshack.net/articles/css/which-is-right-for-me-22-responsive-css-
frameworks-and-boilerplates-explained/

15 More Responsive CSS Frameworks & Boilerplates Worth Considering - August
2012
http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks-
boilerplates-worth-considering/
Navigation Patterns


 One of the tricky parts about making a responsive site is
figuring out what to do with the navigation. The good news
     is that someone else already figured it out for us.
Brad Frost has this great website where you can view sample code
    for different types of things you might want to add to your
 responsive site. (there are a lot of other links and resources too)
         http://bradfrost.github.com/this-is-responsive/patterns.html
Top Navigation


 Navigation nearly always follows one of several “patterns.” The first we’ll
     look at is top navigation. This is the easiest thing to do with your
navigation, and generally requires only minimal CSS to make it responsive.
When we go from wide to narrow width (on the next slide), you’ll
see that the navigation stays in the same part of the page. It moves
  down below the logo, but otherwise is pretty much the same.
                     http://www.gravitatedesign.com
This may work okay if we only have a few navigation items, but they might end up
wrapping in weird ways. Or we may have to make them really small so they’ll fit, in
 which case it would be difficult to accurately select the links on a touch screen.
                            http://www.gravitatedesign.com
This site has a lot of different navigations and navigation items.
They used a strategy of keeping all the nav items at the top...
                        http://www.tuj.ac.jp/
But what happens is they end up filling the whole screen with navigation,
and you can’t see the content. People aren’t coming to our websites for
    the navigation, they’re coming for the content. So this isn’t good.
                           http://www.tuj.ac.jp/
Footer Anchor


Footer anchor navigation is also fairly simple to implement. (by the way, all the
 code examples in this section are from Brad Frost’s This Is Responsive site)
This is Contents magazine. This is what the site looks like
         on a desktop. Basic horizontal navigation.
                 http://contentsmagazine.com/
On a small screen, instead of seeing navigation at the top, you see a button,
   “Explore.” You click this to get to the navigation. It’s an anchor link.

                          http://contentsmagazine.com/
When you click it, you jump down to the bottom of the page where the navigation
is. The problem with this is that it can be disorienting to the user to jump around
    on the page. However, it’s really easy to implement footer anchor navigation.
                             http://contentsmagazine.com/
<div id="site-nav">
    <form> ... </form>
! <nav>
! ! <ul class="nav nav-primary">
! ! ! <li><a href="#">Archive</a></li>
! ! ! <li><a href="#">About</a></li>
! ! ! <li><a href="#">Write For Us</a></li>
! ! ! <li><a href="#">Subscribe</a></li>! ! !
! ! </ul>
! </nav>
</div>

The way this works is that the navigation is at the end of the HTML source
order, so by default it’s at the bottom of the screen. So that’s what you get
  on the small screen, with the “Explore” button at the top of the page.
@media screen and (min-width: 48em) {
! #site-nav {
! ! position: absolute;
! ! top: -5em;
! ! width: 100%;
! ! z-index: 5;
! }
}
    For larger screens, there’s a media query. This simply takes the div
containing the navigation, and uses absolute positioning to put it at the top
  of the page. That only happens when the viewport is 48 ems or wider.
So here it is at the top. That was just the positioning; you’ll
need some additional CSS to make it look the way you want.

                   http://contentsmagazine.com/
Toggle Navigation


Toggle navigation is a bit more complicated to implement.You’ll see a full navigation
 at a wide screen width. At narrow width, you’ll get a Menu button or icon at the
 top, which you’ll click to see the navigation. This is getting to be pretty common.
This is the Starbucks site. The three-line icon in the top right
      means navigation. It’s a fairly common convention.

                       http://starbucks.com/
When you click it, you get the navigation, and the rest of the page content is
   pushed down below it (the navigation doesn’t overlap the content).

                              http://starbucks.com/
The site has media queries to put the nav items either in one or two
 columns, depending on how much width is available. When you click the ‘X,’
the navigation will disappear and the content will go back to it’s normal spot.
                              http://starbucks.com/
Starbucks uses a toggle navigation, which is one of the patterns on Brad
  Frost’s website, so you can look at this example code to see exactly
how it works, and then implement a toggle navigation on your own site.
            http://bradfrost.github.com/this-is-responsive/patterns.html
The example works the same as Starbucks’ site, but has minimal styling
  so it’s easier for you to see which parts of the code are relevant.

           http://bradfrost.github.com/this-is-responsive/patterns.html
<a href="#menu" class="menu-link">Menu</a>
<nav class="" id="menu" role="navigation">
! <ul>
! ! <li><a href="#">Home</a></li>
! ! <li><a href="#">About</a></li>
! ! <li><a href="#">Products</a></li>
! ! <li><a href="#">Services</a></li>
! ! <li><a href="#">Contact</a></li>
! </ul>
</nav>

     This is the HTML. The line at the top is the Menu button.
<a href="#menu" class="menu-link">Menu</a>
<nav class="" id="menu" role="navigation">
! <ul>
! ! <li><a href="#">Home</a></li>
! ! <li><a href="#">About</a></li>
! ! <li><a href="#">Products</a></li>
! ! <li><a href="#">Services</a></li>
! ! <li><a href="#">Contact</a></li>
! </ul>
</nav>

 Below that is the navigation, an unordered list inside a <nav> element.
.js nav[role=navigation] {
! overflow: hidden;
! max-height: 0;
}
nav[role=navigation].active {
! max-height: 15em;
}


    This is the CSS to make the navigation appear and disappear.
.js nav[role=navigation] {
   ! overflow: hidden;
   ! max-height: 0;
   }
   nav[role=navigation].active {
   ! max-height: 15em;
   }

     There are two relevant lines of CSS that apply to the <nav>: one shows the
navigation, the other hides it. We’ll switch between the CSS using JavaScript, which
will apply the class “active” to the <nav> element when the Menu button is clicked.
.js nav[role=navigation] {
  ! overflow: hidden;
  ! max-height: 0;
  }
  nav[role=navigation].active {
  ! max-height: 15em;
  }

The first line of CSS, before the Menu button is clicked, hides the <nav>. So the
      navigation is already hidden when the page loads for the first time.
.js nav[role=navigation] {
   ! overflow: hidden;
   ! max-height: 0;
   }
   nav[role=navigation].active {
   ! max-height: 15em;
   }

The second line of CSS makes the <nav> visible by giving it a max-height of 15em
 (so it’s no longer hidden, and there’s plenty of space to display the whole thing).
<script>
(function() {


$(document).ready(function() {
  $('body').addClass('js');
  var $menu = $('#menu'),
    $menulink = $('.menu-link');


$menulink.click(function() {
  $menulink.toggleClass('active');
  $menu.toggleClass('active');
  return false;
});});


})();
</script>

            This is the JavaScript. It uses toggleClass from jQuery
             to add and remove the “active” class to the <nav>.
@media screen and (min-width: 48.25em) {
! a.menu-link {
! ! display: none;
! }
! .js nav[role=navigation] {
! ! max-height: none;
! }
}

   For the wide screen, of 48.25em or wider, we’re using this media
    query to override what we just set up for the narrow screen.
@media screen and (min-width: 48.25em) {
! a.menu-link {
! ! display: none;
! }
! .js nav[role=navigation] {
! ! max-height: none;
! }
}

     The first line of CSS hides the Menu button, because we
     don’t need it on the wide screen: the navigation is visible.
@media screen and (min-width: 48.25em) {
! a.menu-link {
! ! display: none;
! }
! .js nav[role=navigation] {
! ! max-height: none;
! }
}
 The second line gives the <nav> the max-height of none. This isn’t the
  same as zero; it actually means unlimited. There is no maximum. The
       <nav> can take all the space it needs on the wide screen.
To determine where to put your breakpoint for this type of navigation, you just
have to try it out and see where the horizontal navigation starts to wrap. Keep in
       mind it might be slightly different on different devices or browsers.
Left Nav Flyout
     Left nav flyout is also used a lot, but it’s more complicated to implement,
    so I’m not going to show you the code, but I’ll show you what it looks like.

Keep in mind that as the navigation code gets more complicated, you need to make
 sure there’s a fallback for any devices/browsers that don’t support the code.You
  don’t want users coming to your site and not having access to the navigation.
Like the previous example, there’s an icon at the top,
    horizontal bars, to click to get the navigation.
            http://www.emerilsrestaurants.com
The difference is that here, the content slides off to the side, instead of sliding
down.You would then click the navigation icon again to go back to the content.
  Notice how you can still see the content, so you know that it’s still there.
                          http://www.emerilsrestaurants.com
You can also have submenus within the navigation.

          http://www.emerilsrestaurants.com
Three-Dimensional Menu


  This isn’t from the navigation patterns that I referred
    to, but it’s an example of something pretty cool.
See the arrow over on the left side of the screen? To get the navigation to
appear, you just swipe on your touch screen. On a non-touch interface, you
     simply need to hover your cursor on the left side of the browser.
                           http://lab.hakim.se/meny/
After you swipe/hover, you get this. It’s similar to the previous example of
  left nav flyout, but instead of the content just moving to the right, it is
       displayed so that it looks like a side of a cube that has turned.
                           http://lab.hakim.se/meny/
This is how it looks on a mobile device.

          http://lab.hakim.se/meny/
Resources: Navigation


Responsive Navigation Patterns (Brad Frost) - February 2012
http://bradfrostweb.com/blog/web/responsive-nav-patterns/

Complex Navigation Patterns for Responsive Design (Brad Frost) - August 2012
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-
design/

10 Tips How To Handle Responsive Navigation Menus Successfully (Sabina Idler) -
October 2012
http://blog.usabilla.com/10-tips-how-to-handle-responsive-navigation-menus-
successfully/

10 Responsive Navigation Solutions and Tutorials - August 2012
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-
tutorials/
Preprocessors


Next, lets talk about how we write CSS. A preprocessor helps
you write CSS. It doesn’t add new functionality to the CSS, but
rather it makes your CSS more flexible and easier to maintain.
There are several different preprocessors. Sass and LESS are two of the more
popular. They all do similar things, but have some different features and work in
         different ways.You need to pick which one works best for you.
                       http://sass-lang.com/ and http://lesscss.org/
Sass

  I’m not going to say that one or another is better, but for the purpsoes of this
presentation, I need to pick one for the examples, so I’m going to show you a bit of
          how Sass works. (all code examples are from the Sass website)
The easiest way to explain how this works: you’ll still be writing CSS for
your site, but in special files that have a different extension.You then have
  the ability to add in what are essentially shortcuts as part of your CSS.

   The preprocessor then will take the files with all your shortcuts and
   change them to regular CSS files. When the website is rendered, the
   browser will be looking at the regular CSS files, not your shortcuts.

It’s called a preprocessor because your code will be processed to change it
  to valid CSS before it’s processed by the browser to render the website.
Nesting


Nesting is really handy to keep you from repeating the same things
 over and over again in your CSS, and also can make it easier to
     understand your CSS when you’re looking at a lot of it.
#navbar {
  width: 80%;
  height: 23px;
  ul {
    list-style-type: none;
  }
  li {
    float: left;
  }
}

      Here we are nesting the ul and li within the #navbar.
#navbar {
  width: 80%;
  height: 23px;
  ul {
    list-style-type: none;
  }
  li {
    float: left;
  }
}

        All the other CSS is contained within #navbar
#navbar {
  width: 80%;
  height: 23px;
  ul {
    list-style-type: none;
  }
  li {
    float: left;
  }
}

        The width and height only apply to #navbar
#navbar {
  width: 80%;
  height: 23px;
  ul {
    list-style-type: none;
  }
  li {
    float: left;
  }
}

       But then we have the ul and li within #navbar. So
          they’re actually #navbar ul and #navbar li.
#navbar {
      width: 80%;
      height: 23px;
    }
    #navbar ul {
      list-style-type: none;
    }
    #navbar li {
      float: left;
    }
When the code is processed, we get this, which is no longer nested, and is what the
browser will get. It doesn’t seem all that impressive in this example, but once you
        have multiple layers of nesting, it can make your job a lot easier.
.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}
                 You can also nest styles.
.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc;
}


  This is what the preceding code will turn into when it’s processed.
Variables


  Variables are super-handy. If you have something like a color that is repeated
throughout your styles, you can declare it once and then refer to the variable. If
you need to change it later, there is only one place to change it instead of many.
$main-color: #ce4dd6;
$style: solid;

#navbar {
  border-bottom: {
    color: $main-color;
    style: $style;
  }
}

  Variables start with a dollar sign and are declared like properties.
$main-color: #ce4dd6;
$style: solid;

#navbar {
  border-bottom: {
    color: $main-color;
    style: $style;
  }
}

      So then our styles can simply refer to the variable.
#navbar {
  border-bottom-color: #ce4dd6;
  border-bottom-style: solid;
}




           When it’s processed, we get this.
Mixins


Mixins are awesome. They allow you to reuse complicated styles without
having to copy and paste. Kind of like variables, except for entire styles.
#navbar li {
  -moz-border-radius-top: 10px;
  -webkit-border-top-radius: 10px;
  border-top-radius: 10px;
}

#footer {
  -moz-border-radius-top: 10px;
  -webkit-border-top-radius: 10px;
  border-top-radius: 10px;
}
For example, if we were using this border radius for multiple elements on
 the site. We don’t want to copy and paste it multiple times, and we also
     might want it in one place, in case we need to change part of it.
@mixin rounded-top {
  -moz-border-radius-top: 10px;
  -webkit-border-top-radius: 10px;
  border-top-radius: 10px;
}

#navbar li { @include rounded-top; }
#footer { @include rounded-top; }
   The part at the top is where we declare the mixin, “rounded-
   top.” The part at the bottom is where we are using the mixin,
     applying that set of styles to both #navbar li and #footer.
#navbar li {
  -moz-border-radius-top: 10px;
  -webkit-border-top-radius: 10px;
  border-top-radius: 10px;
}
#footer {
  -moz-border-radius-top: 10px;
  -webkit-border-top-radius: 10px;
  border-top-radius: 10px;
}


    When the code is processed, this is what we end up with.
Math


When you’re doing responsive design, math is one
 of the most useful functions of a preprocessor.
.sidebar {
  width: percentage(360px / 960px);
}




  Instead of getting out our calculator to figure out percentages for
    widths, we can just write the original numbers into our code.
.sidebar {
  width: 37.5%;
}




     When it’s processed, the preprocessor figures out the
          percentage for us and puts it in the CSS.
@media Bubbling


@media bubbling is like nesting, but for media queries. So this is handy for
 responsive design. It can keep your stylesheets easier to understand.
.profile-pic {
  float: left;
  width: 250px;
  @media screen and (max-width: 320px) {
    width: 100px;
  }
  @media screen and (min-width: 1200px) {
    float: none;
  }
}

     In this example, we’re applying different CSS to profile-pic,
  depending on the viewport width. Everything is inside profile-pic.
.profile-pic {
  float: left;
  width: 250px;
  @media screen and (max-width: 320px) {
    width: 100px;
  }
  @media screen and (min-width: 1200px) {
    float: none;
  }
}

            These styles apply to profile-pic.
.profile-pic {
  float: left;
  width: 250px;
  @media screen and (max-width: 320px) {
    width: 100px;
  }
  @media screen and (min-width: 1200px) {
    float: none;
  }
}

       Then here are our media queries, inside! We don’t
       need to repeat profile-pic, we just need the style.
.profile-pic {
     float: left; width: 250px;
   }
   @media screen and (max-width: 320px) {
     .profile-pic {
        width: 100px;
     }
   }
   @media screen and (min-width: 1200px) {
     .profile-pic {
        float: none;
     }
   }
So when it’s processed, this is what we get: our media queries “bubble” out of the
     nest (yes, that’s why it’s called @media bubbling) onto separate lines.
$break-small: 320px;
$break-large: 1200px;


.profile-pic {
  float: left;
  width: 250px;
  @media screen and (max-width: $break-small) {
    width: 100px;
  }
  @media screen and (min-width: $break-large) {
    float: none;
  }
}
         We can also use variables as well, like if we have
        breakpoints that are used for various site elements.
Resources: Preprocessors


Sass And LESS: An Introduction To CSS Preprocessors (Steven Bradley) - April 2012
http://www.vanseodesign.com/css/css-preprocessors/

An Introduction To LESS, And Comparison To Sass (Jeremy Hixon) - September
2011
http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-
comparison-to-sass/

Responsive Web Design in Sass: Using Media Queries in Sass 3.2 (Mason Wendell)
- April 2012
http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-
queries-in-sass-32

Create faster fluid layouts with LESS (Paul Mist) - August 2012
http://www.netmagazine.com/tutorials/create-faster-fluid-layouts-less
Responsive Images


Responsive images are quite a hot topic lately.
img, object, video {
  max-width: 100%
}


  We all know that we use max-width: 100% so that our images/media
 can change size but will always fit within their containing element. The
 problem is that this means the image we upload to the site has to be
  the largest size that it will ever display as on the site. We can’t scale
       up images, they’ll get blurry. We can only scale them down.
Performance

So then we’re wasting a lot of bandwidth, forcing users to download images that
 are much larger than what they might need for a particular device/screen size.
And also, how do we serve up the appropriate images for retina screens without
       wasting all that bandwidth on devices that don’t need HD images?
<picture>


The <picture> element has been proposed, but they’re still hammering
out the details, so you can’t use it yet. But I’m going to tell you how it
 will likely work, and then tell you what you can do in the meantime.
                    http://www.w3.org/community/respimg/
<picture>
     <source srcset="small-1.jpg 1x,
   small-2.jpg 2x">
     <source media="(min-width: 18em)"
   srcset="med-1.jpg 1x, med-2.jpg 2x">
     <source media="(min-width: 45em)"
   srcset="large-1.jpg 1x, large-2.jpg 2x">
     <img src="small-1.jpg">
   </picture>


This is what the code will look like, when we want to display an image on our site.
<picture>
   <source srcset="small-1.jpg 1x,
 small-2.jpg 2x">
   <source media="(min-width: 18em)"
 srcset="med-1.jpg 1x, med-2.jpg 2x">
   <source media="(min-width: 45em)"
 srcset="large-1.jpg 1x, large-2.jpg 2x">
   <img src="small-1.jpg">
 </picture>

This part of the code pretty much works the same as a media query, telling the
      browser to display a different image based on the viewport width.
<picture>
  <source srcset="small-1.jpg 1x,
small-2.jpg 2x">
  <source media="(min-width: 18em)"
srcset="med-1.jpg 1x, med-2.jpg 2x">
  <source media="(min-width: 45em)"
srcset="large-1.jpg 1x, large-2.jpg 2x">
  <img src="small-1.jpg">
</picture>

  So not only are there different images for each width (small, med,
     large), there are also versions for regular (1x) and HD (2x).
<picture>
  <source srcset="small-1.jpg 1x,
small-2.jpg 2x">
  <source media="(min-width: 18em)"
srcset="med-1.jpg 1x, med-2.jpg 2x">
  <source media="(min-width: 45em)"
srcset="large-1.jpg 1x, large-2.jpg 2x">
  <img src="small-1.jpg">
</picture>

Then, for older browsers that won’t support the new <picture> element,
  there’s a fallback, using <img>, which the older browsers do support.
Different Images


But it’s not just different sizes of the same image: you
    may actually want to display different images.
For example, the image on the wide version of this site wouldn’t look nearly as
good at a smaller size. So instead, they choose to use a different crop of the same
      image. Sometimes, you may want to display a different image entirely.
                           http://www.ottersurfboards.co.uk/
Picturefill


Picturefill is a way for you to have all that functionality now.
What’s a Polyfill?
Picturefill is a “polyfill.” That’s a piece of code that fills in to do something in
    older browsers that is only natively possible in newer browsers. For
 example, a polyfilll can make older versions of IE do all the things we wish
 they could do. But there is a downside: using a polyfill adds extra code to
 your site, so there’s more to download and more to process. Think about
whether you really need to do the cool new functionality in every browser.
Picturefill is available on Github.

 https://github.com/scottjehl/picturefill
<div data-picture data-alt="Your alt text.">
  <div data-src="/img/small.jpg"></div>
  <div data-src="/img/medium.jpg" data-media="(min-width:
  500px)"></div>
  <div data-src="/img/large.jpg" data-media="(min-width:
  1000px)"></div>


<!-- Fallback content for non-JS browsers. Same img src as the
initial, unqualified source element. -->
  <noscript>
    <img src="/img/small.jpg" alt="Your alt text.">
  </noscript>
</div>

         We’ll need to upload some JavaScript to our site. Then
          this is the code we use to add an image to our site.
<div data-picture data-alt="Your alt text.">
  <div data-src="/img/small.jpg"></div>
  <div data-src="/img/medium.jpg" data-media="(min-width:
  500px)"></div>
  <div data-src="/img/large.jpg" data-media="(min-width:
  1000px)"></div>


<!-- Fallback content for non-JS browsers. Same img src as the
initial, unqualified source element. -->
  <noscript>
    <img src="/img/small.jpg" alt="Your alt text.">
  </noscript>
</div>

         Similar to what I showed you previously, we’re linking to
           multiple versions of the image (or different images).
<div data-picture data-alt="Your alt text.">
  <div data-src="/img/small.jpg"></div>
  <div data-src="/img/medium.jpg" data-media="(min-width:
  500px)"></div>
  <div data-src="/img/large.jpg" data-media="(min-width:
  1000px)"></div>


<!-- Fallback content for non-JS browsers. Same img src as the
initial, unqualified source element. -->
  <noscript>
    <img src="/img/small.jpg" alt="Your alt text.">
  </noscript>
</div>

           Then we tell the browser which ones should be
               displayed at different viewport widths.
<div data-picture data-alt="Your alt text.">
  <div data-src="/img/small.jpg"></div>
  <div data-src="/img/medium.jpg" data-media="(min-width:
  500px)"></div>
  <div data-src="/img/large.jpg" data-media="(min-width:
  1000px)"></div>


<!-- Fallback content for non-JS browsers. Same img src as the
initial, unqualified source element. -->
  <noscript>
    <img src="/img/small.jpg" alt="Your alt text.">
  </noscript>
</div>

         If the browser doesn’t support JavaScript, Picturefill won’t
           work. So you use <noscript> to serve a fallback image.
<div data-picture data-alt="Your alt text.">
  <div data-src="/img/small.jpg"></div>
  <div data-src="/img/medium.jpg" data-media="(min-width:
  500px)"></div>
  <div data-src="/img/large.jpg" data-media="(min-width:
  1000px)"></div>


<!--[if (lt IE 9) & (!IEMobile)]>
  <div data-src="medium.jpg"></div>
<![endif]-->


<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified
source element. -->
  <noscript>
    <img src="/img/small.jpg" alt="Your alt text.">
  </noscript>
</div>



Then there’s older IE, which won’t do the media query part of the code. So
    we’ll use conditional comments to give it the appropriate image.
HD/Retina



    HD/retina screens have twice as many pixels in each direction
(horizontal, vertical) so you actually need an image that uses 4 times as
     many pixels, in order to take full advantage of the HD screen.
<div data-src="medium.jpg" data-media="(min-width:
400px)"></div>


<div data-src="medium_x2.jpg" data-media="(min-
width: 400px) and (min-device-pixel-ratio:
2.0)"></div>




           Picturefill supports image replacement for
           retina. We have two versions of the image.
<div data-src="medium.jpg" data-media="(min-width:
400px)"></div>


<div data-src="medium_x2.jpg" data-media="(min-
width: 400px) and (min-device-pixel-ratio:
2.0)"></div>




         They both have the same minimum width query.
<div data-src="medium.jpg" data-media="(min-width:
400px)"></div>


<div data-src="medium_x2.jpg" data-media="(min-
width: 400px) and (min-device-pixel-ratio:
2.0)"></div>




    But this one has an additional query of minimum device pixel
    ratio. So the second image will be served if it’s a HD display.
Adaptive Images


Adaptive Images is a totally different way to approach
   the issue of serving multiple sizes of an image.
Implement this code, and it will detect the screen size, and then create and
serve the appropriate re-scaled version of the image. We only need to upload
   the largest version of the image. The server does the rest of the work.
                           http://adaptive-images.com/
Apache & PHP


One caveat: it only works on sites running Apache and PHP. However, if that
  is your site, you can use this solution without changing the actual HTML
 you use for images (unlike with Picturefill). So it’s very easy to implement.
Plus, you can use it on top of any CMS, since it doesn’t change your HTML.
<?php

$resolutions   = array(1382, 992, 768,
480); // the resolution break-points to
use (screen widths, in pixels)

...

       To set it up, we’ll need to edit the .htaccess file for our site.
      We’ll then upload a PHP file, changing a few numbers in the file
        to match the actual breakpoints we’re using on our site.
<script>document.cookie='resolution='+Math
.max(screen.width,screen.height)+';
path=/';</script>



Then we’ll add this JavaScript in the <head> of our site. As the page starts
  to load, the JavaScript writes a session cookie to store the user’s screen
size. The way websites work is that as a page is loading, when the browser
  encounters an <img> tag, it sends a request to the server for the image.
<IfModule mod_rewrite.c>
  Options +FollowSymlinks
  RewriteEngine On


  RewriteCond %{REQUEST_URI} !assets


  RewriteCond %{REQUEST_URI} !ai-cache


  RewriteRule .(?:jpe?g|gif|png)$
  adaptive-images.php


</IfModule>

   Before sending the image back to the browser, the server looks
    at the .htaccess file to see if there are any special instructions.
<IfModule mod_rewrite.c>
  Options +FollowSymlinks
  RewriteEngine On


  RewriteCond %{REQUEST_URI} !assets


  RewriteCond %{REQUEST_URI} !ai-cache


  RewriteRule .(?:jpe?g|gif|png)$
  adaptive-images.php


</IfModule>
    In this case, we added special instructions in .htaccess, telling it
     that if the server is being asked for an image file, it should go
        to adaptive-images.php instead of just serving the image.
$resolutions   = array(1382, 992, 768,
    480); // the resolution break-points to
    use (screen widths, in pixels)



  The adaptive-images.php file looks at the cookie (remember, it stored the user’s
    screen size), and figures out which size image it should serve, based on the
breakpoints we set earlier. It serves the original image if appropriate, or else creates
 a scaled-down copy of the image. The scaled-down image will be cached for later
  use, so the server won’t need to make the same image size over and over again.
This is an example from the Adaptive Images website. The various
versions of the image range from 14 KB to 82 KB. So you’re saving a lot
of bandwidth by serving smaller images where you can. Adaptive Images
can also handle HD images, you just need to adjust the JavaScript a bit.
                        http://adaptive-images.com/
Other Image Solutions


Responsive Images
https://github.com/filamentgroup/Responsive-Images

Retina.js
http://retinajs.com/

FitVids.js (video)
http://fitvidsjs.com/
Resources: Responsive Images


W3C Responsive Images Community Group
http://www.w3.org/community/respimg/

Which responsive images solution should you use? - May 2012
http://css-tricks.com/which-responsive-images-solution-should-you-use/

Responsive Images and Web Standards at the Turning Point (Mat Marquis) - May
2012
http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-
turning-point/

Compressive Images (Scott Jehl) - October 2012
http://filamentgroup.com/lab/rwd_img_compression/
Responsive Data Tables


Data tables can be kind of tricky. If there’s a lot of data, how
do you fit it on a small screen? There are many ways you can
    do this; I’m going to show you two different options.
Responsive Tables uses CSS/JavaScript to change the display of the
  table. This is what your table will look like on a wide screen.

            http://www.zurb.com/playground/responsive-tables
At a narrow width, it pins the first column (which is likely
  headings/labels), and puts a scrollbar on the rest of it.

        http://www.zurb.com/playground/responsive-tables
<link rel="stylesheet" href="responsive-
tables.css">

<script src="responsive-tables.js">
</script>




To use this, we just need to upload the CSS and JavaScript files to our site.
<table class="responsive">
  <tr> …




        And then add the “responsive” class to any
        table we want to make responsive. That’s it.
Here’s a totally different approach, from CSS-Tricks. This is a table at full width.

              http://css-tricks.com/examples/ResponsiveTables/responsive.php
When we make the screen narrow, what happens is that the
data is displayed one row at a time, with the labels showing
  up over and over, so we know what the data refers to.
    http://css-tricks.com/examples/ResponsiveTables/responsive.php
It’s hard to explain, so look at the screenshot. This is
what you see when you scroll further down the page.
 http://css-tricks.com/examples/ResponsiveTables/responsive.php
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-
device-width: 1024px) {
!    /* Force table to not be like tables anymore */
!    table, thead, tbody, th, td, tr {
!    !      display: block;
!    }
!    /* Hide table headers (but not display: none;, for accessibility) */
!    thead tr {
!    !      position: absolute;
!    !      top: -9999px;
!    !      left: -9999px;
!    }
!    td {
!    !      /* Behave   like a "row" */
!    !      border: none;
!    !      border-bottom: 1px solid #eee;
!    !      position: relative;
!    !      padding-left: 50%;
!    }

    The implementation is quite a bit more complicated than the previous
    example. In the CSS, we’re basically making each table cell into a row.
!   td:before {
!   !    /* Now like a table header */
!   !    position: absolute;
!   !    /* Top/left values mimic padding */
!   !    top: 6px;
!   !    left: 6px;
!   !    width: 45%;
!   !    padding-right: 10px;
!   !    white-space: nowrap;
!   }
!   /* Label the data */
!   td:nth-of-type(1):before { content: "First Name"; }
!   td:nth-of-type(2):before { content: "Last Name"; }
!   td:nth-of-type(3):before { content: "Job Title"; }
!   td:nth-of-type(4):before { content: "Favorite Color"; }
!   td:nth-of-type(5):before { content: "Wars of Trek?"; }
!   td:nth-of-type(6):before { content: "Porn Name"; }
!   td:nth-of-type(7):before { content: "Date of Birth"; }
!   td:nth-of-type(8):before { content: "Dream Vacation City"; }
!   td:nth-of-type(9):before { content: "GPA"; }
!   td:nth-of-type(10):before { content: "Arbitrary Data"; }
}

    And then we use :before to make the labels show up adjacent to the
     data for every item. We have to manually enter the labels into the
      stylesheet for each table, so this can end up being a lot of work.
Resources: Responsive Tables


A Responsive Design Approach for Complex, Multicolumn Data Tables
http://filamentgroup.com/lab/
responsive_design_approach_for_complex_multicolumn_data_tables/

Responsive Data Tables with jQuery
http://mobifreaks.com/coding/responsive-data-tables-jquery/

Responsive Patterns: Table Patterns
http://bradfrost.github.com/this-is-responsive/patterns.html#tables

Responsive Data Tables and Screen Reader Accessibility (Jason Kiss) - August 2011
http://www.accessibleculture.org/articles/2011/08/responsive-data-tables-and-
screen-reader-accessibility/
Polyfills
    I mentioned polyfills earlier.You can make older browsers do what newer
browsers do. That being said, responsive design is about being responsive to the
  device and the browser, not about having your site look exactly the same on
every device. So if you start out building your site with the basics first and doing
 progressive enhancement, rather than starting out with the most complicated
   version of the site and doing graceful degradation, you’ll find that you don’t
      always need to make the older browsers act like the newer browsers.
Modernizr is a JavaScript library that detects whether a user’s browser can
take advantage of particular features in HTML5 and CSS3.You just need to
   upload a JavaScript file, and then call it from the <head> of the page.
                            http://modernizr.com/
<html class=" js canvas canvastext
   geolocation crosswindowmessaging no-
   websqldatabase indexeddb hashchange
   historymanagement draganddrop websockets
   rgba hsla multiplebgs backgroundsize
   borderimage borderradius boxshadow opacity
   cssanimations csscolumns cssgradients no-
   cssreflections csstransforms no-
   csstransforms3d csstransitions video
   audio localstorage sessionstorage
   webworkers applicationcache svg smil
   svgclippaths fontface">
 When the page renders, the JavaScript adds classes to the <html> tag to show
which HTML5/CSS3 features are supported. So you’ll get something different here
   based on the browser, and then you can use it to pick what CSS is applied.
<html class=" js canvas canvastext
geolocation crosswindowmessaging no-
websqldatabase indexeddb hashchange
historymanagement draganddrop websockets
rgba hsla multiplebgs backgroundsize
borderimage borderradius boxshadow opacity
cssanimations csscolumns cssgradients no-
cssreflections csstransforms no-
csstransforms3d csstransitions video
audio localstorage sessionstorage
webworkers applicationcache svg smil
svgclippaths fontface">
  For example, in the latest version of Firefox, there are only a few
  that are not supported. They have “no-” before the feature. Keep
         in mind these are all now CSS classes on your page.
<HTML class=" js no-canvas no-canvastext
no-geolocation no-crosswindowmessaging no-
websqldatabase no-indexeddb no-hashchange
no-historymanagement draganddrop no-
websockets no-rgba no-hsla no-multiplebgs
no-backgroundsize no-borderimage no-
borderradius no-boxshadow no-opacity no-
cssanimations no-csscolumns no-
cssgradients no-cssreflections no-
csstransforms no-csstransforms3d no-
csstransitions fontface no-video no-audio
no-localstorage no-sessionstorage no-
webworkers no-applicationcache no-svg no-
smil no-svgclippaths">
              This is what I get in IE7.
<HTML class=" js no-canvas no-canvastext
no-geolocation no-crosswindowmessaging no-
websqldatabase no-indexeddb no-hashchange
no-historymanagement draganddrop no-
websockets no-rgba no-hsla no-multiplebgs
no-backgroundsize no-borderimage no-
borderradius no-boxshadow no-opacity no-
cssanimations no-csscolumns no-
cssgradients no-cssreflections no-
csstransforms no-csstransforms3d no-
csstransitions fontface no-video no-audio
no-localstorage no-sessionstorage no-
webworkers no-applicationcache no-svg no-
smil no-svgclippaths">
              Yep, a whole lotta NOs.
.no-boxshadow {
  ...
}



 So let’s say we happen to be using boxshadow in our site design. We can
 add CSS to do something different only for browsers that don’t support
boxshadow. We might want to use a polyfill to replicate behavior, or if that
  part of the style isn’t essential to the design, we might just need some
          simple CSS to accommodate the difference in the design.
This is a great site: they’ve collected links to all the different polyfills you
  can use to replicate various HTML5 functionality in older browsers.

     https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Respond is one particular polyfill I want to point out. It enables
max-width and min-width media queries in browsers that don’t
          support them. (IE8 and older, particularly)
                 https://github.com/scottjehl/Respond
<!--[if lte IE 8]>
<script src=”js/respond.min.js”/></script>
<![endif]-->




    You just need to upload the JavaScript file, and then link to it
          from your <head> using a conditional comment.
More Resources
Prototyping & Design Process


Dive into Responsive Prototyping with Foundation (Jonathan Smiley) - April 2012
http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-
foundation/

Design Process In The Responsive Age (Drew Clemons) - May 2012
http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-
age/

Responsive Web Design Sketch Sheets
http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets

Style Tiles
http://styletil.es/
Books to Read


Responsive Web Design
Ethan Marcotte (2011)
http://www.abookapart.com/products/responsive-web-design/

Mobile First
Luke Wroblewski (2011)
http://www.abookapart.com/products/mobile-first

Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement
Aaron Gustafson (2011)
http://easy-readers.net/books/adaptive-web-design/

Implementing Responsive Design: Building sites for an anywhere, everywhere web
Tim Kadlec (2012)
http://www.implementingresponsivedesign.com/
Other Websites & Misc.

@RWD
links about responsive design (Ethan Marcotte)
https://twitter.com/RWD


Future Friendly
making things that are future-friendly
http://futurefriend.ly/


Brad Frost
blog that covers responsive design
http://bradfrostweb.com/blog/


Mediaqueri.es
inspirational websites using media queries and responsive web design
http://mediaqueri.es/
If you were actually at the CWSA event (Oct. 30, 2012), you’ll
recognize “Flo” from the Progressive lobby. And that’s me on the
  left. It’s been my lifelong dream to pose for a picture next to a
 cardboard cutout of “Flo.” I can now cross it off my bucket list.
*Also if you were at the CWSA event, and arrived in time
 for the warm-up act, you will appreciate this resource:
        My Hermit Crab is Not Moving - Is He Molting or Is He Dead?
      http://exoticpets.about.com/od/hermitcrabs/f/hcmoltordead.htm


     Photo credit: Jessica Diamond via Creative Commons http://flic.kr/p/4T5miW
Thanks!


Clarissa Peterson
         @clarissa
  clarissapeterson.com
mail@clarissapeterson.com

More Related Content

Similar to Responsive Design Tools & Resources

The future of BYU web design
The future of BYU web designThe future of BYU web design
The future of BYU web designNate Walton
 
Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design CLEVER°FRANKE
 
Basic webpage layout and design
Basic webpage layout and designBasic webpage layout and design
Basic webpage layout and designAndz Bass
 
10 golden rules for website design
10 golden rules for website design10 golden rules for website design
10 golden rules for website designHih7 Webtech Pvt Ltd
 
Graphic Design For Web
Graphic Design For WebGraphic Design For Web
Graphic Design For WebDeniz Gökçe
 
Optimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web DesignOptimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web DesignClarissa Peterson
 
Optimizing User Experience Across Devices with Responsive Web Design (Clariss...
Optimizing User Experience Across Devices with Responsive Web Design (Clariss...Optimizing User Experience Across Devices with Responsive Web Design (Clariss...
Optimizing User Experience Across Devices with Responsive Web Design (Clariss...uxpa-dc
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Clarissa Peterson
 
Flex Web Development.pdf
Flex Web Development.pdfFlex Web Development.pdf
Flex Web Development.pdfSonia Simi
 
Re-Coding for Responsive Design: Tips, Tricks, and Traps
Re-Coding for Responsive Design: Tips, Tricks, and TrapsRe-Coding for Responsive Design: Tips, Tricks, and Traps
Re-Coding for Responsive Design: Tips, Tricks, and TrapsAliciaVirtue
 
5 ui tips for web apps
5 ui tips for web apps5 ui tips for web apps
5 ui tips for web appsChen Stephen
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereChris Love
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignCantina
 
Why should we build our website responsive
Why should we build our website responsiveWhy should we build our website responsive
Why should we build our website responsiveOmkarsoft Bangalore
 
Exploring Our Front-End Workflows
Exploring Our Front-End WorkflowsExploring Our Front-End Workflows
Exploring Our Front-End Workflowsnolly00
 
Professional web development with libraries
Professional web development with librariesProfessional web development with libraries
Professional web development with librariesChristian Heilmann
 
7 Important Guidelines for Effective Responsive Web Design
7 Important Guidelines for Effective Responsive Web Design7 Important Guidelines for Effective Responsive Web Design
7 Important Guidelines for Effective Responsive Web DesignProweaver, Inc
 
Responsive Web Design 101
Responsive Web Design 101Responsive Web Design 101
Responsive Web Design 101jonnymilano
 
Responsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzwordResponsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzwordRuss Weakley
 

Similar to Responsive Design Tools & Resources (20)

The future of BYU web design
The future of BYU web designThe future of BYU web design
The future of BYU web design
 
Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design
 
Basic webpage layout and design
Basic webpage layout and designBasic webpage layout and design
Basic webpage layout and design
 
10 golden rules for website design
10 golden rules for website design10 golden rules for website design
10 golden rules for website design
 
Graphic Design For Web
Graphic Design For WebGraphic Design For Web
Graphic Design For Web
 
Optimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web DesignOptimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web Design
 
Optimizing User Experience Across Devices with Responsive Web Design (Clariss...
Optimizing User Experience Across Devices with Responsive Web Design (Clariss...Optimizing User Experience Across Devices with Responsive Web Design (Clariss...
Optimizing User Experience Across Devices with Responsive Web Design (Clariss...
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
 
Sbwire 531031
Sbwire 531031Sbwire 531031
Sbwire 531031
 
Flex Web Development.pdf
Flex Web Development.pdfFlex Web Development.pdf
Flex Web Development.pdf
 
Re-Coding for Responsive Design: Tips, Tricks, and Traps
Re-Coding for Responsive Design: Tips, Tricks, and TrapsRe-Coding for Responsive Design: Tips, Tricks, and Traps
Re-Coding for Responsive Design: Tips, Tricks, and Traps
 
5 ui tips for web apps
5 ui tips for web apps5 ui tips for web apps
5 ui tips for web apps
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
 
Why should we build our website responsive
Why should we build our website responsiveWhy should we build our website responsive
Why should we build our website responsive
 
Exploring Our Front-End Workflows
Exploring Our Front-End WorkflowsExploring Our Front-End Workflows
Exploring Our Front-End Workflows
 
Professional web development with libraries
Professional web development with librariesProfessional web development with libraries
Professional web development with libraries
 
7 Important Guidelines for Effective Responsive Web Design
7 Important Guidelines for Effective Responsive Web Design7 Important Guidelines for Effective Responsive Web Design
7 Important Guidelines for Effective Responsive Web Design
 
Responsive Web Design 101
Responsive Web Design 101Responsive Web Design 101
Responsive Web Design 101
 
Responsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzwordResponsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzword
 

More from Clarissa Peterson

Designing for Users: How to Create a Better User Experience
Designing for Users: How to Create a Better User ExperienceDesigning for Users: How to Create a Better User Experience
Designing for Users: How to Create a Better User ExperienceClarissa Peterson
 
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly FormsCreating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly FormsClarissa Peterson
 
Designing Responsive Websites
Designing Responsive WebsitesDesigning Responsive Websites
Designing Responsive WebsitesClarissa Peterson
 
Responsive Design in the Real World
Responsive Design in the Real WorldResponsive Design in the Real World
Responsive Design in the Real WorldClarissa Peterson
 
Responsive Design Essentials
Responsive Design EssentialsResponsive Design Essentials
Responsive Design EssentialsClarissa Peterson
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & ResourcesClarissa Peterson
 
Content Strategy for Responsive Websites
Content Strategy for Responsive WebsitesContent Strategy for Responsive Websites
Content Strategy for Responsive WebsitesClarissa Peterson
 
Responsive Design Heaven & Hell
Responsive Design Heaven & HellResponsive Design Heaven & Hell
Responsive Design Heaven & HellClarissa Peterson
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web DesignClarissa Peterson
 

More from Clarissa Peterson (17)

Alt Text Is Your Superpower
Alt Text Is Your SuperpowerAlt Text Is Your Superpower
Alt Text Is Your Superpower
 
Designing for Users: How to Create a Better User Experience
Designing for Users: How to Create a Better User ExperienceDesigning for Users: How to Create a Better User Experience
Designing for Users: How to Create a Better User Experience
 
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly FormsCreating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
 
Making the Web Easy
Making the Web EasyMaking the Web Easy
Making the Web Easy
 
Responsive Color
Responsive ColorResponsive Color
Responsive Color
 
Responsive Design Workshop
Responsive Design WorkshopResponsive Design Workshop
Responsive Design Workshop
 
UX & Responsive Design
UX & Responsive DesignUX & Responsive Design
UX & Responsive Design
 
Designing Responsive Websites
Designing Responsive WebsitesDesigning Responsive Websites
Designing Responsive Websites
 
Responsive Typography II
Responsive Typography IIResponsive Typography II
Responsive Typography II
 
Responsive Design in the Real World
Responsive Design in the Real WorldResponsive Design in the Real World
Responsive Design in the Real World
 
Responsive Design Essentials
Responsive Design EssentialsResponsive Design Essentials
Responsive Design Essentials
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
 
Content Strategy for Responsive Websites
Content Strategy for Responsive WebsitesContent Strategy for Responsive Websites
Content Strategy for Responsive Websites
 
UX & Responsive Design
UX & Responsive DesignUX & Responsive Design
UX & Responsive Design
 
Responsive Design
Responsive Design Responsive Design
Responsive Design
 
Responsive Design Heaven & Hell
Responsive Design Heaven & HellResponsive Design Heaven & Hell
Responsive Design Heaven & Hell
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 

Recently uploaded

办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一diploma 1
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptMaryamAfzal41
 
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Yantram Animation Studio Corporation
 
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024CristobalHeraud
 
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一Fi L
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
Call Girls Meghani Nagar 7397865700 Independent Call Girls
Call Girls Meghani Nagar 7397865700  Independent Call GirlsCall Girls Meghani Nagar 7397865700  Independent Call Girls
Call Girls Meghani Nagar 7397865700 Independent Call Girlsssuser7cb4ff
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social MediaD SSS
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,Aginakm1
 
西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造kbdhl05e
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一z xss
 
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一diploma 1
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfShivakumar Viswanathan
 
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一Fi ss
 
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdfPassbook project document_april_21__.pdf
Passbook project document_april_21__.pdfvaibhavkanaujia
 
办理学位证加州州立大学洛杉矶分校毕业证成绩单原版一比一
办理学位证加州州立大学洛杉矶分校毕业证成绩单原版一比一办理学位证加州州立大学洛杉矶分校毕业证成绩单原版一比一
办理学位证加州州立大学洛杉矶分校毕业证成绩单原版一比一Fi L
 
shot list for my tv series two steps back
shot list for my tv series two steps backshot list for my tv series two steps back
shot list for my tv series two steps back17lcow074
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10uasjlagroup
 

Recently uploaded (20)

办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis ppt
 
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
 
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
 
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
Call Girls Meghani Nagar 7397865700 Independent Call Girls
Call Girls Meghani Nagar 7397865700  Independent Call GirlsCall Girls Meghani Nagar 7397865700  Independent Call Girls
Call Girls Meghani Nagar 7397865700 Independent Call Girls
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
 
西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
 
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdf
 
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
 
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdfPassbook project document_april_21__.pdf
Passbook project document_april_21__.pdf
 
办理学位证加州州立大学洛杉矶分校毕业证成绩单原版一比一
办理学位证加州州立大学洛杉矶分校毕业证成绩单原版一比一办理学位证加州州立大学洛杉矶分校毕业证成绩单原版一比一
办理学位证加州州立大学洛杉矶分校毕业证成绩单原版一比一
 
shot list for my tv series two steps back
shot list for my tv series two steps backshot list for my tv series two steps back
shot list for my tv series two steps back
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
 

Responsive Design Tools & Resources

  • 1. Responsive Design in the Real World Tools & Resources to Make Responsive Design Easier Cleveland Web Standards Association October 30, 2012 Clarissa Peterson @clarissa
  • 2. What We’ll Cover: Frameworks Navigation Patterns Preprocessors Responsive Images Responsive Data Tables Polyfills
  • 3. Captions added for those of you playing along at home! Almost as good as being there.*
  • 4. Responsive Web Design This is not an introduction to responsive web design. If you’ve been doing some responsive design, or at least know what it is pretty well, this presentation is going to tell you about some tools and resources that will make it easier for you to build responsive sites. But for those of you who need a little background, I’m going to explain reaaaaally quickly what responsive design is. The rest of you can just click forward a few slides. The non-technical description first:
  • 5. When the iPhone was introduced, this is what websites looked like. They were very, very tiny, and you had to zoom in and out to read anything.
  • 6. This kind of sucked, because if you made the text big enough to read, you couldn’t even see the whole line of text at once. (yes, a lot of sites are still like this)
  • 7. Responsive Web Design Responsive design solves that problem. Instead of making the website really tiny so it fits, the browser is able to keep the content a normal size regardless of what size your screen is, and then it just kind of rearranges everything so it fits on the screen in a way that makes sense and takes advantage of the available space.
  • 8. Go to the Boston Globe site in your browser and then make the browser window narrower and wider — see what happens. The text stays the same size, but the content rearranges from three columns to two and then one column as the browser window gets narrower. That’s responsive design. http://www.bostonglobe.com
  • 9. Resizing your browser window is just an easy way to see the changes all at once. But what we’re really talking about is the difference in how a site looks from one device to the next — such as a mobile phone, a tablet, a laptop, or a desktop computer. Making your browser window very narrow (about 300 pixels) will give you a decent idea of what a website looks like on a mobile phone, but not entirely. Make sure to test on actual devices.
  • 10. 1. Flexible Grid 2. Flexible Images/Media 3. Media Queries There are three parts to responsive design.
  • 11. 1. Flexible Grid 2. Flexible Images/Media 3. Media Queries The first two, the flexible grid and flexible images/media are pretty easy to explain.
  • 12. I’ll demonstrate on The Boston Globe site. This is the site at about 1280 pixels wide. http://bostonglobe.com/
  • 13. This is the site at a somewhat narrower width. Note that the columns have each decreased in width in proportion to the site. So has that big picture off on the left. That’s because everything is measured in percent instead of pixels. http://bostonglobe.com/
  • 14. In contrast, check out the Milwaukee Journal-Sentinel website. It’s also a newspaper, also with three columns. http://www.jsonline.com/
  • 15. But look what happens at a narrower width. The columns all stayed the exact same width, so although the empty margins gave us some room to maneuver, after those were gone, the browser had no choice but to chop off the right side of the page. http://www.jsonline.com/
  • 16. 1. Flexible Grid 2. Flexible Images/Media 3. Media Queries The third part of responsive design is media queries. This is the magic part of responsive design. Okay, it’s not really magic. It’s actually pretty simple how a media query works. It’s just an if-then statement, if any of you are programmers. And even if you’re not a programmer, the concept is simple:
  • 17. If X is true, then do Y. If X is not true, then don’t do Y. If those letters look too much like algebra, I can give you an example: If the time is 12:00, eat lunch. If the time is not 12:00, then don’t eat lunch. That sounds pretty straightforward, right? That’s a media query. In responsive design, what we’re generally going to be querying is the viewport width. That is more or less the same thing as the width of your browser, which is why we can resize our browser window to demonstrate responsive design. For mobile devices, the viewport width is essentially the same thing as the screen width, since you can’t have a non- full-size browser window like you can on your computer. So you’ll often hear people referring to screen width in responsive design when they really mean viewport width. They know what they mean, though.
  • 18. In responsive design, media queries are querying the viewport width, and telling the browser to do something different depending on the viewport width. http://www.unitedpixelworkers.com/
  • 19. So as the viewport gets wider on the United Pixelworkers site, you can see the site looks different. The icons at the top rearranged themselves a bit, and the font changed size. http://www.unitedpixelworkers.com/
  • 20. Now, there are two columns instead of one! The media query is telling the browser: When the viewport is wider than X pixels, do this section of the CSS to make it be two columns instead of one. If the viewport is not wider, ignore that http://www.unitedpixelworkers.com/
  • 21. And things just keep on rearranging! You can have as many media queries as you want. http://www.unitedpixelworkers.com/
  • 22. And a media query can make pretty much any change to the CSS that is being used to render the website. For responsive design, normally it’s going to be parts of the CSS having to do with layout. http://www.unitedpixelworkers.com/
  • 23. But if you wanted, you could make the entire site turn purple if the screen is wider than X pixels. I’m not sure why you’d want to do that, but you could. http://www.unitedpixelworkers.com/
  • 24. @media screen and (min-width: 640px) { .section1, .section2 { float: left; width: 50%; } } This is what a media query looks like.
  • 25. @media screen and (min-width: 640px) { .section1, .section2 { float: left; width: 50%; } } This is the “if” part of the if-then statement. All media queries start with @media. Then we’re saying: if you’re displaying this page on a screen (as opposed to print or something else), AND the viewport is a minimum of 640 pixels wide...
  • 26. @media screen and (min-width: 640px) { .section1, .section2 { float: left; width: 50%; } } This part in the middle is the “then.” If the query is true, then do this CSS. If the query is not true, then ignore this CSS. It is THAT easy!
  • 27. @media screen and (min-width: 40em) { .section1, .section2 { float: left; width: 50%; } } You’ll notice our query was for a viewport width of 640 pixels or wider. Actually, a better way to do a media query is to use ems instead of pixels, so the page will be even more flexible. Ems relate to the base font size for the page. So if our page has a different-than-usual base font size, either via the browser or via user preferences, things will still look okay.
  • 29. You’ve probably heard that responsive design is hard. Well, it isn’t. I mean, it’s not any harder than web design is. Sure, web design was a lot easier in the days before computers were invented. We just sat around and read the paper all day, waiting for computers to be invented.
  • 30. But eventually we had to learn HTML and CSS. We didn’t try to learn it all at once, so it wasn’t too bad. Plus, we just copied other people’s stuff until we got the hang of it. And it turns out that the awesome thing about web design is that there are a lot of people out there who want us to copy their stuff. In fact, they make cool stuff and put it on their websites for everybody to download and use. Our job as responsive designers is actually not all that hard, because there are people out there who are much smarter than us, and they are doing all the hard parts for us! Sure, it’s nice to be a purist and code all our websites from scratch. Just like we make all our own clothes from fabric that we wove ourselves from cotton that we grew ourselves on our own farms in our backyard. Right? Or we can let someone else do the hard parts so that we can go home at a reasonable hour in time to play with our kids or watch Law & Order: SVU (your choice).
  • 31. Frameworks A framework is a starting place for designing or building a website. Not the whole design, just a starting place. Like the frame of a house.
  • 32. There are a lot of frameworks, and they’re all a bit different, so you’ll have to figure out what works best for your project and for your style of working. Foundation is one of the most popular. It’s a 12-column, nestable, responsive grid. http://foundation.zurb.com/
  • 33. That doesn’t mean your site will have 12 columns.You can have any number of columns up to 12, as long as the proportions are divisible by 12. For example, you can have two columns, the first is 4/12 of the screen wide, the other is 8/12 wide. http://foundation.zurb.com/grid-example1.php
  • 34. Here’s a site that uses Foundation. http://www.zurb.com/soapbox
  • 35. Once you decide what columns you want, that doesn’t have to apply to the whole page. Here they have 4 columns, (3+3+3+3) and right below that, 3 columns (4+4+4). http://www.zurb.com/soapbox
  • 36. When you download all the files for Foundation, you get CSS, JavaScript, and this sample file which you can use as a template (or you can just start your own HTML page and not use the template). http://foundation.zurb.com/
  • 37. It’s responsive by default. http://foundation.zurb.com/
  • 38. There’s only one breakpoint, and the default behavior is for the columns to stack vertically. This might not be what you want to happen, but you can change it to work however you want by adding more breakpoints or different behavior. http://foundation.zurb.com/
  • 39. <div class="row"> <div class="twelve columns"> ... </div> </div> <div class="row"> <div class="three columns"> ... </div> <div class="nine columns"> ... </div> </div> The grid is built around two key elements: rows and columns. Each row gets a class of “row.”
  • 40. <div class="row"> <div class="twelve columns"> ... </div> </div> <div class="row"> <div class="three columns"> ... </div> <div class="nine columns"> ... </div> </div> The columns within the rows: each gets a class of “columns,” and then a number that correlates as to how wide it should be out of 12. The first row has one column that spans the entire width of 12. The next row has a narrow left column (3 of 12) and a wider right column (9 of 12).
  • 41. Responsive Foundation is by default responsive. All the widths are percentages. It has one breakpoint at 768 pixels, but you’re not stuck with that; you can easily change it or add more breakpoints.
  • 42. class="show-for-xlarge" class="show-for-large" class="show-for-large-up" class="show-for-medium" class="show-for-medium-down" class="show-for-small" breakpoints at: 767 px, 1279 px, 1441 px There are built-in classes you can use to show or hide elements at specific widths; for example, if you want a nav button to appear on small screens, but the full nav to appear on wide screens.You can change the built-in breakpoints.
  • 44. class="show-for-landscape" class="hide-for-landscape" class="show-for-portrait" class="hide-for-portrait" class="show-for-touch" class="hide-for-touch" You probably won’t use these much, but there are built-in classes to show/hide elements depending on screen orientation, or whether it’s a touch screen.
  • 45. Prototyping You already know that prototyping/designing in PhotoShop doesn’t work when you need to plan for varying screen widths. Frameworks are really great for responsive prototyping, because you can build a basic site layout very quickly.
  • 46. Frameworks generally come with built-in styles for various elements, such as forms and buttons.You probably won’t use these basic, default styles on your actual design, but they are handy when doing a quick prototype. http://foundation.zurb.com/docs/forms.php
  • 47. And they are basic enough that the site will look like a prototype and not a finished design, so your client won’t be confused. http://foundation.zurb.com/docs/buttons.php
  • 48. Typography styles are also included. http://foundation.zurb.com/docs/typography.php
  • 49. Twitter Bootstrap is another framework that is very popular. Besides giving you a responsive grid, there are also lots of pre-styled UI elements. http://twitter.github.com/bootstrap/index.html
  • 50. Skeleton is another responsive framework. It’s more lightweight (less styled elements), easy to use, and there are WordPress and Drupal versions. http://www.getskeleton.com
  • 51. 320 and Up is a great framework, because it’s intended for small-screen first. That’s the best way to design a responsive site: by starting with the small screen, you can focus on your content, which is the most important part of your site. http://stuffandnonsense.co.uk/projects/320andup/
  • 52. SimpleGrid is another responsive framework. It has three different breakpoints by default. Again, you can make any changes you want. It’s very simple to implement. http://simplegrid.info/
  • 53. The Semantic Grid System is a little more complicated, but allows you to set variables for things like gutter and column widths. http://semantic.gs/
  • 54. Frameless is not exactly a framework — you don’t download anything — but more of a way to code your site. http://framelessgrid.com/
  • 55. HTML5 Boilerplate is HTML5 by default, and includes a lot of additional styles, tools, and polyfills to help you build your site. http://html5boilerplate.com/
  • 56. The Golden Grid System is a “folding grid”: the columns collapse from 16 to 8 to 4 as the viewport narrows. http://goldengridsystem.com/
  • 57. Resources: Frameworks Which Is Right for Me? 22 Responsive CSS Frameworks and Boilerplates Explained (Joshua Johnson) - August 2012 http://designshack.net/articles/css/which-is-right-for-me-22-responsive-css- frameworks-and-boilerplates-explained/ 15 More Responsive CSS Frameworks & Boilerplates Worth Considering - August 2012 http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks- boilerplates-worth-considering/
  • 58. Navigation Patterns One of the tricky parts about making a responsive site is figuring out what to do with the navigation. The good news is that someone else already figured it out for us.
  • 59. Brad Frost has this great website where you can view sample code for different types of things you might want to add to your responsive site. (there are a lot of other links and resources too) http://bradfrost.github.com/this-is-responsive/patterns.html
  • 60. Top Navigation Navigation nearly always follows one of several “patterns.” The first we’ll look at is top navigation. This is the easiest thing to do with your navigation, and generally requires only minimal CSS to make it responsive.
  • 61. When we go from wide to narrow width (on the next slide), you’ll see that the navigation stays in the same part of the page. It moves down below the logo, but otherwise is pretty much the same. http://www.gravitatedesign.com
  • 62. This may work okay if we only have a few navigation items, but they might end up wrapping in weird ways. Or we may have to make them really small so they’ll fit, in which case it would be difficult to accurately select the links on a touch screen. http://www.gravitatedesign.com
  • 63. This site has a lot of different navigations and navigation items. They used a strategy of keeping all the nav items at the top... http://www.tuj.ac.jp/
  • 64. But what happens is they end up filling the whole screen with navigation, and you can’t see the content. People aren’t coming to our websites for the navigation, they’re coming for the content. So this isn’t good. http://www.tuj.ac.jp/
  • 65. Footer Anchor Footer anchor navigation is also fairly simple to implement. (by the way, all the code examples in this section are from Brad Frost’s This Is Responsive site)
  • 66. This is Contents magazine. This is what the site looks like on a desktop. Basic horizontal navigation. http://contentsmagazine.com/
  • 67. On a small screen, instead of seeing navigation at the top, you see a button, “Explore.” You click this to get to the navigation. It’s an anchor link. http://contentsmagazine.com/
  • 68. When you click it, you jump down to the bottom of the page where the navigation is. The problem with this is that it can be disorienting to the user to jump around on the page. However, it’s really easy to implement footer anchor navigation. http://contentsmagazine.com/
  • 69. <div id="site-nav"> <form> ... </form> ! <nav> ! ! <ul class="nav nav-primary"> ! ! ! <li><a href="#">Archive</a></li> ! ! ! <li><a href="#">About</a></li> ! ! ! <li><a href="#">Write For Us</a></li> ! ! ! <li><a href="#">Subscribe</a></li>! ! ! ! ! </ul> ! </nav> </div> The way this works is that the navigation is at the end of the HTML source order, so by default it’s at the bottom of the screen. So that’s what you get on the small screen, with the “Explore” button at the top of the page.
  • 70. @media screen and (min-width: 48em) { ! #site-nav { ! ! position: absolute; ! ! top: -5em; ! ! width: 100%; ! ! z-index: 5; ! } } For larger screens, there’s a media query. This simply takes the div containing the navigation, and uses absolute positioning to put it at the top of the page. That only happens when the viewport is 48 ems or wider.
  • 71. So here it is at the top. That was just the positioning; you’ll need some additional CSS to make it look the way you want. http://contentsmagazine.com/
  • 72. Toggle Navigation Toggle navigation is a bit more complicated to implement.You’ll see a full navigation at a wide screen width. At narrow width, you’ll get a Menu button or icon at the top, which you’ll click to see the navigation. This is getting to be pretty common.
  • 73. This is the Starbucks site. The three-line icon in the top right means navigation. It’s a fairly common convention. http://starbucks.com/
  • 74. When you click it, you get the navigation, and the rest of the page content is pushed down below it (the navigation doesn’t overlap the content). http://starbucks.com/
  • 75. The site has media queries to put the nav items either in one or two columns, depending on how much width is available. When you click the ‘X,’ the navigation will disappear and the content will go back to it’s normal spot. http://starbucks.com/
  • 76. Starbucks uses a toggle navigation, which is one of the patterns on Brad Frost’s website, so you can look at this example code to see exactly how it works, and then implement a toggle navigation on your own site. http://bradfrost.github.com/this-is-responsive/patterns.html
  • 77. The example works the same as Starbucks’ site, but has minimal styling so it’s easier for you to see which parts of the code are relevant. http://bradfrost.github.com/this-is-responsive/patterns.html
  • 78. <a href="#menu" class="menu-link">Menu</a> <nav class="" id="menu" role="navigation"> ! <ul> ! ! <li><a href="#">Home</a></li> ! ! <li><a href="#">About</a></li> ! ! <li><a href="#">Products</a></li> ! ! <li><a href="#">Services</a></li> ! ! <li><a href="#">Contact</a></li> ! </ul> </nav> This is the HTML. The line at the top is the Menu button.
  • 79. <a href="#menu" class="menu-link">Menu</a> <nav class="" id="menu" role="navigation"> ! <ul> ! ! <li><a href="#">Home</a></li> ! ! <li><a href="#">About</a></li> ! ! <li><a href="#">Products</a></li> ! ! <li><a href="#">Services</a></li> ! ! <li><a href="#">Contact</a></li> ! </ul> </nav> Below that is the navigation, an unordered list inside a <nav> element.
  • 80. .js nav[role=navigation] { ! overflow: hidden; ! max-height: 0; } nav[role=navigation].active { ! max-height: 15em; } This is the CSS to make the navigation appear and disappear.
  • 81. .js nav[role=navigation] { ! overflow: hidden; ! max-height: 0; } nav[role=navigation].active { ! max-height: 15em; } There are two relevant lines of CSS that apply to the <nav>: one shows the navigation, the other hides it. We’ll switch between the CSS using JavaScript, which will apply the class “active” to the <nav> element when the Menu button is clicked.
  • 82. .js nav[role=navigation] { ! overflow: hidden; ! max-height: 0; } nav[role=navigation].active { ! max-height: 15em; } The first line of CSS, before the Menu button is clicked, hides the <nav>. So the navigation is already hidden when the page loads for the first time.
  • 83. .js nav[role=navigation] { ! overflow: hidden; ! max-height: 0; } nav[role=navigation].active { ! max-height: 15em; } The second line of CSS makes the <nav> visible by giving it a max-height of 15em (so it’s no longer hidden, and there’s plenty of space to display the whole thing).
  • 84. <script> (function() { $(document).ready(function() { $('body').addClass('js'); var $menu = $('#menu'), $menulink = $('.menu-link'); $menulink.click(function() { $menulink.toggleClass('active'); $menu.toggleClass('active'); return false; });}); })(); </script> This is the JavaScript. It uses toggleClass from jQuery to add and remove the “active” class to the <nav>.
  • 85. @media screen and (min-width: 48.25em) { ! a.menu-link { ! ! display: none; ! } ! .js nav[role=navigation] { ! ! max-height: none; ! } } For the wide screen, of 48.25em or wider, we’re using this media query to override what we just set up for the narrow screen.
  • 86. @media screen and (min-width: 48.25em) { ! a.menu-link { ! ! display: none; ! } ! .js nav[role=navigation] { ! ! max-height: none; ! } } The first line of CSS hides the Menu button, because we don’t need it on the wide screen: the navigation is visible.
  • 87. @media screen and (min-width: 48.25em) { ! a.menu-link { ! ! display: none; ! } ! .js nav[role=navigation] { ! ! max-height: none; ! } } The second line gives the <nav> the max-height of none. This isn’t the same as zero; it actually means unlimited. There is no maximum. The <nav> can take all the space it needs on the wide screen.
  • 88. To determine where to put your breakpoint for this type of navigation, you just have to try it out and see where the horizontal navigation starts to wrap. Keep in mind it might be slightly different on different devices or browsers.
  • 89. Left Nav Flyout Left nav flyout is also used a lot, but it’s more complicated to implement, so I’m not going to show you the code, but I’ll show you what it looks like. Keep in mind that as the navigation code gets more complicated, you need to make sure there’s a fallback for any devices/browsers that don’t support the code.You don’t want users coming to your site and not having access to the navigation.
  • 90. Like the previous example, there’s an icon at the top, horizontal bars, to click to get the navigation. http://www.emerilsrestaurants.com
  • 91. The difference is that here, the content slides off to the side, instead of sliding down.You would then click the navigation icon again to go back to the content. Notice how you can still see the content, so you know that it’s still there. http://www.emerilsrestaurants.com
  • 92. You can also have submenus within the navigation. http://www.emerilsrestaurants.com
  • 93. Three-Dimensional Menu This isn’t from the navigation patterns that I referred to, but it’s an example of something pretty cool.
  • 94. See the arrow over on the left side of the screen? To get the navigation to appear, you just swipe on your touch screen. On a non-touch interface, you simply need to hover your cursor on the left side of the browser. http://lab.hakim.se/meny/
  • 95. After you swipe/hover, you get this. It’s similar to the previous example of left nav flyout, but instead of the content just moving to the right, it is displayed so that it looks like a side of a cube that has turned. http://lab.hakim.se/meny/
  • 96. This is how it looks on a mobile device. http://lab.hakim.se/meny/
  • 97. Resources: Navigation Responsive Navigation Patterns (Brad Frost) - February 2012 http://bradfrostweb.com/blog/web/responsive-nav-patterns/ Complex Navigation Patterns for Responsive Design (Brad Frost) - August 2012 http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive- design/ 10 Tips How To Handle Responsive Navigation Menus Successfully (Sabina Idler) - October 2012 http://blog.usabilla.com/10-tips-how-to-handle-responsive-navigation-menus- successfully/ 10 Responsive Navigation Solutions and Tutorials - August 2012 http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and- tutorials/
  • 98. Preprocessors Next, lets talk about how we write CSS. A preprocessor helps you write CSS. It doesn’t add new functionality to the CSS, but rather it makes your CSS more flexible and easier to maintain.
  • 99. There are several different preprocessors. Sass and LESS are two of the more popular. They all do similar things, but have some different features and work in different ways.You need to pick which one works best for you. http://sass-lang.com/ and http://lesscss.org/
  • 100. Sass I’m not going to say that one or another is better, but for the purpsoes of this presentation, I need to pick one for the examples, so I’m going to show you a bit of how Sass works. (all code examples are from the Sass website)
  • 101. The easiest way to explain how this works: you’ll still be writing CSS for your site, but in special files that have a different extension.You then have the ability to add in what are essentially shortcuts as part of your CSS. The preprocessor then will take the files with all your shortcuts and change them to regular CSS files. When the website is rendered, the browser will be looking at the regular CSS files, not your shortcuts. It’s called a preprocessor because your code will be processed to change it to valid CSS before it’s processed by the browser to render the website.
  • 102. Nesting Nesting is really handy to keep you from repeating the same things over and over again in your CSS, and also can make it easier to understand your CSS when you’re looking at a lot of it.
  • 103. #navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; } } Here we are nesting the ul and li within the #navbar.
  • 104. #navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; } } All the other CSS is contained within #navbar
  • 105. #navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; } } The width and height only apply to #navbar
  • 106. #navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; } } But then we have the ul and li within #navbar. So they’re actually #navbar ul and #navbar li.
  • 107. #navbar { width: 80%; height: 23px; } #navbar ul { list-style-type: none; } #navbar li { float: left; } When the code is processed, we get this, which is no longer nested, and is what the browser will get. It doesn’t seem all that impressive in this example, but once you have multiple layers of nesting, it can make your job a lot easier.
  • 108. .fakeshadow { border: { style: solid; left: { width: 4px; color: #888; } right: { width: 2px; color: #ccc; } } } You can also nest styles.
  • 109. .fakeshadow { border-style: solid; border-left-width: 4px; border-left-color: #888; border-right-width: 2px; border-right-color: #ccc; } This is what the preceding code will turn into when it’s processed.
  • 110. Variables Variables are super-handy. If you have something like a color that is repeated throughout your styles, you can declare it once and then refer to the variable. If you need to change it later, there is only one place to change it instead of many.
  • 111. $main-color: #ce4dd6; $style: solid; #navbar { border-bottom: { color: $main-color; style: $style; } } Variables start with a dollar sign and are declared like properties.
  • 112. $main-color: #ce4dd6; $style: solid; #navbar { border-bottom: { color: $main-color; style: $style; } } So then our styles can simply refer to the variable.
  • 113. #navbar { border-bottom-color: #ce4dd6; border-bottom-style: solid; } When it’s processed, we get this.
  • 114. Mixins Mixins are awesome. They allow you to reuse complicated styles without having to copy and paste. Kind of like variables, except for entire styles.
  • 115. #navbar li { -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; border-top-radius: 10px; } #footer { -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; border-top-radius: 10px; } For example, if we were using this border radius for multiple elements on the site. We don’t want to copy and paste it multiple times, and we also might want it in one place, in case we need to change part of it.
  • 116. @mixin rounded-top { -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; border-top-radius: 10px; } #navbar li { @include rounded-top; } #footer { @include rounded-top; } The part at the top is where we declare the mixin, “rounded- top.” The part at the bottom is where we are using the mixin, applying that set of styles to both #navbar li and #footer.
  • 117. #navbar li { -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; border-top-radius: 10px; } #footer { -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; border-top-radius: 10px; } When the code is processed, this is what we end up with.
  • 118. Math When you’re doing responsive design, math is one of the most useful functions of a preprocessor.
  • 119. .sidebar { width: percentage(360px / 960px); } Instead of getting out our calculator to figure out percentages for widths, we can just write the original numbers into our code.
  • 120. .sidebar { width: 37.5%; } When it’s processed, the preprocessor figures out the percentage for us and puts it in the CSS.
  • 121. @media Bubbling @media bubbling is like nesting, but for media queries. So this is handy for responsive design. It can keep your stylesheets easier to understand.
  • 122. .profile-pic { float: left; width: 250px; @media screen and (max-width: 320px) { width: 100px; } @media screen and (min-width: 1200px) { float: none; } } In this example, we’re applying different CSS to profile-pic, depending on the viewport width. Everything is inside profile-pic.
  • 123. .profile-pic { float: left; width: 250px; @media screen and (max-width: 320px) { width: 100px; } @media screen and (min-width: 1200px) { float: none; } } These styles apply to profile-pic.
  • 124. .profile-pic { float: left; width: 250px; @media screen and (max-width: 320px) { width: 100px; } @media screen and (min-width: 1200px) { float: none; } } Then here are our media queries, inside! We don’t need to repeat profile-pic, we just need the style.
  • 125. .profile-pic { float: left; width: 250px; } @media screen and (max-width: 320px) { .profile-pic { width: 100px; } } @media screen and (min-width: 1200px) { .profile-pic { float: none; } } So when it’s processed, this is what we get: our media queries “bubble” out of the nest (yes, that’s why it’s called @media bubbling) onto separate lines.
  • 126. $break-small: 320px; $break-large: 1200px; .profile-pic { float: left; width: 250px; @media screen and (max-width: $break-small) { width: 100px; } @media screen and (min-width: $break-large) { float: none; } } We can also use variables as well, like if we have breakpoints that are used for various site elements.
  • 127. Resources: Preprocessors Sass And LESS: An Introduction To CSS Preprocessors (Steven Bradley) - April 2012 http://www.vanseodesign.com/css/css-preprocessors/ An Introduction To LESS, And Comparison To Sass (Jeremy Hixon) - September 2011 http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and- comparison-to-sass/ Responsive Web Design in Sass: Using Media Queries in Sass 3.2 (Mason Wendell) - April 2012 http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media- queries-in-sass-32 Create faster fluid layouts with LESS (Paul Mist) - August 2012 http://www.netmagazine.com/tutorials/create-faster-fluid-layouts-less
  • 128. Responsive Images Responsive images are quite a hot topic lately.
  • 129. img, object, video { max-width: 100% } We all know that we use max-width: 100% so that our images/media can change size but will always fit within their containing element. The problem is that this means the image we upload to the site has to be the largest size that it will ever display as on the site. We can’t scale up images, they’ll get blurry. We can only scale them down.
  • 130. Performance So then we’re wasting a lot of bandwidth, forcing users to download images that are much larger than what they might need for a particular device/screen size. And also, how do we serve up the appropriate images for retina screens without wasting all that bandwidth on devices that don’t need HD images?
  • 131. <picture> The <picture> element has been proposed, but they’re still hammering out the details, so you can’t use it yet. But I’m going to tell you how it will likely work, and then tell you what you can do in the meantime. http://www.w3.org/community/respimg/
  • 132. <picture> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <img src="small-1.jpg"> </picture> This is what the code will look like, when we want to display an image on our site.
  • 133. <picture> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <img src="small-1.jpg"> </picture> This part of the code pretty much works the same as a media query, telling the browser to display a different image based on the viewport width.
  • 134. <picture> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <img src="small-1.jpg"> </picture> So not only are there different images for each width (small, med, large), there are also versions for regular (1x) and HD (2x).
  • 135. <picture> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <img src="small-1.jpg"> </picture> Then, for older browsers that won’t support the new <picture> element, there’s a fallback, using <img>, which the older browsers do support.
  • 136. Different Images But it’s not just different sizes of the same image: you may actually want to display different images.
  • 137. For example, the image on the wide version of this site wouldn’t look nearly as good at a smaller size. So instead, they choose to use a different crop of the same image. Sometimes, you may want to display a different image entirely. http://www.ottersurfboards.co.uk/
  • 138. Picturefill Picturefill is a way for you to have all that functionality now.
  • 139. What’s a Polyfill? Picturefill is a “polyfill.” That’s a piece of code that fills in to do something in older browsers that is only natively possible in newer browsers. For example, a polyfilll can make older versions of IE do all the things we wish they could do. But there is a downside: using a polyfill adds extra code to your site, so there’s more to download and more to process. Think about whether you really need to do the cool new functionality in every browser.
  • 140. Picturefill is available on Github. https://github.com/scottjehl/picturefill
  • 141. <div data-picture data-alt="Your alt text."> <div data-src="/img/small.jpg"></div> <div data-src="/img/medium.jpg" data-media="(min-width: 500px)"></div> <div data-src="/img/large.jpg" data-media="(min-width: 1000px)"></div> <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> <noscript> <img src="/img/small.jpg" alt="Your alt text."> </noscript> </div> We’ll need to upload some JavaScript to our site. Then this is the code we use to add an image to our site.
  • 142. <div data-picture data-alt="Your alt text."> <div data-src="/img/small.jpg"></div> <div data-src="/img/medium.jpg" data-media="(min-width: 500px)"></div> <div data-src="/img/large.jpg" data-media="(min-width: 1000px)"></div> <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> <noscript> <img src="/img/small.jpg" alt="Your alt text."> </noscript> </div> Similar to what I showed you previously, we’re linking to multiple versions of the image (or different images).
  • 143. <div data-picture data-alt="Your alt text."> <div data-src="/img/small.jpg"></div> <div data-src="/img/medium.jpg" data-media="(min-width: 500px)"></div> <div data-src="/img/large.jpg" data-media="(min-width: 1000px)"></div> <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> <noscript> <img src="/img/small.jpg" alt="Your alt text."> </noscript> </div> Then we tell the browser which ones should be displayed at different viewport widths.
  • 144. <div data-picture data-alt="Your alt text."> <div data-src="/img/small.jpg"></div> <div data-src="/img/medium.jpg" data-media="(min-width: 500px)"></div> <div data-src="/img/large.jpg" data-media="(min-width: 1000px)"></div> <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> <noscript> <img src="/img/small.jpg" alt="Your alt text."> </noscript> </div> If the browser doesn’t support JavaScript, Picturefill won’t work. So you use <noscript> to serve a fallback image.
  • 145. <div data-picture data-alt="Your alt text."> <div data-src="/img/small.jpg"></div> <div data-src="/img/medium.jpg" data-media="(min-width: 500px)"></div> <div data-src="/img/large.jpg" data-media="(min-width: 1000px)"></div> <!--[if (lt IE 9) & (!IEMobile)]> <div data-src="medium.jpg"></div> <![endif]--> <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> <noscript> <img src="/img/small.jpg" alt="Your alt text."> </noscript> </div> Then there’s older IE, which won’t do the media query part of the code. So we’ll use conditional comments to give it the appropriate image.
  • 146. HD/Retina HD/retina screens have twice as many pixels in each direction (horizontal, vertical) so you actually need an image that uses 4 times as many pixels, in order to take full advantage of the HD screen.
  • 147. <div data-src="medium.jpg" data-media="(min-width: 400px)"></div> <div data-src="medium_x2.jpg" data-media="(min- width: 400px) and (min-device-pixel-ratio: 2.0)"></div> Picturefill supports image replacement for retina. We have two versions of the image.
  • 148. <div data-src="medium.jpg" data-media="(min-width: 400px)"></div> <div data-src="medium_x2.jpg" data-media="(min- width: 400px) and (min-device-pixel-ratio: 2.0)"></div> They both have the same minimum width query.
  • 149. <div data-src="medium.jpg" data-media="(min-width: 400px)"></div> <div data-src="medium_x2.jpg" data-media="(min- width: 400px) and (min-device-pixel-ratio: 2.0)"></div> But this one has an additional query of minimum device pixel ratio. So the second image will be served if it’s a HD display.
  • 150. Adaptive Images Adaptive Images is a totally different way to approach the issue of serving multiple sizes of an image.
  • 151. Implement this code, and it will detect the screen size, and then create and serve the appropriate re-scaled version of the image. We only need to upload the largest version of the image. The server does the rest of the work. http://adaptive-images.com/
  • 152. Apache & PHP One caveat: it only works on sites running Apache and PHP. However, if that is your site, you can use this solution without changing the actual HTML you use for images (unlike with Picturefill). So it’s very easy to implement. Plus, you can use it on top of any CMS, since it doesn’t change your HTML.
  • 153. <?php $resolutions = array(1382, 992, 768, 480); // the resolution break-points to use (screen widths, in pixels) ... To set it up, we’ll need to edit the .htaccess file for our site. We’ll then upload a PHP file, changing a few numbers in the file to match the actual breakpoints we’re using on our site.
  • 154. <script>document.cookie='resolution='+Math .max(screen.width,screen.height)+'; path=/';</script> Then we’ll add this JavaScript in the <head> of our site. As the page starts to load, the JavaScript writes a session cookie to store the user’s screen size. The way websites work is that as a page is loading, when the browser encounters an <img> tag, it sends a request to the server for the image.
  • 155. <IfModule mod_rewrite.c>   Options +FollowSymlinks   RewriteEngine On   RewriteCond %{REQUEST_URI} !assets   RewriteCond %{REQUEST_URI} !ai-cache   RewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php </IfModule> Before sending the image back to the browser, the server looks at the .htaccess file to see if there are any special instructions.
  • 156. <IfModule mod_rewrite.c>   Options +FollowSymlinks   RewriteEngine On   RewriteCond %{REQUEST_URI} !assets   RewriteCond %{REQUEST_URI} !ai-cache   RewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php </IfModule> In this case, we added special instructions in .htaccess, telling it that if the server is being asked for an image file, it should go to adaptive-images.php instead of just serving the image.
  • 157. $resolutions = array(1382, 992, 768, 480); // the resolution break-points to use (screen widths, in pixels) The adaptive-images.php file looks at the cookie (remember, it stored the user’s screen size), and figures out which size image it should serve, based on the breakpoints we set earlier. It serves the original image if appropriate, or else creates a scaled-down copy of the image. The scaled-down image will be cached for later use, so the server won’t need to make the same image size over and over again.
  • 158. This is an example from the Adaptive Images website. The various versions of the image range from 14 KB to 82 KB. So you’re saving a lot of bandwidth by serving smaller images where you can. Adaptive Images can also handle HD images, you just need to adjust the JavaScript a bit. http://adaptive-images.com/
  • 159. Other Image Solutions Responsive Images https://github.com/filamentgroup/Responsive-Images Retina.js http://retinajs.com/ FitVids.js (video) http://fitvidsjs.com/
  • 160. Resources: Responsive Images W3C Responsive Images Community Group http://www.w3.org/community/respimg/ Which responsive images solution should you use? - May 2012 http://css-tricks.com/which-responsive-images-solution-should-you-use/ Responsive Images and Web Standards at the Turning Point (Mat Marquis) - May 2012 http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the- turning-point/ Compressive Images (Scott Jehl) - October 2012 http://filamentgroup.com/lab/rwd_img_compression/
  • 161. Responsive Data Tables Data tables can be kind of tricky. If there’s a lot of data, how do you fit it on a small screen? There are many ways you can do this; I’m going to show you two different options.
  • 162. Responsive Tables uses CSS/JavaScript to change the display of the table. This is what your table will look like on a wide screen. http://www.zurb.com/playground/responsive-tables
  • 163. At a narrow width, it pins the first column (which is likely headings/labels), and puts a scrollbar on the rest of it. http://www.zurb.com/playground/responsive-tables
  • 164. <link rel="stylesheet" href="responsive- tables.css"> <script src="responsive-tables.js"> </script> To use this, we just need to upload the CSS and JavaScript files to our site.
  • 165. <table class="responsive"> <tr> … And then add the “responsive” class to any table we want to make responsive. That’s it.
  • 166. Here’s a totally different approach, from CSS-Tricks. This is a table at full width. http://css-tricks.com/examples/ResponsiveTables/responsive.php
  • 167. When we make the screen narrow, what happens is that the data is displayed one row at a time, with the labels showing up over and over, so we know what the data refers to. http://css-tricks.com/examples/ResponsiveTables/responsive.php
  • 168. It’s hard to explain, so look at the screenshot. This is what you see when you scroll further down the page. http://css-tricks.com/examples/ResponsiveTables/responsive.php
  • 169. @media only screen and (max-width: 760px), (min-device-width: 768px) and (max- device-width: 1024px) { ! /* Force table to not be like tables anymore */ ! table, thead, tbody, th, td, tr { ! ! display: block; ! } ! /* Hide table headers (but not display: none;, for accessibility) */ ! thead tr { ! ! position: absolute; ! ! top: -9999px; ! ! left: -9999px; ! } ! td { ! ! /* Behave like a "row" */ ! ! border: none; ! ! border-bottom: 1px solid #eee; ! ! position: relative; ! ! padding-left: 50%; ! } The implementation is quite a bit more complicated than the previous example. In the CSS, we’re basically making each table cell into a row.
  • 170. ! td:before { ! ! /* Now like a table header */ ! ! position: absolute; ! ! /* Top/left values mimic padding */ ! ! top: 6px; ! ! left: 6px; ! ! width: 45%; ! ! padding-right: 10px; ! ! white-space: nowrap; ! } ! /* Label the data */ ! td:nth-of-type(1):before { content: "First Name"; } ! td:nth-of-type(2):before { content: "Last Name"; } ! td:nth-of-type(3):before { content: "Job Title"; } ! td:nth-of-type(4):before { content: "Favorite Color"; } ! td:nth-of-type(5):before { content: "Wars of Trek?"; } ! td:nth-of-type(6):before { content: "Porn Name"; } ! td:nth-of-type(7):before { content: "Date of Birth"; } ! td:nth-of-type(8):before { content: "Dream Vacation City"; } ! td:nth-of-type(9):before { content: "GPA"; } ! td:nth-of-type(10):before { content: "Arbitrary Data"; } } And then we use :before to make the labels show up adjacent to the data for every item. We have to manually enter the labels into the stylesheet for each table, so this can end up being a lot of work.
  • 171. Resources: Responsive Tables A Responsive Design Approach for Complex, Multicolumn Data Tables http://filamentgroup.com/lab/ responsive_design_approach_for_complex_multicolumn_data_tables/ Responsive Data Tables with jQuery http://mobifreaks.com/coding/responsive-data-tables-jquery/ Responsive Patterns: Table Patterns http://bradfrost.github.com/this-is-responsive/patterns.html#tables Responsive Data Tables and Screen Reader Accessibility (Jason Kiss) - August 2011 http://www.accessibleculture.org/articles/2011/08/responsive-data-tables-and- screen-reader-accessibility/
  • 172. Polyfills I mentioned polyfills earlier.You can make older browsers do what newer browsers do. That being said, responsive design is about being responsive to the device and the browser, not about having your site look exactly the same on every device. So if you start out building your site with the basics first and doing progressive enhancement, rather than starting out with the most complicated version of the site and doing graceful degradation, you’ll find that you don’t always need to make the older browsers act like the newer browsers.
  • 173. Modernizr is a JavaScript library that detects whether a user’s browser can take advantage of particular features in HTML5 and CSS3.You just need to upload a JavaScript file, and then call it from the <head> of the page. http://modernizr.com/
  • 174. <html class=" js canvas canvastext geolocation crosswindowmessaging no- websqldatabase indexeddb hashchange historymanagement draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients no- cssreflections csstransforms no- csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache svg smil svgclippaths fontface"> When the page renders, the JavaScript adds classes to the <html> tag to show which HTML5/CSS3 features are supported. So you’ll get something different here based on the browser, and then you can use it to pick what CSS is applied.
  • 175. <html class=" js canvas canvastext geolocation crosswindowmessaging no- websqldatabase indexeddb hashchange historymanagement draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients no- cssreflections csstransforms no- csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache svg smil svgclippaths fontface"> For example, in the latest version of Firefox, there are only a few that are not supported. They have “no-” before the feature. Keep in mind these are all now CSS classes on your page.
  • 176. <HTML class=" js no-canvas no-canvastext no-geolocation no-crosswindowmessaging no- websqldatabase no-indexeddb no-hashchange no-historymanagement draganddrop no- websockets no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage no- borderradius no-boxshadow no-opacity no- cssanimations no-csscolumns no- cssgradients no-cssreflections no- csstransforms no-csstransforms3d no- csstransitions fontface no-video no-audio no-localstorage no-sessionstorage no- webworkers no-applicationcache no-svg no- smil no-svgclippaths"> This is what I get in IE7.
  • 177. <HTML class=" js no-canvas no-canvastext no-geolocation no-crosswindowmessaging no- websqldatabase no-indexeddb no-hashchange no-historymanagement draganddrop no- websockets no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage no- borderradius no-boxshadow no-opacity no- cssanimations no-csscolumns no- cssgradients no-cssreflections no- csstransforms no-csstransforms3d no- csstransitions fontface no-video no-audio no-localstorage no-sessionstorage no- webworkers no-applicationcache no-svg no- smil no-svgclippaths"> Yep, a whole lotta NOs.
  • 178. .no-boxshadow { ... } So let’s say we happen to be using boxshadow in our site design. We can add CSS to do something different only for browsers that don’t support boxshadow. We might want to use a polyfill to replicate behavior, or if that part of the style isn’t essential to the design, we might just need some simple CSS to accommodate the difference in the design.
  • 179. This is a great site: they’ve collected links to all the different polyfills you can use to replicate various HTML5 functionality in older browsers. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  • 180. Respond is one particular polyfill I want to point out. It enables max-width and min-width media queries in browsers that don’t support them. (IE8 and older, particularly) https://github.com/scottjehl/Respond
  • 181. <!--[if lte IE 8]> <script src=”js/respond.min.js”/></script> <![endif]--> You just need to upload the JavaScript file, and then link to it from your <head> using a conditional comment.
  • 183. Prototyping & Design Process Dive into Responsive Prototyping with Foundation (Jonathan Smiley) - April 2012 http://www.alistapart.com/articles/dive-into-responsive-prototyping-with- foundation/ Design Process In The Responsive Age (Drew Clemons) - May 2012 http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive- age/ Responsive Web Design Sketch Sheets http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets Style Tiles http://styletil.es/
  • 184. Books to Read Responsive Web Design Ethan Marcotte (2011) http://www.abookapart.com/products/responsive-web-design/ Mobile First Luke Wroblewski (2011) http://www.abookapart.com/products/mobile-first Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement Aaron Gustafson (2011) http://easy-readers.net/books/adaptive-web-design/ Implementing Responsive Design: Building sites for an anywhere, everywhere web Tim Kadlec (2012) http://www.implementingresponsivedesign.com/
  • 185. Other Websites & Misc. @RWD links about responsive design (Ethan Marcotte) https://twitter.com/RWD Future Friendly making things that are future-friendly http://futurefriend.ly/ Brad Frost blog that covers responsive design http://bradfrostweb.com/blog/ Mediaqueri.es inspirational websites using media queries and responsive web design http://mediaqueri.es/
  • 186. If you were actually at the CWSA event (Oct. 30, 2012), you’ll recognize “Flo” from the Progressive lobby. And that’s me on the left. It’s been my lifelong dream to pose for a picture next to a cardboard cutout of “Flo.” I can now cross it off my bucket list.
  • 187. *Also if you were at the CWSA event, and arrived in time for the warm-up act, you will appreciate this resource: My Hermit Crab is Not Moving - Is He Molting or Is He Dead? http://exoticpets.about.com/od/hermitcrabs/f/hcmoltordead.htm Photo credit: Jessica Diamond via Creative Commons http://flic.kr/p/4T5miW
  • 188. Thanks! Clarissa Peterson @clarissa clarissapeterson.com mail@clarissapeterson.com