Responsive Website Design: Common Principles and Best Practices

Whether you know it or not, you have experience with responsive web design.

If you’ve ever visited a site on your desktop after discovering it on your phone, it’s likely you experienced responsivity in action.

Conversely, if you’ve ever had to pinch your phone screen to zoom in and out on your phone when browsing a website, you’ve visited a site that isn’t implementing responsive web design.

In both cases, it affected your experience with a website. And for businesses, user experience = success (or failure).

That’s why responsive web design is so important. Without it, you’ll hemorrhage visitors to your site and will be throwing engagement and revenue away. With it, you can create a seamless digital experience for your audience.

What is Responsive Web Design?

Responsive web design is the idea that websites should respond to all different types of device types, screen sizes and browsers.

That sounds great in theory, but is actually a much bigger task than it appears to be.

How many device types are out there? Desktop computers, laptops, tablets, smartphones…these are the devices we normally think about. But how about televisions or video gaming devices? What about smartwatches? How do you design for each of these?!

That doesn’t even touch on screen sizes, of which there are thousands at this point. It would be impossible to write code that accounted for every individual screen size that’s available across those device types. 

At least, it would be impossible if not for responsive web design.

If you’re on a desktop, you can see this in action on many modern websites. Just shrink your browser size, and as it shrinks, you’ll likely see changes in the layout of the page you’re on.

This is responsive web design in action. The design that worked when you were viewing it at full-screen will no longer work if you’re viewing it on a phone-sized device or smaller window.

Adaptive vs. Responsive Web Design?

For our purposes, we’re going to focus on the three major device types: mobile (phones), tablets and desktops/laptops.

Information gathered by a website can read the size of the device that you’re viewing from. Adaptive web design is such that there are “cutoff points” where the design changes to a different configuration.

Traditionally, these cutoff points were between the sizes that generally indicate desktop vs. tablet vs. mobile.

This actually works great in many cases, and adaptive design techniques are still used in modern websites. The problem, however, is that screen sizes are more varied than ever, so these cutoffs might not be as elegant as a designer would like. Enter: responsive design.

Responsive web design will scale even within a device type. Elements on a smaller phone, for example, will scale to fit appropriately, compared to a larger phone. So it’s not so much that there are a handful of cutoff points, but that the design scales linearly and adjusts to ANY format or screen size.

So how do designers do this? There are several common techniques, but one of the biggest tools in their design toolbox is relative sizing.

Relative Sizing in Website Design

If an image is 500 pixels wide, what happens when your screen shrinks?

It depends on how you’ve coded your website. But if it’s simply set to 500px width regardless of screen size, it will take up more than the width of an average smartphone, causing the user to have to scroll around just to see the entire image.

This is terrible from a user perspective.

Instead, what if the width was dynamic? Stated differently, the image could be set to 50% of the screen’s width.

With this coding in place, the image size would scale dynamically depending on screen size, and the entirety of the image would always be within view.

Min and Max Sizing

Ok, but what if there’s text on the image that you want the user to be able to read, and they’re on a small phone screen?

This is where scaling can get more detailed. For example, you can set your image width to 50% of the screen size, but with the stipulation that the image can never scale below a certain size.

This might require the scrolling we mentioned earlier, but it’s a compromise between two evils. And it will still work perfectly on most screens.

Conversely, a lot of web images don’t have super-high resolutions, meaning that they’ll look grainy and out of focus if they’re made to be too large. Setting a maximum size on your image can avoid this so that our images always stay in focus.

We talked about images in these examples, but these principles can be applied to anything on your website. And you’ll want to do so. A tiny “Buy Now” button or an enormous block of text will be annoying for anyone using your website, so you’ll want to ensure that they can engage with the material on your site without a lot of trouble.

Desktop vs. Tablet vs. Mobile Design

Despite tricks of the trade like relative and dynamic sizing, most developers will make separate designs for a website on at least mobile and desktop, and usually for tablets as well.

Why? Because there are often huge differences between the types of experiences you’ll get on these devices. It requires different design thinking for each.

This doesn’t mean that your brand will look different on mobile than on desktop. In fact, making separate designs for different devices should help to create a cohesive experience, regardless of how a potential customer finds you.

The same layout that works on a desktop, though, is unlikely to be as streamlined and intuitive on a mobile phone. Therefore, you need to design with the device in mind.

Different menu styles,the  elimination of some visual elements, the addition of others, and the restructuring of copy can all help to do this.

It could even mean something like hiding a horizontal video on mobile and replacing it with a similar vertical one, which will be easier to view and will correspond more closely to popular mobile platforms like TikTok and Instagram.

Containers and Nested Objects in Web Design

We talked earlier about scaling, and the different ways to do that with elements on your site.

Another trick designers have to create responsive web designs is to use containers that keep the parameters of your site properly bound.

A container is just like it sounds: a web element that contains one or more other elements. If you set the scaling, layout and aesthetic properties of a container correctly, it will automatically conform elements inside the container to work within your site’s layout.

This can allow designers to create containers for different situations and devices, then mix & match the content that goes inside them. It can be more work upfront, but it becomes easier to scale a website’s design once you have several of these designed.

Often, everything you see on a page will be in some sort of container.

Ever see a page where the text goes right up to the edge of your screen? That’s annoying to read, isn’t it?

This is an example of an element (text) that isn’t properly contained to provide the best user experience.

Everything Else: Fonts, Images and Embedded Elements

Responsive web design isn’t just about image sizes. It’s everything on your site.

Do you want to use a fancy font that perfectly shows off your brand character? Cool, but is it going to be available to display on all systems? Not all fonts are available across all systems, particularly more exotic ones. In these instances, a user’s browser will substitute another, more generic font to display the language.

Will the browser’s generic font replacement look anywhere near as good as your original design?

These are questions you have to ask yourself. The site that you look at during the design process isn’t necessarily the same that someone else will see, and this can negatively affect your brand’s image.

Another issue we’ve discovered here at Leadlfask is when websites have a block of code that’s embedded in their site from a 3rd party. One common example is a job search portal, which often comes packaged as a code block to embed in your website and is sent by the HR firm that manages a company’s hiring.

Is this code block created with the same responsive parameters as the rest of your site? Sometimes, the answer is no, and this can create an ugly or frustrating experience for users.

The type of image matters as well. A vector file will scale infinitely while looking crisp and clear, but those files will be a lot larger to contain all the necessary information. Large files, in turn, affect the load time of a webpage, which relates to user experience and how search engines like Google view your website.

So you could have infinitely scalable images that make your designer’s job easier, but at the expense of a lot of website traffic.

Thinking Responsively

We were somewhat careful not to tell you what you should do in each of these cases. That’s because there isn’t one, best answer.

Want to use that fancy font? It can work, as long as you’re careful about execution. Want to embed numerous 3rd party elements into your site? They can all be made to align with your design, but not without the foreknowledge to check and adjust them before launch.

The best practice for responsive web design, then, isn’t dictating a particular way of doing everything, but by being aware of the issues caused by unresponsive design elements.

This will allow you to respond organically to issues as they arise, and will give you a set of design goals that can guide all of your efforts. 

There’s no web design that is completely foolproof for every edge case that exists out there, but by tackling the largest known issues, you can protect your brand’s reputation and avoid embarrassing or frustrating experiences for your existing and potential customers.