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