Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Build Responsively: Columbus: Day 1

Build Responsively: Columbus: Day 1

Slides from day 1 of Build Responsively in Columbus, Ohio.

Ben Callahan

July 09, 2012
Tweet

More Decks by Ben Callahan

Other Decks in Design

Transcript

  1. MIDWEST TOUR SPONSORED BY

    View full-size slide

  2. Download the Repo
    http://bit.ly/LWLTEA

    View full-size slide

  3. P esenters
    BEN CALLAHAN
    MIDDLE-AGED GEEK
    @bencallahan
    ROB TARR
    BEARDED WONDER
    @robtarr
    DREW CLEMENS
    TELLS BAD JOKES
    @drewtclemens

    View full-size slide

  4. Want More?
    @brworkshop
    @hearsparkbox
    www.seesparkbox.com/foundry

    View full-size slide

  5. THANKS TO OUR MIDWEST TOUR SPONSORS

    View full-size slide

  6. Session One
    RWD 101
    9:00-10:00
    http://bit.ly/LWLTEA
    /01-RWD101

    View full-size slide

  7. THE WEB IS NOT FIXED-WIDTH

    View full-size slide

  8. THIS IS A PARADIGM SHIFT

    View full-size slide

  9. THIS IS A PARADIGM SHIFT
    “...scientific advancement is not evolutionary,
    but rather is a series of peaceful interludes
    punctuated by intellectually violent revolutions,
    and in those revolutions one conceptual world
    is replaced by another...”
    — Thomas Kuhn

    View full-size slide

  10. ENIAC, 1946
    THIS IS A PARADIGM SHIFT
    ENIAC, 1946

    View full-size slide

  11. Micral, 1972
    THIS IS A PARADIGM SHIFT

    View full-size slide

  12. Ericsson R380, 2000
    THIS IS A PARADIGM SHIFT

    View full-size slide

  13. Over 60% of new handset sales are smartphones.
    THIS IS A PARADIGM SHIFT

    View full-size slide

  14. Apple sold around 13 million iPads in Q4 of 2011.
    THIS IS A PARADIGM SHIFT

    View full-size slide

  15. Amazon sold over
    4 million Kindle Fires
    in December of 2011.
    THIS IS A PARADIGM SHIFT

    View full-size slide

  16. FLEXIBILITY IS THE NEW NORM

    View full-size slide

  17. FLEXIBILITY IS THE NEW NORM
    0
    500
    1000
    1500
    2000
    2007 2008 2009 2010 2011 2012 2013 2014 2015
    Mobile Users
    Desktop Users
    Global Mobile vs Desktop Internet User Projection Source: Morgan Stanley Research

    View full-size slide

  18. PEOPLE ARE TRYING TO BROWSE YOUR WEBSITES
    ON THESE DEVICES, TODAY.
    FLEXIBILITY IS THE NEW NORM

    View full-size slide

  19. RESPONSIVE WEB DESIGN

    View full-size slide

  20. ETHAN MARCOTTE
    Article on alistapart.com
    Book via A Book Apart
    RESPONSIVE WEB DESIGN
    THE DEFINITION

    View full-size slide

  21. RESPONSIVE WEB DESIGN
    A FLUID FOUNDATION
    FLEXIBLE CONTENT
    MEDIA QUERIES
    THE DEFINITION

    View full-size slide

  22. RESPONSIVE WEB DESIGN
    LIVE CODE

    View full-size slide

  23. Turn a 300px 3-column grid into a fluid grid.
    br-1.html
    RESPONSIVE WEB DESIGN
    A FLUID FOUNDATION
    http://bit.ly/LWLTEA
    /01-RWD101

    View full-size slide

  24. www.semantic.gs
    with
    LESS or SASS
    RESPONSIVE WEB DESIGN
    A FLUID FOUNDATION

    View full-size slide

  25. RESPONSIVE WEB DESIGN
    FLEXIBLE CONTENT
    Images
    br-3.html
    The awesome poem is by a guy named Douglas, check him out at:
    http://ligzpoems.blogspot.com/

    View full-size slide

  26. img {
    float: right;
    max-width: 100%;
    }
    RESPONSIVE WEB DESIGN
    FLEXIBLE CONTENT

    View full-size slide

  27. Width, height
    Device-width, device-height
    Orientation
    Aspect ratio
    Several others
    http://www.w3.org/TR/css3-mediaqueries/
    RESPONSIVE WEB DESIGN
    MEDIA QUERIES

    View full-size slide

  28. @media (min-width: 600px) {
    /* styles for 600px and up here */
    }
    @media (max-width: 600px) {
    /* styles for 600px and down here */
    }
    RESPONSIVE WEB DESIGN
    MEDIA QUERIES

    View full-size slide

  29. /* Large Resolution First CSS File Structure */
    /* large resolution layouts here */
    @media (max-width: 850px) {
    /* styles for 850px and down here */
    }
    @media (max-width: 450px) {
    /* styles for 450px and down here */
    }
    RESPONSIVE WEB DESIGN
    MEDIA QUERIES

    View full-size slide

  30. /* Small Resolution First CSS File Structure */
    /* smallest resolution layouts here */
    @media (min-width: 450px) {
    /* styles for 450px and up here */
    }
    @media (min-width: 850px) {
    /* styles for 850px and up here */
    }
    RESPONSIVE WEB DESIGN
    MEDIA QUERIES

    View full-size slide

  31. LARGE RESOLUTION FIRST
    PRO: IE support by default
    CON: Smallest devices load all assets
    SMALL RESOLUTION FIRST
    PRO: More logical (build up vs tear down)
    CON: IE support is tricky
    RESPONSIVE WEB DESIGN
    MEDIA QUERIES

    View full-size slide

  32. LARGE RESOLUTION FIRST
    PRO: IE support by default
    CON: Smallest devices load all assets
    SMALL RESOLUTION FIRST
    PRO: More logical (build up vs tear down)
    CON: IE support is tricky
    RESPONSIVE WEB DESIGN
    MEDIA QUERIES

    View full-size slide

  33. RESPONSIVE WEB DESIGN
    MEDIA QUERIES
    Throw in a media query!
    br-5.html

    View full-size slide

  34. Fluid grid
    Flexible content
    Media Queries
    WRAP UP

    View full-size slide

  35. P esenters
    BEN CALLAHAN
    MIDDLE-AGED GEEK
    @bencallahan
    ROB TARR
    BEARDED WONDER
    @robtarr
    DREW CLEMENS
    TELLS BAD JOKES
    @drewtclemens

    View full-size slide

  36. Session Two
    RWD PLANNING & DESIGN
    9:45-11:15
    http://bit.ly/LWLTEA
    /02-PlanDesign

    View full-size slide

  37. PROJECT BRIEF
    Hold on to your butts.

    View full-size slide

  38. PROJECT BRIEF
    Client: Dress Responsively
    Project: Website that offers RWD-themed apparel.

    View full-size slide

  39. PROJECT BRIEF
    Project Scope
    Offer only t-shirts at first... potential for more later.
    No initial product inventory (no cart, checkout, etc).
    Users vote via twitter on what shirt they want produced.
    Should appeal to designers and developers.
    Simple 3-4 template site initially.
    Site will be responsive, build mobile-first.

    View full-size slide

  40. PROJECT BRIEF
    Napkin Sketch & Content
    Logo and Tagline
    “You Decide, 2012”
    Nav: Home, About, Shirts, Contact
    Top Shirt: # Votes, Title, Description, Link to Detail
    Headline and Two Paragraphs About the Site
    Footer: Nav and Copyright

    View full-size slide

  41. PROJECT BRIEF
    Your Job:
    Sketch how you think this site design would
    look at a mobile resolution.
    Oh yeah, You’ve got 5 minutes.

    View full-size slide

  42. DON’T FORGET
    What is the hierarchy of content?
    Should we hide and show elements at different sizes?
    Which things are links?
    Are the buttons/links large enough for a touch device?
    How will the navigation respond?
    How much content do we need to allow for?
    Will it work in IE?

    View full-size slide

  43. BROKEN PROCESS
    As if you didn’t already know.

    View full-size slide

  44. Was that a familiar experience?
    What’s tough about that process?
    BROKEN PROCESS

    View full-size slide

  45. The problem isn’t the style, it looks cool.
    The problem isn’t even the size of the design, because we
    DO need a solution at 960 pixels wide.
    BROKEN PROCESS
    THE PROBLEM WITH “960-ONLY DESIGNING”

    View full-size slide

  46. The problem is the mindset.
    BROKEN PROCESS
    THE PROBLEM WITH “960-ONLY DESIGNING”

    View full-size slide

  47. BROKEN PROCESS
    It assumes a fairytale world of controlled web experience
    that doesn’t exist, pushes design decisions onto developers,
    and creates false expectations in clients.
    THE PROBLEM WITH “960-ONLY DESIGNING”

    View full-size slide

  48. It simply is not conducive to creating a site which is
    future-proof and forward thinking...
    • Mobile First CSS
    • Content as King
    • Responsive Layouts
    BROKEN PROCESS
    THE PROBLEM WITH “960-ONLY DESIGNING”

    View full-size slide

  49. BROKEN PROCESS
    So, what’ a geek to do?

    View full-size slide

  50. DON’T keep up the status quo.
    DON’T stop at whining about inadequate tools.
    Get creative and explore other possibilities with the
    tools and practices we have available today.
    BROKEN PROCESS

    View full-size slide

  51. STUFF WE’VE TRIED
    It ain’t always been pretty.

    View full-size slide

  52. MOBILE FIRST DESIGN
    “Let’s try designing it the way we plan to code it.
    Just do the design at a small resolution.”
    STUFF WE’VE TRIED

    View full-size slide

  53. MOBILE FIRST DESIGN
    Problems:
    Mobile layouts are inevitably more linear and simple, and
    they provide little direction or room for more interesting
    layouts at large screen sizes.
    STUFF WE’VE TRIED

    View full-size slide

  54. STUFF WE’VE TRIED
    BOOKENDS
    “Okay, if designing for large resolutions isn’t enough,
    how about adding a small version? We’ll deliver both.”

    View full-size slide

  55. STUFF WE’VE TRIED
    BOOKENDS
    Problems...
    It’s a band-aid. It doesn’t solve the root issues.
    Extra design ain’t free.

    View full-size slide

  56. STUFF WE’VE TRIED
    BOOKENDS... PLUS
    “Okay, if designing large and small isn’t enough, how about
    adding a mid-range version? After all, tablets are the new black.”
    “And how about a 1280?”
    “And maybe one for the CEO’s Blackberry Storm?”

    View full-size slide

  57. STUFF WE’VE TRIED
    BOOKENDS... PLUS
    Problems...
    Again, it’s a band-aid.
    And it costs a LOT, too.

    View full-size slide

  58. OUR PROCESS
    (For now, anyway.)

    View full-size slide

  59. We are attempting to optimize content, design, and
    development time, finding a balance of appropriate
    direction from all disciplines without destroying budgets.
    ...while delivering on mobile-first, responsive designs
    where content is valued and considered.
    OUR PROCESS

    View full-size slide

  60. A Priority Guide
    OUR PROCESS
    Step One:

    View full-size slide

  61. A Priority Guide
    ( Formerly Known As A Mobile-Sized Content Prototype Wireframe Thingy)
    OUR PROCESS
    Step One:

    View full-size slide

  62. Home About Shirts Contact
    Dress
    Responsively
    clothing co
    SIZE US UP &
    CAST YOUR VOTE!
    IMAGE
    OF LEADING
    SHIRT
    WHAT’S THIS ALL ABOUT?
    SHOW ME ALL THE CANDIDATES
    The Dress Responsively Clothing
    Company doesn’t exist. Yet. This
    website is a product of Sparkbox’s Build
    Responsively workshop. Dress
    Responsively was originally built as a
    mock project to create working files and
    content for the workshop’s attendees.
    But then we got to thinking.
    What standards-loving, responsively-
    building, media-querying web citizens
    wouldn’t love some apparel which flies
    the flag of the future of the web? Let’s
    turn it over to the people.
    So here we are. If we are able to stump
    for enough interest, tweets, and votes
    for this geekwear, we’ll print up the
    winner and make it available. Check out
    the shirt designs, vote for your
    frontrunner, and pass us along to your
    friends. Democracy at work, folks. It’s
    either that or mob rule, whichever comes
    first. Either way, we all get sweet shirts
    out of it.
    SHOW ME THE CANDIDATES
    Back to Top
    SPARKBOX
    LOGO
    MADE BY
    BUILD RESPONSIVELY
    LOGO
    EXCLUSIVELY FOR
    Home About Shirts Contact
    © Sparkbox 2012
    All Rights Reserved.
    Responsive design is always the right
    answer. Though it is not always the
    only answer.
    Listen to Bruce Lee. Be like water,
    my friend.
    We’ve got to design in the browser.
    We just don’t have the tools yet.
    El Presidente Say: EXPANDING
    FOOTER
    Link
    Link
    HAS
    DROP
    DOWN
    MAILTO
    LINK
    SCROLL
    BELOW
    334
    VOTES
    #1
    IN POLLS
    Tuesday, February 14, 12
    Home About Shirts Contact
    Dress
    Responsively
    clothing co
    IMAGE
    OF
    SHIRT #1
    SHIRT DETAILS AND VOTING
    Back to Top
    REPEAT FOOTER
    EXPAND
    HIDDEN
    IMAGE
    OF
    SHIRT #2
    SHIRT DETAILS AND VOTING
    IMAGE
    OF
    SHIRT #3
    198
    VOTES
    SHIRT DETAILS AND VOTING
    254
    VOTES
    334
    VOTES
    Tuesday, February 14, 12
    A little something clever and
    explanatory about the shirt.
    Keep in mind that we can’t be
    too exclusive in the humor, at
    least not without giving subtle
    explanation.
    Home About Shirts Contact
    Dress
    Responsively
    clothing co
    IMAGE
    OF
    SHIRT #1
    VOTE FOR IT
    EXPAND
    HIDDEN
    334
    VOTES
    CLICK
    FOR
    DETAIL
    VIEW
    #1
    IN POLLS


    SHIRT TITLE GOES HERE
    NEXT
    SHIRT
    PREV
    SHIRT
    Back to Top
    REPEAT FOOTER
    Tuesday, February 14, 12
    3 Guides
    for 3 Templates

    View full-size slide

  63. Home About Shirts Contact
    Dress
    Responsively
    clothing co
    SIZE US UP &
    CAST YOUR VOTE!
    IMAGE
    OF LEADING
    SHIRT
    WHAT’S THIS ALL ABOUT?
    SHOW ME ALL THE CANDIDATES
    The Dress Responsively Clothing
    Company doesn’t exist. Yet. This
    website is a product of Sparkbox’s Build
    Responsively workshop. Dress
    Responsively was originally built as a
    mock project to create working files and
    content for the workshop’s attendees.
    But then we got to thinking.
    What standards-loving, responsively-
    HAS
    DROP
    DOWN
    MAILTO
    LINK
    SCROLL
    BELOW
    334
    VOTES
    #1
    IN POLLS
    Home Page

    View full-size slide

  64. Home About Shirts Contact
    Dress
    Responsively
    clothing co
    IMAGE
    OF
    SHIRT #1
    SHIRT DETAILS AND VOTING
    EXPAND
    HIDDEN
    IMAGE
    OF
    SHIRT #2
    SHIRT DETAILS AND VOTING
    254
    VOTES
    334
    VOTES
    Listing Page

    View full-size slide

  65. A little something clever and
    explanatory about the shirt.
    Keep in mind that we can’t be
    too exclusive in the humor, at
    least not without giving subtle
    explanation.
    Home About Shirts Contact
    Dress
    Responsively
    clothing co
    IMAGE
    OF
    SHIRT #1
    VOTE FOR IT
    EXPAND
    HIDDEN
    334
    VOTES
    CLICK
    FOR
    DETAIL
    VIEW
    #1
    IN POLLS


    SHIRT TITLE GOES HERE
    NEXT
    SHIRT
    PREV
    SHIRT
    Back to Top
    REPEAT FOOTER
    Detail Page

    View full-size slide

  66. A Style Prototype
    OUR PROCESS
    Step Two:

    View full-size slide

  67. A Style Prototype
    http://sparkbox.github.com/style-prototype/
    OUR PROCESS
    Step Two:

    View full-size slide

  68. Large Resolution Design
    OUR PROCESS
    Step Three:

    View full-size slide

  69. Code Responsive Templates
    OUR PROCESS
    Step Four:

    View full-size slide

  70. Content , design, and development team members
    must review and collaborate regularly at every
    stage in the process.
    OUR PROCESS
    Step Five Zero:

    View full-size slide

  71. We can’t “throw it over the wall” anymore...
    at least not if we want our sites to be excellent.
    There are too many moving parts.
    OUR PROCESS
    Step Five Zero:

    View full-size slide

  72. The esult for
    D ess Responsively:
    OUR PROCESS

    View full-size slide

  73. DISADVANTAGES OF DESKTOP-WIDTH WIREFRAMES
    Too much focus on layout.
    Designer may not feel freedom to interpret layout.
    Leaves an extra step for designer/developer
    to figure out translation to mobile width.
    OUR PROCESS

    View full-size slide

  74. ADVANTAGES TO MOBILE-SIZED PRIORITY GUIDE
    Wireframes focus more on hierarchy and less on layout.
    Cuts out a step of designer sketching/designing for mobile first.
    Dev gets direction on both desktop and smallest mobile widths.
    Answers some of the questions in handoff.
    More visual decisions left to designer, less headache for devs.
    OUR PROCESS

    View full-size slide

  75. CLIENT DELIVERABLES
    Crap. I almost forgot about them.

    View full-size slide

  76. CLIENT DELIVERABLES
    It depends...
    So if everything is changing,
    what do we show them?

    View full-size slide

  77. Client Education.
    Level of trust from the client.
    Scope of the project.
    Time and budget.
    CLIENT DELIVERABLES
    DELIVERABLE DECISIONS ARE EFFECTED BY...

    View full-size slide

  78. Educated clients (or more trusting and open-minded
    ones) may be open to deliverables closer to what we’ve
    described in our current process.
    CLIENT DELIVERABLES

    View full-size slide

  79. Though we may educate our clients, some will inevitably
    want to see more and more versions of wireframes and
    layouts which cover multiple screen sizes... perhaps due to
    the project scope, or simply a lack of vision.
    We recommend getting paid for that.
    CLIENT DELIVERABLES

    View full-size slide

  80. P esenters
    BEN CALLAHAN
    MIDDLE-AGED GEEK
    @bencallahan
    ROB TARR
    BEARDED WONDER
    @robtarr
    DREW CLEMENS
    TELLS BAD JOKES
    @drewtclemens

    View full-size slide

  81. Session Three
    GETTING A GOOD START
    11:30-NOON
    http://bit.ly/LWLTEA
    /03-Boilerplate

    View full-size slide

  82. DEVELOPMENT TOOLS

    View full-size slide

  83. BROWSERS
    CHROME
    SAFARI
    FIREFOX
    DEVELOPMENT TOOLS

    View full-size slide

  84. DEVELOPMENT TOOLS

    View full-size slide

  85. DEVELOPMENT TOOLS

    View full-size slide

  86. BROWSERS
    CHROME
    SAFARI
    OPERA
    FIREFOX (GETFIREBUG.COM)
    DEVELOPMENT TOOLS

    View full-size slide

  87. BOOKMARKLETS
    DEVELOPMENT TOOLS
    http://www.benjaminkeen.com/misc/bricss/
    http://seesparkbox.com/foundry/media_query_bookmarklet

    View full-size slide

  88. ADOBE SHADOW
    DEVELOPMENT TOOLS
    http://labs.adobe.com/technologies/shadow/

    View full-size slide

  89. BROWSERSTACK
    DEVELOPMENT TOOLS
    http://browserstack.com

    View full-size slide

  90. SASS/SCSS
    DEVELOPMENT TOOLS
    http://sass-lang.com/

    View full-size slide

  91. HTML5 BOILERPLATE
    DEVELOPMENT TOOLS
    ˒
    http://html5boilerplate.com/
    https://github.com/sparkbox/html5-boilerplate

    View full-size slide

  92. HTML5 BOILERPLATE
    DEVELOPMENT TOOLS
    http://mathiasbynens.be/notes/touch-icons
    http://humanstxt.org/

    View full-size slide

  93. HTML5 BOILERPLATE
    DEVELOPMENT TOOLS
    http://www.modernizr.com/
    http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-
    dom-ready-execution/
    http://jquery.com

    View full-size slide

  94. P esenters
    BEN CALLAHAN
    MIDDLE-AGED GEEK
    @bencallahan
    ROB TARR
    BEARDED WONDER
    @robtarr
    DREW CLEMENS
    TELLS BAD JOKES
    @drewtclemens

    View full-size slide

  95. MIDWEST TOUR SPONSORED BY

    View full-size slide

  96. Session Four
    THE NITTY GRITTY
    1:15-5:00
    http://bit.ly/LWLTEA
    /04-Markup

    View full-size slide

  97. WRITE THE MARKUP
    Fluid presentation makes the separation
    of style from content critical.

    View full-size slide

  98. http://bit.ly/LWLTEA
    /04-Markup

    View full-size slide

  99. CSS 1
    http://bit.ly/LWLTEA
    /05-CSS-1

    View full-size slide

  100. Home About Shirts Contact
    Dress
    Responsively
    clothing co
    SIZE US UP &
    CAST YOUR VOTE!
    IMAGE
    OF LEADING
    SHIRT
    HAS
    DROP
    DOWN
    MAILTO
    LINK
    SCROLL
    BELOW
    334
    VOTES
    #1
    IN POLLS

    View full-size slide

  101. TASK GOALS
    1) ADD THE “HOME” LINK BACK IN
    2) INCORPORATE THE LARGER LOGO
    3) CONSIDER TYPE AND PADDING SIZES
    4) HONOR THE PROPORTIONS OF THE DESIGN
    CSS-1

    View full-size slide

  102. CSS 2
    http://bit.ly/LWLTEA
    /07-CSS-2

    View full-size slide

  103. TASK GOALS
    1) ADJUST FONT-SIZE APPROPRIATELY
    2) MOVE TO TWO COLUMNS
    3) HONOR THE PROPORTIONS OF THE DESIGN
    CSS-2

    View full-size slide

  104. CSS 3
    http://bit.ly/LWLTEA
    /09-CSS-3

    View full-size slide

  105. TASK GOALS
    1) ADD A 2-COLUMN LAYOUT
    2) ADD A 3-COLUMN LAYOUT
    3) TRY FOR A VISUALLY APPEALING GRID
    3) HONOR THE PROPORTIONS OF THE DESIGN
    CSS-3

    View full-size slide

  106. DRESSRESPONSIVELY.COM

    View full-size slide

  107. RESPONSIVE CHALLENGES

    View full-size slide

  108. RESPONSIVE CHALLENGES
    IMAGES
    ADS
    BIG TABLES
    COMPLEX NAVIGATION
    PROCESS

    View full-size slide

  109. RESPONSIVE CHALLENGES
    IMAGES
    ADS
    BIG TABLES
    COMPLEX NAVIGATION
    PROCESS

    View full-size slide

  110. RESPONSIVE CHALLENGES
    IMAGES
    ADS
    BIG TABLES
    COMPLEX NAVIGATION
    PROCESS

    View full-size slide

  111. RESPONSIVE CHALLENGES
    IMAGES
    ADS
    BIG TABLES
    COMPLEX NAVIGATION
    PROCESS

    View full-size slide

  112. RESPONSIVE CHALLENGES
    IMAGES
    ADS
    BIG TABLES
    COMPLEX NAVIGATION
    PROCESS

    View full-size slide

  113. P esenters
    BEN CALLAHAN
    MIDDLE-AGED GEEK
    @bencallahan
    ROB TARR
    BEARDED WONDER
    @robtarr
    DREW CLEMENS
    TELLS BAD JOKES
    @drewtclemens

    View full-size slide

  114. MIDWEST TOUR SPONSORED BY

    View full-size slide