What is Responsive Design?

Responsive web design is a web design technique that ensures that a website displays it's pages correctly on a variety of different devices - it does this by adapting the size and style of certain elements of the design to different screen sizes and layouts - meaning that your website will look great on desktop, tablet and mobile.

It's becoming more and more common for people to access the web from many different types of devices, with different screen sizes and display capabilities - and because of this it's more and more important everry day that our website adapts to the different device on which it will be displayed.

different devices displaying same website responsive design gives the same experience on different devices

How does responsive design work?

The responsive design approach involves resizing, moving, and replacing elements of a page so that they can adapt to the width of the screen they're displayed on. This makes sure that content is legible, navigation elements such as menus and buttons are usable, and the design remains visually appealing - overall providing a great experience to your visitor.

Some of the techniques used in responsive design include:

  • Using fluid or percentage-width element
  • Using CSS3 media queries to show different styles at different sizes
  • Hiding and showing different elements based on screen size
  • Using differently-sized images, based on display size
  • CSS3 flexbox and grid
  • Google has a great introduction to responsive web design here

Creating a responsive design (or hiring a web site design company) means that you do not create a separate design or page for different devices, each device will access the same page, and the design will adapt. This reduces development and maintenance time, and provides a more consistent experience for your users who may access your site from more than one device.

Intentions of Responsive Design

The idea of responsive design is to provide the same content and a familiar experience to each visitor, regardless of the device they are accessing your website from - the ultimate goal would be to make your website entirely device agnostic.

Other approaches to the issue of multiple devices include creating a separate mobile web site, mobile apps, changing of subdomain (mobile.mysite.com), or changing the content supplied after detecting the device. These approaches are NOT compatible with responsive design, and have a lot of drawbacks in comparison.

Responsive design is one of the best practices in web design in recent years, and it is absolutely recommended to make sure your site takes this approach, unless you have a very good reason not to. I recommend this approach for all sites that I work with.

More Articles?

I hope you enjoyed this article. If you would like to know when I write more articles like this, then enter your e-mail address below, and I will let you know whenever there is a new article available.

You won't receive any spam.

More in this series

Popular Articles

Comments