Responsive design has become a must for a website these days. More than 50%+ of the people who have access to internet use some kind of mobile device, such as tablets, phones etc. And if your website is does not respond correctly to their device size, then it’s most likely a lost customer for you.
[tutorial_details]
In this tutorial I’ll show you one way of creating responsive layouts. There are many ways you can do this, for example using css grids, that already have columns preset and pre-styled for you. But now, we won’t be using any kind of grid system.
The layout we’ll create will have 2 columns, a header, a navigation menu, a content area and sidebar and footer.
Resetting the browser defaults
To get us started, we need something called reset.css. Reset.css clears all the default styling that browsers give to html elements, such as buttons, heading tags, tables, list and so on.
Why is this important?
It’s important to reset these default styles because each browser has different default stylings. So your website might look different in each browser. But with reset.css you can avoid having this issue. So go ahead and download reset.css and add it into your project folder.
Getting started with the coding
First step done, now create two files, index.html and style.css.
Open up your index.html and add the following HTML code into it.
<head>
<title>Responsive Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<!-- header -->
<header id="header">
<h1 id="title">Responsive Layout</h1>
</header>
<!-- Navigation -->
<nav id="menu" class="clearfix">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- Main Content area -->
<section id="content">
<h2>Built with CSS3 and HTML5</h2>
<!-- Main content -->
</section>
<!-- Sidebar -->
<aside id="sidebar">
<h3>This is the Sidebar</h3>
<!-- Sidebar content -->
</aside>
<!-- Footer -->
<footer id="footer" class="clearfix">
Copyright © Andor Nagy 2015
</footer>
</div>
</body>
</html>In the code above, we have a basic few things going on. First, we have the <head> section. Here, we have the <title> tags, which is the pages title, and then we include the our two stylesheets. The reset.css and the style.css which will contain our stylings. Along side with:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Which tells the browser the width of the devices’s screen. This is very important when working with media queries.
Then, inside the <body> tag, we got:
- <div id=”container”> – This is the main container of our website.
- <header id=”header”> – The Header of our website, this mostly contains the title of the website and descriptions.
- <nav id=”nav”> – Our navigation menu.
- <section id=”content”> – The content area, where the website’s content is displayed.
- <aside id=”sidebar”> – The sidebar of our website.
- <footer id=”footer” class=”clearfix”> – The footer area of the websites.
Styling the HTML
Now that we got the actually structure of the website done, we’re ready to add some CSS and make it look like an actual website. Open up your style.css and follow along.
Let’s add the styling element by element. On most of the elements, we’ll select them by element name ( nav, header, footer ) and not by ID ( #nav, #header, #footer ).
The container.
We’ll make it have a max-width of 1200px and position it in the middle. We use max-width and not width because we want our website to be able to scale down if the screen is smaller than 1200 pixels
#container{
margin: 0 auto;
max-width: 1200px;
}The header.
Note that here, at the #container we use pixels to specify the width. But here we’ll use percentage ( % ). This is because we want our header to take up all the horizontal space it can.
We use a width of 94% because we have a 3% padding, and padding is on both size so if u add it all together ( 3% + 94% + 3% = 100% ) that equals 100%.
header {
width: 94%;
padding: 3%;
background-color: #FF5722;
}
header #title {
font-size: 50px;
color: #fff;
}The nav
The navigation menu is a bit different. Since we have an unordered list and list items inside, we give it a 97% width and only 1.5% padding.
nav {
width: 97%;
background-color: #E64A19;
padding: 0 1.5% 0 1.5%;
}
nav ul li {
display: inline-block;
padding: 15px 1.5% 15px 1.5% ;
}
nav ul li a {
text-decoration: none;
color: #ffffff;
font-size: 1.2em;
}
nav ul li a:hover {
color: #000000;
text-decoration: none;
}The content
The content area will take up 70 % of the full width of the container so we’ll have a width of 64% and padding 3% and it’ll float to left.
#content {
float: left;
padding: 3%;
width: 64%;
}The sidebar
The content area already taken 70% of the available space, so the sidebar will take the rest 30%. and float to the right.
aside {
float: right;
padding: 3%;
width: 24%;
background-color: #eee;
}The footer
The footer is the exact same as the header. 94% width and 3% padding.
footer{
width: 94%;
padding: 3%;
background-color: #FF5722;
border-top: 5px solid #E64A19;
color: #fff;
text-align: center;
}if you followed along and did everything correctly, your page should looks similar to this:
This is all nice, but we’re not done yet.
Making it Responsive
We used percentages to specify the width of the elements inside the container and the container has a max-width of 1200px which means it can shrink if needed. But this isn’t what responsive design is really about. it’s about how the elements scale and change place according to the size of the device it is viewed on.
For this, we’ll use something called media queries. Media queries allow us to specify different stylings to the same elements depending on the screen size it is viewed on. Chris Coyier has a great article about this: CSS Media Queries & Using Available Space
Since this is a simple two column layout, we’ll only use two media query.
The first one will apply different width to elements if the screen size is smaller than 768px, and center the header title and navigation elements.
@media all and (max-width : 768px) {
header {
text-align: center;
}
nav {
text-align: center;
}
#content {
width: 94%;
padding: 3%;
}
#sidebar {
width: 94%;
padding: 3%;
border-top: 3px solid #E64A19;
}
}Then, we got one for screen sizes smaller then 330px. Here all we do is, set the nav list items to display:block instead of display:inline-block and give them and width of 94%
@media all and (max-width : 330px) {
nav ul li {
display:block;
width: 94%;
}
}After adding these two media queries, we’re done. Now, if you resize your browser, the elements should scale and reposition accordingly.
Additional Resources and Articles
- How to create a Wonderful Responsive Website by using HTML5?
- Responsive Web Design: What It Is and How To Use It
- Media Queries for Standard Devices
- Responsive Web Design
- Building a Responsive Two Column Layout
- Responsive Web Design: 50 Examples and Best Practices
Conclusion
As I mentioned at the start of this article, there are many ways you can create responsive layouts, this is one way of doing it. Many prefer to use css grids, which is a great way of doing it cuz u don’t need to calculate the width and paddings, because the columns are already styled. All you need is to use the correct column classes.