How to build a Responsive Web Site

How To's

I am currently doing a Responsive Web Design course @General Assembly which covers the creation of a RWD on day (HTML, CSS, JQuery), Photoshop to WordPress on day 2, and creation of WordPress assets on final day. This is a 3-weekend course and I am really looking forward to the Photoshop to WordPress refresher.

I walked into the first day without reading the pre-requisites – silly me – and we had to tackle this right off the bat:

RWD

Yes, it might not look like much especially if you create RWD for a job. But I don’t. I run teams that build this stuff and so actually doing the work was a little bit trickier than I expected. This was the process I followed.

HTML   

The sections are quite clear in the above; I need a header (black), main/body (red), a sidebar (pink) and a footer (in grey) – I’ll tackle the hex colours later.

I created the below HTML based on the above:

<!DOCTYPE html>
<html>
<head>
<title>RWD</title>
</head>
<body>

<div class="container">

<div class="header"></div><!--header-->
<div class="body"></div><!--body-->
<div class="sidebar"></div><!--sidebar-->
<div class="footer"></div><!--footer-->

</div><!--container-->

</body>
</html>

A few points to note:

  • sections above have now been converted to div classes e.g. Header is now <div class=”header”>
  • the div class “container” is required for our fluid design (more on this later)
  • the comments (e.g. <!–container–>) are good practice for WordPress conversion (to be tackled in the final week).

And just before I switched to CSS styling, I entered the stylesheet reference in the head section:

<head>
css" href="RWD.css">
<title>RWD</title>
</head>

The only thing left to do was to save the file with a “.html” extension. 

And now it’s time to style the thing.

CSS

The first style I added was the container, which wraps all other elements (.header, .body etc.) inside it. As per the design, the max width is 1000 pixels, therefore we have this:

.container{max-width: 1000px;}

The next item to create is the header, which has a height, width and colour. And as per the design, we need some white space between the header and the body. I’ve commented the code below to make the reasons stand out.

.header{
 height: 200px; /* per design of 200 pixels * /
 width: 100%; /* since this is RWD and since .header is inside .container, the width is 100% i.e. 1000 px defined in .container */
 background-color: #1e1e1e; /* per design */
 margin-bottom: 10px; /* bumps all elements below by 10 pixels for white space */
}

The design has a body and sidebar separated by white space. The total of all of these is 1000 pixel (which is the .container). A small RWD formula is required here to ensure that everything fits within the container.

RWD Formula

Target / Context = Result

where:

  • Target = current div
  • Context = parent div
  • Result = width as percentage

Applying RWD formula to our design, we have:

700px (.body) / 1000px (.container) = 0.7 (or 70%). 

70% is, therefore, the size of our body element.

Floating elements

Because the body and sidebar appear to be sharing the same horizontal space, we need a design pattern to help these sections share space without conflict. 

There are a few ways to solve this, but we used the float method to tackle this problem.

Our .body selector, therefore, looks like this: 

.body{
 height: 400px; /* per design * /
 width: 70%; /* per RWD formula */
 background-color: #ec3051;
 margin-bottom: 10px; /* that white space again */
 float: left; /* float .body to the left */
}

The sidebar is pretty much the same. Much of a muchness, really:

.sidebar{
 height:400px; /* per design */
 width:29%; /* RWD formula */
 background-color:#f6b0bc;
 margin-bottom: 10px; /* white space */
 float: right; /* float .sidebar to the right */
}

The last section to style is the footer section. The only new item to add is the clear property which ensures that the footer does not also share the same horizontal space as the body and sidebar. By entering this property, the footer is ensured that it has its own real-estate on the page.

.footer{
height:300px;
width:100%;
background-color:#bebebe;
clear: both; /* clears .body and .sidebar, ensures its own space */
}

Making it Responsive

We need a media query in order to make a site responsive. In the real world, you would insert several media queries with some CSS code (that expresses how your site should look depending on device width, orientation etc.).  

We had about 10 or so minutes in class to make this page responsive and only had time to enter in 1 breakpoint:

@media screen and (max-width: 600px) {
.sidebar{width: 100%;} /* apply this width to the sidebar if width is 600px */
.body{width: 100%;} /* apply this width to the body if width is 600px */
}
}

The best way to see the rule above is by example:

If you adjust the example above to 1000 pixels, you should see the format per our design. And of course if you resize it smaller below the 600-pixel mark, you will see it body and sidebar stacked to 100% of the width (the same as the other elements on the page).

Now, how easy was that? Although the above is quite simple, if you don’t do this every day, you will probably have some head-scratching moments like I did. But I enjoyed the challenge nevertheless.


About this post

PC Blue Avatar

I am a firm believer in investing in yourself and enjoy little challenges.

I might write a few more posts about this course soon. Let’s see how we go. 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s