Responsive Web Design: The Real Web 2.0 (Presented at UXPA Boston 2013)

  • 29,107 views
Uploaded on

Not unlike most human twenty-two year olds, the Internet has been going through some changes over the past couple of years. It has continued to grow exponentially in size, scope, and responsibility. …

Not unlike most human twenty-two year olds, the Internet has been going through some changes over the past couple of years. It has continued to grow exponentially in size, scope, and responsibility. Designers and developers used to create for a single “device” (the desktop monitor) with only one contextual setting (sitting in-front of said monitor). Now, every professional device and most toys come with the ability to access the Internet via a browser. This takes a once simple process and throws several new variables at once: · What are the capabilities of the device? · What size is the device? · What are the capabilities of the browser on the device? · What’s the contextual setting of the user?

The answers to these questions lie in a collaborative effort between experience designers, visual designers, and developers. The waterfall processes of “you do your thing and I’ll do mine” are being rendered obsolete; falling to a more cyclical and iterative approach. Designers (both experience and visual) are more hard-pressed than ever to learn code; developers to learn contextual design and basic design principles, all while keeping projects on-time and on-budget. With our presentation, we aim to exhibit our best practices—using a design studio approach—for creating a responsive web design with a multi-disciplinary group. We’ll run through the initial sketching exercises used to get all parties thinking responsively—making sure to frame not only visual elements, but also the contextual experience for each breakpoint. We’ll transition into pain-free methods to get designers and developers coding together for faster prototyping. Throughout it all, we’ll highlight the success of these methods, which were used to teach a team at a major financial institution how to work more succinctly and effectively, from sketching to critiques to coding.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Cool presentation with a funny twist
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
29,107
On Slideshare
0
From Embeds
0
Number of Embeds
15

Actions

