Responsive Web Design for Mobiles - Bootstrap

© copyright getbootstrap.com


Bootstrap Framework

Responsive web development implies a technology that will respond to the size of the display and to render the web page in a suitable manner for that device. In particular, a site that renders in one way for the desktop will render in a different and more appropriate manner for a mobile phone. To achieve this grid system, or framework is used. Bootstrap is one of the most common frameworks.

Bootstrap includes many features that enable the writing of web pages more convenient and standard. In particular (for this item) it is the grid system that is included in Bootstrap that is of major interest. A grid system splits the page into a number (12 in this case) columns and using styling the writer will indicate the number of columns that an item occupies, thus it is an easy way to get the page divided into 2 or 3 or 4. However, when viewed on a small mobile screen this can be unreadable, so again with classes there is a point where the columns are stacked one below another rather than across the screen. All of this is easy to do an under the control of the web developer

Responsive design or separate web sites? There are two ways to think of mobile web sites. If the application uses has the same data to be delivered on both a PC and mobile then responsive design is the way to develop. A framework will deliver a site appropriate to the device form a single code base. But, if the application requires different information to be delivered to a PC site rather than a mobile site, or in an order more appropriate to the mobile then separate sites may be required. A simple example : you can book cinema tickets on both a PC and mobile. In the former case the booking will be more considered, can view more reviews, pick different dates or cinemas etc. For a mobile site a booking at the nearest cinema now is more likely to be the application. To achieve this a different site may be needed.