The Rise of Responsive Web Design

With the rise of all kinds of devices like mobile phones, tablets, internet-TVs, and all kinds of laptops and PCs, the traditional way of designing websites has changed.

Currently, there are many devices, browsers, screen resolutions that traditional way of designing websites won't work as good as it was. Designers now start to work with a small, basic website and then do progressive enhancement, making it responsive to the context of the end-user. This allows the design to respond to what the end-user uses to access a website's content.

Today, there are numerous smartphone/tablet options and these devices have gained widespread adoption. In fact, smartphone sales today exceed those of desktop computers, and mobile-Internet traffic will soon exceed desktop traffic.

To address the "rise of mobile", many companies and organizations were forced to create a mobile strategy. Most organizations chose to create an alternate website, a mobile website, to operate alongside their existing normal website. In essence, these companies and organizations "forked" their websites; choosing to create and maintain two branches of similar web content to address the two form factors (mobile and not-mobile) they had identified. This might look like a good strategy, but however, this strategy is failing to address the core challenge.

Like smartphones, tablet devices are now becoming widespread and creating opportunities and challenges for website administrators. Tablets that surpass smartphones in term of internet traffic, have mid-sized screens (between a smartphone and a desktop display) and rely on touch-based interfaces.

As a result, the two scenarios that had previously been identified (mobile and not-mobile) were no longer sufficient for addressing the full range of internet-devices being used by visitors.

However, in reality these two scenarios were never sufficient. Real-world web statistics show that across computers, smartphones and tablets there are many different display sizes being used. There were never 2 classes of internet-devices.

Instead there has always been a gradient of devices ranging from smartphones to widescreen monitors. By only targeting specific device, and neglecting numerous other devices can limit companies and organization to gain the market.

The statistics for current screen resolution for internet users are: screen under 1600px to 1024px owns the market by 49 percent. This is followed by tablets and netbooks with width less than 1024px to 600px that owns 29 percent of the market. Larger monitor with 1600px width and above only have 19 percent of the market, while smartphones with 800px of less have 8 percent.

New technologies are introduced faster than they were before. And "forking," as a solution for targeting different devices, is ineffective and inefficient today and will become even worse in the future.

Responsive Design for Mobile Solution

Most current websites target a single screen size. For example, a website might be 800px wide. On a widescreen monitor this simply results in wasted space. But on a smartphone, it becomes almost unusable. The term "forking" enables organizations to add an additional set-width website, but this can fail to create an optimized experience for all devices, increasing the cost and resource for maintaining and so forth.

An ideal solution would allow the website to be created once, and then adapted for an unlimited number of internet devices. This is done by building the website responsive from its core.

This simple fact becomes the basis of a web design philosophy known as progressive enhancement. Progressive enhancement starts by targeting devices with the most limited capabilities (text-only, no JavaScript) and seeks to make the website usable even with these limitations. New HTML layers (images, JavaScript, etc.) are then added to the website.

Responsive web design is a step ahead from traditional web designing. But it would be so much better if responsive web design is truly responsive, not only to the device of the visitor, which is just the medium the visitor is using at that time, but responsive to the visitor itself. With a truly responsive design, visitors may see a website as how they wish, and make beautiful responsive designs is what will respond to that.