Responsive Responsibility

Today’s modern web is complex.

Not only do we have all the various programming languages, frameworks, standards and libraries (which is complicated enough already) for programming the web, but adding to the entropy is actual hardware! Yes, today screensize and form factor matter as well, especially since half the world owns either a smart phone or a tablet. Gone are the days when you had to check for cross-browser compatibility, these days very few sites are actually legible on mobile phones, forget about providing the awesome desktop functionality.

So we have the problem, now what’s the solution? It is a little something called Responsive Web Design. Responsive Web Design is a set of guidelines and techniques which one can use to enable their web pages to look good on various form factors, without having to worry about serving (and maintaining) different web pages based on the device. Sound confusing? Why don’t we check out an example?

Head over to my webpage. Hopefully, you opened it on desktop. Take in the pure concentrated awesomeness and then open the same site in a mobile browser. Do you get it now? The mobile version has streamlined itself automagically to provide the best user experience for that device and screen size. That, ladies and gentlemen, is the crux of responsive design.

Now how do you enable your website to be responsive? For starters, you can use the amazing Twitter Bootstrap library. There are other options like Foundation, but for a beginner, Bootstrap is by far the best! It also helps that Microsoft has an introductory Bootstrap course on EdX. Going through the site, it is quite easy to grasp Bootstrap since all you essentially do is use the CSS and JS files and simply add classes. Sample galleries and websites, and a plethora of questions on StackOverflow just ease things further. Of course, you can always go the whole monty and install Node, Less and Sass and really customize your Bootstrap files. What really happens under the hood is that we make use of CSS Media Queries to define screen size and viewport breakpoints, depending on which, different CSS rules are applied to your page, hence the magic re-adjustment. There is also a bit of JavaScript involved, but thankfully, Bootstrap already handles most of that for us.

Just to demonstrate how important responsive design is, every modern browser now comes with a responsive mode in their debugging tools, so you can quickly verify what your site looks like on a wide variety of devices. Even Google, whose entire business relies on the internet, has a sweet tutorial on responsive design while being framework agnostic.

In conclusion, making your website look good on all form factors is imperative in today’s day and age. With the internet becoming the backbone of the digital age and handheld devices taking preference over conventional desktops, it is our responsibility to be responsive.

Eviva!

Android: A Beginning

Well, it seems I have finally done it! Amidst a busy senior year schedule, I have finally managed to dabble a bit in mobile computing and Android specifically. It wasn’t clean, it wasn’t straightforward. Reason: Maybe it was the book I was reading, but the paradigms of mobile computing are significantly different from your normal desktop power machines. I actually spent more time reading up on how the new limitations of mobile devices impose unique restrictions on us that prompt us to look at solutions differently. Kinda like parallel programming (more on that soon!).

You could say that my foray into this field started very dryly, like studying theoretical computer science even before you can write a single line of code. While the inverse is abundant (many programmers aren’t even aware of the subject), this approach is good and bad. Good, because I understand the philosophy I need to follow to write good apps for these devices without resorting to premature optimization – the root of all evil. Bad, because it was boring and delayed my explorations significantly. Yes, I said boring as in drab, dull, bugging! I had way more fun making the app rather than reading on why Android is a great software platform. The only reason I continued reading that book is because it was highly recommended and covered almost all aspect of Android, including location-based services. Well, enough of the cynicism now, eh?
My first app was a real goody! I had an idea for an app way back in 2010, but never got around to coding it up – till now that is! A simple friend arrival notification system that uses your and your friend’s location to help you co-ordinate better, it is by no means trivial and I am still far away from a release version (blame my final year college schedule 😛 ). The basic structure is up and running both on the emulator as well as my Android phone, so it seems that the app is heading the right way. Will definitely keep you posted on any new insights.

Better was the next day, when I had a free afternoon and decided to do a quick hack! I had promised a girl an app for playing the famous Name-Place-Animal-Thing game, and that is exactly what I ended up making. A simple app, it displays a new character each time you press a button. Not spectacular, I know (what can you expect from a noob in just 1.5 hours?), but I have a tower of improvements for that app as well and it will hopefully see the light of day soon.

Finally, what I really want to put across is that Android is cool and it is fun. Being free (as in free beer), it was a cinch to setup and the integration with Eclipse is the icing! The best part now is, I can not only skip some pages in the book I was reading, but I now have a new platform to experiment on and the possibilities are currently limitless. My Senior project on Facial Expression Analysis could become a mobile app for all you know! 😀

Till next time then, eat-sleep-code! Eviva!!