Web Development - Responsive Web Design

Responsive Web Design and 960gs

We have built a simple website using HTML to organize the content and CSS to customize the presentation. Now we are going to learn how to build a responsive website using the 960 grid system and the Skeleton boilerplate. A responsive website is one that is viewable on a desktop, laptop, tablet or cellphone while maintaining the integrity of the presentation. The key to a responsive website is a carefully constructed CSS file that displays div boxes in different ways to accommodate a change in screen resolution. Take a look at the examples to the right from responsivedesign.is.

Currently, the industry standard for creating responsive websites is to use a 960 grid system. The 960 refers to the amount of pixels that are used in a standard presentation of a website. 960 is a special number because it is divisible by many different numbers, making it a great screen width to work with because it can easily be redefined to fit on different screen resolutions including HD monitors and mobile devices.

The 960 grid system splits the screen up into 12 columns. The web designer can then use div boxes of predefined column widths to populate their website. Take a look at the examples to the right from the 960 grid system website. Notice that the div boxes the websites use to place their content are delineated by the width of each of the 12 columns.

The Skeleton boilerplate is a set of predefined CSS files that cause it's predefined classes to resize themselves when viewed on devices of varying screen resolutions. The Skeleton boilerplate uses a 960 grid system with 12 column grids. The boilerplate makes it easy to quickly design the structure of a webpage. Then we web designers simply need to worry about what types of styles to use for the presentation.

Let’s get started building the structure and presentation of our 'index.html' web page.

Now Try

Create a “New Web Project” called ‘Responsive’. Be sure to choose “Basic Web Template”.

Now Try

Download the Skeleton boilerplate.
Open up the zip file and copy and paste the files into the newly created ‘Responsive’ web project.
You should overwrite the existing ‘index.html’ file.

By downloading the Skeleton files and copy and pasting them into your web project you have incorporated the Skeleton boilerplate. Now you just need to use the predefined classes to build the structure of your site and stylize your web pages. After all these changes, the files for 'Responsive' should look like the picture to the right.

Since we are not experienced website designers, we will be cloning an existing website design. Thanks to the PTSA, I leased the url www.codecreative.us for a couple of years and you can place your site on there so that others can visit it freely. Once you are done going through this tutorial, you can take the skills you have acquired and apply them to clone any site you like. If you run into problems, I’ll be here to help you out.

Remember to think about what type of content you want your website to contain because that will largely determine which webpages you choose to use on your website. We will be using one of the web pages to create a javascript game, but other than that, the site is yours to use as you see fit. Some ideas would be a website to showcase the projects you have completed during your high school years, one detailing your passions, or even a collection of your favorite web apps, videos and web pages.

Let’s get started building the index page of 'codecreative.us’. Open the index file that came with the Skeleton files. You should see many lines of code that make you feel uncomfortable. Ignore that feeling as it diminish as you progress through this tutorial. Start by erasing everything inside the ‘container’ div class. Replace those tags with the following tags:

...
<div class="container">
    <div class="twelve columns">
	Hello World!
    </div>
</div>
...

Preview your web page and you should see a blank white browser window with the text “Hello World!” in the top left corner. This is your first web page using the 960 grid system. One thing to notice is that we have a ‘container’ div that surrounds the “twelve column” div. In Skeleton, a div follows the columns class definitions only if that div is inside of a ‘container’ div. For example, if the ‘twelve columns’ div class is not inside of a ‘container’ div, it will have no set width.

The Index Page

Taking a look at the index page for ‘Marquee’, we can see that it is made up of a div for the website title text on the top left and a set of navigation links on the top right. Below that, there is are two separate divs that span the width of the screen. Notice that each contains two different types of text, which means that each will have their own set of CSS properties.

Let’s start by building the top portion which happens to be the the header. If you notice, the web page’s title text is aligned left, while the navigation links are aligned to the right of the screen. To get this effect, we will need to define each div box as being in a parent div box. We will use the built-in tag ‘header’ to contain these divs.

To begin construction the webpage above, add the following code to your webpage:

<body>
	<div class=”container”>
		<header>
			<div class=”three columns”>
				Title
			</div>
			<div class=”nine columns”>
				Links
			</div>
		</header>
	</div>
</body>

Preview the changes and compare your webpage with the example to the right.

Now Try

Create a CSS file called ‘styles.css’. Be sure to add the link tag in your ‘index.html’ or your web page will not use the classes that you define.

Now Try

Create a CSS class called ‘icon’ that will use a Google Font of your choice.
Define a font color, font size, 'text-align: right' and text-shadow.

Preview your web page and you will see that there is no change in presentation. This is because we haven’t told our div to use the class we just defined. Make the following adjustment to your html file:

<header>
	<div class=”container”>
		<div class=”three columns icon”>
			Title
		</div>
		<div class=”nine columns”>
			Links
		</div>
	</div>
</header>

