Pak Jiddat

Read: In the name of thy Lord Who createth, Createth man from a clot. Read: And thy Lord is the Most Bounteous, Who teacheth by the pen, Teacheth man that which he knew not. Nay, but verily man is rebellious That he thinketh himself independent!. Lo! unto thy Lord is the return. (Sura Alalaq 96:8)

Responsive website design with Twitter Bootstrap

Created On: 11 Apr, 2017: 12:16:32 - Tags : web development

Bipmedia Home Page

Introduction

Recently my customer wanted his website to work well on mobile devices. Designing your website so it is accessible on mobile devices is a popular topic and is often reffered 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 html5 that is used by a large number of websites. It has built in support for mobile devices. It provides several components that work equally well on desktops and mobile devices. It was easy to just download the Twitter Bootstrap and use one of its examples as the layout for the website.

The Problem

The main problem was that the customer was impressed by certain websites and wanted some parts of his website to look like the other websites. For example he 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:
  1. CSS Media Queries

    CSS Media Queries are supported in CSS3. They allow us to use certain CSS statements depending on the dimensions of the device. They provide a very simple way of getting your website to look good on mobile devices. For example the following CSS Media Query code will cause the browser to use certain CSS classes if the width of the browser is 600px or less:
    /** Condition */
    @media screen and (max-device-width: 600px), screen and (max-width: 600px) {
    /** CSS classes used if condition is true */
    *[class=mobilewrapper]{width:100%!important; height:auto!important;}
    *[class=w320]{width:320px!important; height:auto!important;}
    *[class=split]{width:320px!important; float:left!important; display:block !important;}	
    *[class=left-sidebar-container]{display:none;}
    *[class=center-sidebar-container]{display:block;}
    *[class=toc_container_mobile]{display:block;}
    *[id=comments-box]{background: #DCE2ED;padding: 7px;border: #ACB1BA solid 1px;margin-right: 0%;width:100%;}
    }
    In this way you can use different CSS classes depending on the width of the device. One of the main changes that HTML5 introduced was to force the use of CSS classes instead of the style attribute. This makes it much easier to change the presentation of a website using CSS Media Queries. So if your website code is HTML5 compliant then you can easily apply CSS Media Queries.
  2. Browser detection using JQuery

    You can also detect the device width using JQuery. If you are using JQuery to create certain user interface elements, then you may want to use different JQuery code depending on the device. The article titled Detecting Browser Window Size/ Resize with jQuery has a good description of how to detect browser width using JQuery.
  3. Browser detection using Php

    If you are using php and you want to use different server side code depending on the type of mobile device, then you can use the mobiledetect library. This is an excellent library written in php that detects the user agent that is trying to access your web page. For example you can use the following code to detect if the website visitor is on a mobile device:
    // Include and instantiate the class.
    require_once 'Mobile_Detect.php';
    // Include and instantiate the class.
    $detect = new Mobile_Detect;
    // Any mobile device (phones or tablets).
    if ( !$detect->isMobile() )

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 HTML5 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 HTML5 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. They suggest a few tips that can greatly improve the accessibility of your website 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 different users.

Related Articles

  1. Creating scalable applications with Ionic Framework and Firebase
  2. Publishing websites using Jekyll
  3. Creating custom playlists for MediaElementPlayer
  4. Installing Laravel Spark, GitScrum and IceCoder on Debian Stetch
  5. Upgrading JWPlayer to version 7