OpenSourceVarsity

pdf icons

Building A Non-Responsive – HTML5 / CSS3 Template

Please – Click This Link – to download all the code spec associated with the above example.

To develop dependable capabilities in building responsive HTML5 / CSS3 templates that will work brilliantly across multiple view port sizes, let’s start off by building a – Non Responsive – HTML5 / CSS3 template first.

This approach is being taken because most web developers often have years of experience (or not) of building web page templates that are not responsive. Hence, let’s start off from this place of comfort and then move into the newer, fascinating area of responsive web page templates.

The Proposed Approach

HTML5 elements will be used to define the structure of the webpage to any HTML5 compliant Browser processing the webpage.

CSS3 rules will be applied, via an external style sheet. This will give the webpage and its contents, an individual look and feel i.e. the webpage’s character.

Once the basic HTML5 / CSS3 template has been coded, and tested to ensure that it works perfectly, the final test will be for responsiveness The template will obviously not be a responsive template.

The HTML5 Structure Of The Template

The HTML5 template being created will have two sections:

<head></head>

And
<body></body>

Both of these sections will be wrapped within <html></html>.

<!DOCTYPE html> which starts of the empty template structure informs any HTML5 compliant Browser to process the HTML document in – Standards – mode and that it is an HTML5 document.

The generic / empty template codespec is as shown in code snippet A.

Code snippet A

<!DOCTYPE  html>
<html>
 <head>
 All template control code goes here
 </head>
    <body>
 All template  content, displayed in the Browser window goes here
 </body>
</html>

NOTE: All code that is used to control the look / feel / functionality of the HTML5 Template content is placed within the <head></head> tags.

Such as:
The web page title used in SEO
<title></title>

Meta tag information used by Search engines and / or Browsers
<meta> tags and their content

Import of external CSS files
<link href=”path to the CSS file” rel=”stylesheet” />

Import of external JavaScript files
<script src=”path to the JavaScript file” ></script>

And so on.

NOTE: All the code that is used to:

Define the structure of the HTML5 template to a HTML5 compliant Browser
And
All the webpage content that is displayed within the Browser window is placed within the

<body></body> tags.

To start the creation our HTML5 template lets define its structure first using HTML5 elements.

The structure of the empty HTML5 template:

Code Snippet B

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8" /> 
 <title> My First HTML5 Template</title> 
 <link rel="stylesheet" href="template_css.css" /> 
    <script src="js/common.js"></script>
 <link rel="shortcut icon"  href="/favicon.ico" /> 
</head>

<body>

 <header>
 <div id="divLogo"> The template  Logo will be placed here </div>
 <div id="divLogoText"> The template - Catch phrase - will be placed  here </div> 
 <nav>
 Top Menu items will be placed here 
 <nav>
 <search>
 The website - Search Text box - will be placed here 
 </search>
 </header>

    <section>
 <article> First section of webpage - Content - placed here </article> 
 <article> Second section of webpage - Content - placed here </article> 
 <article> Third section of webpage - Content - placed here 
 <aside> 
 Content related / associated with the third section - Content - placed here 
 </aside>	
 </article>
 <section>

 <footer>
 The  Template - Footer Section Content - placed here
    <footer>

</body>

</html>

Here is a brief explanation of the HTML5, template code spec, as shown in code snippet 2.

The code block starts with the <!DOCTYPE html> this informs all HTML5 compliant Browsers to process the code that follows in – Standards – mode.

The <html></html> wrapper tags inform the Browser of the start and end of the HTML codespec.

The <head></head> wrapper tags inform the Browser the start and end of the webpage’s control codespec.

The <body></body> wrapper tags inform the Browser of the start and end of the webpage’s content which is displayed within the Browser window.

Informing The Browser Of The Webpage Content Structure

The <section></section> wrapper tags inform the Browser the start and end of a specific block of webpage content.

The <article></article> wrapper tags inform the Browser of the start and end of a specific child block of webpage content, which is contained within a specific section of the webpage.

The <aside></aside> wrapper tags inform the Browser of the start and end of webpage content that is tangentially related to the content of a specific article on a web page.

NOTE: Web page content enclosed with the aside element can be considered separate from main page content. That said, in the print world, such content is often printed within the sidebar of the page.

