Response JS: Build Performance Optimized, Mobile-First Responsive Websites

Believe it or not, 77% of world’s population has a mobile device and 85% devices sold in 2011 offered a web browser. What does it mean for web designers and developers?

The foremost concern for every web developer or designer should be optimizing user experience on mobile devices. But it is not as easy as it sounds unless you employ the right methods and strategies. By ‘right’, I mean sustainable - sustainable strategy to optimize your websites for blackberry, iPhone, iPad, tablets and all those nifty devices of different sizes and capabilities (and then for all traditional devices as well). Now – if you are ready to buy this ‘sustainable design strategy‘ idea, you would agree that designing separate websites for mobile devices is not a practical idea. You cannot either degrade your ‘regular’ websites or application for mobile devices.

So what is the solution? The answer is Mobile-First, progressive enhancement.

Let’s dig it deeper. The idea behind mobile-first optimization is to create layouts and designs that are optimized for mobile devices and then use them as basic building blocks to extend the layout for traditional devices. If you have been trying to degrade your websites for mobile devices, the mobile-first is kind of reverse process. You start designing for mobile and then extend functionality and optimize layout for other traditional devices.

How to get started with mobile-first progressive designs? We would recommend that you start with Response JS. It is a lightweight, jQuery responsive design toolkit, that gives designers and developers the power for producing performance-optimized, mobile-first responsive websites.

It provides easy-to-use action hooks for dynamically swapping code blocks based on screen sizes and semantic methods for progressively serving images/media via HTML5 data attributes. Response’s methods are also available as object properties, making them useful tools in OOP-minded custom development.