It is important to understand that div classes can use more than one class. Here, our div class is using the ‘three’ class, ‘columns’ class and the class we just defined, ‘icon’. The first two define how wide the div is going to be and the last one applies our presentation properties.

Preview your web page and you should see that your font styles are now applied to your ‘icon’ div. However, your links are not aligned to the right of the screen. Let’s do that now by using the built-in class ‘u-pull-right’.

Make the following adjustment to your html file:

<header>
	<div class=”container”>
		<div class=”three columns icon”>
			Title
		</div>
		<div class=”nine columns u-pull-right”>
			Links
		</div>
	</div>
</header>

Preview your web page and you should see that now the text in the 'icon' div is aligned to the left and the text in the ‘links’ div box is on the right side of the screen. Compare your results with the picture below.

Now, you need to create an unordered list that will contain a set of links for your website.

Now Try

Create an unordered list that will contain the navigation links as bullet points.
Create a set of CSS styles for your unordered list called ‘nav’.
Apply the CSS styles by adding the 'nav' class to your unordered list.

Once you have completed the above tasks, compare your results with the example below.

Padding

When you preview your web page, you will notice that your ‘icon’ and ‘links’ div boxes are spaced incorrectly when compared to ‘Marquee’. To get the spacing correct, we will need to use the padding property in the ‘icon’ or ‘links’ div.

To add padding, we could create a CSS class called ‘about_padding’ and add this class to the ‘icon’ and ‘links’ div. However, this causes problems because if you follow this model, by the time you are done with your website, you will have several dozen different classes that all specify a certain amount of padding.

Instead, let’s define a set of classes that each define a certain amount of padding. Then we can use these classes over and over throughout our website. We are only going to define top and bottom padding using our classes.

Add the following classes to your CSS file:

.padding_tiny{
	padding: 10px 0px 10px 0px;
}
.padding_small{
	padding: 15px 0px 15px 0px;
}
.padding_med{
	padding: 20px 0px 20px 0px;
}
.padding_big{
	padding: 30px 0px 30px 0px;
}
.padding_bigger{
	padding: 40px 0px 40px 0px;
}
.padding_biggest{
	padding: 50px 0px 50px 0px;
}

Now Try

Use our new padding classes to create space around the 'icon' and 'links' div boxes in our header. Remember that to use two class, simply write both of their names with the double quotes.

** For example: <div class="six columns icon padding_med">

Once you have made the above changes, compare your results with the example below.

Some Loose Ends

Preview your web page and now your navigation links should look beautiful, aligned in a row, with a drop shadow, and have some type of hover action.

Pass your mouse over the ‘icon’ div box on 'codecreative.us'. Notice that the text is clickable and has a hover property? Let’s create the same behavior before moving on:

Now Try

Use the <a> tag to make the contents of the ‘icon’ div box clickable.
Set the ‘href’ field to ‘index.html’.
Create another set of link classes similar to 'nav' that will define the behavior of this link.

There is still one more aspect that isn’t the same when comparing the ‘codecreative.us’ template with what you have done so far. If you notice on ‘codecreative.us’, the ‘icon’ and ‘nav’ div boxes exist in the full screen as opposed to our websites which exist in the 960 pixel canvas provided by Skeleton. Let’s design our webpages to follow ‘codecreative.us’s lead.

Modify your code as follows:

<header>
	<div class=”three columns”>
		Title
	</div>
	<ul class=”nav”>
		...
	</ul>
</header>
<div class=”container”>
	...
</div>

Now Try

Add the ‘float’ property to your ‘icon’ class and set it to ‘left’.
Add the ‘float’ property to your ‘nav’ class and set it to ‘right’.

Notice that we pulled the <header> outside of the <container> so that it lies on the full size of the browser window rather than with the 960 pixel window provided by the 960 grid system. Then we ensured each div would appear on the correct side of the screen by defining the ‘float’ property.

When you are done, compare your results with the example below before moving on.

Our header is looking better, but if you compare it with the one found on 'codecreative.us', you can see that we are missing space on each side of the webpage. Let's add that now.

To add space to each side of our webpage's header, we can add padding to the left and right side of the <header> tag. Do that now.

Now Try

Create an id called 'head'
Add a padding property to 'head' to add '5%' padding to the left and right side of the div box.

When you are done, compare your results with the example below. Make sure your header looks the same before moving on.

Great, our <header> looks perfect and we can now move on!

Article

Moving on to the construction of our <article>. Looking at the structure to the left, we can see that the article contains two twelve column divs. The first will contain the text "INSPIRING INNOVATION" and the second "By Providing A Source of Creative Expression"

We will be using two separate div boxes because each div’s font type and size is styled differently. In order to accomplish this, we will need to define two separate id’s and apply them to each div. Here we will use id’s because never again will we use these sets of properties in our website.

