10 Guidelines For Responsive Website Design

As the tech & responsive website design revolution has continued to gather speed the market has been met by a plethora of new products. New phones, tablets, TVs, laptops, desktops, games consoles, and even wearable tech are being developed and marketed at a frightening pace to a consumer base hungry for innovation. And what comes with this abundance? Different screen sizes, different resolutions. Always demand for better tech, better performance, and more bespoke user experiences. 

Clearly, web design would have to change if it was to keep up with this global expansion and, in 2010, the term ‘responsive website design’ was coined by Ethan Marcotte. Inspired by the discipline and principles of classical architecture which, unlike the transience of the web, “aims for eternity”, he explained his vision thus:

“Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.”

Ethan Marcotte

Marcotte was ahead of his time. In 2014, for the first time ever, more people accessed the internet from their mobile than from a desktop computer, and it suddenly became critical for websites to work seamlessly across all platforms. Responsive website design became, and remains, a mission critical priority for small and large businesses, with over 94% of people saying they judge a site either positively or negatively depending on its cross-platform responsiveness and performance.

And yet, even in 2019, the standards for RWD are still a little murky. Read on to explore the important concepts regarding this design movement and the actions steps you should be taking during your next project.

Manage Viewport Settings

The viewport is the visible area of a web page. This area changes depending on the device being used. In the days before mobile and tablet browsing most web pages were static and designed only for desktop screens. 

Times have changed!

Now, as modern web designers, we have to perpetually optimise for a variety of devices. We do this by initially setting the meta viewport tag, which controls the width and scaling of the browser’s viewport. In order to achieve the best results, include width = device – width to always match the width of the device “in hand”, and initial – scale = 1 to ensure the CSS pixels and device-independent pixels have a 1:1 relationship. This should limit any clunky inconsistencies when a browser switches from desktop to mobile. 

TIP: Keep your page accessible by not disabling user scaling.

Make Sure Content Fits The Viewport

We have all visited a mobile site only to be met with oversized images and a zoomed layout which forces us to scroll horizontally. Not good UX! However, as developers and designers, we can perhaps have empathy for the people who have made these mistakes. When you use a meta viewport tag it can be all too easy to create content that doesn’t fit the viewport. 

The answer here is to not use content that requires a certain viewport width to render correctly. Avoid large, fixed elements that are not going to perform well cross-device. Guard against using large absolute positioning values for page elements as they will almost certainly cause issues on the smaller mobile screen. 

You can also use CSS media queries, but we will come on to that next. 

Use Media Queries

The media query appeared in its first iteration as media types in CSS 2.1, with little adoption. The idea was to target specific web-ready devices with acceptable media but most implementations were imperfect, to say the least, and it took until CSS3 was released for media queries to take form. 

Media queries are an improvement in media types. They allow us to target and inspect the device that will render our site, adding device-specific rules that will shift content into the optimal layout for positive user experience. The use of media queries means you can have a different user interface for each device, depending on that device’s breakpoint (i.e. portrait or landscape orientation). This makes it easier for a design to retain its integrity across multiple browsers/platforms.

Think of media queries as simple filters that can be used in CSS to change styles on a device-dependent basis. These can include height, width, type, resolution, and orientation. The syntax of media queries allows you to create these rules depending on the characteristics of the device you are designing for.

TIP: When using the media attribute in the stylesheet use min-width instead of min-device-width in order to cover the most ground.

Relative Units Are King

One of the core concepts underlying responsive website design is the idea of fluidity. This is in direct opposition to ‘old school’ fixed-width layouts. 

By using relative units instead of fixed units you can significantly simplify the layout of your design and also prevent the creation of any elements that are too large for the viewport. 

Relative units also allow browsers to render content depending on the zoom level of the user, mitigating the need for clunky horizontal scroll bars.

Flexible Grids

Just to build a little on what we said about relative units above, utilising a flexible grid-based layout is RWD 101. We use CSS to position spacing, margins, and different layouts in a way that is not based on pixels. Why? Pixels can be a terrible way to approach design. They vary widely across screen sizes. There is no standardised measurement that we can work with. 

