Tag Archives: responsive design

Using CSS Media Queries for Responsive UI Design

Using something like Bootstrap for a responsive UI covers most of the bases. But if you need more control, it’s a good idea to get familiar with Media Queries in CSS. It might come in handy some time, plus that is what Bootstrap uses under the hood as well, and it never hurts to learn how the tools you use work. The Mozilla page on media queries goes into just the right amount of detail and gives you a good outline of everything you can do with it.

To be very brief though, here is how you use a media query in CSS:

@media query { normal-css }

This scopes it so that the CSS within the query (i.e. normal-css above) is applied only when the condition dictated by query is true. So, you could use it to say apply this style when the width or height or in a given range, or if we’re using a given type of device, or color setting, and so on.

The following, for example, sets the background color of the body to red only when the view area width is 300 pixels or more (stupid usage scenario, I know, but you get the point as to how this could be used to make your UI responsive in all sorts of ways):

@media (min-width: 300px) { 
   body {
     background-color: red;
   }
}

A powerful tool to have in your chest when building user interfaces.

Dancing with Responsive Design

I have been hearing about responsive design on and off for some time now, and it has always appealed to me as a pattern to follow for web-based user interfaces. CSS3 is obviously quite powerful and media queries provide a relatively easy way to build one unified UI that looks great on PCs, but then adapts and shape-shifts accordingly when viewed on a smartphone or tablet without having to completely re-implement a “mobile site” as so many do today. Since UI design is not my core area, though, I never could quite gather the energy to do something with it. Then I saw support for responsiveness in the new Bootstrap 3. Like with all other aspects of web UI design, it makes responsiveness that much easier as well. As added motivation, I tried out my To Do application in my smartphone – and it looked awful.

In the spirit of rolling my own, my next application I wanted to build for myself was a simple list maker that I could use for groceries, shopping, and other checklists. Since something like that would find its best use across multiple types of devices (and since I am not quite ready to jump into native mobile development just yet), it seemed like the perfect opportunity to try out responsive design with Bootstrap. After getting over a slight upgrade shock after switching from Bootstrap 2.3 to 3 (helped quite a bit by this post here), things became quite easy.

The end result is my new application, so very imaginatively titled My Lists– deployed here (again, be aware that this is a development instance), and open sourced here. Here is a screenshot of what it looks like in PCs and in tablets in landscape:

Image

Here is a screenshot of what it looks like in a smartphone and in tablets in portrait:

Image

Rest of the technology is pretty much the same as To Do– .NET REST API, AngularJS and MongoDB.

Responsive design takes a little getting used to, but I think is quite worth it.