Wednesday, December 21, 2011

Responsive Web Design.. Quick look

I was browsing through the liferay.com website. http://www.liferay.com/

When I resized the browser window, site adapts itself to the width of the window. When I mean adapts, when I resized the window to somewhere in the range of 400px width, the page actually looks like as it would appear in mobile. See below










So fundamentally the page would repaint itself by knowing the window resize event and apply the CSS dynamically. You would notice that menu looks different, banner image is hidden etc. This is commonly called RESPONSIVE WEB DESIGN. No round trip to server but still adapts to multiple viewport. Usually you may think of 3 templates - one for desktop, mobile and Tablet.

Sounds cool!!?

But I am not sure if this is route I would want to build website. While I agree that this approach allows us to make our website look better in smaller viewport and it may makes sense for site like this.

If we are taking really serious about the mobile enabling a website, then we know that simple re-laying the site would not be sufficient for mobile experience. It needs a fresh thinking.

Mobile experience in one hand is usability but keeping it aside for a short time and other important one is speed. We want our website to be light in content so that it is fast on mobile. Mobile challenges are bandwidth, small viewport - so we want make most out of the small viewport and payload of the site should be low as well. I don't think RWD really would help us here. And getting RWD working is tough as well ;) - need to be pretty good at what you are doing.

So I am more comfortable building multiple themes for kind of platform like desktop and mobile and then each of this template apply responsive web design to address the variation with in a targeted audience! For e.g Desktop and Tablet can share the same template but then can relay itself using responsive web design techniques.

Happy programming!

Wednesday, December 14, 2011