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.

Fe8510ee8e06c36d02799dbf8f934b9c?s=128

Ben Callahan

July 09, 2012
Tweet

Transcript

  1. MIDWEST TOUR SPONSORED BY

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

  3. P esenters BEN CALLAHAN MIDDLE-AGED GEEK @bencallahan ROB TARR BEARDED

    WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens
  4. Want More? @brworkshop @hearsparkbox www.seesparkbox.com/foundry

  5. THANKS TO OUR MIDWEST TOUR SPONSORS

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

  7. THE WEB IS NOT FIXED-WIDTH

  8. THIS IS A PARADIGM SHIFT

  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
  10. ENIAC, 1946 THIS IS A PARADIGM SHIFT ENIAC, 1946

  11. Micral, 1972 THIS IS A PARADIGM SHIFT

  12. Ericsson R380, 2000 THIS IS A PARADIGM SHIFT

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

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

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

    2011. THIS IS A PARADIGM SHIFT
  16. FLEXIBILITY IS THE NEW NORM

  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
  18. PEOPLE ARE TRYING TO BROWSE YOUR WEBSITES ON THESE DEVICES,

    TODAY. FLEXIBILITY IS THE NEW NORM
  19. RESPONSIVE WEB DESIGN

  20. ETHAN MARCOTTE Article on alistapart.com Book via A Book Apart

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

    THE DEFINITION
  22. RESPONSIVE WEB DESIGN LIVE CODE

  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
  24. www.semantic.gs with LESS or SASS RESPONSIVE WEB DESIGN A FLUID

    FOUNDATION
  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/
  26. img { float: right; max-width: 100%; } RESPONSIVE WEB DESIGN

    FLEXIBLE CONTENT
  27. Width, height Device-width, device-height Orientation Aspect ratio Several others http://www.w3.org/TR/css3-mediaqueries/

    RESPONSIVE WEB DESIGN MEDIA QUERIES
  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
  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
  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
  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
  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
  33. RESPONSIVE WEB DESIGN MEDIA QUERIES Throw in a media query!

    br-5.html
  34. WRAP UP

  35. Fluid grid Flexible content Media Queries WRAP UP

  36. P esenters BEN CALLAHAN MIDDLE-AGED GEEK @bencallahan ROB TARR BEARDED

    WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens
  37. Session Two RWD PLANNING & DESIGN 9:45-11:15 http://bit.ly/LWLTEA /02-PlanDesign

  38. PROJECT BRIEF Hold on to your butts.

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

    apparel.
  40. 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.
  41. 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
  42. None
  43. None
  44. PROJECT BRIEF Your Job: Sketch how you think this site

    design would look at a mobile resolution. Oh yeah, You’ve got 5 minutes.
  45. 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?
  46. BROKEN PROCESS As if you didn’t already know.

  47. Was that a familiar experience? What’s tough about that process?

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

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

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

  55. 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
  56. 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
  57. STUFF WE’VE TRIED BOOKENDS “Okay, if designing for large resolutions

    isn’t enough, how about adding a small version? We’ll deliver both.”
  58. STUFF WE’VE TRIED BOOKENDS Problems... It’s a band-aid. It doesn’t

    solve the root issues. Extra design ain’t free.
  59. 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?”
  60. STUFF WE’VE TRIED BOOKENDS... PLUS Problems... Again, it’s a band-aid.

    And it costs a LOT, too.
  61. OUR PROCESS (For now, anyway.)

  62. 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
  63. A Priority Guide OUR PROCESS Step One:

  64. A Priority Guide ( Formerly Known As A Mobile-Sized Content

    Prototype Wireframe Thingy) OUR PROCESS Step One:
  65. 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
  66. 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
  67. 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
  68. 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
  69. A Style Prototype OUR PROCESS Step Two:

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

  71. Large Resolution Design OUR PROCESS Step Three:

  72. Code Responsive Templates OUR PROCESS Step Four:

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

    collaborate regularly at every stage in the process. OUR PROCESS Step Five Zero:
  74. 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:
  75. The esult for D ess Responsively: OUR PROCESS

  76. None
  77. None
  78. None
  79. 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
  80. 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
  81. CLIENT DELIVERABLES Crap. I almost forgot about them.

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

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

    the project. Time and budget. CLIENT DELIVERABLES DELIVERABLE DECISIONS ARE EFFECTED BY...
  84. 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
  85. 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
  86. P esenters BEN CALLAHAN MIDDLE-AGED GEEK @bencallahan ROB TARR BEARDED

    WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens
  87. Session Three GETTING A GOOD START 11:30-NOON http://bit.ly/LWLTEA /03-Boilerplate

  88. DEVELOPMENT TOOLS

  89. BROWSERS CHROME SAFARI FIREFOX DEVELOPMENT TOOLS

  90. DEVELOPMENT TOOLS

  91. DEVELOPMENT TOOLS

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

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

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

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

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

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

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

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

  100. P esenters BEN CALLAHAN MIDDLE-AGED GEEK @bencallahan ROB TARR BEARDED

    WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens
  101. MIDWEST TOUR SPONSORED BY

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

  103. WRITE THE MARKUP Fluid presentation makes the separation of style

    from content critical.
  104. None
  105. None
  106. None
  107. None
  108. http://bit.ly/LWLTEA /04-Markup

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

  110. 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
  111. 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
  112. CSS 2 http://bit.ly/LWLTEA /07-CSS-2

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

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

  115. 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
  116. DRESSRESPONSIVELY.COM

  117. RESPONSIVE CHALLENGES

  118. RESPONSIVE CHALLENGES IMAGES ADS BIG TABLES COMPLEX NAVIGATION PROCESS

  119. RESPONSIVE CHALLENGES IMAGES ADS BIG TABLES COMPLEX NAVIGATION PROCESS

  120. RESPONSIVE CHALLENGES IMAGES ADS BIG TABLES COMPLEX NAVIGATION PROCESS

  121. RESPONSIVE CHALLENGES IMAGES ADS BIG TABLES COMPLEX NAVIGATION PROCESS

  122. RESPONSIVE CHALLENGES IMAGES ADS BIG TABLES COMPLEX NAVIGATION PROCESS

  123. P esenters BEN CALLAHAN MIDDLE-AGED GEEK @bencallahan ROB TARR BEARDED

    WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens
  124. MIDWEST TOUR SPONSORED BY