Bootstrap Guide

Bootstrap Guide

Bootstrap

Having switched from Serif WebPlus software to Bootstrap web design several months ago, I can honestly say it outputs responsive websites which seems to be compatible with all browsers and the web pages apparently load faster which has definitely exceeded my expectations.

You can also incorporate lightboxes, picture carousels, modals, forms, animations, menu dropdowns. etc. by downloading free available plugins for Bootstrap. There are many free templates available on the internet which you can modify to suit your needs or if you are familiar with HTML 5, you can design your project from scratch.

As of April 21, 2015 Google requires all websites to be mobile responsive or get penalized on mobile searches although you will still retain your ranking on laptop and desktops searches. Google’s reason for doing this is because around 50% of all internet traffic is now on mobile devices and increasing annually.

The Boostrap layout consist of a grid system using rows with 12 columns per row which are very flexible because you can have several rows within a column or you can have 2 columns per row if each are 6 or one column 7 and the other 5. Any combination of columns per row can be used as long as they don’t exceed a maximum of 12.

The reason for this is because on a large screen obviously 12 columns per row will display across the screen, however, on tablets only 6 to 8 columns display per row and on smart cell phones 1 or 2 columns are displayed per row. The rest of the columns are stacked vertically on the screen so you don’t have to zoom in and scroll left to right like you would have to do on a non-responsive website.

There are some online Bootstrap drag and drop GUI’s but most of them are limited to some degree.  If you wish to learn this new way of responsive web design, I would suggest downloading some free templates and use an HTML5 editor to view the code and what it does.

Advertisements