This is the first in a series of articles related to responsive web design.

Web design today is much different than in the past. Before around 2008, when most web browsing was done by computer, web sites were typically designed as a page in a program like Photoshop and sliced up into HTML code and images that a browser could understand. As the iPhone and other handheld browsers started becoming more popular, the need arose to design pages that would collapse on smaller screens, allowing the user to see page elements, text and images in a readable size while browsing the page in a normal fashion on a much smaller, and usually differently oriented screen. Today, we have hundreds of different devices and corresponding viewport sizes for which to design, and a large part of the web design and development process involves responsive web design methodologies that make your site look great on any device.

How does this affect the design and approval process?

Before responsive design was the norm, we were able to design a page and show the client a pixel-perfect representation of what the site will look like. Today, since many elements adjust and collapse on the page at different breakpoints, it's a more difficult process to visualize what the site may look like on different devices until it's actually built.

What is a breakpoint?

Breakpoints are a responsive design concept that works within the code of your web site to define at what screen width the various elements on a page change position, size, color or any other property. For every responsive web site, a set of breakpoints is defined in code and under these breakpoints, properties are defined for the various elements that need to adjust as the viewport size changes. Most web sites have a similar set of breakpoints and some elements affected by the breakpoints are common across most sites, for example, the navigation bar at the top of the site usually collapses at a similar breakpoint (screen width) on most sites.

How does this affect my design drafts?

When you hire us to build your site, one of the first steps (after discovery, of course) is approval of the first design drafts. We typically provide up to three initial drafts, taking into consideration what we've learned about your business, the New Client Worksheet, and other factors. All our initial drafts are designed with a 1920 pixel wide desktop monitor in mind. There is a case for mobile first design, meaning we would design your site with a mobile phone browser in mind first and then work the design up to desktop size, but we find that a classic desktop-first approach works best for most of our clients. We design all our sites to look good on screens ranging from the smallest mobile phone at just a few hundred pixels wide, up to high resolution iMac displays of 4096 x 2304 pixels.

Take a look at the top two screencaps in the image. The top is a typical 1920 pixel wide desktop display (HD resolution). As you see, the navigation bar and some of the lower page elements are fixed within a container that is actually around 1280 pixels wide. What this means is that no matter how wide the screen gets, the navigation bar and regular content elements will never expand outside the maximum 1280 pixel width. Many sites are built with these constraints on important elements to ensure the site is easily navigable and accessible by keeping related elements close enough and at a consistent width. Additionally, these constraints keep text blocks from growing too wide and becoming hard to consume.

The third screencap is an iPad turned horizontal, creating a screen width of 1024 pixels. As you can see, the screen is now smaller than the 1280 pixel maximum width of our main container, causing the container to now shrink to fit the width of the screen. Now all elements will consume the same amount of screen width, all the way down the page. As you can see, the vertical iPad and iPhone further shrink the container until the navigation bar finally collapses into a mobile-friendly dropdown menu on the phone.

Where do we go from here?

This is nowhere near an exhaustive study on the use of breakpoints in responsive design. If you'd like more information on responsive web design and development, we'd love to talk with you. There are many ways to start a conversation, including e-mail, text, Facebook and Instagram, and we hope you'll get in touch soon.