How to Create a Responsive Web Design
Before we begin this responsive web design tutorial, you need to make sure you understand the basics of HTML/CSS. For each HTML element, such as the ones below, you assign corresponding CSS properties. Each CSS property can have various values. So instead of going into each CSS property I will explain the basics of how HTML and CSS works.
HTML elements:
1 2 3 | <img src=”image.jpg” /> <p class=”exclass”>Sample Text</> <div id=”exampleID”> |
The CSS properties for the <img> element may look like this:
1 | img { max-width: 500px; } |
img is the HTML element, max-width is a CSS property, and it has a value of 500 pixels.
The CSS properties for the <p> element may look like this:
1 | .exclass { float: left; } |
.exclass is the class of the p element, float is a CSS property, and it has a value of left.
The CSS properties for the <div> element may look like this:
1 | #exampleID { margin: 0 auto; } |
#exampleID is the ID of the div element, margin is the CSS property, and it has a value of 0 auto.
All of these CSS properties should be in a CSS file linked to your website using the link element, and be placed in the head section, in the <head> tag, on every page.
Such as:
1 | <link rel="stylesheet" type="text/css" media="all" href="css/style.css"> |
To make your responsive design work you have to add a meta viewport element and place it in the head section on every page.
Such as:
1 | <meta name="viewport" content="width=device-width" /> |
This will tell your web browser how to control the web page’s dimensions and scaling, your CSS media queries will not work without it.
CSS Properties for Responsive Web Design
When you create a website it is good to use certain CSS properties to make your website more responsive, and some of these CSS properties do not have to go inside media queries.
Width and Percentages
In this example I set the width to 80%. Notice how the image resizes according to the width of the browser. The width will always be 80% of the browsers width.
1 | img { width: 80%; } |
Max-Width and Min-Width
You can set the min-width and max-width of an element too. In this example I set the max-width of the image to 1000px, if the browsers width is over 1000px the size of the image will not go beyond 1000 pixels. The same things goes for min-width too, I set the min-width to 325px, so if the size of the web browser is below 325px the image size will not be less than 325 pixels. Also, once you get to 325px or 1000px the width percentage does not apply. You can see in the example below.
1 | img { width: 80%; max-width: 1000px; min-width: 325px; } |
max-width is set to 1000px and width is 80%
min-width is set to 325px and width is 80%
Height Auto vs Fixed
In this example I set the height of the div element to a fixed height of 200 pixels. Notice when the browser gets to a certain width the text does not stay inside the div element because the height is a fixed value.
1 2 | <div class="test"><p>… </p></div> .test { width: 100%; background-color: orange; height: 200px; } |
div element is a fixed height of 200 pixels
To make this responsive you can set the height to auto so it will automatically adjust to the text inside. And if you want to start at a certain height you can use min-height. The min-height for this div is set to a value of 200 pixels so it will never be less than that. You can see in the example below how it automatically adjusts.
1 | .test { width: 100%; background-color: orange; height: auto; min-height: 200px; } |
height is set to auto and min-height is 200 pixels
CSS Media Queries Control the Responsive Design
Media Queries give you more control on how your web site is viewed on various devices. Without media queries responsive web design would not be possible and you would have to make a separate web site for each device.
You create your media query in your CSS file, it starts with @media, you then set the media type and in parenthesis, the conditions. The media types are either all, print, screen, and speech. The all media type is for all devices, the print type is for printers, the screen type is for computer screens, tablets and smart phones, and the speech type is for screen readers that read the page out loud. There are many conditions you can use, the one I use the most are max-width and min-width, because once when the web site reaches the set max-width it will start using the CSS in that media query. Once it reaches the min-width value it will stop using the CSS in that media query.
For all the conditions visit the w3schools site on media queries: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Take a look at the example below:
1 2 3 | @media screen and (min-width: 480px) and (max-width: 1280px) //CSS would be here } |
This media query is using the screen media type so it will work on computer screens, tablets, and smart phones. The max-width is 1280 pixels, so when the website is being viewed on a device that is 1280 pixels or less it will start using the CSS in this query. It also uses min-width, which is set to 480 pixels so when the webs site is being viewed on any device that is below 480 pixels it will not use the CSS in this query. Also notice how we linked each condition with “and”, without the conditions being linked with “and” the media query will not work.
Media Queries for Responsive Web Design
In this media query example we will set the image to go above the text when the browser’s width reaches 1180 pixels. Right now the image floats to the right and the text floats to the left. As you can see when the width of the browser reaches below 1180 pixels the text gets moved down because of the image.
image floats to the right and the text floats to the left
when the width of the browser gets below 1180 pixels the text gets moved
Our HTML is the following:
1 2 3 4 | <div class="test"> <img src="images/computer.jpg" /> <p>…. </p> </div> |
Our regular CSS is as follows:
1 2 3 | .test { width: 100%; background-color: orange; height: auto; min-height: 300px; } .test p { font-size: 100%; max-width: 800px; padding: 1em; color: #000000; float: left; } .test img { float: right; max-width: 300px; width: 100%; margin: 1em 1em 0 0; } |
To make the image go above the text we need to remove the floats for both the p element and the img element because we are not aligning either to the left or right side of the page anymore. We also want to remove the margin on the image so it stretches to the full width of the div element. And we want to change the image max-width to 1180 pixels because we want it to be the full width of the page. When the width of the browser gets below 1180 pixels you can see how nice and fluid it is now.
Our media query would look like the following:
1 2 3 4 | @media screen and (max-width: 1180px) { .test img { float: none; max-width: 1180px; margin: 0; } .test p { float: none; } } |
float changed to none, max-width is 1180 pixels, and margin is 0
It is without a doubt, for every web design you create, you need to make it responsive for it to render correctly on any device. In today’s world there are many mobile devices, and they are always changing too. I hope you enjoyed this tutorial on responsive web design, look for more tutorial posts to come soon on web design and development topics.
