Save 37% off PRO during our Black Friday Sale! »

Hands-On Responsive Web Design

Fe8510ee8e06c36d02799dbf8f934b9c?s=47 Ben Callahan
June 02, 2012

Hands-On Responsive Web Design

From my workshop in Columbus at Midwest UX 2012, a walk-through of how we need user-centered thinking throughout the responsive web design process.

Fe8510ee8e06c36d02799dbf8f934b9c?s=128

Ben Callahan

June 02, 2012
Tweet

Transcript

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

    seesparkbox.com http://bit.ly/LWLTEA
  2. THE WEB IS NOT FIXED-WIDTH

  3. IGNORE IT FIXED-WIDTH “DESKTOP” http://website.com THREE WAYS ORGANIZATIONS ARE ADDRESSING

    MOBILE
  4. MOBILE SITE FIXED-WIDTH “DESKTOP” http://website.com 100% WIDE “MOBILE” http://mobile.website.com +

    THREE WAYS ORGANIZATIONS ARE ADDRESSING MOBILE
  5. MOBILE SITE THE MOST IMPORTANT FEATURE OF YOUR SITE IS

    THE ONE I NEED NOW THREE WAYS ORGANIZATIONS ARE ADDRESSING MOBILE
  6. RESPONSIVE WEB DESIGN ONE SITE ADJUSTS ITSELF http://website.com THREE WAYS

    ORGANIZATIONS ARE ADDRESSING MOBILE
  7. ETHAN MARCOTTE Article on alistapart.com Book via A Book Apart

    RESPONSIVE WEB DESIGN
  8. RESPONSIVE WEB DESIGN A FLUID GRID FLEXIBLE CONTENT MEDIA QUERIES

  9. None
  10. THE DIP

  11. Unconscious Incompetence Conscious Incompetence Conscious Competence Unconscious Competence STAGES OF

    COMPETENCE
  12. THINK RESPONSIVELY

  13. RWD PLANNING & DESIGN

  14. PROJECT BRIEF

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

    apparel.
  16. 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
  17. 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 PROJECT BRIEF Project Scope
  18. None
  19. None
  20. BROKEN PROCESS As if you didn’t already know.

  21. 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”
  22. The problem is the mindset. BROKEN PROCESS THE PROBLEM WITH

    “960-ONLY DESIGNING”
  23. 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”
  24. 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”
  25. BROKEN PROCESS So, what’ a geek to do?

  26. 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
  27. STUFF WE’VE TRIED It ain’t always been pretty.

  28. 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
  29. 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
  30. 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.”
  31. STUFF WE’VE TRIED BOOKENDS Problems... It’s a band-aid. Increases timeline

    and budget.
  32. 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?”
  33. STUFF WE’VE TRIED BOOKENDS... PLUS Problems... Again, it’s a band-aid.

    And it costs a LOT, too.
  34. OUR PROCESS For now, anyway.

  35. 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
  36. A Priority Guide OUR PROCESS Step One-a:

  37. 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
  38. 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
  39. 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
  40. 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
  41. 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
  42. A Style Prototype OUR PROCESS Step One-b: Like Samantha Warren’s

    Style Tiles, but in the browser. (styletil.es)
  43. Large Resolution Design OUR PROCESS Step Two:

  44. Code Responsive Templates OUR PROCESS Step Three:

  45. Content , design, and development team members must review and

    collaborate regularly at every stage in the process. OUR PROCESS Step Four Zero:
  46. 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:
  47. ONE NOTE Content Strategy OUR PROCESS

  48. CLIENT DELIVERABLES Oh yeah. We have to get this tuff

    approved.
  49. CLIENT DELIVERABLES It depends... So if everything is changing, what

    do we show them?
  50. Client Education. Level of trust from the client. Scope of

    the project. Time and budget. CLIENT DELIVERABLES DELIVERABLE DECISIONS ARE EFFECTED BY...
  51. 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
  52. 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... I recommend getting paid for that. CLIENT DELIVERABLES
  53. https://github.com/sparkbox/Build-Responsively-Workshop A GOOD START /03-Boilerplate

  54. DEVELOPMENT TOOLS

  55. BROWSERS CHROME SAFARI FIREFOX DEVELOPMENT TOOLS

  56. DEVELOPMENT TOOLS

  57. DEVELOPMENT TOOLS

  58. BROWSERS CHROME SAFARI FIREFOX (GETFIREBUG.COM) DEVELOPMENT TOOLS

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

  60. HTML5 BOILERPLATE http://html5boilerplate.com/ https://github.com/sparkbox/html5-boilerplate

  61. http://bit.ly/LWLTEA WRITE THE MARKUP /04-Markup

  62. WRITE THE MARKUP http://getskeleton.com (the grid is NOT semantic) Fluid

    presentation makes the separation of style from content critical.
  63. None
  64. None
  65. None
  66. None
  67. None
  68. CSS 1 /05-CSS-1 http://bit.ly/LWLTEA

  69. 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
  70. CSS 2 /07-CSS-2 http://bit.ly/LWLTEA

  71. TASK GOALS 1) ADJUST FONT-SIZE APPROPRIATELY 2) MOVE TO TWO

    COLUMNS 3) HONOR THE PROPORTIONS OF THE DESIGN CSS-2
  72. CSS 3 /09-CSS-3 http://bit.ly/LWLTEA

  73. TASK GOALS 1) ADD A 2-COLUMN LAYOUT 2) ADD A

    3-COLUMN LAYOUT 3) TRY FOR A PERFECT GRID 3) HONOR THE PROPORTIONS OF THE DESIGN CSS-3
  74. DRESSRESPONSIVELY.COM

  75. RESPONSIVE CHALLENGES

  76. RESPONSIVE CHALLENGES IMAGES ADS BIG TABLES COMPLEX NAVIGATION PROCESS

  77. RESPONSIVE CHALLENGES IMAGES ADS BIG TABLES COMPLEX NAVIGATION PROCESS

  78. RESPONSIVE CHALLENGES IMAGES ADS BIG TABLES COMPLEX NAVIGATION PROCESS

  79. RESPONSIVE CHALLENGES IMAGES ADS BIG TABLES COMPLEX NAVIGATION PROCESS

  80. RESPONSIVE CHALLENGES IMAGES ADS BIG TABLES COMPLEX NAVIGATION PROCESS

  81. RESPONSIVE MINDSET

  82. BUILDRESPONSIVELY.COM JULY 9, 10 RIGHT HERE IN COLUMBUS

  83. DISCUSSION

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

    seesparkbox.com