Add the following code to your html file:

				
<body>
	<div class=”container”>
		...
		<article class="container">
			<div class=”twelve columns”>
				Index Text
			</div>
			<div class=”twelve columns”>
				Index Blurb
			</div>
		</article>
	</div>
</body>

Preview your web page and compare your results with the example below. You will see that now there are two lines of text, however they aren’t looking too good. Let’s change that.

Now Try

Define an id called ‘index_title’.
Stylize ‘index_title’ using a Google Font.
Center the text by setting the ‘text-align’ property to ‘center’.
Add padding, text-shadow, letter-spacing and line-height.
Repeat this process for your newly created id ‘index_blurb’.

Preview your web page and compare your results with the example to the right. You should see that now your text now looks glorious in all it’s CSS powered brilliance. However, we are still missing a background image. Let’s fix that.

Now Try

Create an id called ‘index_back’.
Define a background for 'index_back'. Be sure that the background image stretches along the x and y axis.
Apply the id to the <body> tag.

Ooh… Ahh… Your index page is complete and your website is coming along nicely. Note that in the example to the right, I changed all the font colors to white.

The About Me Page

Now Try

Create ‘aboutme.html’ by saving ‘index.html’ as ‘aboutme.html’.

Take a look at the 'About Me' page on ‘codecreative.us’ to the right. Notice that the header is identical to the header in index, except that ‘About Me’ has a different background image and title. Let’s make those changes now:

Now Try

Find a picture on Google that will act as your background.
Manipulate your picture using Photoshop so that it has proportions of 1900x350 pixels.
Save the picture in your images folder and add the picture as the background of the header. Be sure to add the set of properties that stretch the picture on the x and y axis.
Create classes called ‘page_title’ and 'page_blurb' stylize them according to your preference.
Add a twelve column div box and title text in header using the class 'page_title'.
Add a twelve column div box and blurb text in header using the class 'page_blurb'.

Article

Great, our header is complete. Now, looking at the structure of the article, you can see that it consists of a picture that is stretched to the width of the container. After that, there is border of the same width. Lastly, there is one three column div which contains the page's subtitle and a nine column div which contains the text. Let’s start constructing this starting with the picture and border.

Now Try

Find a picture for the first section of your ‘About Me’ page.
Manipulate the picture to be 950x300 pixels.
Add a twelve column div box as the first element in your article.
Add the picture to the article inline using the tag.
Set the height inline by adding the ‘height=#px’.
Set the width by using the built-in Skeleton class ‘u-max-full-width’ class.
Using CSS, create a class called ‘about_image’ and set the bottom border property using ‘border-bottom: 1px solid gray’.
Set a padding using our padding classes.
Use the class 'about_image' in your image tag.

Preview your work and you should have something close to the example to the right. Great, your picture and border look good, let’s move on to stylizing your subtitles and text elements that go along with your picture.

Subtitle and Text

The subtitle element is three columns wide and the text element is nine columns wide. As can be seen in the 'About Me' picture above, each has their own CSS class. Let's start by creating the structure of this section.

Take a look at the picture to the right. Since we have two elements that are to sit next to each other on the same row and their column widths add up to twelve, we need to place both of them inside a twelve column wide element. If we didn't, they wouldn't be able to fit inside the row as Skeleton adds a little bit of space inbetween elements. With this space, the elements wouldn't fit on the twelve column row and the subtitle would be on one row with the text on another.

Let's put together the structure of the subtitle and text now.

Now Try

Create a twelve column element and place it after the picture element.
Create a three column element and nine column element. Place both in the twelve column element.
Add text to both the three column and nine column elements.
Using CSS, create a class called ‘subtitle’.
Stylize ‘subtitle’ according to your preference.
Set 'subtitle' as the class for the three column element.
Using CSS, create a class called ‘text’.
Stylize ‘text’ according to your preference.
Set 'text' as the class for the nine column element.

Before moving forward, compare your 'aboutme.html' to the picture on the right. If everything went smoothly, you now have some text to go with your picture. Notice that in order to get the other three sections completed, you simply need to copy and paste the work we have done and change the content for each section.

Now Try

Complete the content for the ‘About Me’ page with at least two other sections.

Footer

Our ‘About Me’ page is almost complete, we simply need to complete the footer and we can move on. Looking at the footer to the left, we can see that it is simply a single twelve column div box with text that is centered. However, notice that the gray background of the footer stretches from one side of the browser window to the other? This means that we need to get beyond the 960 pixel grid system of Skeleton. If you remember when we constructed the index page, in order to get this done, we need to define footer outside of our container which is locked into the 960 grid system. Let’s build that now.

Now Try

Add a footer tag in your html. Be sure to place it after the end of the ‘container’ div box.
Add appropriate text to your footer.
Create a CSS class called ‘foot’ and stylize your footer.

Your “aboutme.html” should be done by now. Double check yours with the one found at codecreative.us/about.html.