As can be seen, all the above codespec simply describes the skeleton structure of an HTML5 webpage to an HTML5 compliant Browser.

What About Webpage Content?

Webpage page content, which consists of text, images, video, audio content, is normally placed within the
<article></article> wrapper tags in the HTML5 document.

Textual Content:

Can consist of headlines:

Webpage headline
Topic headline
Paragraph headline

And so on

Headlines as described above are normally enclosed between h1, h2, h3, h4, h5, h6, h7 HTML paired tags.

Textual content beneath headlines, often called body text is normally enclosed within <p></p> tags.Words within paragraphs can be emphasized using styling rules as specified within the template_css.css.

Image Content:

Images are included within webpage content using the <img src=”path to image file” alt=”Image Title” >

All styling of images is done using styling rules as specified within template_css.css.

Video Content:

There are techniques that HTML5 offers to include/display video on a web page. The technique uses the <video></video> element.

If there is only one video file, simply link to it using the src attribute. This is similar to including an image with an <img src=”…”> tag.

For example: <video src=”pr6.webm“></video>

Technically, that is all that’s required. To improve this codespec, i.e. add value to the displaying Browser within the codespec, always include the height and width attributes in the <video></video> tags.

The height and width attributes can be the same as the maximum height and width specified when the source video was being encoded:

For example: <video src=”pr6.webm” width=”320” height=”240“></video>

Even if one dimension of the video file is a little smaller than specified the browser will center the video inside the box defined by the <video> tag. The video content will never be squashed or stretched out of proportion.

Audio Content:

Just like a video file can be called between the <video></video> tags, the audio file can also be called between the HTML5 <audio></audio> tags as shown in the code snippet below:

For example:
<audio controls>
<source src=”path_to_audio_file” type=”audio/mpeg”>
Your browser does not support the audio element.
</audio>

This is how web page content is placed within the HTML5 template structure enclosed using <article></article> tags.

NOTE: All standard HTML tags can be used with page content within the HTML5 template structure.

Here is the webpage template that we are setting out to create.

Diagram 0

Webpage Sections Within <body></body>

Now let’s focus on the webpage content wrapped within the <body><body> tags.

The <header></header > tags mark the start and end of the topmost ( i.e. header ) section of the webpage.

NOTE: Please do not confuse this with the <head></head> HTML tags.

What is often traditionally placed within the header section of a webpage is:

A company Logo at the right hand side
Some Logo text immediately below the company Logo, this is normally a catch phrase of sorts
The Login / Registration Links to the right hand side of the Logo section
Any other content that needs to be displayed within the header section can also go here

The Webpage Header Section

The HTML5 code that delivers this the header section is as shown in Code Snippet 1.

When the codespec enclosed within the <header></header> tags  executes, what is shown in diagram 1 will be displayed in the Browser window.

Diagram 1 Diagram 1

The webpage logo is placed at the top left hand side.

The Logo text ( i.e. the webpage catch phrase ) is immediately below the Logo, and within the Logo container

To the right hand side of the Logo and Logo text section the Login / Register links can be placed. These can be right aligned. Additionally, feel free to display any other page content within the web page header section.

Code Snippet 1

<!-- Header Section STARTS -->
<header id="pgHeadSection" class="pgWrap clrBoth">

 <div id="pgHead" class="container clrBoth">
    
 <div id="divLogo" class="clrBoth">
 <p class="spl">Logo goes here</p>
 <div id="divLogoText"><p class="spl">Logo text goes here</p></div>
 </div>
 
 <div id="logReg">
 <p class="spl">Login / Register links and other stuff can go here</p>
 </div>

 </div>
 
</header>
<!-- Header Section ENDS -->

The <header></header> HTML5 tags wrap the webpage header content.

The container whose id is divLogo wraps the web page logo and its associated logo text. Logo text being the web page catch phrase. divLogoText wraps the logo text individually and is within the logo container.

Adjacent to this is the container logReg. This wraps the webpage Login / Register links and any other content that you may want to display within the page header.

The Webpage Top Menu and Webpage Search Section

The HTML5 code that delivers this section is as shown in Code Snippet 2.

