OpenSourceVarsity

pdf icons

Building A Responsive – HTML5 / CSS3 Template

Please Click This Link to download all the code spec (folders and files) associated with the above example.

In tutorial 9 we learned how to create an HTML5/CSS3, non-responsive template. In this tutorial let us learn what must be done to this template to make it responsive, i.e. viewable on different display sizes without a horizontal scroll bar. In this template the HTML5 / CSS codespec, contained within the <body></body> tags has two clearly separate sections.

Section1: Is the HTML5 tags that describe the structure of the webpage to any HTML5 compliant Browser that is rendering the web page.

Section 2: The HTML tags that describe the content containers which wrap around specific webpage content for its styling and display.

NOTE: Download the Non Responsive Template Codespec if you have not done it yet.

Converting The Non-Responsive Template To A Responsive One

There are three code snippets added within the <head></head> section of the template. They are:

<!– Ensuring the template behaves responsively –>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<!– Bootstrap is not supported in the old Internet Explorer compatibility modes à
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<!– Linking to Bootstrap style sheet –>
<link rel=”stylesheet” href=”css/bootstrap.min.css />

The first change is a meta tag name addition. This ensures that the template behaves responsively across display devices of varying widths.

The second change is a meta tag for old Internet Explorer compatibility modes.

The third change is link to Bootstrap CSS files that work together to make the template responsive.

NOTE: The number of containers used within the template increases substantially when using any responsive grid to add responsiveness to the web page Bootstrap is no exception.

This can be attributed to a web page developers need to keep the page structure and page content separate from one another.

NOTE: When changing the template from a non-responsive one to a responsive one, using Bootstrap the HTML5 tags that describe the structure of the web page to any HTML5 compliant Browser do not change.

Immediately within the HTML5 tags used to describe the structure of the web page, an additional layer of code is introduced which separates the web page HTML5 structure codespec from the web page content codespec.

Specifically, this additional layer of code is Bootstraps responsive grid codespec delivered by the bootstrap.min.css linked to the template.

The <div></div> tags, used to wrap web page content, are placed within the cells of the responsive grid. Hence, it is the Bootstrap responsive grid, that divides the web page real estate into specific areas in which web page content will be placed.

NOTE: The bootstrap.min.css delivers a 12 column responsive grid that can be accessed and used by web page developers.

Most web developers have historically come from designing web pages that are 960 pixels wide. This ensures that these web pages are not displayed with a horizontal scroll bar except in the most primitive of display monitors whose horizontal pixel density is 800 pixels or less.

Why Is The Grid Needed?

When only the <div></div> elements are used to enclose web page content, dividing the web page real estate into specific content sections, is achieved by adding values to the height and width attributes of each <div></div> element in the CSS file attached.

Hence, the <div></div> elements in the HTML5 template play two distinct roles:
Role 1: Segregate webpage real estate into definite sections
Role 2: Display appropriately styled, web page content, within each of these sections

Here is a quick example:

<div id="pgContentArea">

    <div  id="pgContentLeft>
 Content Left
 </div>

<div id=”pgContentRight”> Content Right </div> </div>

CSS styling rules associated:

CSS Styling Rules

The margin-left:auto and margin-right:auto values ensure that the parent pgContentArea is displayed in the middle of the Browser window.

pgContentLeft has a width of 70%.
pgContentRight has a width of 30%.
Together they occupy the parent pgContentArea fully.

The min-height attribute value of 500px for pgContentLeft and pgContentRight is being set to simply open up the <div></div> elements.

The very first change noticed in any template codespec using a responsive grid, is that it is the responsive grid that is responsible for defining the structure of the page.

It is the pre-determined responsive grid width, that replaces the width settings of each <div></div> which enclosed page content in the non-responsive template.

In the responsive template the <div></div> that enclose page content normally have their widths set to 100% to fully occupy the responsive grid cell.

