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

eduWeb 2012: Hands-On Responsive Web Design Wor...

eduWeb 2012: Hands-On Responsive Web Design Workshop

Slides from my 3-hour workshop on responsive web design at eduWeb 2012 in Boston.

Ben Callahan

July 30, 2012
Tweet

More Decks by Ben Callahan

Other Decks in Design

Transcript

  1. HANDS-ON RESPONSIVE WEB DESIGN Ben Callahan // @bencallahan Sparkbox //

    seesparkbox.com http://bit.ly/LWLTEA Monday, July 30, 12
  2. Over 60% of new handset sales are smartphones. THIS IS

    A PARADIGM SHIFT Monday, July 30, 12
  3. As of April of 2012, Apple has sold around 67

    million iPads. THIS IS A PARADIGM SHIFT Monday, July 30, 12
  4. Amazon sold over 4 million Kindle Fires in December of

    2011. THIS IS A PARADIGM SHIFT Monday, July 30, 12
  5. 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 Monday, July 30, 12
  6. PEOPLE ARE TRYING TO BROWSE YOUR WEBSITES ON THESE DEVICES,

    TODAY. FLEXIBILITY IS THE NEW NORM Monday, July 30, 12
  7. RESPONSIVE WEB DESIGN ONE SITE ADJUSTS ITSELF http://website.com THREE WAYS

    ORGANIZATIONS ARE ADDRESSING MOBILE Monday, July 30, 12
  8. ETHAN MARCOTTE Article on alistapart.com Book via A Book Apart

    RESPONSIVE WEB DESIGN Monday, July 30, 12
  9. 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 Monday, July 30, 12
  10. Logo and tagline Headline: “You Decide, 2012” Navigation: Home, About,

    Shirts, Contact Top Shirt: # votes, title, description, link to detail view About Text: headline and two paragraphs describing the site Footer: nav and copyright Monday, July 30, 12
  11. The problem isn’t the style, it looks cool. The problem

    isn’t the size of the design. BROKEN PROCESS THE PROBLEM WITH “960-ONLY DESIGNING” Monday, July 30, 12
  12. THE PROBLEM IS THE MINDSET BROKEN PROCESS THE PROBLEM WITH

    “960-ONLY DESIGNING” Monday, July 30, 12
  13. 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 Monday, July 30, 12
  14. We are attempting to optimize planning, 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. THE GOAL Monday, July 30, 12
  15. 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 Monday, July 30, 12
  16. 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 Monday, July 30, 12
  17. STUFF WE’VE TRIED BOOKENDS “Okay, if designing for large resolutions

    isn’t enough, how about adding a small resolution version? We’ll deliver both.” Monday, July 30, 12
  18. STUFF WE’VE TRIED BOOKENDS... PLUS “Okay, if designing large and

    small resolutions 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 my Blackberry Storm?” Monday, July 30, 12
  19. We are attempting to optimize planning, 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. THE GOAL Monday, July 30, 12
  20. 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 Priority Guides for 3 Templates Monday, July 30, 12
  21. 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 HAS DROP DOWN MAILTO LINK SCROLL BELOW 334 VOTES #1 IN POLLS Home Page Monday, July 30, 12
  22. 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 Monday, July 30, 12
  23. 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 Monday, July 30, 12
  24. 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 Priority Guides for 3 Templates Monday, July 30, 12
  25. Content , UX, design, and development team members must review

    and collaborate regularly at every stage in the process. OUR PROCESS Step Four Zero: Monday, July 30, 12
  26. 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 Four Zero: Monday, July 30, 12
  27. Education. Level of trust. Scope of the project. Time and

    budget. DELIVERABLES DELIVERABLE DECISIONS ARE EFFECTED BY... Monday, July 30, 12
  28. Educated clients (or more trusting and open-minded ones) may be

    open to deliverables closer to what we’ve described in our current process. DELIVERABLES Monday, July 30, 12
  29. Some people will inevitably want to see more and more

    versions of wireframes and layouts which cover multiple screen sizes... I recommend getting paid for that. DELIVERABLES Monday, July 30, 12
  30. <div class=”span-1”> <!-- one column --> </div> <div class=”span-2”> <!--

    two columns --> </div> <div class=”span-3”> <!-- three columns --> </div> RESPONSIVE WEB DESIGN A FLUID FOUNDATION Monday, July 30, 12
  31. RESPONSIVE WEB DESIGN A FLUID FOUNDATION .span-1 { width: 90px;

    } .span-1 { width: ??%; } FIXED-WIDTH FLUID 300px wide grid Monday, July 30, 12
  32. RESPONSIVE WEB DESIGN A FLUID FOUNDATION .span-1 { width: 90px;

    } .span-1 { width: ??%; } FIXED-WIDTH FLUID target / context = % Monday, July 30, 12
  33. RESPONSIVE WEB DESIGN A FLUID FOUNDATION .span-1 { width: 90px;

    } .span-1 { width: 30%; } FIXED-WIDTH 90 / 300 = .3 FLUID target / context = % Monday, July 30, 12
  34. 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 Monday, July 30, 12
  35. 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/ Monday, July 30, 12
  36. @media (min-width: 600px) { /* styles for 600px and up

    */ } @media (max-width: 600px) { /* styles for 600px and down */ } RESPONSIVE WEB DESIGN MEDIA QUERIES Monday, July 30, 12
  37. /* Large Resolution First CSS File Structure */ /* large

    resolution layouts here */ @media (max-width: 850px) { /* styles for 850px and down */ } @media (max-width: 450px) { /* styles for 450px and down */ } RESPONSIVE WEB DESIGN MEDIA QUERIES Monday, July 30, 12
  38. /* Small Resolution First CSS File Structure */ /* smallest

    resolution layouts here */ @media (min-width: 450px) { /* styles for 450px and up */ } @media (min-width: 850px) { /* styles for 850px and up */ } RESPONSIVE WEB DESIGN MEDIA QUERIES Monday, July 30, 12
  39. 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 Monday, July 30, 12
  40. “The truly responsive design web designer wasn’t born until after

    the launch of the iPhone. We haven’t seen his or her work yet.” ANDY CLARKE http://the-pastry-box-project.net/andy-clarke/2012-april-8/ Monday, July 30, 12
  41. • MOBILE FIRST PROCESS • PERFORMANCE AS A FEATURE •

    THE SERVER IS OUR FRIEND • MODULAR CONTENT SYSTEMS MOVE BEYOND Monday, July 30, 12