You're reading from HTML5 and CSS3: Building Responsive Websites One-stop guide for Responsive Web Design

Product type Course

Published in Oct 2016

Publisher Packt

ISBN-13 9781787124813

Length 709 pages

Edition 1st Edition

Languages

HTML

Tools

Bootstrap

Concepts

Responsive Web Development

Authors (3):

Ben Frain

Benjamin LaGrone

Thoriq Firdaus

View More author details

Table of Contents (6) Chapters

Preface

1. Module 1

2. Module 2 FREE CHAPTER

3. Module 3

B. Bibliography

Index

Chapter 3. Constructing a Simple Responsive Blog with Responsive.gs

In the previous chapter, we installed a number of software that will facilitate our projects. Here, we will start off our very first project. In this project, we are going to build a responsive blog.

Having a blog is essential for a company. Even several Fortune 500 companies such as FedEx (http://outofoffice.van.fedex.com/), Microsoft (https://blogs.windows.com/) and General Motors (http://fastlane.gm.com/) have official corporate blogs. A blog is a great channel for the company to publish official news as well as to connect with their customers and the masses. Making the blog responsive is the way to go to make the blog more accessible to the readers who may access the site through a mobile device, such as a phone or tablet.

As the blog that we are going to build in this first project will not be that complex, this chapter would be an ideal chapter for those who have just come across responsive web design.

So let's get started.

To sum up, in this chapter, we will cover the following topics:

Dig into Responsive.gs components
Examine the blog blueprint and design
Organize the website files and folders
Look into HTML5 elements for semantic markup
Construct the blog markup

Responsive.gs components

As we mentioned in Chapter 1, Responsive Web Design, Responsive.gs is a lightweight CSS framework. It comes only with the bare minimum requirements for building responsive websites. In this section, we are going to see what is included in Responsive.gs.

The classes

Responsive.gs is shipped with a series of reusable classes to form the responsive grid that makes it easier and faster for web designers to build web page layout. These classes contain preset style rules that have been carefully calibrated and tested. So we can simply drop in these classes within the HTML element to construct the responsive grid. The following is a list of the classes in Responsive.gs:

Class name	Usage
`container`	We use this class to set the web page container and align it to the center of the browser window. This class, however, does not give the element width. Responsive.gs gives us the flexibility to set the width as per our requirement.
`row`, `group`	We use these two classes to wrap a group of columns. Both of these classes are set with so called self-clearing floats that fix some layout issues caused by the element with the CSS `float` property. Check the following references for further information about the CSS `float` property and the issue it may cause to a web page layout: The Mystery Of The CSS Float Property by Louis Lazaris (http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/) All About Floats by Chris Coyier (http://css-tricks.com/all-about-floats/)
`col`	We use this class to define the column of the web page. This class is set with the CSS `float` property. So any elements set with this class have to be contained within an element with the `row` or `group` class to avoid the issues caused by the CSS `float` property.
`gutters`	We use this class to add spaces between the columns set with the preceding `col` class.
`span_{x}`	This class defines the column width. So we use this class in tandem with the `col` class. Responsive.gs comes in three variants of grid, which gives us flexibility while organizing the web page layout. Responsive.gs is available in the 12-, 16-, and 24-columns format. These variants are set in three separate style sheets. If you download Responsive.gs package and then unpack it, you will find three style sheets named `responsive.gs.12col.css`, `responsive.gs.16col.css`, and `responsive.gs.24col.css`. The only difference between these style sheets is the number of `span_` classes defined within it. It is apparent that the 24-column format style sheet has the most number of `span_{x}` classes; the class stretches from `span_1` to `span_24`. If you need greater flexibility on dividing your page, then using the 24-column format of Responsive.gs is the way to go. Though each column may be too narrow.
`clr`	This class is provided to address the floating issue. We use this class in the occasion where using the row class would not be semantically appropriate.

Now, let's see how we apply them in an example to discover how they really work. Many times, you will see that a web page is divided into a multiple columns structure. Take that into account as our example here; we can do the following to construct a web page with two columns of content:

<div class="container">
<div class="row gutters">
  <div class="col span_6">
    <h3>Column 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing    
elit. Veniam, enim.</p>
  </div>
  <div class="col span_6">
    <h3>Column 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Reiciendis, optio.</p>
  </div>
</div>
</div>

As you can see from the preceding code snippet, we first added container that wraps all the contents. Then, it is followed by div with a row class to wrap the columns. At the same time, we also added the gutters class so that there will be blank space between the two columns. In this example, we used the 12-column format. Therefore, to split the page into two equal columns, we added the span_6 class for each column. This is to say that the number of span_{x} classes should be equal to 12, 16, or 24 in accordance with the variant we are using in order for the columns to cover the entire container. So, if we used the 16-columns format, for example, we may add span_8 instead.

In the browser, we will see the following output:

Using HTML5 elements for semantic markups

Paul Boag, in his article Semantic code: What? Why? How? (http://boagworld.com/dev/semantic-code-what-why-how/) wrote:

HTML was originally intended as a means of describing the content of a document, not as a means to make it appear visually pleasing.

Unlike traditional content outlets such as newspapers or magazines, which are apparently intended for humans, the Web is read both by humans and machines such as search engines and screen readers that help visually impaired people navigate websites. So making our website structure semantic is really encouraged. Semantic markup allows these machines to understand the content better and also makes the content more accessible in different formats.

On that account, HTML5 introduces a bunch of new elements in its mission to make the web more semantic. The following is a list of elements that we are going to use for the blog:

Element	Description
`<header>`	The `<header>` element is used to specify the head of a section. While this element may be used commonly to specify the website header, it is also appropriate to use this element to specify, for example, the article header where we place the title and other supporting pieces of the article. We can use `<header>` multiple times in a single page where it is fitting.
`<nav>`	The `<nav>` element is used to represent a group of links that is intended as the primary navigation of the website or a section of a page.
`<article>`	The `<article>` element is quite self-explanatory. This element specifies the article of a website, such as the blog entry or the main page content.
`<main>`	The `<main>` element defines the main portion of a section. This element can be used to do things such as wrapping the article content.
`<figure>`	The `<figure>` element is used to specify document figures such as diagrams, illustrations, and images. The `<figure>` element can be used along with `<figcaption>` to add the figure's caption, if needed.
`<figcaption>`	As mentioned, `<figcaption>` represents the caption of the document's figure. Thus, it must be used in tandem with the `<figure>` element.
`<footer>`	Similar to the `<header>` element, the `<footer>` element is commonly used to specify the website footer. But it can also be used to represent the end or the lowest part of a section.

Tip

Refer to the cheat sheet http://websitesetup.org/html5-cheat-sheet/, to find more new HTML elements in HTML5.

HTML5 search input types

Besides the new elements, we will also add one particular new type of input on the blog, search. As the name implies, the search input type is used to specify a search input. In the desktop browsers, you may not see a significant difference. You may also not immediately see how the search input type give advantages to the website and the users.

The search input type will boost the experience of mobile users. Mobile platforms such as iOS, Android, and the Windows Phone have been equipped with contextual screen keyboards. The keyboard will change according to the input type. You can see in the following screenshot that the keyboard displays the Search button, which allows users to perform a search more conveniently:

HTML5 placeholder attribute

HTML5 introduced a new attribute named placeholder. The specs described this attribute as a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value, as shown in the following example:

<input type="search" name="search_form " placeholder="Search here…">

You will see that Search here… in the placeholder attribute is shown in the input field, as shown in the following screenshot:

In the past, we relied on JavaScript to achieve a similar effect. Today, with the placeholder attribute, the application gets much simpler.

HTML5 in Internet Explorer

These new HTML elements make our document markup more descriptive and meaningful. Unfortunately, Internet Explorer 6, 7, and 8 will not recognize them. Thus, the selectors and style rules that address these elements are inapplicable; it is as if these new elements are not included in the Internet Explorer dictionary.

This is where a polyfill named HTML5Shiv comes into play. We will include HTML5Shiv (https://github.com/aFarkas/html5shiv) to make Internet Explorer 8 and its lower versions acknowledge these new elements. Read the following post (http://paulirish.com/2011/the-history-of-the-html5-shiv/) by Paul Irish for the history behind HTML5Shiv; how it was invented and developed.

Furthermore, older Internet Explorer versions won't be able to render the content in the HTML5 placeholder attribute. Fortunately, we can patch mimic the placeholder attribute functionality in the old Internet Explorer with a polyfill (https://github.com/UmbraEngineering/Placeholder). We will use it later on the blog as well.

A look into polyfills in the Responsive.gs package

Responsive.gs is also shipped with two polyfills to enable certain features that are not supported in Internet Explorer 6, 7, and 8. From now on, let's refer to these browser versions as "old Internet Explorer", shall we?

Box sizing polyfills

The first polyfill is available through an HTML Component (HTC) file named boxsizing.htc.

An HTC file is much the same as JavaScript and is commonly used in tandem with the Internet Explorer proprietary CSS property behavior to add a specific functionality to Internet Explorer. The boxsizing.htc file that comes with Responsive.gs will apply a similar functionality as in the CSS3 box-sizing property.

Responsive.gs includes the boxsizing.htc file within the style sheets as follows:

* { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url(/scripts/boxsizing.htc); 
}

As shown in the preceding code snippet, Responsive.gs applies the box-sizing property and includes the boxsizing.htc file with the asterisk selector. This asterisk selector is also known as wildcard selector; it selects all the elements within the document, and that being said, box-sizing, in this case, will affect all elements within the document.

Note

The boxsizing.htc file path must be an absolute path or relative to the HTML document in order for polyfill to work. This is a hack. It is something we forcibly use to make old Internet Explorer behave like a modern browser. Using an HTC file such as the preceding one is not considered valid as per the W3C standards.

Please refer to this page by Microsoft regarding HTC files (http://msdn.microsoft.com/en-us/library/ms531018(v=vs.85).aspx).

CSS3 media queries polyfill

The second polyfill script that comes along with Responsive.gs is respond.js (https://github.com/scottjehl/Respond), which will "magically enable" CSS3 respond.js to work out of the box. There is no need for configuration; we can simply link the script within the head tag as follows:

<!--[if lt IE 9]>
<script src="respond.js"></script>
<![endif]-->

In the preceding code, we encapsulated the script inside <!--[if lt IE 9]> to make the script load only within the old Internet Explorer.

HTML5 search input types

Besides the new elements, we will also add one particular new type of input on the blog, search. As the

name implies, the search input type is used to specify a search input. In the desktop browsers, you may not see a significant difference. You may also not immediately see how the search input type give advantages to the website and the users.

HTML5 placeholder attribute

<input type="search" name="search_form " placeholder="Search here…">

You will see that Search here… in the placeholder attribute is shown in the input field, as shown in the following screenshot:

In the past, we relied on JavaScript to achieve a similar effect. Today, with the placeholder attribute, the application gets much simpler.

HTML5 in Internet Explorer

A look into polyfills in the Responsive.gs package

Box sizing polyfills

The first polyfill is available through an HTML Component (HTC) file named boxsizing.htc.

Responsive.gs includes the boxsizing.htc file within the style sheets as follows:

* { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url(/scripts/boxsizing.htc); 
}

Note

Please refer to this page by Microsoft regarding HTC files (http://msdn.microsoft.com/en-us/library/ms531018(v=vs.85).aspx).

CSS3 media queries polyfill

<!--[if lt IE 9]>
<script src="respond.js"></script>
<![endif]-->

In the preceding code, we encapsulated the script inside <!--[if lt IE 9]> to make the script load only within the old Internet Explorer.

HTML5 placeholder attribute

HTML5 introduced a new attribute named placeholder. The specs described this attribute as a

short hint (a word or short phrase) intended to aid the user with data entry when the control has no value, as shown in the following example:

<input type="search" name="search_form " placeholder="Search here…">

You will see that Search here… in the placeholder attribute is shown in the input field, as shown in the following screenshot:

In the past, we relied on JavaScript to achieve a similar effect. Today, with the placeholder attribute, the application gets much simpler.

HTML5 in Internet Explorer

A look into polyfills in the Responsive.gs package

Box sizing polyfills

The first polyfill is available through an HTML Component (HTC) file named boxsizing.htc.

Responsive.gs includes the boxsizing.htc file within the style sheets as follows:

* { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url(/scripts/boxsizing.htc); 
}

Note

Please refer to this page by Microsoft regarding HTC files (http://msdn.microsoft.com/en-us/library/ms531018(v=vs.85).aspx).

CSS3 media queries polyfill

<!--[if lt IE 9]>
<script src="respond.js"></script>
<![endif]-->

In the preceding code, we encapsulated the script inside <!--[if lt IE 9]> to make the script load only within the old Internet Explorer.

HTML5 in Internet Explorer

These new HTML elements make our document markup more descriptive and meaningful. Unfortunately, Internet Explorer 6, 7, and 8 will not recognize them. Thus, the selectors and

style rules that address these elements are inapplicable; it is as if these new elements are not included in the Internet Explorer dictionary.

A look into polyfills in the Responsive.gs package

Box sizing polyfills

The first polyfill is available through an HTML Component (HTC) file named boxsizing.htc.

Responsive.gs includes the boxsizing.htc file within the style sheets as follows:

* { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url(/scripts/boxsizing.htc); 
}

Note

Please refer to this page by Microsoft regarding HTC files (http://msdn.microsoft.com/en-us/library/ms531018(v=vs.85).aspx).

CSS3 media queries polyfill

<!--[if lt IE 9]>
<script src="respond.js"></script>
<![endif]-->

In the preceding code, we encapsulated the script inside <!--[if lt IE 9]> to make the script load only within the old Internet Explorer.

A look into polyfills in the Responsive.gs package

Responsive.gs is also

shipped with two polyfills to enable certain features that are not supported in Internet Explorer 6, 7, and 8. From now on, let's refer to these browser versions as "old Internet Explorer", shall we?

Box sizing polyfills

The first polyfill is available through an HTML Component (HTC) file named boxsizing.htc.

Responsive.gs includes the boxsizing.htc file within the style sheets as follows:

* { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url(/scripts/boxsizing.htc); 
}

Note

Please refer to this page by Microsoft regarding HTC files (http://msdn.microsoft.com/en-us/library/ms531018(v=vs.85).aspx).

CSS3 media queries polyfill

<!--[if lt IE 9]>
<script src="respond.js"></script>
<![endif]-->

In the preceding code, we encapsulated the script inside <!--[if lt IE 9]> to make the script load only within the old Internet Explorer.

Box sizing polyfills

The first polyfill is available

through an HTML Component (HTC) file named boxsizing.htc.

Responsive.gs includes the boxsizing.htc file within the style sheets as follows:

* { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url(/scripts/boxsizing.htc); 
}

Note

Please refer to this page by Microsoft regarding HTC files (http://msdn.microsoft.com/en-us/library/ms531018(v=vs.85).aspx).

CSS3 media queries polyfill

<!--[if lt IE 9]>
<script src="respond.js"></script>
<![endif]-->

In the preceding code, we encapsulated the script inside <!--[if lt IE 9]> to make the script load only within the old Internet Explorer.

CSS3 media queries polyfill

The second polyfill script that comes along with Responsive.gs is respond.js (

https://github.com/scottjehl/Respond), which will "magically enable" CSS3 respond.js to work out of the box. There is no need for configuration; we can simply link the script within the head tag as follows:

<!--[if lt IE 9]>
<script src="respond.js"></script>
<![endif]-->

In the preceding code, we encapsulated the script inside <!--[if lt IE 9]> to make the script load only within the old Internet Explorer.

Examining the blog's wireframe

Building a website is much the same as building a house; we need to examine the specification of every corner before we stack up all the bricks. So, before we jump in to building the blog, we will examine the blog's wireframe to see how the blog is laid out and also see the things that will be displayed on the blog.

Let's take a look at the following wireframe. This wireframe shows the blog layout when it is viewed on the desktop screen:

As you can see in the preceding screenshot, the blog will be plain and simple. In the header, the blog will have a logo and a search form. Down below the header, consecutively, we will place the menu navigation, the blog post, the pagination for navigating to the next or previous list of posts, and the footer.

The blog post, as in general, will comprise the title, the publishing date, the post's featured image, and the post excerpt. This wireframe is an abstraction of the blog's layout. We use it as our visual reference of how the blog layout will be arranged. So, in spite of the fact that we have shown only one post within the preceding wireframe, we will actually add a few more post items on the actual blog later on.

The following is the blog layout when the viewport width is squeezed:

When the viewport width gets narrow, the blog layout adapts. It is worth noticing that when we shift the layout, we should not alter the content flow as well as the UI hierarchy. Assuring the layout consistency between the desktop and the mobile version will help the users get familiar with a website quickly, regardless of where they are viewing the website. As shown in the preceding wireframe, we still have the UI set in the same order, albeit, they are now stacked vertically in order to fit in the limited area.

One thing that is worth mentioning from this wireframe is that the navigation turns into an HTML dropdown selection. We will discuss how to do so during the course of building the blog.

Now, as we have prepared the tools and checked out the blog layout, we are ready to start off the project. We will start off by creating and organizing the project directories and assets.

Organizing project directories and files

Often, we will have to link to certain files, such as style sheets and images. Unfortunately, websites are not a clever thing; they cannot find these files on their own. So, we must set the filepath correctly to avoid broken link errors.

This is why having organized directories and files is essential when it comes to building websites. It will be exceptionally important when we are working on a very large project with a team of people and with dozens to hundreds of files to handle. Poorly managed directories could drive anyone in the team insane.

Having well-organized directories will help us minimize potential errors of broken links. It will also make the project more maintainable and easily scalable in the future.

Time for action – creating and organizing project directories and assets

Perform the following steps to set up the project's working directory:

Go to the htdocs folder. As a reminder, this folder
is the folder in the local server located at:
- C:\xampp\htdocs in Windows
- /Applications/XAMPP/htdocs in OSX
- /opt/lampp/htdocs in Ubuntu
Create a new folder named blog. From now on, we will refer to this folder as the project directory.
Create a new folder named css to store style sheets.
Create a new folder named image to store images.
Create a new folder named scripts to store JavaScript files.
Create a new file named index.html; this HTML file will be the main page of the blog. Download the Responsive.gs package from http://responsive.gs/. The package comes in the .zip format. Extract the package to unleash the files within the package. There, you will find a number of files, including style sheets and JavaScript files, as you can see from the following screenshot:
The files that ship in Responsive.gs
Move responsive.gs.12col.css to the css folder of the project directory; it is the only style sheet of Responsive.gs that we need.
Move boxsizing.htc to the scripts folder of the project directory.
The respond.js file that ships in the Responsive.gs package is out-of-date. Let's download the latest version of Respond.js from the GitHub repository (https://github.com/scottjehl/Respond/blob/master/src/respond.js) instead, and put it in the scripts folder of the project directory.
Download HTML5Shiv from https://github.com/aFarkas/html5shiv. Put the JavaScript file html5shiv.js within the scripts folder.
We will also use the placeholder polyfill that is developed by James Brumond (https://github.com/UmbraEngineering/Placeholder). James Brumond developed four different JavaScript files for cater to different scenarios.
The script that we are going to use here is ie-behavior.js, because this script specifically addresses Internet Explorer. Download the script (https://raw.githubusercontent.com/UmbraEngineering/Placeholder/master/src/ie-behavior.js) and rename it as placeholder.js to make it more apparent that this script is a placeholder polyfill. Put it in the scripts folder of the project directory.
The blog will need a few images to use as the post's featured image. In this module, we will use the images shown in the following screenshot, consecutively taken by Levecque Charles (https://twitter.com/Charleslevecque) and Jennifer Langley (https://jennifer-langley.squarespace.com/photography/):
Tip
Find more free high-definition images at Unsplash (http://unsplash.com/).
We will add a favicon to the blog. A favicon is a tiny icon that appears on the browser tab beside the title, which will be helpful for readers to quickly identify the blog. The following is a screenshot that shows a number of pinned tabs in Chrome. I bet that you are still able to recognize the websites within these tabs just by seeing the favicon:
Google Chrome pinned tabs
Further, we will also add the iOS icon. In Apple devices such as iPhone and iPad, we can pin websites on the home screen to make it quick to access the website. This is where the Apple icon turns out to be useful. iOS (the iPhone/iPad operating system) will show the icon we provide, as shown in the following screenshot, as if it was a native application:
Website added to the iOS home screen
These icons are provided in the source files that come along with this module. Copy these icons and paste them in the image folder that we have just created in step 5, as shown in the following screenshot:
Tip
Create favicons and iOS icons quickly and easily with AppIconTemplate.
AppIconTemplate (http://appicontemplate.com/) is a Photoshop template that makes it easy for us to design the icon. The template is also shipped with Photoshop Actions to generate the icons with a few clicks.

What just happened?

We have just created a directory for this project and put a couple of files in the directory. These files include the Responsive.gs style sheets and JavaScript files, images and icons, and a number of polyfills. We have also created an index.html file that will be the home page for the blog. At this point, the project directory should contain files as shown in the following screenshot:

The current files and folders in the working directory

Have a go hero – making the directory structure more organized

Many people have their own preferences for how to organize their project's directory structure. The one shown in the previous section was just an example, of how I personally manage the directory for this project.

Try going further to make the directory more organized and meet your own preference for organization. A few common ideas are as follows:

Make the folder name shorter, that is, js and img, instead of JavaScript and Image
Group the folders js, img, and css all together in a new folder named assets

Pop quiz – using polyfill

Earlier In this module, we discussed polyfill and also mentioned a few polyfill scripts that we are going to implement in the blog.

Q1. When do you think would be an appropriate time to use the polyfill?

When the blog is viewed in Internet Explorer 6.
When the feature is not supported in the browser.
When we need to add new feature on the website.
We can use it at anytime.

What just happened?

We have just created a directory

for this project and put a couple of files in the directory. These files include the Responsive.gs style sheets and JavaScript files, images and icons, and a number of polyfills. We have also created an index.html file that will be the home page for the blog. At this point, the project directory should contain files as shown in the following screenshot:

The current files and folders in the working directory

Have a go hero – making the directory structure more organized

Try going further to make the directory more organized and meet your own preference for organization. A few common ideas are as follows:

Make the folder name shorter, that is, js and img, instead of JavaScript and Image
Group the folders js, img, and css all together in a new folder named assets

Pop quiz – using polyfill

Earlier In this module, we discussed polyfill and also mentioned a few polyfill scripts that we are going to implement in the blog.

Q1. When do you think would be an appropriate time to use the polyfill?

When the blog is viewed in Internet Explorer 6.
When the feature is not supported in the browser.
When we need to add new feature on the website.
We can use it at anytime.

Have a go hero – making the directory structure more organized

Many people have their own preferences for how to organize their project's directory structure. The one shown

in the previous section was just an example, of how I personally manage the directory for this project.

Try going further to make the directory more organized and meet your own preference for organization. A few common ideas are as follows:

Make the folder name shorter, that is, js and img, instead of JavaScript and Image
Group the folders js, img, and css all together in a new folder named assets

Pop quiz – using polyfill

Earlier In this module, we discussed polyfill and also mentioned a few polyfill scripts that we are going to implement in the blog.

Q1. When do you think would be an appropriate time to use the polyfill?

When the blog is viewed in Internet Explorer 6.
When the feature is not supported in the browser.
When we need to add new feature on the website.
We can use it at anytime.

Pop quiz – using polyfill

Earlier In this module, we discussed polyfill and also mentioned a few polyfill scripts that we are going to implement in the blog.

Q1. When do you

think would be an appropriate time to use the polyfill?

When the blog is viewed in Internet Explorer 6.
When the feature is not supported in the browser.
When we need to add new feature on the website.
We can use it at anytime.

The blog HTML structures

We have laid the structure of the project directories and files in the previous section. Let's now start constructing the blog markup. As we mentioned, we will use a number of HTML5 elements to form a more meaningful HTML structure.

Time for action – constructing the blog

Perform the following steps to build the blog:

Open the index.html file that we have created in step 6 of the previous section Time for action – creating and organizing project directories and assets. Let's start by adding the most basic HTML5 structure as follows:
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Blog</title>
</head>
<body>
  
</body>
</html>
```
Here, set DOCTYPE, which has been brought to the bare minimum form. The DOCTYPE format in HTML5 is now shorter and cleaner than the DOCTYPE format of its HTML4 counterpart. Then, we set the language of our page, which in this case is set to en (English). You may change it to your local language; find the code for your local language at http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes.
We have also set the character encoding to UTF-8 to enable the browser to render the Unicode characters, such as U+20AC, to the readable format €.
Below the charset meta tag in the head tag, add the following meta:
```
<meta http-equiv="X-UA-Compatible" content="IE=edge">
```
Internet Explorer can sometimes behave oddly, where it suddenly switches to compatibility mode and renders the page as viewed in Internet Explorer 8 and 7. This meta tag addition will prevent that from happening. It will force Internet Explorer to render the page with the highest support of the latest standards available in Internet Explorer.
Below the http-equiv meta tag, add the following meta viewport tag:
```
<meta name="viewport" content="width=device-width, initial-scale=1">
```
As we mentioned in Chapter 1, Responsive Web Design, the preceding viewport meta tag specification defines the web page viewport width to follow the device viewport size. It also defines the web page scale at 1:1 upon opening the web page the first time.
Link the Apple icon with the link tag, as follows:
```
<link rel="apple-touch-icon" href="image/icon.png">
```
As per Apple's official instructions, you would normally need to include multiple sources of icons to cater to iPhone, iPad, and the devices with a Retina screen. That isn't actually necessary for our blog. The trick is that we deliver the largest size required, which is 512 px square, through a single source, as shown in the previous screenshot.
Note
Head over to the Apple documentation, specifying a web page icon for Web Clip (https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html), for further reference.

Add a description meta tag below the title, as follows:

<meta name="description" content="A simple blog built using Responsive.gs">

This description of the blog will show up in Search Engine Result Page (SERP). In this step, we will construct the blog header. First, let's add the HTML5 <header> element along with the classes for styling, to wrap the header content. Add the
following within the body tag:
```
<header class="blog-header row">

</header>
```
Within the <header> element that we added in step 9, add a new <div> element with the container and gutters class, as follows:
```
<header class="blog-header row">
<div class="container gutters">

</div>
</header>
```
Referring to the table shown earlier in the chapter, the container class will align the blog header content to the center of the browser window, while the gutters class will add spaces between the columns, which we will add in the next steps.
Create a new column to contain the blog logo/name with a <div> element along with the Responsive.gs col and span_9 class to set the <div> element as column and specify the width. Don't forget to add the class to add custom styles:
```
<header class="blog-header row">
<div class="container gutters">
       <div class="blog-name col span_9">
<a href="/">Blog</a>
</div>
</div>
</header>
```
Referring to the blog wireframe, we will have a search form next to the blog logo/name. On that account, create another new column with a <div> element together with the col and span_3 class of Responsive.gs, and the input search type. Add the <div> element below the logo markup as follows:
```
<header class="blog-header row">
<div class="container gutters">
       <div class="blog-name col span_9">
   <a href="/">Blog</a>
</div>
<div class="blog-search col span_3">
           <div class="search-form">
             <form action="">
 <input class="input_full" type="search"      placeholder="Search here...">
  </form>
            </div>
   </div>
</div>
</header>
```
As we mentioned earlier in this chapter, we used an input search type to serve a better user experience. This input will show the mobile screen keyboard with a special key that allows users to hit the Search button and immediately run the search. We also added placeholder text with the HTML5 placeholder attribute to show the users that they can perform a search in the blog through the input field.
After constructing the header blog, we will construct the blog navigation. Here we will use the HTML5 nav element to define a new section as navigation. Create a nav element along with the supporting classes to style. Add the nav element below the header construction as follows:
```
...     
</div>
</header> 
<nav class="blog-menu row">
  
</nav>
```
Inside the nav element, create a div element with the container class to align the navigation content to the center of the browser window:
```
<nav class="blog-menu">
<div class="container">
</div>
</nav>
```

In accordance to the wireframe, the blog will have five items on the link menu. We will lay out this link with the ul element. Add the links within the container, as shown in the following code snippet:

<nav class="blog-menu row">
  <div class="container">
       <ul class="link-menu">
         <li><a href="/">Home</a></li>
         <li><a href="#">Archive</a></li>
         <li><a href="#">Books</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
      </ul>
</div>
</nav>

Having done with constructing the navigation, we will construct the content section of the blog. Following the wireframe, the content will consist a list of posts. First, let's
add the HTML5 <main> element to wrap the content below the navigation as follows:
```
...
</ul>  
</nav>
<main class="blog-content row">
  
</main>
```
We use the <main> element as we consider the posts as the prime section of our blog.
Similar to the other blog sections—the header and the navigation—we add a container <div> to align the blog posts to the center. Add this <div> element within the <main> element:
```
<main class="blog-content row">
   <div class="container">

</div>
</main>
```
We will now create the blog post markup. Think of the blog post as an article. Thus, here we will use the <article> element. Add the <article> element within the container <div> that we will add in step 17 as follows:
```
<main class="blog-content row">
<div class="container">
  <article class="post row">

  </article>
</div>
</main>
```
As mentioned, the <header> element is not limited to define a header. The blog can be used to define the head of a section. In this case, apart from the blog header, we will use the <header> element to define the articles head section that contains the article title and publishing date.

Add the <header> element within the article element:

<article class="post row">
<header class="post-header">
<h1 class="post-title">
<a href="#">Useful Talks &amp; Videos for Mastering CSS</a>
  </h1>
      <div class="post-meta">
     <ul>
        <li class="post-author">By John Doe</li>
        <li class="post-date">on January, 10 2014</li>
     </ul>
     </div>
</header>
</article>

A picture is worth a thousand words. So, it's the norm to use an image to support the post. Here, we will display the image below the post header. We will group the featured image together with the post excerpt as the post summary, as shown in the following code:

...
 </header>
 <div class="post-summary">
<figure class="post-thumbnail">
<img src="image/village.jpg" height="1508" width="2800" alt="">
</figure>
<p class="post-excerpt">Lorem ipsum dolor sit amet,   consectetur adipisicing elit. Aspernatur, sequi, voluptatibus, consequuntur vero iste autem aliquid qui et rerum vel ducimus ex enim quas!...<a href="#">Read More...</a></p>
  </div>
</article>

Add a few more posts subsequently. Optionally, you may exclude the post featured image in the other posts.

After adding a pile of posts, we will now add the post pagination. The pagination is a form of common page navigation that allows us to jump to the next or previous list of posts. Normally, the pagination is located at the bottom of the page after the last post item.
The pagination of a blog consists of two links to navigate to the next and previous page, and a small section to place the page numbers to show what page the user is currently in.

So, add the following code after the last post:

...
</article>
<div class="blog-pagination">
<ul>
  <li class="prev"><a href="#">Prev. Posts</a></li>
  <li class="pageof">Page 2 of 5</li>
  <li class="next"><a href="#">Next Posts</a></li>
</ul>
</div>

Finally, we will construct the blog footer. We can define the blog footer using the HTML5 <footer> element. The footer structure is identical to the one for the header. The footer will have two columns; each respectively contains the blog footer links (or, as we call it, secondary navigation) and copyright statement. These columns are wrapped with a <div> container. Add the following footer in the main section, as follows:

      …
</main> 
<footer class="blog-footer row">
   <div class="container gutters">
     <div class="col span_6">
<nav id="secondary-navigation"  class="social-   media">
          <ul>
           <li class="facebook">
<a href="#">Facebook</a>
  </li>
           <li class="twitter">
<a href="#">Twitter</a></li>
           <li class="google">
<a href="#">Google+</a>
   </li>
         </ul>
       </nav>
     </div>
   <div class="col span_6">
<p class="copyright">&copy; 2014. Responsive  Blog.</p>
   </div>
   </div>
</footer>

What just happened?

We have just finished constructing the blog's HTML structure—the header, the navigation, the content, and the footer. Assuming that you have been following our instructions closely, you can access the blog at http://localhost/blog/ or http://{coputer-username}.local/blog/ in OS X.

However, as we haven't applied any styles, you will find that the blog is looking plain and the layout is yet to be organized:

The blog appearance at the current stage

We will style the blog in the next chapter.

Have a go hero – creating more blog pages

In this module, we only build the blog's home page. However, you are free to extend the blog by creating more pages, such as adding an about page, a single post content page, and a page with a contact form. You may reuse the HTML structure that we have built in this chapter. Remove anything within the <main> element and replace it with content as per your requirement.

Pop quiz – HTML5 elements

Let's end this chapter with simple questions regarding HTML5:

Q1. What is the <header> element used for?

It is used to represent the website header.
It is used to represent a group of introductory and navigational aids.

Q2. What is the <footer> element used for?

It is used to represent the website footer.
It is used to represent the end or the lowest part of a section.

Q3. Is it allowed to use the <header> and <footer> elements multiple times within a single page?

Yes, as long as it's semantically logical.
No, it's considered redundant.

What just happened?

We have just finished constructing the blog's HTML structure—the header, the navigation, the

content, and the footer. Assuming that you have been following our instructions closely, you can access the blog at http://localhost/blog/ or http://{coputer-username}.local/blog/ in OS X.

However, as we haven't applied any styles, you will find that the blog is looking plain and the layout is yet to be organized:

The blog appearance at the current stage

We will style the blog in the next chapter.

Have a go hero – creating more blog pages

Pop quiz – HTML5 elements

Let's end this chapter with simple questions regarding HTML5:

Q1. What is the <header> element used for?

It is used to represent the website header.
It is used to represent a group of introductory and navigational aids.

Q2. What is the <footer> element used for?

It is used to represent the website footer.
It is used to represent the end or the lowest part of a section.

Q3. Is it allowed to use the <header> and <footer> elements multiple times within a single page?

Yes, as long as it's semantically logical.
No, it's considered redundant.

Have a go hero – creating more blog pages

In this module, we only build the blog's home page. However, you are free to extend the blog by creating more pages, such as adding an about page, a single post content page, and a page with a

contact form. You may reuse the HTML structure that we have built in this chapter. Remove anything within the <main> element and replace it with content as per your requirement.

Pop quiz – HTML5 elements

Let's end this chapter with simple questions regarding HTML5:

Q1. What is the <header> element used for?

It is used to represent the website header.
It is used to represent a group of introductory and navigational aids.

Q2. What is the <footer> element used for?

It is used to represent the website footer.
It is used to represent the end or the lowest part of a section.

Q3. Is it allowed to use the <header> and <footer> elements multiple times within a single page?

Yes, as long as it's semantically logical.
No, it's considered redundant.

Pop quiz – HTML5 elements

Let's end this chapter with simple questions regarding HTML5:

Q1. What is the <header> element used for?

It is used to represent the website header.

It is used to represent a group of introductory and navigational aids.

Q2. What is the <footer> element used for?

It is used to represent the website footer.

It is used to represent the end or the lowest part of a section.

Q3. Is it allowed to use the <header> and <footer> elements multiple times within a single page?

Yes, as long as it's semantically logical.

No, it's considered redundant.

Summary

In this chapter, we started our first project. Earlier in the chapter, we explored the Responsive.gs components, looked into how Responsive.gs constructs a responsive grid, and what classes are used to shape the grid.

We also discussed HTML5, including the new elements, namely, the polyfills to mimic HTML5 features in the browsers that do not support particular features natively. Then, we used HTML5 to construct the blog markup.

In the next chapter, we will be focusing more on marking the blog up using CSS3 and adding some JavaScript. We will also be debugging the blog for errors that turn up in old Internet Explorer.

The rest of the chapter is locked

You're reading from HTML5 and CSS3: Building Responsive Websites One-stop guide for Responsive Web Design

Table of Contents (6) Chapters

Chapter 3. Constructing a Simple Responsive Blog with Responsive.gs

Responsive.gs components

The classes

Using HTML5 elements for semantic markups

Tip

HTML5 search input types

HTML5 placeholder attribute

HTML5 in Internet Explorer

A look into polyfills in the Responsive.gs package

Box sizing polyfills

Note

CSS3 media queries polyfill

HTML5 placeholder attribute

HTML5 in Internet Explorer

A look into polyfills in the Responsive.gs package

Box sizing polyfills

Note

CSS3 media queries polyfill

Box sizing polyfills

Note

CSS3 media queries polyfill

A look into polyfills in the Responsive.gs package

Box sizing polyfills

Note

CSS3 media queries polyfill

Box sizing polyfills

Note

CSS3 media queries polyfill

Note

CSS3 media queries polyfill

Examining the blog's wireframe

Organizing project directories and files

Time for action – creating and organizing project directories and assets

Tip

Tip

What just happened?

Have a go hero – making the directory structure more organized

Pop quiz – using polyfill

Have a go hero – making the directory structure more organized

Pop quiz – using polyfill

Pop quiz – using polyfill

The blog HTML structures

Time for action – constructing the blog

Note

What just happened?

Have a go hero – creating more blog pages

Pop quiz – HTML5 elements

Have a go hero – creating more blog pages

Pop quiz – HTML5 elements

Pop quiz – HTML5 elements

Summary

Unlock this book and the full library FREE for 7 days

Authors (3)

Personalised recommendations for you