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

I’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