Today’s web space is accessed on devices of all kinds in countless shapes and sizes. When people go to your site on their mobile device, they expect to get the same experience as they would on your desktop site. This is what is called responsive design – the use of code to automatically adapt your page and its elements to resize so that it gives a good user experience across all devices.

It may not be obvious to you when a page is using responsive design since it is natural to expect it at this point. However, it is very obvious when a page does NOT have responsive design, like the example below:

While the rest of the mobile site is responsive, the banner and welcome page are the opposite of welcoming. W3Schools gives an example of code with and without responsive design code as well:

• 

• 

There are many benefits to using responsive design in your code. The Neilson Norman Group points out several on their page about responsive web design and user experience. First of all, it saves time when creating a site – instead of having to create an almost identical page for different screen sizes the same code can have the page automatically adapt to whatever resolution it is displayed on. This means that it is also easier to preform maintenance on a page (since there is only one) and it is “future-proof” – no matter what types of resolutions are released, the code is ready to handle it.

While they endorse the use of responsive design, they warn that it is not the only thing a page needs to function. They assert that “teams must focus on the details of content, design, and performance in order to support users across all devices.” This means there has to be lots of testing on all sorts of devices in different environments – not only for the looks, but for the connection speed and usability of the page.

Responsive design is actually rather easy to add to a simple html page. To show you the process, I will change my basic html page to have responsive design.

First I will add this line of code provided by the W3School’s page to my head:

<https://www.w3schools.com/html/html_responsive.asp>

• 

• 

The page already changed by making the image and footer bigger. However, it doesn’t fit too well to the dimensions of a mobile page. To make the image responsive, I need to add style=”max-width:100%; height:auto;” to my image tag. This makes sure that my image does not scale bigger than its largest size.

Don’t forget the height: auto; or else your image will end up morphed!

The header text is also something that can be altered to be a better fit to my screen simply by adding style=”font-size:10vw” within the opening h1 tag. The difference is best seen in landscape mode:

• 

• 

While these are about all the changes that can be made on my site there are some more neat things that can be done with responsive design. For example, you can change the image based on the width of the browser. Check out the changes I made by looking at my new page and making the window smaller – see how it actually responds now!

This is just scratching the surface of code used for responsive design. As I continue to create html pages and learn more about CSS I will be sure to incorporate responsive design.