Just below the header section is the Top Menu section. Adjacent to this is the webpage Search section as shown in diagram 2.

Diagram 2 Diagram 2

The Webpage Top Navigation Section

Code Snippet 2

<!-- TopNav and Search Section STARTS -->
<div id="topNavSrchSection" class="pgWrap clrBoth">

 <div id="topNavSrch" class="container clrBoth">
 
 <div id="topMenu">
 <p>Top Menu items goes here</p>
 </div>
 
 <div id="search">
 <p>Site Search goes here</p>
 </div>
 
 </div>
 
</div>
<!-- .row TopNav and Search Section ENDS -->

The Webpage Breadcrumbs Section

The HTML5 code that delivers this section is as shown in Code Snippet 3.

Often webpages have a Breadcrumbs section for the convenience of the site visitor. The Breadcrumbs section displays exactly where the site visitor is on the website and indicates the route that the site visitor took to get to that section of the website as shown in diagram 3.

Diagram 3 Diagram 3

Code Snippet 3

<!-- Breadcrumb Section STARTS -->
<section id="breadCrumbsSection" class="pgWrap clrBoth">

 <div id="breadCrumbs" class="container clrBoth">
 <p class="magenta">The Breadcrumbs content goes here</p>
 </div>

</section>
<!-- Breadcrumb Section ENDS -->

The container whose id is breadCrumbsSection wraps the web page breadcrumbs section. The container whose id is breadcrumbs wraps the physical display of the breadcrumbs themselves.

The Webpage Slider Section

The HTML5 code that delivers this section is as shown in Code Snippet 4.

Because webpage real estate above the fold of the display device is at a premium, very often websites use a Slider placed just below the Breadcrumbs section of the webpage.

The Slider is a Block of JavaScript, HTML5 / CSS3 codespec that will display a block of webpage content to a site visitor for a fixed (pre-determined) period of time, then slide this out and slide in another block of webpage content that needs to be displayed to the site visitor. This approach empowers web page developers to use and re-use the very same amount of webpage real estate to display different chunks of web page content as shown in diagram 4.

Diagram 4 Diagram 4

Code Snippet 4

<!-- Page Slider Section STARTS -->
<section id ="sliderSection" class="pgWrap clrBoth">

    <div id="slider" class="container clrBoth">
 <p class="magenta">The web page Slider content goes here</p>
    </div>

</section>
<!-- Page Slider Section ENDS -->

The container whose id is sliderSection wraps the web page Slider section. The container whose id is slider wraps the physical display of the Slider content.

The Webpage Content Section

The HTML5 code that delivers this section is as shown in Code Snippet 5.

Just below the Slider section, most web pages have the main Content section. In this template the webpage content section is sub divided into two sections, the left hand side section and the right hand side section that is often seen in web pages as shown in diagram 5.

Diagram 5 Diagram 5

Code Snippet 5

<!-- Page Content Section STARTS -->
<div id="PgContentArea" class="pgWrap clrBoth">

    <div id="pgContent" class="container clrBoth">
 
 <div id="pgContentLeft">
 <h2>Main Page Content<br /> - Left Column</h2>
 </div>
 
 <div id="pgContentRt">
 <h2>Main Page Content<br /> - Right Column</h2>
 </div>
 
 </div>

</div>
<!-- Page Content Section ENDS -->

The container whose id is PgContentArea wraps the web page Content section. The container whose id is pgContentLeft wraps the page content displayed on the left hand side of the web page. The container whose id is pgContentRt wraps the page content displayed on the right hand side of the web page.

The Webpage Affiliate Advert Section

The HTML5 code that delivers this section is as shown in Code Snippet 6.

Often to help monetize a website the website owner will display affiliate adverts on the page. If a site visitor clicks on an affiliate advert and makes a purchase then the website owner will be given a percentage of the purchase made by the site visitor as a reward for advertising / selling an affiliate’s product or service.

In our webpage template we’ve placed the affiliate section below the web page content section as shown in diagram 6.

Diagram 6 Diagram 6

Code Snippet 6

