OpenSourceVarsity

pdf icons

A Quick Overview Of Web Page Templates

Most website developers whether they are designers or coders conceptualize a webpage template as a programmer defined set of containers that divides the web page’s real estate into logical sections. Each container encloses a specific section of the web page, this defines the overall webpage structure.

The developer will place body text (i.e. web page copy), images, video, audio and/or a mix and match of all of these elements as appropriate into each web page section.

The webpage template is therefore responsible for holding different web page visual/audio elements in specific positions on the webpage. The webpage being all elements displayed together in their places within the site visitors Browser.

For example a template could have the following sections:

  • Header section
  • Left vertical section
  • Content section
  • Footer section

Which would look like diagram 1 when rendered in a Browser.

Diagram 1

The header section would hold a logo, the top menu system, maybe a site Search text box, Register and/or Login links and so on.

The content section would hold all the page’s content, i.e. web page copy, images, video, audio or a mix and match of all.

The left vertical section could hold vertical menu items if any, affiliate links, product adverts, twitter feeds, social icons and more.

The footer content section could hold the footer menu, footer links, copyright information, created by information and so on.

All these sections and the content they enclose together as a whole is the web page.

These sections are created using HTML5 (or HTML4) elements. The containers are generally <div></div> that are sized and styled using CSS rules OR perhaps a table, which is sized and styled using CSS rules.

NOTE: This material focuses on HTML5 and CSS3 necessary when using the Bootstrap 3 framework.
The use of the <table></table> HTML elements to position webpage content is considered obsolete today.

Webpage templates can also have more sections than the ones displayed in diagram 1. Diagrams 2 & 3 display webpage templates with different sections.

Diagram 2

Diagram 3

The Template Is A Web Page Content Placeholder

A web page template is therefore just an empty place-holder which separates and pins web page content at specific places on the web page, real estate. Web page contents being web page copy, images, videos, audio podcasts or a mix and match of all these elements.

NOTE: Diagram 4 displays and explains a more complete webpage template structure.

A Webpage Template With A More Complete Structure

Diagram 4

The Concept Of A Responsive Template

Normally the size (height and width) of each section of a web page template is specified in the CSS rules bound to the template. If the height and width of any section is specified in pixels then the template is a fixed size template. This means is that irrespective of the display size of the device, the height and width of the template remains fixed to the height and width specified in pixels.

This results in both horizontal and vertical scroll bars being visible in a Browser when the webpage is rendered in a tablet or mobile phone type of device where the display size is smaller than the physical size of the template in pixels.

While a vertical scroll bar is normally quite acceptable, i.e. the site visitor scrolls up or down to view the entire webpage content, a horizontal scroll bar is not acceptable by today’s UI design standards.

For a template to be termed Responsive as the display viewport (i.e. Browser’s display size) reduces sharply, as it would on a 10 inch or 7 inch tablet, (i.e. an iPad or an Android pad) for instance, the size and structure of the sections of the webpage template should change (i.e. reduce in proportion, re-structure sections to stack one below the other vertically rather than adjacent to each other) to fit.

All web page content elements, held and displayed within template sections, must also automatically resize:

  • H1 H2 H3 H4 font-sizes would reduce
  • Image sizes would reduce
  • Video sizes would reduce
  • Template sections that are adjacent to one another will restructure to stack one below the other

And so on when the view port of the display device reduces sharply.

  • The approach is that the template code is created by the developer
  • Next Bootstrap 3 CSS code is bound to the template code
  • Next the Bootstrap 3 JavaScript file is bound to the template code
  • Finally the jQuery JavaScript library is bound to the template code

This adds the responsiveness described above, automatically to the webpage template.

This is the real power of bootstrap.css, bootstrap.js and associated media queries.

Breathtakingly simple and amazingly powerful.

When the size and structure of the sections of the webpage template reduces, obviously the content (text, images, video, audio elements) contained within each section reduces proportionally as well to maintain a uniform look and feel of the webpage across different view-ports.

When any webpage template is built using bootstrap.css this is what automagically happens.

When using Bootstrap 3 as the framework on which a webpage template is built, as the display view-port changes in size (increase or reduces) the template and the content each template section holds scales perfectly to fit the view-port size.

Why Use Bootstrap 3 As The Template Framework

Twitter Bootstrap 3 is simply the best front-end (i.e. User Interface) development framework for a while now. Programmers can now develop responsive webpage templates for any website or Internet driven application in a matter of hours. Twitter Bootstrap 3 delivers a fast, easy, and less repetitive solution to the presentation layer of any HTML5/CSS3 driven project. All of this will definitely appeal to any web/app developer.

Twitter Bootstrap 3 has some amazing built-in features, namely:

  • A fluid grid layout
  • Responsive design
  • Custom form elements
  • Typography
  • JavaScript interaction
  • Cross-browser compatibility

Ensuring that all these all cool features were coded in to a webpage template used to be very time consuming in the past. Implementing Bootstrap 3 in a webpage template changes all this, as Bootstrap 3 brings with it all this functionality built-in.

Bootstrap 3 Development Is FAST

If on a short timeline, and a new, fully responsive, website or application has to be delivered to a client, Bootstrap 3 is perfect.

The fastest approach is to grab one of the great templates available, add Bootstrap 3 to it, make some specific styling changes, add some snappy interactivity and everything is done.

In the past, crafting anything fast and easy has always been synonymous with bad coding practice. Bootstrap 3 which has been built from the ground-up by some of the smartest, geekiest geeks on the planet, changes all of this.

Cross-browser and device compatibility have been taken into account, which brings in the good coding practices and cuts down any debugging time phenomenally.

Bootstrap 3 Is Platform Agnostic

While the functionality that Bootstrap 3 brings to any Internet project might seem like magic, Bootstrap 3 is just CSS and JavaScript.

Nothing new has to be learned. Just plug Bootstrap 3 CSS file, its associated JavaScript file and jQuery into the <head></head> section of the HTML5 document and all of Bootstrap 3’s magnificent power and versatility immediately become available.

Just Add A Bootstrap 3 Class To Any HTML5 Element And Make It Do Fancy Stuff

To add the functionality of Bootstrap 3 to the HTML5 template, all that one needs to do is:

  • Understand the functionality of the Bootstrap 3 classes
  • Add these classes to any HTML5 element which needs such functionality

Bootstrap 3 is extremely well documented. The documentation has multiple, well laid out lucid examples. Additionally there are a number of websites which deliver additional and very helpful examples and documentation.

Bootstrap 3 Is Responsive From The Get-Go!

Designing responsive websites is a walk in the park using bootstrap’s grid layout. Everything just works!

Enjoy the true power of the grid. Watch as columns respond fluidly to every important view-port width.

Bootstrap 3 makes mobile-first development really easy. There is no need to alter template mark-up with every new screen width being designed for.

A Quick Re-Cap

What we have learned so far.

What is a webpage template.

What the webpage template does for a webpage.

Different webpage template structure breakups and what each section broadly holds.

Understood the concept of a Responsive Template.

Had a close look at why the Bootstrap 3 framework should be used with any responsive Internet driven project.

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