Responsive website design with Twitter Bootstrap

Posted on 11-04-2017 by Nadir Latif


Introduction

Designing your website so it is accessible on all type of devices is a popular topic and is often referred to as Responsive Website Design. This blog post describes my experience of developing a website according to Responsive Website Design principles.

Optimizing your website for mobile devices

These days a lot of website visitors use mobile devices. Mobile devices are usually small with much less resources than a desktop computer. A website that loads normally on a desktop computer may load very slowly on a mobile device. For example some buttons may be too close to each other or may be to small to select.

There are different ways in which you can provide a good web browsing experience to mobile users of your website. You can construct a separate version of your website for mobile devices and redirect mobile users automatically to the mobile version.

Another option is to construct an application for mobile devices that can be downloaded from an App Store like Google Play. The drawback of these two approaches is that you need to maintain separate versions of your website for different users. My customer wanted a single website that works equally well on desktop computers and mobile devices. The solution was to construct the website based on Responsive Website Design principles.

Using the Responsive web framework, Twitter Bootstrap

My approach was to use a Responsive web framework for developing the website. I decided to use Twitter Bootstrap. Twitter Bootstrap is a very popular web framework based on Html 5

It provides several components that work equally well on desktops and mobile devices. Downloading the Twitter Bootstrap library and using one of its examples as the layout for the website was simple

The Problem

The main problem was that the customer wanted the footer and left sidebar of his website to look like the ones on Digital Ocean.

The solution: Use browser detection code

The answer to our problems was to use code that detects the size of the web browser. Most modern libraries support browser detection. I used following browser detection options:

Other options for Responsive Website Design

Another useful library that can be used in Responsive Website Design is Modernizer. This is a JavaScript library that can be used to detect the Html 5 and CSS3 features available to a visitor of your website. You can then change your JavaScript or CSS code depending on the features available to the user. For e.g if Html 5 canvas features is available to a user then you can use canvas related code.

It is also a good idea to make your website accessible to visually impaired users. A large number of internet users are visually impaired and use helper devices such as Brail to access the internet. Design Websites For Blind/Visually Impaired, Deaf & Disabled Visitors and Tips and Tricks to Improve Web Accessibility are useful articles that describe how to make your website accessible for visually impaired users

You can check your website on your mobile phone or test it using online tools. Tools such as Google's Mobile Friendly Test and the Responsive View in Firefox browser can be used for checking the accessibility of your website on mobile devices.

Conclusion

Responsive website design is a useful skill that can greatly improve the accessibility of your website. Websites are becoming increasingly popular and it is important for web masters to design websites that are accessible to all users.