Shares
Downloads
0
Comments
1
Likes
26

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. RESPONSIVE WEB DESIGNThe Real Web 2.0Annette Arabasz (@annettish)Nick Snyder (@_FasterHorses)Thursday, May 30, 13
  • 2. AGENDA FOR TODAY- Explore the root of the problem- Investigate Responsive as a solution- Learn how it will affects you and your team- Decide if the project is “right” for responsive- Share some helpful processes- Tips and tricksThursday, May 30, 13
  • 3. madpow.com | @MadPowThursday, May 30, 13
  • 4. A SHORT STORYMeet Dave.Thursday, May 30, 13
  • 5. DAVE AT 15 (1995)- Lives at home at no cost- Interests include fast cars (and girls)- Aesthetics trumps economicsThursday, May 30, 13
  • 6. SPORTS CARSo rad!Thursday, May 30, 13
  • 7. DAVE AT 27 (2007)- Makes monthly payments for rent- Needs to commute to work daily- Gas prices are through the roofThursday, May 30, 13
  • 8. So economical!Thursday, May 30, 13
  • 9. DAVE AT 33 (2013)- Has three children, needs more seating- Safety ratings are a high priority- Needs room for groceries and sports equipment- “An entertainment system sure would be nice.”Thursday, May 30, 13
  • 10. Oh no, what haveI done?!Thursday, May 30, 13
  • 11. WHAT’S THE POINT?Users determine the product they purchase anduse based on their needs, which change.Thursday, May 30, 13
  • 12. THEThursday, May 30, 13
  • 13. DAVE AT 15 (1995)- Desktop with a heavy CRT monitor- Slow Internet connection (well, fast to him)- Stationary deviceThursday, May 30, 13
  • 14. DAVE AT 27 (2007)- iPhone debuts in 2007- Internet speeds become more variable- People use idle moments to be productive- Bar arguments are instantly solvedThursday, May 30, 13
  • 15. TAFT1909–1913Thursday, May 30, 13
  • 16. TAFT1909–1913#thanksObamaThursday, May 30, 13
  • 17. DAVE AT 33 (2013)- Laptop replaces desktop; tablet replaces laptop- Mobile browsing turns from a rare novelty to a staple- Unlimited data plans become nearly nonexistentThursday, May 30, 13
  • 18. WHAT’S THE POINT?Needs of a user change as technology changes.Thursday, May 30, 13
  • 19. WHAT CHANGED?- Viewports went from small to large... to small again- Connections went from slow to fast to slow- Workstation went from stationary to everywhereThursday, May 30, 13
  • 20. DAVE’S CARA perfect solution for Dave would be to own eachof the three cars... but that’s silly.If only there was a way that one car could serve allof his needs (even the ones he doesn’t knowabout yet)...Thursday, May 30, 13
  • 21. RESPONSIVE WEB DESIGN- Allows a website to scale from tiny devices tolarge, high definition televisions- Single code base (no ‘m.thissucks.com’ domains)- When done properly, you’re already prepared forthe next big device—whatever it may be.Thursday, May 30, 13
  • 22. WHAT IS RESPONSIVE?The Problem: Desktop computers are no longerthe only thing people are usingto access the web.Thursday, May 30, 13
  • 23. Thursday, May 30, 13
  • 24. Thursday, May 30, 13
  • 25. Thursday, May 30, 13
  • 26. Thursday, May 30, 13
  • 27. BASIC CONCEPTSFlexible Grids Fluid Media Media QueriesThursday, May 30, 13
  • 28. Flexible Grids Fluid Media Media QueriesThursday, May 30, 13
  • 29. FLEXIBLE GRIDSStatic layouts become flexible or fluid.Pixel units are replaced by percentage-based units.Thursday, May 30, 13
  • 30. FLEXIBLE GRIDSThis is how you go from pixels to percentages:Context / Target = ResultThursday, May 30, 13
  • 31. FLEXIBLE GRIDSThis is how you go from pixels to percentages.300px / 960px = 0.3125Thursday, May 30, 13
  • 32. FLEXIBLE GRIDSThis is how you go from pixels to percentages.300px / 960px = 0.3125Move the decimal to the left by two spaces.Thursday, May 30, 13
  • 33. FLEXIBLE GRIDSThis is how you go from pixels to percentages.300px / 960px = 0.3125Move the decimal to the left by two spaces.You get 31.25%!Thursday, May 30, 13
  • 34. FLEXIBLE GRIDSYou can make typography fluid too,by converting pixels to ems.Thursday, May 30, 13
  • 35. FLEXIBLE GRIDSContext / Target = Result21px / 16px = 1.3125em21 / 16 = 1.3125Thursday, May 30, 13
  • 36. Flexible Grids Fluid Media Media QueriesThursday, May 30, 13
  • 37. FLUID MEDIAImages and video should scale and resize to fit theirrespective container.(We personally recommend the PictureFill.js plug-in.http://scottjehl.github.io/picturefill/Thursday, May 30, 13
  • 38. FLUID MEDIAThursday, May 30, 13
  • 39. FLUID MEDIAHTML5’s native <audio> and <video> elementsallow for multiple file extensions per file—including a fallback for Flash media.Thursday, May 30, 13
  • 40. Flexible Grids Fluid Media Media QueriesThursday, May 30, 13
  • 41. MEDIA QUERIESCSS Media queries allow for page styles to changebased on a media type and scope limitationThursday, May 30, 13
  • 42. MEDIA QUERIESMedia queries can detect things like screen width,height, pixel-ratio, and even 3D capability.Thursday, May 30, 13
  • 43. BREAKPOINTSFirst thing’s first...Thursday, May 30, 13
  • 44. THERE ARE NOSTANDARDBREAKPOINTSThursday, May 30, 13
  • 45. BREAKPOINTSCreating a set of breakpoints targeted at pre-existingdevices (iPhone, iPad, etc) could impact yoursite’s ability to be future friendly.Thursday, May 30, 13
  • 46. Thursday, May 30, 13
  • 47. BREAKPOINTSBreakpoints happen when the design breaks.Thursday, May 30, 13
  • 48. “When shit breaks,that’s a breakpoint.”Morgan FreemanThursday, May 30, 13
  • 49. WHO’S USING RWD?Thursday, May 30, 13
  • 50. The Boston Globehttp://bostonglobe.comThursday, May 30, 13
  • 51. The Great Discontenthttp://thegreatdiscontent.comThursday, May 30, 13
  • 52. HXD Conferencehttp://hxdconf.comThursday, May 30, 13
  • 53. IS IT WORTH IT?($$$)Thursday, May 30, 13
  • 54. MAINTENANCE- Content is centralized and occurs only once- No need for multiple domains- Save time, energy and resourcesThursday, May 30, 13
  • 55. USABILITY- Organized content and efficient navigation- Improved readability through scaling fonts- Faster loading timesThursday, May 30, 13
  • 56. CONSISTENCY- Consistent URL structure and improved SEOThursday, May 30, 13
  • 57. THE FUTUREThursday, May 30, 13
  • 58. “Projections show that the total number of peopleusing the web on mobile devices is set to surpassdesktops by 2015.”– IDC, September 2011Thursday, May 30, 13
  • 59. THE FUTUREOf the 7 billion people on the planet,5.8 billion are mobile phone users.Source: Morgan StanleyThursday, May 30, 13
  • 60. THE FUTURE1.2 billion people, or 17% of the global population,are mobile web users. The average amount of timesurfing daily is 40 minutes.Source: Morgan StanleyThursday, May 30, 13
  • 61. “We do responsive web design, but we don’t do itfor the sake of being trendy. We do it because webelieve it’s the way websites should be made.This is an opportunity for us to finally embrace thedynamic medium we build for—the web isnot fixed width.”Ben Callahan, SparkboxThursday, May 30, 13
  • 62. THE FIRST WEBSITEThursday, May 30, 13
  • 63. CHOOSING RESPONSIVE(OR NOT)Thursday, May 30, 13
  • 64. NOT EVERY PROJECTNEEDS TO BERESPONSIVEThursday, May 30, 13
  • 65. The DNA of our industry is to create thebest experience for our users, regardlessof the methodology or final viewport.Thursday, May 30, 13
  • 66. BACK TO DAVERemember me?Thursday, May 30, 13
  • 67. At the time of this presentation, access to phone featureslike the camera or contact list are not available.Even if they were, it’s not safe to assumethat everyone has the same technology.Thursday, May 30, 13
  • 68. RUNKEEPER- Accesses a device’s GPS- Access a device’s music- Internal timing mechanism with alertsThursday, May 30, 13
  • 69. RWD is amazing because it allows you to craftexperiences for multiple viewports using one tool.Thursday, May 30, 13
  • 70. Thursday, May 30, 13
  • 71. LET’S GET FLEXY- Processes are going to change- “Buy In” from Team and Stakeholders- Takes more time (in the short term)- Costs more money (in the short term)Thursday, May 30, 13
  • 72. CHANGE IN PROCESSCollaboration and content strategy arethe kings that rule the RWD Kingdom.Thursday, May 30, 13
  • 73. Rapid prototyping will turn yourclients/stakeholders into collaborators.Leads to more trust through openess, honesty anddemonstrating what won’t work and why.CHANGE IN PROCESSThursday, May 30, 13
  • 74. Real content should be introduced beforeany design or development happens.[ Pause for laughter ]CHANGE IN PROCESSThursday, May 30, 13
  • 75. Real content should be introduced beforeany design or development happens.[ Pause for laughter ]Ok, we realize that can be hard to ask for.CHANGE IN PROCESSThursday, May 30, 13
  • 76. Pixel-perfection—the act of getting a website to lookexactly the same in every browser—becomes impractical.CHANGE IN PROCESSThursday, May 30, 13
  • 77. “My guns sticks with designing for 800x600, no matterwhat’s the resolution of the user.”Thursday, May 30, 13
  • 78. “I still use 800x600 on a 19 inchscreen...and I always will.”Thursday, May 30, 13
  • 79. “If you use 800x600 you are an idiot. You are notwelcome on my site, I do not want yer business. :-)”Thursday, May 30, 13
  • 80. CHANGE IN PROCESSA new process calls for new deliverables:- coded prototypes go live sooner- comps become style tiles or element collages- code becomes a stage one deliverable.Thursday, May 30, 13
  • 81. BUY INA responsive process often requires a lot of directcollaboration between departments.Companies with large amounts of red tapemay not be organizationally prepared.Thursday, May 30, 13
  • 82. BUY INMore importantly, the responsive process requirescollaboration between team members.These team members need to be comfortable withworking in close proximity to one another.Thursday, May 30, 13
  • 83. Thursday, May 30, 13
  • 84. Thursday, May 30, 13
  • 85. RWD TAKES MORE TIMEThis is true in the short term.The extended timeline is primarily due to team members(and clients, as team members) becoming acquainted withthe new processes and deliverables.Thursday, May 30, 13
  • 86. RWD TAKES MORE TIMEBecause of the amount of collaboration needed, teammembers would need to be on from the beginning.Thursday, May 30, 13
  • 87. RWD COSTS MOREAside from the additional time, RWD will cost more moneybecause the deliverables are different. It has more valuethan a traditional web process.This additional cost is actually a volume discount.Thursday, May 30, 13
  • 88. DAVE!Insurance $100 $150Maintenance $200 $300Gas $200 $250Sedan SUVThursday, May 30, 13
  • 89. DAVE!Insurance $200 $150Maintenance $400 $300Gas $400 $2502 Sedans SUVThursday, May 30, 13
  • 90. You don’t build a website for tomorrow, youbuild a website for 5 years from today.Thursday, May 30, 13
  • 91. THE NEW(ISH) PROCESSDiscover » Design + Develop » DeployThursday, May 30, 13
  • 92. Discover » Design + Develop » DeployThursday, May 30, 13
  • 93. KICK OFF MEETING- Identify and interview key stakeholders- Research and outline user goals and gather analytics- Set up and define objectives.Thursday, May 30, 13
  • 94. THE “SWOOP AND POOP”Thursday, May 30, 13
  • 95. PREVENTING“SWOOP AND POOP”- Involve stakeholders from the start- Get sign-off at major milestones- Designate a single point of contactThursday, May 30, 13
  • 96. FORGET “THE BIG REVEAL”© AMC Network Entertainment LLCThursday, May 30, 13
  • 97. PERSONAS- Created using data collected from user interviews- Keeps focus on the most important features to users- Provide guidance on design/development decisionsThursday, May 30, 13
  • 98. If your business goals are vague,your final product will be, too.Thursday, May 30, 13
  • 99. Discover » Design + Develop » DeployThursday, May 30, 13
  • 100. “Design in the absence of contentis not design – it’s decoration.”Jeffrey Zeldman@zeldmanThursday, May 30, 13
  • 101. CONTENT FIRSTSomewhere along the line, contentbecame an afterthought.In going content-first, you prioritize whatusers came for in the first place.Thursday, May 30, 13
  • 102. Credit: Noise to Noise Ratio - http://tinyurl.com/qdwuyfbThursday, May 30, 13
  • 103. CONTENT FIRSTSomewhere along the line, contentbecame an afterthought.With content-first, you prioritize whatusers came for in the first place.Thursday, May 30, 13
  • 104. “Mobile users want to see our menu,hours and delivery number.Desktop users definitely want this 1 MBPNG of someone smiling at a salad.”Mat Marquis@wiltoThursday, May 30, 13
  • 105. CONTENT AUDIT- Informs timeline, scope and budget requirements- Identifies re-occurring problems and future ones- Acts as a point of reference when disagreement arisesThursday, May 30, 13
  • 106. StakeholdersRankings 1-3PRIORITY GUIDEThursday, May 30, 13
  • 107. Use research findings to determinethe lowest common denominatorfor device usage amongst yourtarget audience.Then work up from there.Thursday, May 30, 13
  • 108. Flickr: open.michiganWORKING TOGETHER = GETTING SH*T DONEPRIORITIZE IN SINGLE-FILEThursday, May 30, 13
  • 109. If the content isn’t necessary on mobile,it probably* isn’t necessary at all.* But like we said, be flexible.Thursday, May 30, 13
  • 110. Content Strategy for MobileKaren McGranehttp://tinyurl.com/kmcgraneThursday, May 30, 13
  • 111. UI SKETCHING- For getting thoughts out quickly- Involve everybody in the conversation- Have content priority guide and personas handyThursday, May 30, 13
  • 112. Thursday, May 30, 13
  • 113. Thursday, May 30, 13
  • 114. Thursday, May 30, 13
  • 115. WORKING TOGETHER = GETTING SH*T DONEITS AN INCUBATOR, NOT AN ART STUDIOThursday, May 30, 13
  • 116. MAKE IT FUN!Thursday, May 30, 13
  • 117. MAKE IT FUN!Mental Notes cardsStephen P. AndersonThursday, May 30, 13
  • 118. MAKE IT FUN!Mental Notes cardsStephen P. AndersonPlay music. Becausesilence is awkward.Thursday, May 30, 13
  • 119. Thursday, May 30, 13
  • 120. MAKE MISTAKES EARLYThursday, May 30, 13
  • 121. MAKE MISTAKES EARLYMAKE MISTAKES OFTENThursday, May 30, 13
  • 122. RAPID PROTOTYPINGA prototype is a minimally-styled HTML/CSS pageThursday, May 30, 13
  • 123. RAPID PROTOTYPINGA prototype is a minimally-styled HTML/CSS pageGreyscale. Placeholder images. Boxy.Thursday, May 30, 13
  • 124. Thursday, May 30, 13
  • 125. Thursday, May 30, 13
  • 126. Designers and developersshould work side-by-side.Thursday, May 30, 13
  • 127. WORKING TOGETHER = HARMONYThursday, May 30, 13
  • 128. WHY PROTOTYPE?- Immediately useable and allows for ‘on the spot’ testing- Gives the client an early preview (hint: they like that).- Quick and easy to produce (with more tools on horizon!)Thursday, May 30, 13
  • 129. “You can’t mock up performance in Photoshop.”Brad Frost@brad_frostThursday, May 30, 13
  • 130. PROTOTYPING (ZURB FOUNDATION)Thursday, May 30, 13
  • 131. PROTOTYPING (ZURB FOUNDATION)Thursday, May 30, 13
  • 132. Adobe Edge ReflowThursday, May 30, 13
  • 133. GridsetThursday, May 30, 13
  • 134. JetstrapThursday, May 30, 13
  • 135. AND MANY MORE...http://lessframework.comhttp://www.getskeleton.comhttp://www.protytype.comhttp://stuffandnonsense.co.uk/projects320andupLess Framework:Skeleton:Proty:320 & Up:Thursday, May 30, 13
  • 136. STYLINGIs Photoshop dead?=Thursday, May 30, 13
  • 137. STYLINGNO.+ =Thursday, May 30, 13
  • 138. High-fidelity sketchpadThursday, May 30, 13
  • 139. STYLINGDesign will be less about dictating exact layoutsand more about coming up with flexible elementsand styles that convey a site’s tone and feel.Thursday, May 30, 13
  • 140. Style Tileshttp://styletil.esThursday, May 30, 13
  • 141. Style Tileshttp://styletil.esThursday, May 30, 13
  • 142. Element CollagesDan Mallhttp://tinyurl.com/danmall3Thursday, May 30, 13
  • 143. Style PrototypesThursday, May 30, 13
  • 144. Discover » Design + Develop » DeployThursday, May 30, 13
  • 145. TEST. TEST. TEST.Thursday, May 30, 13
  • 146. TEST. TEST. TEST.Thursday, May 30, 13
  • 147. TEST. TEST. TEST.Thursday, May 30, 13
  • 148. DEVICE LABThursday, May 30, 13
  • 149. Responsinatorhttp://www.responsinator.comThursday, May 30, 13
  • 150. Responsivatorhttp://dfcb.github.io/Responsivator/Thursday, May 30, 13
  • 151. Mixture.iohttp://mixture.ioThursday, May 30, 13
  • 152. TEST. REFINE... AND TEST AGAIN.Thursday, May 30, 13
  • 153. “Discuss until it works.”Viljami Salminen@viljamisThursday, May 30, 13
  • 154. TIPS AND TRICKSThursday, May 30, 13
  • 155. There are no RWD experts; there are no web experts.We live and work in a field wherethere are no “paved roads”.Everyone is right and wrong.TIP #1Thursday, May 30, 13
  • 156. Everyone needs to be a teacher.TIP #2Thursday, May 30, 13
  • 157. "If I had asked peoplewhat they wanted,they would have saidfaster horses."Thursday, May 30, 13
  • 158. TIP #3Don’t forget about the users; this is about them.Thursday, May 30, 13
  • 159. TIP #4Get real devices.Thursday, May 30, 13
  • 160. Thursday, May 30, 13
  • 161. TIP #5Don’t be afraid to go analog just becausewe’re getting more digital.Thursday, May 30, 13
  • 162. THE STRING METHODSometimes, the most helpful way to explain thingsdigitally is to explain objects people are familiar with.Thursday, May 30, 13
  • 163. Thursday, May 30, 13
  • 164. Thursday, May 30, 13
  • 165. Thursday, May 30, 13
  • 166. TIP #6Don’t be afraid of code; it just wants to be friends.Thursday, May 30, 13
  • 167. Thursday, May 30, 13
  • 168. WE WANT TO HELPhttp://lynda.comhttp://treehouse.comhttp://codeacademy.comThursday, May 30, 13
  • 169. Thursday, May 30, 13
  • 170. GIRL DEVELOP IThttp://girldevelopit.comYay!Thursday, May 30, 13
  • 171. SUPER SECRET TIP!!1!We saved the best for last...Thursday, May 30, 13
  • 172. Nick Snyder@_FasterHorsesDON’T FORGET THE BEERAnnette Arabasz@annettishThursday, May 30, 13