Designing for Breakpoints

By Stephen Hay from

A note from the editors: We’re pleased to present an excerpt from Chapter 7 of Responsive Design Workflow, Stephen Hay’s new book, available now from New Riders.

Figure 7.6
Figure 7.6: Most websites need very few major breakpoints.

Jeremy Keith notes that what happens between the breakpoints is just as important as the breakpoints themselves—perhaps even more so. While I agree with this, we do have to start somewhere. In a way, this part of the process reminds me of storyboarding, or creating animation keyframes, with the in-between frames being developed later. We’re going to do that here.

Major breakpoints are conditions that, when met, trigger major changes in your design. A major breakpoint might be, for example, where your entire layout must change from two columns to four.

Let’s say you’ve chosen three basic design directions from your thumbnails. Think about what your major breakpoints will look like (Figure 7.6). And here’s the key: try to come up with as few major breakpoints as possible. That might sound crazy, since we’re talking about responsive design. After all, we have media queries, so let’s use about 12 of them, right? No! If a linear layout works for every screen and is appropriate for your particular concept, then there’s no need for different layouts. In that case, simply describe what will happen when the screen gets larger. Will everything generally stay the same, with changes only to font size, line height and margins? If so, sketch those. For these variations, make thumbnails first, explore some options, and then move on to larger, more detailed sketches. Use your breakpoint graph as a guide at first and make sketches according to the breakpoints you’ve estimated on your graph.

When thinking about major breakpoints, remember to think about device classes. If you’re thinking about smartphones, tablets, laptops/desktops, TVs, and game consoles, for example, you’re heading in the right direction. If you’re thinking in terms of brand names and specific operating systems, you’re on the wrong track. The idea is to think in terms of general device classifications and, sometimes, device capabilities. Capabilities are more important when designing web applications, since you should be thinking about what screens will look like both with and without any particular capability.

Rough sketches of major breakpoints can help you determine:

  • Whether or not more major breakpoints are needed
  • Which design choice will be the most labor intensive; you might opt for a design that will better fit within time and budget constraints
  • Whether or not a particular device class has been neglected or needs further consideration
  • What technologies you’ll need to develop the design responsively

Rough sketches are more detailed than thumbnails, but they shouldn’t take a long time to create. In a short period, you should have a sketch of each major breakpoint for each of your chosen designs. This should be enough to decide on one of the designs.

[Full article]

Stop Building Websites and Start Building Smart Sites

Smart Site

Illustration: The Smart Site: A new medium of websiteBy Chuck Longanecker on Betterment: A blog for people who care about design:

The mission of digital-telepathy is to make great design accessible to anyone by creating new standards that improve how people interact with and create digital design. From websites to mobile apps, TVs and beyond, we’re committed to making experiences that define the future of the screen interface. Though there is plenty of ground to cover to accomplish our mission, the higher we push the standards for publishers and designers, the better the experience becomes for all web users.

We’re starting our mission with a focus on websites. Still based on print paradigms with archaic, link-driven tables of contents and page structures, today’s websites don’t capitalize on the native opportunities of the digital medium they live in. They are disjointed and kludgy, hampering the user’s ability to accomplish his or her goals. And yet, we don’t need to look any further than our handheld devices to see that user experiences don’t have to be this way. Fluid and guided, mobile apps are intuitive, providing visceral feedback that satisfies and keeps us coming back. They are the antithesis of most web experiences.

So what’s preventing the website from becoming as enjoyable and effective as mobile apps? Thanks to app-like interactions made possible by JavaScript and CSS3, faster connection speeds, and responsive design, there is no technical reason that websites can’t evolve. The only remaining barrier to a great experience is exceptional web design. Why? Because it’s historically been incredibly expensive. But if we think in terms of the experience and forget what we know about traditional web design, we can free ourselves of the expensive corporate site design time sink, and find a way to bring intuitive design to website owners everywhere.

As designers of the Web, we need to rally around a common cause of democratizing web-based experiences as seamless, story-driven, goal-based, intuitive and viscerally satisfying as their mobile brethren.

[Full article]

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

Responsive Web Design Summit - Day 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

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