Instead of using pixels to express layouts, widths, margins, and text sizes, consider using percentages or “em” – a unit of measurement that is based on the current font’s point size. Ems are scalable by nature, which makes them perfect for a responsive and changing environment. 

The equation for translating pixels into ems is as follows:

Target ÷ Context = Result(em)

The same calculation can be used for percentages. 

Content Breakpoints

The breakpoint is the point at which a web page will respond with the optimal layout to ensure efficient consumption of its content on a specific device. They are an extremely important element of good responsive website design but lots of people go about them the wrong way. 

They define their breakpoints based on specific devices or operating systems, which can cause severe issues when these systems change. Instead, define your breakpoints using the content itself.

An expert tip is to always design for the smallest screen size first, then refine the user experience as the screen size grows. Only use a breakpoint when it becomes necessary and the aesthetics of the page begin to suffer (i.e. too much white space).

Use Text The Right Away

This is one area where breakthroughs can be used is to enhance readability on smaller devices. Popular readability theory suggests each line should carry about eight to ten words (in English). Therefore, whenever a line is set to surpass the ten-word limit you should consider using a breakpoint. 

As a best practice, avoid completely hiding text when you can. It is tempting to remove ‘lesser’ content in the pursuit of a sleek appearance but don’t make the mistake of thinking the desires of a user change just because the screen size is different. If you are intent in hiding certain elements of your content on different devices make sure the user data suggests that it is wise to do so. 

Utilise DevTools

You will want to keep a close eye on how things look when you start using media queries and breakpoints. You could mess around with browser resizing to trigger these actions or you could just use DevTools. Note: Each browser uses slightly different tools so you may need specific instructions depending on what you use. Below is for Chrome Dev Tools. 

Open DevTools, turn on ‘device mode’ and select ‘responsive’ in viewport controls. Once you have done this you can open the device mode menu and select ‘show media queries’. This will then show your breakthroughs as colored bars above the page. 

To view one of the media queries in action simply click the specific bar. 

TIP: You can also use DevTools to measure ‘page weight’: the combined byte for total resources being utilised on-page. 

Make Your Images Responsive

It isn’t just the layouts that should change in responsive web design, it’s the content too. Images, in particular, must be used correctly to ensure that they look great and load quickly (53% of users say that they will leave a site if it takes longer than 3 seconds to load).

The most important thing to remember is that you should always use relative sizes (as we mentioned above in “relative units”) for your images. This stops them from overflowing the container and causing a poor user experience. 

If you want to use different images for different devices use the picture element to specify this. Also, use srcset and the x descriptor in the img element so that the browser knows which image you would prefer to use. 

You could also utilise inline images if your page has unique content that is not being used anywhere else on the site. 

Test, test, test

We’ve gone through a lot here in a relatively short time period but one element of web design will never change and is worth reiterating here at the end; Test.

We could be the best designers in the world but if our work doesn’t offer the optimal experience for our target user we have failed spectacularly. With that in mind, consider encompassing user testing during different stages of development. Bring in members of your core audience that have an incentive to tell you the truth and to help you plug any gaps in your design. Get them to play with your site or app on as many different devices as possible. Only when our work is out in the ‘field’ like this will we get a firsthand view of whether it is headed in the right direction. 

Conclusion

As the future of web design and tech in general becomes clearer it is even more important that we focus our time and energy on websites that are truly fluid and responsive. We need to remove the old ideas surrounding breakpoints and break through the limitations we faced when the internet was still new. Versatility with regards to content and device layout will be critical going forward. And, as always, testing to make sure the questions we are asking are the right ones. 

What are some of the lessons you have learned from responsive web design?

Now that you have learnt about responsive website design, you’ll be ready to discover the 7 UX Principals For Creating A Great Website. If however you’re already sold, then great. Contact us today to talk websites, app development and how KIJO can help you.

Posted on by Liam Terry