<!-- Affiliates Advert Section STARTS -->
<section id="affiliatesSection" class="pgWrap clrBoth">
 
    <div id="affiliates" class="container clrBoth">
 
 <div id="affiliate1">
 <p class="magenta">Affiliate 1 Adverts<br /> Content goes here</p>
 </div>
 
 <div id="affiliate2">
 <p class="magenta">Affiliate 2 Adverts<br /> Content goes here</p>
 </div>
 
 <div id="affiliate3">
 <p class="magenta">Affiliate 3 Adverts<br /> Content goes here</p>
 </div>
 
 <div id="affiliate4">
 <p class="magenta">Affiliate 4 Adverts<br /> Content goes here</p>
 </div>
 
 </div>
 
</section>
<!-- Affiliates Advert Section ENDS -->

The container whose id is affiliatesSection wraps the web page affiliates content section.

Within this parent container there are four child containers whose ids are affiliate1, affiliate2, affiliate3, affiliate4, which wrap the physical affiliates content.

The Webpage footer Section

The HTML5 code that delivers this section is as shown in Code Snippet 7.

In our template we have placed the <footer></footer> section below the webpage affiliate section. This section is where all the webpage footer content is placed, such as Footer links, a Contact us form, and Social Media links as shown in diagram 7. The web page footer section also wraps the copyright and acknowledgments section.

Diagram 7 Diagram 7

Code Snippet 7

<!-- Page Footer Section STARTS -->
<footer class="pgWrap clrBoth">

 <div id="footerSection" class="container clrBoth">
 
 <div id="footerLeft">
 <p>Footer Menu Links Go Here</p>
 </div>
 
 <div id="footerCenter">
 <p>Contact Form Goes Here</p>
 </div>

 <div id="footerRt">
 <p>Social Icon Links Go Here</p>
 </div>

 </div>

 <div id="copyRtAckSection" class="container clrBoth">
 
 <div id="copyRtAck">
 <p class="magenta">Copyright and Acknowledgements Go Here</p>
 </div>

 </div>
 
</footer>
<!-- Page Footer Section ENDS -->

The HTML tag <footer></footer> wraps the web page footer content section.

The container whose id is footerSection is a parent container which wraps three individual footer child containers, that physically display page footer content.

footerLeft is a child container that displays all the footer links necessary for the webpage.

footerCenter is a child container that displays webpage Contact us form.

footerRt is a child container that displays the webpage Social Media iconic links.

The container whose id is copyRtAckSection wraps the webpage copyright and acknowledgements content.

The container whose id is copyRtAck wraps and displays the physical copyright and acknowledgement content of the webpage.

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 )
Tablet ( i.e. iPad )
Right down to the small, Android, smart phone size of display

When the template is thus tested in a Browser, i.e. when the Browser view port is reduced, a horizontal scroll bar is visible in the Browser’s reduced view port. This clearly indicates that this template it not responsive as shown in diagram 8.

Diagram 8 Diagram 8

NOTE: The horizontal scroll bar marked at the bottom of diagram 8.

NOTE: None of the web page content containers have stacked themselves one on top of the other as they would have had the template been responsive. They are still side by side, hence the horizontal scroll bar is visible.

What we have therefore is an HTML5 template that is not responsive, i.e. it does not automatically resize to fit the Browser viewport.

In the next lesson we will learn how to convert this non responsive HTML5 template into a responsive one by adding bootstrap.css, bootstrap-responsive.css and bootstrap.js to the HTML5 template.

Then use Bootstrap’s 12 column, 960 pixel, fixed width grid, to divide the web page into containers of appropriate size.

Finally, we will place the very same <div></div> wrapped web page content within these containers.

NOTE: It is Bootstrap’s 12 column, 960 pixel, fixed width grid, that is responsible for converting the non responsive HTML5 template into a responsive one.

Next we will focus on using the various, built in, bootstrap design elements, and understand how this impacts the HTML5 code spec within the template.

A Quick Re-Cap

What we have learned so far.

The HTML5 syntax that describes the structure of the web page to the HTML5 compliant Browser.

The use of <div></div> as containers to hold web page content within the structured web page.

What the HTML5 elements <section></section> enclose in the web page.

How to reduce the Browser view port manually to test if the template is responsive or not.

Please Click This Link to download all the code spec associated with the above example.

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