Responsive Web Design Summit - Day 2

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

Mobile Development on a Shoestring Connection by Jenifer Hanen

  • How do we design and develop for varying data and bandwidth scenarios?
  • Is your app or mobile site a Data Sipper or a Data Chugger?
  • How to make it flexible for either
  • Let the customer choose whether to data sip or chug
  • No cat images, one dog

The New Responsive Web Design Workflow by Trent Walton

  • Moving from separate teams of planning/designing/developing to a much more collaborative approach
  • Embracing the reality of the multi-device web
  • Design systems, not pages
  • Cat images

Responsive Web Design is Hard/Easy – Be Afraid/Don’t Worry! by Dan Mall

  • RWD takes a new design approach: both more complicated and less
  • Moving from “Here’s what your site will look like” to “Here’s what your site will feel like” – use mood and/or element collages
  • Collaborating with clients as well as more collaborative in-house teams
  • Cat images

Content Strategy for the Future by Sara Wachter-Boettcher

  • “Build on what we do know: content.” – Chris Armstrong, The Infinite Grid
  • Break content into chunks.
  • 3 challenges for organizations: mass-production mentality; compartmentalized teams; obsession with control
  • 3 ways to work differently: make mobile an entry point, not the end point; don’t sell solutions — collaborate; do less — facilitate more
  • “Use mobile as a wedge to create a better experience for ALL users.” – Karen McGrane
  • No cats

Universal Typography by Tim Brown

  • Short history of print and web typography
  • “People can be affected by good typography without being actively aware of it.” — Thomas Phinney
  • Current state of web typography is very similar to traditional print; just as much attention to quality needed
  • No cats

RWD and Client Management by Matt Griffin

  •  Initial client contact: listen, interpret, give feedback, gauge response, refine
  • Deliverables: user stories, written specifications, style prototypes, HTML & CSS wireframes, low-fidelity static mock-ups, HTML & CSS interactive mock-ups, HTML & CSS styleguides
  • The Mythical Mobile User: we can’t predict content needs based on devices; RWD focuses on optimizing content presentation.
  • Cat on unicorn with rainbow
  • Also Storm Troopers

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

Responsive Web Design Summit - Day 1

Responsive Web Design Summit - Day 1I’m attending the Environments for Humans online Responsive Web Design Summit 2013 – Day 1 of 3.

Great, informative talks! Today is mostly for developers, but I’m getting a lot out of it. A recurring point is that you should design/develop completely differently for different devices, including: images optimized for different screen sizes/resolutions, testing on multiple devices, clean code, and involving clients in the effort to keep image sizes and thus page load times down. I’m summarizing the talks rather than going into detail to avoid infringing on the presenters’ copyrights.

Measuring Web Performance, by Dave Olsen, Creator of Mobile in Higher Ed

  • Tools for measuring web performance
  • Setting up a device lab
  • Responsive design and serverside solutions
  • Included pictures of cats

CSS & Mobile Performance, by Estelle Weyl, Author of HTML5 and CSS3 in the Real World

  • Images vs. fonts vs. iconfonts
  • Media queries
  • Included pictures of cats

Maximizing Performance, with SPDY & SSL, by Billy Hoffman, Founder and CEO of Zoompf. Not my area of expertise, but useful.

  • Setting the Stage for SPDY
  • Optimizing SPDY
  • Tools to help
  • Did not include pictures of cats

Image Optimization Methodology, by Tobias Baldauf, Freelance Web Performance Consultant

  • Image numbers per page have remained almost static, but image sizes have risen dramatically over the past year, probably due to an increase in high-resolution displays.
  • Which formats are best for which kinds of images? PNG-8, PNG-24, WebP, SVG, JPG, GIF, iconfonts
  • Optimizing different formats
  • Included pictures of cats

Optimizing Media Queries, by Kimberly Blessing, Director at Think Brownstone

  • Does the way we write media queries impact page performance? Which technique yields the best performance?
  • Conclusion: Media query syntax and code structure have an impact on performance, but writing optimized CSS overall is best. Focus on mobile users as their page load times are significantly slower.
  • Did not include pictures of cats