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.

Advertisements

One thought on “Dancing with Responsive Design

  1. Pingback: Using CSS Media Queries for Responsive UI Design | Aashish Koirala

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s