Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Re-Engineering

1,170 views

Published on

Reach the largest audience with the smallest code footprint by developing site designs that scale with the device. We take a tired, outdated design and update it for the modern, mobile web using responsive web design techniques with HTML5, CSS3, and . Discussion of the rationale for choosing responsive design, demos of implementation techniques, and highlights of tools and frameworks to aid the process. Special focus on responsive web design implementation in Visual Studio 2012 on ASP.NET MVC 4.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Responsive Re-Engineering

  1. 1. Responsive Re-Engineering Aidan Ryan Silicon Valley Code Camp 2013
  2. 2. “Best viewed with IE 5.5 at 800x600, color depth 15bpp, with a parakeet on your shoulder”
  3. 3. Defining Responsive » Opposite of “prescriptive” » Responds to » Browser capabilities » Device capabilities » User capabilities » Viewport size and orientation
  4. 4. Core Techniques » Fluid Grid » Media queries » Responsive media
  5. 5. Why? » Balance of effort and reach » Consistency » Value first » User joy
  6. 6. Why Not? » Audience » Time/effort to benefit tradeoff » Need for highly-targeted designs » Use a subset of techniques / subset of site
  7. 7. History John Allsopp – A Dao of Web Design •April 2000 Ethan Marcotte – Responsive Web Design •May 2010 Jason Grigsby – CSS Media Query for Mobile is Fool’s Gold •August 2010 Luke Wroblewski – Mobile First •October 2011 Approx. 2.9e+9 articles, galleries, samples, etc •April 2013
  8. 8. Case Study: Before
  9. 9. Case Study: Before
  10. 10. Grid Systems » Fixed » Responsive » Fluid » Fluid + Responsive
  11. 11. Framework Classification Max size Columns Notes 960gs Static 960px 12 / 16 Grid only IE7+ CSS Skeleton Responsive 960px (desktop/tablet- landscape) 768px (tablet-portrait) 420px (mobile-landscape) 300px (mobile-portrait) 16 Lightweight CSS framework IE7+ CSS responsive.gs Fluid + Responsive Any Columns stack below 768px 12 / 16 / 24 Grid only IE7+ CSS Bourbon Neat Fluid + Responsive Fluid + Responsive 12 (or custom) Grid addon to Bourbon IE9+ Sass Bootstrap Static OR Fluid OR Fluid + Responsive Static: 940px Others: Any (nestable) 16 Full client-side framework IE6+ LESS
  12. 12. Media Queries » CSS3 » All about width » Mobile first? Desktop first? » Select breakpoints » Size, move, hide, replace, or transform? <meta name="viewport" content="width=device-width" /> @media only screen and (max-width: 40em) { }
  13. 13. Viewport width=device-width Defaults
  14. 14. Credit: Viljami Salminen
  15. 15. Three… Credit: Adam Edgerton
  16. 16. Four…
  17. 17. Six…?!?!
  18. 18. The “Goldilocks” Approach Credit: Chris Armstrong
  19. 19. Responsive Media » Images » Scale, crop, swap, omit? » SVG » Video » Scale » HTML5 <video>, Flash » Download alternatives » Audio » Scale » HTML5 <audio>, Flash » Download alternatives
  20. 20. Responsive Images » Scale and Crop » Swap and Omit » SVG » Choose the right format » Encoding quality
  21. 21. Responsive Video <div id="video-container"> <video controls="controls" width="1280" height="720" title="vid" poster="x.jpg"> <source src="small.mp4" type="video/mp4" media="all and (max-width:480px)" /> <source src="file.webm" type="video/webm" /> <source src="file.mp4" /> <object …> <a href="file.mp4“><img src="x.jpg“/> Download video</a> </object> </video> </div> $('#vid-container').fitVids(); // OR CSS
  22. 22. Responsive Forms » Label alignment » Touch-friendly » Input types “To order a special dialing wand, please mash the keypad with your palm now.”
  23. 23. Typography » Respect the user agent » Display density » Metrics: font size, contrast, line height, line length, spacing, hyphenation » “A useful trick is to hold a well-printed book at a comfortable reading distance while looking at your website to compare.” – attrib » Web fonts – browser and device quirks Source: BrightLemon.com
  24. 24. Fonts – Browser Quirks and Gotchas Chrome 23 IE10 Firefox 16 Android 4.1 Selected text-shadow
  25. 25. Other Techniques » Mobile click event latency (touch events) » Keyboard hotkeys » Bundling and minification (System.Web.Optimization)
  26. 26. Case Study Workflow » Value » Content » Wireframe » Enhance, enhance, enhance
  27. 27. Case Study: Before
  28. 28. Step One: Focus on Value » Identify your user » Identify the primary reason the user is visiting » Identify the activities that will engage the user http://xkcd.com/773/
  29. 29. Case Study Step One » Users » Repeat visitors » Organic search » Active search » Reasons » Repeats: hear old and new sounds » Organic searchers: He-Man » Active searchers: hear sounds, read info » Activities » Play music » View pictures » Read copy
  30. 30. Step Two: Collect Content » Isolate your copy » Curate your copy » Isolate your media » Curate your media » Process your media
  31. 31. Case Study Step Two: Result » Copy: isolated, culled, consistently named » Image sets: sorted, culled, consistently named, full-size and scaled » Audio: sorted, culled, consistently named, with ID3 » Video: full-bitrate and downsampled
  32. 32. Step Three: “Sweet Spot” Wireframes and Typography » Index card sitemap » Paper sketches / storyboard » Move to HTML Skeleton ASAP » CSS Reset » Type ramp
  33. 33. MVC 4 Skeleton » Start with “Empty” project » Strip out Web API and other unneeded NuGet packages » Add the master layout » Style bundle (normalize.css + site.css) » HTML5shiv » Minimal layout
  34. 34. @using System.Web.Optimization <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width"> <title>Masters of the Universe</title> @Styles.Render("~/CSS/styles") <!--[if lt IE 9]> <script src="~/JavaScript/html5shiv.js"></script> <![endif]--> </head> <body> <div class="page-center"> <header> <div class="hero">@RenderSection("hero", true)</div> <h1 class="logo">Masters of the Universe</h1> </header> @RenderBody() </div> </body> </html>
  35. 35. Step Four: Enhance Layout for Mobile » Position » Type Size » Padding/Margins » Remove non-essentials
  36. 36. Before
  37. 37. After
  38. 38. At the breakpoint 
  39. 39. Step Five: Enhance Layout for Wide Desktop » Position » Type Size » Avoid content islands » Creative use of space
  40. 40. Step Six: Detailed Styling and Interactions » Textures, shadows » Touch, input types
  41. 41. Test, test, test » Testing tools » WatiN / Selenium » Device simulation » BrowserStack » Electric Mobile Studio » Mobilizer » VirtualBox » Simulators will only take you so far
  42. 42. Samples » https://github.com/ajryan/CodeCamp2013 (Code) » http://codecampresponsive.apphb.com (Live demos) » http://mastersband.apphb.com (Responsive re-design)

×