Pulp Fingers

FO

Trailer Park Truck

Blind Pig Design

The Coop

Dearest Nature

Duggard

Friendly Gents

Detroit Labs

Circles Conference

Quince Bistro

Trent Walton

Still

The Buffalo Lounge

Maryland Craft Beer Festival

The Thomas Oliver Band

Designing Monsters

Postmates

The Soup Peddler

Girl With a Camera

The Challenge

• Responsive Design Testing
• Responsive.is
• Responsinator
• BriCSS

The Goal

Content Is King!

The Principle

• The width of a box should be as small or as wide as possible without impairing readability.
• The max-width of a box should take into consideration the importance of following boxes. This is because the wider the box, the wider the viewport must be to reveal subsequent boxes.
• The goal is not to bring everything above the fold (we don’t want to fill the viewport with clutter).

In Practice

Markup

<div class="grid-block" id="header"></div>
<div id="wrapper">
    <div class="grid-block" id="main"></div>
    <div class="grid-block" id="complementary"></div>
    <div class="grid-block" id="aside"></div>
</div>
<div class="grid-block" id="contentinfo"></div>

• mix percentages and pixels to style boxes on the same row
• set a maximum width for a group of boxes

CSS

    body {
        margin:auto;            /* you'll see why later */
        text-align:center;      /* to center align grid boxes */
        letter-spacing: -0.31em;/* webkit: collapse white-space between units */
        *letter-spacing: normal;/* reset IE < 8 */
        word-spacing: -0.43em;  /* IE < 8 && gecko: collapse white-space between units */
    }
    .grid-block {
        letter-spacing: normal; /* reset */
        word-spacing: normal;   /* reset */
        text-align:left;        /* reset */
        display:inline-block;   /* styling all grid-wrapper as inline blocks */
        vertical-align:top;     /* aligning those boxes at the top */
        *display:inline;        /* IE hack to mimic inline-block */
        zoom:1;                 /* part of the above hack for IE */
        width:100%;             /* boxes would shrink-wrap */
    }

    /**
     * rules below are meant to paint the boxes
     */

    .grid-block {
        height: 150px;
    }
    #header {
        background: #d6cac1;
    }
    #main {
        background: #ad9684;
    }
    #complementary {
        background: #7a6351;
    }
    #aside {
        background: #000000;
    }
    #contentinfo {
        background: #3d3128;
    }

Content-Driven Process

Header

content: logo, navigation, search box

type: banner

minimum width: n/a

maximum width: n/a

Main

content: diverse (article, blog entry, comments, etc.)

type: main box that holds the meat of the page

minimum width: 420px [1]

maximum width: 550px [1]

Complementary

content: directory entries, tweets, etc.

type: multi-line text box with media

minimum width: 280px

maximum width: 380px

Aside

content: Ads

type: 230px wide images

fixed width: 250px or 490px (2 ads side by side)

Contentinfo

content: resources, blog roll, etc.

type: lists of links

minimum width: 220px

maximum width: 280px

Breakpoints

How Do We "Pick" Breakpoints?

470px

• header
• Main
• Complementary
• Aside (250) + Contentinfo (220)

530px

• header
• Main
• Complementary (280) + Aside (250)
• Contentinfo

700px

• header
• Main (420) + Complementary (280)
• Aside
• Contentinfo

• header
• Main (420) + Complementary (280)
• Aside + Contentinfo

950px

• Main (420) + Complementary (280) + Aside (250)
• Contentinfo

1170px

• Main (420) + Complementary (280) + Aside (250) + Contentinfo (220)

1190px

• Main (420) + Complementary (280) + Aside (490)
• Contentinfo

1410px

• Head (240) Main (420) + Complementary (280) + Aside (250) + Contentinfo (220)

Getting Ready for Media Queries

/**
 * 470
 */
@media only screen and (min-width: 470px) and (max-width: 529px) {
    #aside {
        width: 250px;
        float: left;
    }
    #contentinfo {
        display: block;
        width: auto;
        overflow: hidden;
    }
}

/**
 * 530
 */
@media only screen and (min-width: 530px) and (max-width: 699px) {
    #wrapper {
        display:block;
        margin: auto;
        max-width: 550px; /* see comment below */
    }
    #complementary {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-right: 250px;
        margin-right: -250px;
    }
    #aside {
        width: 250px;
    }
}