Hence, it is now be the responsive grid cells that divide the web page real estate into specific sections that in turn can be filled with web page content.

Code Snippet 1

Code Snippet 1

The container class ensures that the page is centered in the Browser window and that it is 1170 pixels in width for Large devices.

The col-md-9 class ensures that the div whose ID is pgContentleft is nine columns wide.
The col-md-3 class ensures that the div whose ID is pgContentRight is three columns wide.
These <div></div> elements define the structure of the web page.

The containers with the IDs pgContentLeft and pgContentRight are what hold the web page content for display in the site visitor’s Browser.

NOTE: bootstrap.min.css has appropriate width values declared from col-*-1 to col-*-1 for the 960 pixels. By changing the col numeric value, one can control the overall width of the web page content structure.

NOTE: The only rule that must be followed strictly is that the sum of the column values must always be 12.

Okay Enough Of Concept Building.

Now let us create a responsive template using the techniques described.

What I’m trying to do here is create a set of empty, web page content containers that behave responsively.
What this really means is that as the Browser’s display screen size reduces the web page content containers stack up one on top of the other, thus eliminating the horizontal scroll bar on small display screen sizes.

Please Click This Link to download a complete copy of all the code necessary (folders and files) for creating your first responsive template.

When this codespec is run the web page as shown in diagram 1 will be displayed in your Browser.

NOTE: All other individual content section of the web page wrapped within their <div></div> containers will be held within bootstrap framework cells as shown in code snippet 1.

Diagram 1 Diagram 1

Testing The Template For Responsiveness

Now let’s test this template to figure out exactly how it will behave when the Browser width is shrunk manually.

To shrink the Browser width manually:

  • Click on the Browser minimize icon in the top left hand side of the Browser’s control bar.
  • Then press and hold the left mouse button on the right hand side edge of the Browser window. The Browser cursor will immediately change to a two headed arrow.
  • Next gently drag the mouse cursor towards the left hand side of the Browser screen to reduce the Browser’s display width size.

This emulates the reduced screen size of a:

  • Phablet, (i.e. phone/tablet eg. Samsung Galaxy Note 1,2,3 )
  • Tablet ( i.e. iPad, and Android pads )
  • Right down to the small, iPhone and Android smart phone size of display

Depending on how far to the left the right hand side edge of the Browser is dragged.

When the template is thus tested in a Browser, i.e. when the Browser view port is reduced, there is no horizontal scroll bar is visible in the Browser’s reduced view port as shown in diagram 2. All the web page content containers are neatly stacked one on top of the other vertically. This clearly indicates that this template is behaving responsively as shown in diagram 2.

Diagram 2 Diagram 2

Template Issues That Will Be Sorted Out Shortly

Take a close look at diagram 2. You will notice that there are a few issues with the look and feel of the template.

Notice that the pgContentLeft and pgContentRight content areas are touching each other. i.e. the yellow and pink colored content areas.

Site visitors normally expect some white space between such content areas as can be seen between the page header area in grey and the pgContentLeft area in yellow.

Additionally, the Affiliates advert areas are touching each other.

Similarly the Footer menu links section, the Contact form section and the Social icon links sections are touching each other when the display view port is reduced.

These issues will be addressed and corrected using – Media Queries – which is explained in the very next tutorial.

A Quick Re-Cap

What we have learned so far.

We now have an empty HTML5 / CSS 3 template that’s pretty close to the templates used to hold the content of various web pages on the Internet.

Let’s move on to populating actual web page content within the template’s containers. Content like, Top menu links, Textual content, Image content, Video content, Audio content and so on, and observe whether the web page content placed within their containers behaves responsively as well.

If the web page content placed within their containers behaves responsively great.

If the content does not, we shall learn what it takes to make the content behave responsively.

Please Click This Linkto download all the code spec (folders and files) associated with the above example.

 

April 5, 2016
Design by Ivan Bayross and Meher Bala © 2016 All Rights Reserved
X