The Observation Deck

Designer Advice for Responsive Web Design

Responsive-Design

Responsive Design is an approach to web development that allows elements of a website to resize dynamically, responding to the size of the user’s screen or browser window. This makes it possible to create one website that still displays optimally across the wide variety of devices available today.

Although the end product is just one website, we as designers need to consider how some individual elements will display at a few key resolutions in order to optimize the user experience regardless of the device.

Tips for designing for multiple resolutions
With hundreds of products on the market ranging from laptops, tablets, phones, netbooks, desktop monitors, etc,  it’s fair to say that there doesn’t exist a finite list of resolutions or breakpoints that we only need to consider when designing. Rather than trying to force breakpoints, define ones that work in harmony with your design.

  • Start designing for the resolution that you identify as the primary display for most of your users. For me, that’s usually a desktop/laptop view.
  • Do keep in mind that your screen size isn’t the only one, even for the device type that you’re working on. Get in the habit of thinking about the borders of your project as being fluid. Try to use uncropped photography and tileable background textures.
  • Create a design for the extreme opposite screen size that your users will potentially use. For me, that means adapting my desktop design to a mobile design.
  • Don’t worry about creating a unique template for every breakpoint. But be sure to define the two extremes (biggest and smallest screen sizes).
  • Work with your development team to define and refine the resolutions in between. I find that it’s easiest to look at the coded dev site, identify elements that need adjusting, and provide the developers with fast mockups or notes in order to communicate my changes.

Some rules of thumb for common elements:
Nav bar

  • When designing nav bars for mobile screens, consider the hierarchy carefully. Not every element or link needs to minimized and tucked in a dropdown menu. Here Airbnb’s search bar is the most important element of their header so they’ve kept it as a separate element.

airbnb-menu

  • Similarly, not every element needs to be included in the mobile nav. Phone numbers, taglines, newsletter signup forms are examples of elements that could be included elsewhere or excluded altogether.
Oasis Menu

Oasis omits their phone number on mobile and instead includes a Contact link in the main menu dropdown.

  • Many links are best consolidated into a simple dropdown menu.
  • Fewer links can run horizontally across the navbar as long as they’re still large enough to be individually clickable. The rule of thumb for a button or clickable item is a minimum area of 44x44px.
FoodSense

Foodsense does a fantastic job of combining several techniques in order deliver key content, while also keeping the design clean. From desktop to mobile, the design reduces to a single column and omits secondary content in order to keep all navigation links visible.

Content and columns

  • Responsive design gives us the freedom to consider not only smaller screens but also much larger screens as well. When designing for desktop screens, keep in mind that it doesn’t mean stretching all of your content to fill the entire browser window. Keep classic design principles, of typography and white space, in mind. The typographical rule of thumb is to aim for 50-75 characters per line.
  • So for larger screens consider adding columns instead of simply increasing column widths.
Smashing

Smashing has a variety of secondary content (navigation, secondary links, and ads) that they organize neatly into columns to utilize the screen space but keep the body content to a manageable width.

Boston Globe

Rather than adding additional columns, the Boston Globe chooses to focus their content to a reasonable width so that uses aren’t bombarded with too many articles at one time.

  • Mobile screens basically force everything into a single column. Tabbed or accordions can help to consolidate similar content and avoid excessive scrolling.
Oasis

Oasis groups lists of key information about a rental property into “Details”, “Description”, and “Amenities” tabs.

Images and banners

  • Use images to take advantage of responsive design for large screens. Photos, banners, and backgrounds don’t require the focus that text does, so it’s much safer to expand these to the edges of your browser window, giving your designs the expansive, enveloping experience that has become popular.
  • For mobile designs, scale your images down before scaling text. Large images can be much more overwhelming on a small screen; dividing up your content and maybe even interrupting your message. Meanwhile body text sizes for both desktop and mobile screens has little variation (1-2pts) since small text can be a strain to read, regardless of screen size.

No comments yet.

Leave a Reply

Back to top