/**
 * 700
 */
@media only screen and (min-width: 700px) and (max-width: 949px) {
    #wrapper {
        display:block;
        margin: auto;
        max-width: 830px; /* see comment below */
    }
    #main {
        float: left;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-right: 280px;
        margin-right: -280px;
        height: 300px;
    }
    #aside,
    #complementary {
        float: right;
        width: 280px;
    }
    #contentinfo {
        clear: both;
    }
}

/**
 * 950
 */
@media only screen and (min-width: 950px) and (max-width: 1169px) {
    #wrapper {
        display:block;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-right: 250px;
        margin: auto;
    }
    #main {
        width: 60%;
    }
    #complementary {
        width: 40%;
    }
    #aside {
        width: 250px;
        margin-right: -250px;
    }
}

/**
 * 1170
 */
@media only screen and (min-width: 1170px) and (max-width: 1189px) {

    #main,
    #complementary,
    #aside,
    #contentinfo {
        float: left; /* display:inline here leads to rounding errors */
    }
    #main {
        width: 36%;
    }
    #complementary {
        width: 24%;
    }
    #aside {
        width: 21%;
    }
    #contentinfo {
        width: 19%;
    }
}

/**
 * 1190
 */
@media only screen and (min-width: 1190px) and (max-width: 1409px) {
    #wrapper {
        display:block;
        box-sizing: border-box;
        padding-right: 490px;
        margin: auto;
    }
    #main {
        width: 60%;
    }
    #complementary {
        width: 40%;
    }
    #aside {
        width: 490px;
        margin-right: -490px;
    }
}

/**
 * 1410
 */
@media only screen and (min-width: 1410px) {
    body {
        max-width: 1740px;
    }
    #wrapper {
        float: left;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width:100%;
        padding-left: 17%;
        padding-right: 16%;
        margin-right: -16%;
        border-right: solid 250px transparent;
    }
    #header {
        float: left;
        width:17%;
        margin-right: -17%;
    }
    #main {
        width: 60%;
    }
    #complementary {
        width: 40%;
    }
    #aside {
        width: 250px;
        margin-right: -250px;
    }
    #contentinfo {
        width: 16%;
    }
}

Demo

<!--[if lt IE 9]>
    <style>
    body {
        margin: auto;
        min-width: 850px;
        max-width: 1000px;
        _width: 900px;
    }
    #main {
        width: 55%;
    }
    #complementary {
        width: 25%;
        *margin-right: -1px; /* rounding error */
    }
    #aside {
        width: 20%;
    }
    #contentinfo {
        clear:both;
    }
    </style>
<![endif]-->

Conclusion

Design

Coding

CSS & HTML

Drupal

WordPress

Using Typographic Logos

Using Symbolic Logos

Image from Jordan Metcalf’s “Nike – 2010″ project on Behance

Combining Typographic and Symbolic

Filmotion

Video Spin

Shew Productions

Twisterpictures.com

Grow Production

Filmecup

Avesta Films

Filmalti

Locomovie Production

Cinetele Film

Snakemovies

Reel to Real Foundation

Trash Movie

Surreel

Literary Films

Everti

Moviecream

Crown Motion Pictures

Cinemas

Futureworks2

Instant Movie News

EastSidePictures

Pix Studios

London Urban Films

Amber Media

MovTracks

FlikBomb

Front Office Films

Reelium Films

Skyshutter

Twinsfilm

Strada Film

Sky Lab

LongShot

Film Rotation

Common Traits of a Clean Web Design

Solid Web Page Layout Structure

• A Brief Look at Grid-Based Layouts in Web Design
• The 960 Grid System Made Easy

Good Typography

• A Basic Look at Typography in Web Design
• CSS Typography: The Basics
• CSS Typography: Techniques and Best Practices
• CSS Typography: Examples and Tools

Limited Color Palette

Consistent Imagery

Tips for Achieving Clean Designs

Start Complex, Then Simplify

Tweak, and Tweak Some More

Don’t Miss the Big Picture

Conclusion

 Butterflies Vector Pack 4

Butterflies Vector Pack 3

Butterflies vector pack 2

Butterflies vector pack

Birds vector pack 1

Birds Vector Pack 5

Birds Vector Pack 6

Birds Vector Pack 7

Birds Vector Pack 8

Birds Vector Pack 9

Which pack is your favorite from this list?