Responsive Design

Another term that’s frequently mentioned and less frequently discusses, it’s easy to get confused on where the differences between mobile-first design and responsive design lie.

While mobile-first design is more of the philosophy and mental shift to prioritizing the mobile version a website, responsive design is the actual process of defining how your website changes across differently sized screens, or transitions when a user resizes a web browser.

Understanding the how and why of responsive design can feel complicated and technical, but the fundamentals are actually straight-forward. Taking the time to better understand responsive design will help you gain a better understanding of what your site needs, and help you make smarter decisions about your website as a whole.

What is a responsive website?

In short, to be “responsive” means that the layout of a website should automatically adjust based on the size of the screen displaying it. This does not mean simply shrinking or enlarging the contents of your website at scale — like you would if you zoomed a picture in or out.

Rather, it means ensuring that the website remains readable and usable as the screen adapts. This can involve shrinking and scaling certain assets (like images), changing margins or text sizes at certain points, and even changing the orientation or layout of content on the page.

Similar to how water expands or contracts to fit the vessel it’s poured into, the browser is the vessel in which your website needs to flow and fill at any size. Without responsive design websites could only display at a single fixed size, breaking on any smaller view. This used to be the reality of the internet, pre-mobile devices, where websites were static. Now however, responsive design is a standard and must for any modern site.

An extension of mobile-design

While mobile-friendly design highlights the importance of the mobile version of a website, responsive design is about the mechanics by which a desktop site transforms into a mobile version, and back again. Taking the AccelerateUX website as an example, you can load and view the site on both mobile and computer browsers—and we’ve used our adaptive design philosophy to create an experience that is effective in both situations.

If you look at this website on a computer and resize the browser window—play around with making it smaller and larger—you should see the contents and layout on the page dynamically shifting and resizing to appropriately fill the space.

This is the outcome of responsive design in practice.

Breakpoints

One of the more technical aspects of responsive design, breakpoints are specific points at which more significant layout changes occur. One the development side, when implemented, breakpoints allow you to update whole sets of website styles to be applied under certain conditions—enabling you to hide/show elements at a certain window size, or change paddings and font-sizes for different sets of devices.

Breakpoints are typically used to enact these changes at designated points that represents the size at which a desktop experience changes to a tablet experience, and then into a mobile experience.

The following are the major breakpoints used within the AccelerateUX site. While additional breakpoints may be needed to created a truly seamless responsive experience, these values represent the minimum and maximum values we use to align our designs to device types.

What happens when you ignore responsive design

If you ignore your website’s responsiveness—or rely on website builders without testing it further, your site may experience the following issues:

• Text and images that overlap, get cut-off, or extend off the screen.
• Navigation menus that collapse into an unusable state and impede a user’s ability to see or select the menu items.
• Form inputs and buttons that are too small to interact with.
• Content that requires horizontal scrolling to read or view—one of the fastest ways to lose visitors on your site.
• Inconsistent experiences that make your business feel unpolished and unprofessional, and damage trust and credibility of your brand.

Common misconceptions about responsive design

1. Assuming a web-builder automatically optimizes across devices.

Even if you define how your website should look in the primary tablet and mobile preview your web-builder may do some weird things in the views between these major breakpoints.

Make sure that your checking your website in a mobile browser and resizing the browser window to see how your website responds. Pay attention and make note of any points that the experience seems to break at.

2. Checking your website on one phone, and assuming it will work on every phone.

Almost every smartphone model, and even versions of models, have a slightly different screen size. While newer devices have higher resolutions and larger screen sizes there are a significant number of older, and smaller, devices in use. Even if your website looks great on your own phone you want to try to view it on a few different devices.

You can ask friends or family members with different phones to pull your website up—or use tools that are built into your computer browser to “emulate” your website on different sizes of devices.

[add link to a blog post providing instructions on how to do this?? or paywalled member step-by-step guide??]

3. Forgetting to check new content across devices

Don’t forget, just because your site is responsive now, doesn’t mean that any new content or changes you make will automatically stay responsive.

Every time you make an update or add new content to your website don’t forget to check your tablet and mobile views to make sure everything still renders correctly.

4. Thinking a responsive framework guarantees a responsive output

Even if you’re using a responsive template to build a site you have to consciously and proactively ensure that your site stays responsive as you build it.

Testing your responsive website

Checking your website across devices is important, but it doesn't need to be overwhelming or scary.

Test on multiple decices

Checking on a single phone or tablet doesn’t mean there’s not problems on other screen sizes. Try to look at your website on various physical devices, as much as you’re able to do so—or use browser tools and device emulators as an alternative.

Test what happens when you resize your browser

While big layout shifts happen at designated breakpoints your website should not be static between them. On a computer, load your website and resize your browser window to see what happens.

Make sure your website is fluidly resizing and adapting in ways that support the experience, are visually cohesive, and protect the usability of its elements.

Test every page

When testing, make sure you’re going further than the homepage or key landing pages.

Try to pull up every page, or an instance of every page type—for instance, you don’t need to test every blog post, but your should be testing at least one of each blog post template your website uses—and resize it to spot any issues. Interior pages, contact forms, and blog posts can be easily overlooked.

How to proceed

Responsive websites—that just work, no matter the device—are not a nice to have, they’re a must to have. The first step is evaluating where your site is today and what you need to do to establish a responsive baseline. Eventually the goal is not just if your site is responsive, but how well it responds and adapts to the specific needs and expectations posed by different devices.

Once you establish a responsive website try to make small adjustments to your process of planning, implementing, and reviewing site changes. Make casual testing a part of your maintenance plan to catch problems on your site before your visitors do.