Until the recent introduction of "responsive" websites it was necessary to have two or three versions of your webpages. One would be for viewing on a regular computer. Another would be for viewing on tablets or netbooks. Another would be for viewing on a cell phone.

 

Some smart designers and CSS experts [CSS stands for Cascading Style Sheets, the code that tells the page how to look] developed some "frameworks" that, by using a combination of CSS, jQuery And JavaScript, allowed pages to resize themselves based on the device in which they were being used. There were dozens of these "frameworks" which became very confusing, especially for a new programmer taking over an existing site, who might not be familiar with the type of "framework" that was used.

 

The people at Twitter wanted to make their own site responsive, and they weren't happy with the options that were currently available. They decided to develop their own responsive framework, which they nicknamed Bootstrap. Being the generous nice guys that you'd expect, they released Bootstrap as an open source project, free for all to use on both personal and commercial projects. It rapidly became popular, and now, by version 3, it is the de facto standard for responsive design.

 

So how does it work?

 

The elements in the page are placed into a 12 column grid. The elements in that grid rearrange themselves to fit the device. So it is like taking a magazine page, cutting it up and pasting the pieces, in order, onto the back of a long Safeway receipt.

  

With the introduction of Bootstrap 3 comes the concept of "Mobile First", which means that you first design the site to look good on a mobile phone, and then let Bootstrap rearrange the page to fit on tablets or computers.

 

For most websites, this is a good option, but in some applications, where doing something on one part of the page affects the output of another part of the page, a responsive site might not be the best option. For example, if moving a slider bar on the left side of the page changes the picture displayed on the right side of the page then a responsive website might not give the best experience, since it would stack the slider on top of the image that was being displayed. That image might not be visible on the screen, since it would have been stacked under the module containing the slider.

 

But for most sites, a responsive website is a great idea, since it allows you to use one website for all devices.

 

If you'd like to see how a responsive website works, my website is responsive. Just squeeze down the size of your browser window, and you will see how it reacts.