Environments for Humans online Responsive Web Design Summit 2013 – Day 3 of 3

Responsive Web Design Summit - Day 3I’m attending the Environments for Humans online Responsive Web Design Summit 2013 – Day 3 of 3. I’m summarizing the talks rather than going into detail to avoid infringing on the presenters’ copyrights.

Today’s presentations focus on code. Extremely informative!

Fractal CSS: There Is No Breakpoint, by Ben Callahan

  • Major Approaches
    • Single CSS File
    • Multiple CSS Files (global.css, local.css)
    • Breakpoint Based Partials (base.css, no-mq.css)
    • Module Based Partials (mq.css, no-mq.css or mq.scss, no-mq.scss)
  • Major breakpoints with minor “tweakpoints” inbetween

Responsive Web Design with SASS+Compass, by Sam Richards

  • “The Web is an Inherently Unstable Medium” — Ethan Marcotte
  • Media Queries
    • “Start with the small screen first, then expand until it looks like shit. TIME FOR A BREAKPOINT!” — Stephen Hay
  • Fluid Grids using Singularity
    • Symmetric Grids
    • Asymmetric Grids
    • Semantic Grids (HTML, SASS)
    • Responsive Grid Context (SASS)
    • Nested Grid
  • Fluid Media using Toolkit
    • Basic Fluid Media
    • Intrinsic Ratios (SASS, CSS)

Responsive Layouts beyond the Sidebar, by Jen Simmons

  • Previous workflow
    • PSDs as final handoff to client without developer involvement
    • 960 grid – 1 or 2 sidebars – fixed/fluid/responsive
  • Design content structure
    • Blocks vs. chunks
  • Design source order
    • Turn off design styles to make sure your hierarchy is correct and site is accessible
  • Design narrowest layout, then wider and wider layouts
  • Recommendations
    • Learn HTML, CSS, layout CSS
    • Let a framework do the heavy lifting

Navigation in Responsive Web Design by Erick Arbé

  • RWD can be difficult
    • Explaining RWD to clients; the lack of a static design phase; navigation; images; tables; converting old fixed-width sites; what to serve users of old versions of IE; testing time and cost
  • Content strategy
    • Retro-fitting an existing website to become responsive can be difficult, especially one with a large menu
    • Smaller sitemap = easier to build responsive nav
  • Building your responsive navigation
    • Hover vs. Touch; top level menu items; two sets of navigation?; a simple JS function; some easy CSS to implement; position: fixed; mobile first!; using your mobile nav as your desktop nav
  • Navigation patterns and examples
    • Avoid position: fixed; build mobile first; can use mobile nav patterns on desktop
    • Add padding; grid/percentage based; multi-toggle/accordion; footer nav; select nav; off-canvas/page slide; no sub-nav

Rebuilding a university homepage to be “responsive”. Twice. In less than a year. by Erik Runyon

  • Why RWD Matters
  • Our Path to Responsive
  • 2011 Redesign
  • 2012 Redesign
    • 1. Global
      2. Screen
      3. @media queries as needed
      4. Hi-res/retina specific
      5. Print (yes, print)
    • Hiding content is NOT a mobile strategy
  • Responsible Responsive
    • Modem speeds moving to broadband speeds
    • But outside of 3G and Edge areas, speeds are still very slow
    • Web page sizes are getting bigger
    • Conclusion: RWD is not mobile friendly e.g. because all images are downloaded, even ones that aren’t used with mobile
    • But the web is, and RWD CAN be