Creating Responsive and Mobile Friendly UI

Now a days smart phones and tablets are widely used for web browsing. At the same time, people are also using 4K displays and 27″ monitors. While these may be the two end of the spectrum, most laptop users are still using displays between 11″ and 17″.

Due to this dramatic change in screen real state, we not only need to adjust the amount of content visible on screen but often also need to reorganize the layout.

Recently I was developing a web application were I had to support all these screen sizes. At first, it looked like a lot of work. However, after doing some research I found Bootstrap. It is a front-end framework for developing responsive and mobile friendly UI.

Key features of Bootstrap:

  • Nice look & feel: It comes with nice fonts & icons out of the box. Also provies a standard color scheme for warning, error, info messages and buttons.
  • Well designed controls: Bootstrap themes generally comes with controls designed with css & html5 elements. UI controls like sliders, multi-select dropdowns or switch controls are available out of the box.
  • Responsive UI: The framework was designed with responsiveness in mind. Its provides a well designed css classes to easily adjust web contents depending on screen sizes.

Also it handles the browser specific css issues behind the scene just like jQuery does it for DOM manipulation.

I bought this theme from a store for $18 and implemented in just few days; something that otherwise would take weeks. And, since they all use the Bootstrap framework I could easily switch to a different theme.