What Is Responsive Design?

Technologies are often created out of a need. For mobile devices, it was the sheer number of screen sizes from a small phone to a large tablet and all the sizes in between that were becoming a challenge for developers.

How could they create a website that looks good on a small phone while not being too simplistic on a tablet or monitor? Or if they developed the website to look good on a monitor or tablet, how were people going to read it on their phone?

The ability to zoom in and zoom out on your phone helped some, but the fact of the matter was that consuming websites on a phone was a very frustrating experience… until Responsive Design.

What Responsive Design does is to allow developers to design and create websites that scale up or down based on the device the user is using AND display the site differently if the user is holding it vertically or horizontally.  The power in the responsive design approach is how the website scaling works.

Responsive Design Scaling

Responsive Design allows developers to get creative in how they shift and display content of the same website as devices get bigger and smaller or users switch their screen orientation (from vertical to horizontal or back).

Below I cover just a few of the options you will see in a responsively designed website.

Number of Columns

Using a grid is one of the strategies for managing different device sizes. By specifying the number of columns based on a screen resolution, developers can place the same content on three columns for a monitor, two columns for a horizontal tablet, and one column for a mobile phone or a tablet held vertically.

The designer and/or developer have a powerful choice in how they create the website for each group of devices.

Size of Content

Beyond moving content around based on the device size, Responsive Design also allows you to change the size of the content. You can think of a news website or a blog to get a good idea.

On a monitor, you may see large pictures and the full article. On a tablet, you may see a smaller picture and the first 250 characters of the article. On a phone, the pictures may be left out altogether, displaying just the title of the article with a ‘Read More’ button.

Sizing content is another way developers have the ability to scale content up and down to make the experience better based on the device the user is using.

Mobile Menus

Navigation is an important part of a website’s design. On a monitor, the navigation can have multiple menu options and sub-menu options that stay present while the user changes from page to page.

On a mobile phone, however, showing a menu designed for a desktop will probably take up a large portion of the device’s screen, leaving less room for the content. This is where a mobile menu comes in.

A mobile menu is a way in Responsive Design to put away menu items when you don’t need them, but then to show them when you do.  A mobile menu is typically found in the top left or top right of a website with a square button that has three horizontal lines. When you click it, menu items that are tailored to a mobile user’s needs are displayed.

Summary

Responsive Design is a way website developers and designers can create one website that looks and acts differently on different device sizes. In effect, the website responds or is responsive to your particular device and the way you are holding it. It is a technology that has allowed us to better consume the content on websites without a lot of zooming and scrolling that we had to do just a few years back.

When developing or redeveloping a website, it is more than a good idea to consider implementing Responsive Design. The only case where you would not consider Responsive Design is if your website is an internal corporate application that would never be used on a mobile device or if you wanted to push users to a mobile app instead of a mobile version of your website.

The 5 Pillars Of A Successful Software Project

We want to help every software project begin on solid ground. In The 5 Pillars Of A Successful Software Project, we share the five essential ingredients of every software project.

You can grab a copy of the guide below and share it with your team!