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.
To sum up, in this chapter, we will cover the following topics:
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.
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:
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:
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:
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.
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:
Tip
Refer to the cheat sheet http://websitesetup.org/html5-cheat-sheet/, to find more new HTML elements in HTML5.
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:
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.
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?
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:
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:
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:
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.
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?
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:
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:
placeholder. The specs described this attribute as a
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.
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?
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:
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:
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.
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?
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:
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:
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:
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:
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:
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:
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:
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.
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.
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.
Perform the following steps to set up the project's working directory:
- Go to the
htdocsfolder. As a reminder, this folder is the folder in the local server located at:C:\xampp\htdocsin Windows/Applications/XAMPP/htdocsin OSX/opt/lampp/htdocsin 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
cssto store style sheets. - Create a new folder named
imageto store images. - Create a new folder named
scriptsto 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.zipformat. 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.cssto thecssfolder of the project directory; it is the only style sheet of Responsive.gs that we need. - Move
boxsizing.htcto thescriptsfolder of the project directory. - The
respond.jsfile 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 thescriptsfolder of the project directory. - Download HTML5Shiv from https://github.com/aFarkas/html5shiv. Put the JavaScript file
html5shiv.jswithin thescriptsfolder. - 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 asplaceholder.jsto make it more apparent that this script is a placeholder polyfill. Put it in thescriptsfolder 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/):
- 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:
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:
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.
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:
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.
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.
Perform the following steps to build the blog:
- Open the
index.htmlfile 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. TheDOCTYPEformat in HTML5 is now shorter and cleaner than theDOCTYPEformat of its HTML4 counterpart. Then, we set the language of our page, which in this case is set toen(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-8to enable the browser to render the Unicode characters, such asU+20AC, to the readable format€. - Below the
charsetmeta tag in theheadtag, 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-equivmeta 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
linktag, 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.
- 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 thebodytag:<header class="blog-header row"> </header>
- Within the
<header>element that we added in step 9, add a new<div>element with thecontainerandguttersclass, as follows:<header class="blog-header row"> <div class="container gutters"> </div> </header>
Referring to the table shown earlier in the chapter, the
containerclass will align the blog header content to the center of the browser window, while theguttersclass 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.gscolandspan_9class 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 thecolandspan_3class 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
placeholderattribute 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
navelement to define a new section as navigation. Create anavelement along with the supporting classes to style. Add thenavelement below the header construction as follows:... </div> </header> <nav class="blog-menu row"> </nav>
- Inside the
navelement, create adivelement with thecontainerclass 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
ulelement. 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 & 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">© 2014. Responsive Blog.</p> </div> </div> </footer>
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.
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.
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.
<header> element used for?
<footer> element used for?
<header> and <footer> elements multiple times within a single page?