What is Responsive Design?

Published: 17th April 2015

Responsive Design is used to adapt a website so that it fits any size screen whether that’s a desktop, tablet or a mobile device. This is done by using flexible layouts, images and @media queries.

The purpose of responsive design is to provide an optimal viewing experience making it easy to read and navigate with minimal resizing, panning and scrolling.

How do I implement Responsive Design?

Responsive Design is implemented into a website by using @media queries which are placed within the CSS document. This means there are no extra documents needed just code.

There are two ways to make a site responsive. The first is by using min-width. This way is classed as mobile first as you develop for mobiles and use media queries to change the way the website looks for larger devices. The second is max-width. This way is the opposite of min-width and is classed a desktop first or mobile last. This is where you develop for desktops and use media queries to change the way the website looks on smaller devices.

When wanting to add a @media query into your site you need to type the below code into your CSS document. There is no right or wrong way to implement responsive design as both ways work.

@media screen and (min-width: 360px) { }  OR  @media screen and (max-width: 360px) { }

The next stage is to tell the browser when to implement these new styles. This is called a breakpoint. The breakpoint in the example above is 360px. Some developers use common breakpoints for devices while other create a breakpoint when and where it is needed.

Should I learn Responsive Design?

Yes as it is a good tool to know and offer to clients but is it the most important thing to learn maybe not. In actual fact there are only roughly 1 in 8 websites that are responsive which isn’t a massive amount if you think about how many websites are on the Internet.

The reason why the numbers are so small is because Joe Bloggs down the road doesn’t really care about having his site responsive. Most clients will just want a website that works rather than thinking about the user experience. As long as the public can access the site and buy their products they are most likely not going to be bothered by having a responsive website. Many will also not see the benefits or know the benefits of having a responsive site.

Many of the websites that are responsive at the moment are designers, developers and people who want to show of their skills rather than organisations.

All in all, it is a good thing to learn, use and offer as this is a trend that is likely to be sticking around for a while but remember not all clients will need or want responsive website.

Are there frameworks that I can use when developing a Responsive Website?

Yes, there are various different types of frameworks that are free to download and use. Below are the frameworks I recommend:

  • Bootstrap - Provides a responsive grid and plenty of elements that are pre-styled to get your website developed quickly. However, because of the features the file size can be large (if you download all the features).
  • Foundation - Provides a responsive grid and various features that can be utalised in your project. However, because of the features the file size of Foundation is large (if you download all the features).
  • Skeleton - Provides a simple, responsive boilerplate that is designed for smaller website projects. Skeleton has a 12 column grid and a few features to get you started on your website. This framework is lightweight compared to Bootstrap and Foundation but doesn’t provide the mass of features those frameworks do.

What are your thoughts on Responsive Design and which way do you implement it?