Responsive Design for Designers

Here are our thoughts and observations about how to approach responsive design.

• In the past, mobile designs were often achieved by detecting what kind of device was requesting the page, and then serving up a mobile-specific page that was designed and built separately from the desktop version of the site. With the growing number of mobile devices on the market (with a variety of screen sizes, resolutions, and pixel densities) responsive design is a more efficient way to guarantee a usable site on the small screen.
• ONE version of the website is built, and developers use CSS to alter how the site displays at different widths. Columns of content are re-stacked depending on viewport size.
• In creating responsive designs, it is important to stop thinking about how a site will look on any specific device, and instead think about how it will look at different pixel widths. This way we accommodate ALL devices, regardless of what new display size may be released in the future. It's not about first designing for iPhone and iPad, then Android phones, and then desktop. It's all modern devices, regardless of size, with one version of a site.
• It is sometimes better to start with the mobile design first, because this allows you to make sure that the content is displayed in the most logical order and is divided in logical places. Then as you step through the progressively larger designs, you add additional design elements.
• The design for a site shifts at "breakpoints" of certain pixel sizes. These are the points at which shifts like re-stacking of columns, or changing navigation from top-nav to a dropdown, take place. There are usually 3 or 4 major breakpoints built into a design. (Bootstrap has 4 available breakpoints.)
• Additionally, more minor adjustments might take place at other viewport widths. For example, a row of top navigation might need to come down a bit in font-size at some point to remain in the desires space, or a logo image in the header might need to have its size adjusted to create a better visual balance. The viewport widths where we make minor adjustments are "tweakpoints". Tweakpoints are generally unique to a specific design.
• When a design is delivered to Dialogs for HTML/CSS coding, the designer's intent for how the site should behave should be included with the design.