Build Right: Midwest Tour Day 1

475203b37527b26e4fb2cc58e6e8493e?s=47 Build Right
August 16, 2012

Build Right: Midwest Tour Day 1

The first day of content from our 2012 Midwest Tour in Columbus, Cleveland, Pittsburgh, and Grand Rapids. Includes RWD 101, Planning and Design, and Getting a Good Start.

475203b37527b26e4fb2cc58e6e8493e?s=128

Build Right

August 16, 2012
Tweet

Transcript

  1. MIDWEST TOUR SPONSORED BY

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

  3. Session One RWD 101 http://bit.ly/LWLTEA /01-RWD101

  4. THE WEB IS NOT FIXED-WIDTH

  5. THIS IS A PARADIGM SHIFT

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

  8. Micral, 1972 THIS IS A PARADIGM SHIFT

  9. Ericsson R380, 2000 THIS IS A PARADIGM SHIFT

  10. Over 65% of new handset sales are smartphones. THIS IS

    A PARADIGM SHIFT
  11. As of April of 2012, Apple has sold around 67

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

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

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

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

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

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

    THE DEFINITION
  19. <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
  20. RESPONSIVE WEB DESIGN A FLUID FOUNDATION .span-1 { width: 90px;

    } .span-1 { width: ??%; } FIXED-WIDTH FLUID 300px wide grid
  21. RESPONSIVE WEB DESIGN A FLUID FOUNDATION .span-1 { width: 90px;

    } .span-1 { width: ??%; } FIXED-WIDTH FLUID target / context = %
  22. RESPONSIVE WEB DESIGN A FLUID FOUNDATION .span-1 { width: 90px;

    } .span-1 { width: 30%; } FIXED-WIDTH 90 / 300 = .3 FLUID target / context = %
  23. IE & Rounding RESPONSIVE WEB DESIGN A FLUID FOUNDATION

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

    FOUNDATION
  26. RESPONSIVE WEB DESIGN FLEXIBLE CONTENT The awesome poem is by

    a guy named Douglas, check him out at: http://ligzpoems.blogspot.com/ Make the image flexible. br-3.html http://bit.ly/LWLTEA /01-RWD101
  27. img { max-width: 100%; } RESPONSIVE WEB DESIGN FLEXIBLE CONTENT

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

    RESPONSIVE WEB DESIGN MEDIA QUERIES
  29. @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
  30. /* 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
  31. /* 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
  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. 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
  34. RESPONSIVE WEB DESIGN MEDIA QUERIES The Media Query Bookmarklet http://sparkbox.github.com/mediaQueryBookmarklet/

  35. RESPONSIVE WEB DESIGN MEDIA QUERIES Throw in a media query!

    br-4.html http://bit.ly/LWLTEA /01-RWD101
  36. A FLUID GRID FLEXIBLE CONTENT MEDIA QUERIES WRAP UP

  37. Session Two RWD PLANNING & DESIGN http://bit.ly/LWLTEA /02-PlanDesign

  38. PROCESS PRESENTATIONS The T uth

  39. 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 websites where content is valued and considered. OUR GOALS
  40. BROKEN PROCESS The ins of our past.

  41. Each client deliverable needs to look more like a final,

    beautiful end-product than the previous one. BROKEN PROCESS C mon (Mistaken) Mindset:
  42. This leads us to push toward nearly- designed wireframes quickly

    and completely designed comps soon after. BROKEN PROCESS
  43. Generally, they are “desktop-sized,” fixed around 960px. Reinforces idea of

    “desktop” as the “real” site with clients. Too much focus on layout misleads clients. Designer may not feel freedom to interpret layout. Leads to “960-Only Design.” BROKEN PROCESS THE PROBLEM WITH COMMON WIREFRAMES
  44. 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”
  45. The problem is the mindset. BROKEN PROCESS THE PROBLEM WITH

    “960-ONLY DESIGNING”
  46. 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”
  47. 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”
  48. A NEW PLAN ...for planning.

  49. Serve the client with deliverables that best serve the purpose

    of prioritizing and organizing content for delivery ...in a RWD context. A NEW PLAN T ue Planning Mindset:
  50. A NEW PLAN T ue Planning Mindset: Serve the client

    with deliverables that best serve the purpose of prioritizing and organizing content for delivery ...in a RWD context.
  51. A NEW PLAN Planning Content Design Development

  52. Research Technical Requirements Content Inventory Deliverables Priority Deliverables Style Deliverables

    A NEW PLAN QUICK OVERVIEW
  53. Research Technical Requirements Content Inventory Deliverables Priority Deliverables Style Deliverables

    A NEW PLAN QUICK OVERVIEW
  54. Research Technical Requirements Content Inventory Deliverables Priority Deliverables Style Deliverables

    A NEW PLAN QUICK OVERVIEW
  55. Research Technical Requirements Content Inventory Deliverables Priority Deliverables Style Deliverables

    A NEW PLAN QUICK OVERVIEW
  56. Research Technical Requirements Content Inventory Deliverables Priority Deliverables Style Deliverables

    A NEW PLAN QUICK OVERVIEW
  57. QUICK EXERCISE May I have a volunteer?

  58. PROJECT BRIEF We’ve already done e planning...

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

    apparel.
  60. PROJECT BRIEF Priority Deliverables Style Deliverables More Planning...

  61. A GOOD PROCESS It has worked for us.

  62. A GOOD PROCESS A Priority Guide ( Formerly Known As

    A Mobile-Sized Content Prototype Wireframe Thingy) Step One:
  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- 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
  64. 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
  65. 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
  66. 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
  67. A GOOD PROCESS Step Two: Style Tiles http://styletil.es/

  68. Large Resolution Design A GOOD PROCESS Step Three: http://bit.ly/LWLTEA /02-PlanDesign

  69. The esult for D ess Responsively: A GOOD PROCESS

  70. None
  71. None
  72. None
  73. Code Responsive Templates A GOOD PROCESS Step Four:

  74. A GOOD PROCESS

  75. A BETTER PROCESS At least, we think o.

  76. A BETTER PROCESS Step One: Content Priority Prototype http://bit.ly/LWLTEA /02-PlanDesign

  77. ADVANTAGES TO A CONTENT PRIORITY PROTOTYPE Client is getting used

    to deliverables in the browser. Lack of style allows the content to remain the hero. Lacks layout, creating a clear linear hierarchy of priority. Can easily be built upon for layout prototyping (or final dev). Semantics written early in planning, likely by those best suited. A BETTER PROCESS
  78. Step Two: A BETTER PROCESS Style Prototype http://sparkbox.github.com/dr-style-prototype/

  79. ADVANTAGES TO STYLE PROTOTYPES Client is viewing early design elements

    in their own browser. Web typography can be shown accurately. Static comps can’t clearly display web interaction. We can display how elements respond to different widths. *See Jeremy Loyd’s Foundry article for more: “Our New Responsive Design Deliverable: The Style Prototype” A BETTER PROCESS
  80. Large Resolution Design Step Three: A BETTER PROCESS

  81. Code Responsive Templates Step Four: A BETTER PROCESS

  82. PROCESS REVIEW What did he just ay?

  83. PROCESS REVIEW Research Technical Requirements Content Inventory Deliverables Priority Guide

    or Content Priority Prototype Style Tile or Style Prototype Large Resolution Design Code Responsive Templates
  84. Content , design, and development team members must review and

    collaborate regularly at every stage in the process. Last Step Step Zero: PROCESS REVIEW
  85. 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. Last Step Step Zero: PROCESS REVIEW
  86. Session Three GETTING A GOOD START http://bit.ly/LWLTEA /03-Boilerplate

  87. BROWSERS CHROME SAFARI OPERA FIREFOX DEVELOPMENT TOOLS }*WEBKIT IE

  88. DEVELOPMENT TOOLS

  89. DEVELOPMENT TOOLS

  90. BROWSERS CHROME SAFARI OPERA FIREFOX (GETFIREBUG.COM) IE :( DEVELOPMENT TOOLS

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

  92. CODEKIT DEVELOPMENT TOOLS http://incident57.com/codekit

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

  94. SAFARI DEVELOPMENT TOOLS http://www.apple.com/safari/

  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. TOOLS

  99. HTML5 BOILERPLATE DEVELOPMENT TOOLS http://mathiasbynens.be/notes/touch-icons

  100. TOOLS

  101. TOOLS http://bit.ly/2rdj5

  102. TOOLS

  103. http://www.modernizr.com/ HTML5 BOILERPLATE DEVELOPMENT TOOLS http://jquery.com

  104. Session Four THE NITTY GRITTY http://bit.ly/LWLTEA /04-Markup

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

    from content critical.
  106. None
  107. None
  108. None
  109. None
  110. /04-Markup

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

  112. 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
  113. 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 /05-CSS-1
  114. CSS 2 http://bit.ly/LWLTEA /07-CSS-2

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

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

  117. 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 /09-CSS-3
  118. DRESSRESPONSIVELY.COM

  119. RESPONSIVE CHALLENGES

  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. RESPONSIVE CHALLENGES IMAGES ADS BIG TABLES COMPLEX NAVIGATION PROCESS

  124. RESPONSIVE CHALLENGES IMAGES ADS BIG TABLES COMPLEX NAVIGATION PROCESS

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

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

  127. THANKS TO OUR MIDWEST TOUR SPONSORS