Responsive Design: How device usage is changing the way we build websites

How many web enabled devices do you own? A very simple question. A phone? A tablet? A laptop? A desktop? These are just the basics. The most common. There are also web enabled TV’s, games consoles, and even fridges. Slowly more and more devices are connecting to the web.

As a developer or stakeholder, you will want your website to be visible and fully functional on as many devices as possible. The problem is that devices have different sized screens with different screen resolutions.

If you write your website to work on desktop devices you don’t want to have to write another whole website to do exactly the same thing for mobile devices. Doing so would be a massive waste of time and resources that could be better used somewhere else.

That being said, you don’t want mobile device users to see a broken site that just doesn’t work. That wouldn’t reflect well on you or your business.

The answer to this problem is responsive design.

What is responsive design?

Responsive web design was first discussed by Ethan Marcotte in his 25th May article of A List Apart titled “Responsive Web Design”. He discusses how interior designers and architects had been experimenting with “responsive architecture”. Creating art installations and wall structures that change shape when crowds approach them.

He puts forward the idea that we should design websites for optimal viewing experience on an increased number of devices. Design that adapts to the device that is used to view it. This is responsive web design.

Responsive Web Design

How can we make a website responsive?

In his article, Ethan Marcotte also laid out a solution. Media queries.

Included in CSS3, the media query, is a wonderful tool for responsive web design. Arguably the most useful two features of the media query are max-width and min-width.

The use of a max-width or min-width media query allows you to specify DOM (Document Object Model) breakpoints ranges for different CSS styles. This means that the same DOM element can have different CSS styling at different browser pixel resolutions.

div { background-color: green; } @media (min-width: 300px) { div { background-color: red; } }

Above the div will have a green background colour unless the browser width is greater than 300 pixels, then it will have a red background colour.

div { background-color: green; } @media (max-width: 300px) { div { background-color: blue; } }

Above the div will have a green background colour unless the browser width is less than 300 pixels, then it will have a blue background colour.

A very basic working example of media query usage is shown here. To see the affect that the media query has change the width or your browser. There are two breakpoints, one at 300 pixels and one at 1200 pixels.

These media queries are used to overwrite existing CSS markup at the specified breakpoint. This allows you to make a website responsive while only adding a few lines of CSS to you codebase.

Further Information

Mobile First

Where do you start your breakpoints? On the project I am currently working on our Google Analytics reports that almost 50% of traffic is from mobile users and that 37% of this is iOS. Gartner reported that 83% of device sales were tablet or smart phone in 2014. It makes sense to ensure that your site is well designed at smaller screen resolutions. This is where the mobile first methodology comes in.

Mobile first is the process of creating the layout and styling of your site for mobile devices before any work is done on the desktop views. Usually this results in a less cluttered visual design across all devices due to the limited screen space available on a mobile device. Importantly this ensures a strong, mobile user experience.

After the initial mobile design styling is complete, breakpoints are added for other, larger screen resolution devices using media queries. This is where you would use min-width media queries.

Common Breakpoints

Breakpoints are often added to a website in order to meet the design and styling required regardless of the device being used to view the content. This kind of breakpoint can vary from website to website, whereas device based breakpoints are fairly standard.

Mobile portrait – 320px

Mobile landscape – 480px

Tablet portrait – 768px

Tablet landscape – 1024px

Desktop – 1224px

These are common guidelines for CSS breakpoints. Tablet landscape and desktop are often changed to suit the style of the site.

CSS Preprocessors

CSS preprocessors such as Sass, Less, and Stylus have extremely useful features to use in responsive design. In this post, I will focus on Sass although both Less and Stylus have their own equivalents.

Predominantly used as a Ruby on Rails plugin, Sass is a CSS preprocessor that really improves the speed of development of a responsive site with media queries. Most useful are nested rules and variables.

Using SCSS rules in your CSS makes it much clearer when defining styling for each breakpoint. Instead of having styling for each breakpoint separated by media queries, all of the media queries for a specific DOM element can be nested inside the element’s initial styles.

Setting your commonly used breakpoints as SCSS variables allows you to reuse the same breakpoints easily while referring to descriptive, easy to remember, names.

# No nesting div { # All your default styling } @media (min-width: $mobile-landscape) { div { # All your mobile landscape styling } } @media (min-width: $tablet-portrait) { div { # All your tablet portrait styling } } # etc for more breakpoints

Without nesting each specific DOM element to be styled will appear in each breakpoint, creating significant clutter in your CSS files. This can be confusing and difficult to manage when you are working on large projects, as refactoring the CSS codebase may become a daunting task.

# With nesting div { # All your default styling @media (min-width: $mobile-landscape) { # All your mobile landscape styling } @media (min-width: $tablet-portrait) { # All your tablet portrait styling } # etc for more breakpoints }

With nesting the DOM element to be styled has its own breakpoint styles all in one place making it much easier to maintain and find the CSS styling you are working on. Note the use of SCSS variables $mobile-landscape and $tablet-portrait in both examples.

Summary

This is a very basic overview of responsive design. Much of the nature of responsive design and how it is carried out is down to personal preference, site specification, or dictated by your tech stack.

With an ever increasing number of devices network enabled, it is up to developers to ensure that the user experience is maintained and consistent across as many devices as possible.