We take responsive Web design…responsibly

There are currently more than 100 million global smartphone users accessing the mobile web daily. This number is on track to pass traditional PC users by 2015. During the past five years, the emergence of mobile Internet users has become a critical factor in website development. There were some stumbles at first, and a few band-aid solutions along the way, but standards are finally developing regarding how mobile presentation of content should be handled. Responsive design is quickly becoming the leading method of building websites for all devices, regardless of size and bandwidth limitations.

With the introduction of the iPhone in 2007, many companies created separate versions of their sites to target these new devices. Servers were configured to recognize when a user was viewing a site from an iPhone and then display the mobile version of that site to the user. This worked well in the beginning, but two shortcomings to this method immediately appeared.

First, as the number of smart phones grew, servers needed to be reconfigured to recognize these new devices as well. Developers were required to keep tabs on cell phone manufacturers (not to mention their Operating Systems and browser versions). This led to a never-ending cat and mouse game that wasn’t sustainable or efficient over the long term.

Additionally, companies were stuck managing two different versions of the same website. This meant additional overhead and a greater potential for outdated or consistent content to remain across these sites. For site owners (or developers), separate mobile sites required making changes in two separate locations. This was certainly not the most efficient way of doing things.

In an effort to address these issues, website creators turned to a feature of the CSS3 specification called media queries. Media queries allow developers to adjust the presentation layer of websites based on a number of factors, including the viewable display size of a device (called the Viewport). By adjusting how a website looks based on screen width, the site is better able to respond to the user’s preferred device. Hence, responsive design was born.

Responsive design cleared the two biggest hurdles in making a website mobile friendly. It was forward thinking in the way it decided how to format the content. Rather than specifying actual hardware devices, it focuses on the features of the device being used. The structure of websites has become more fluid, allowing sites to format the content so that it always looked native to the device. Breakpoints in screen resolution have been standardized allowing different layouts for smart phones, tablets and desktops all from the same code. This means that site owners (and developers) no longer need to manage a separate website for mobile devices.

One of the biggest complaints people make about responsive design is that it forces mobile users to download large files that would typically be intended for faster connections. In many cases, this is a valid argument. The problem with this argument is that it shows a poor website strategy more than it shows a weakness in responsive design.

When planning to launch a responsive website, designers are now taking a “mobile first” approach. Designing “mobile first” and “content out” (designing around the content, and not trying to create content to fill a design) allows for the designs to focus on the narrowest context possible while still providing a method of accessing the full content of the website. Doing so can create a quick path for visitors to be able to accomplish what they came to a site to do, regardless of where or how they access it.

This focus on content and structure provides a number of performance bonuses as well. Using advanced technologies recently made available to on-the-go web users, assets used on a website can be eliminated from the mobile layout. This can provide a much faster experience for the user by not requiring the download of “expensive” resources. For users on more capable devices such as tablets or desktop computers, the site can be progressively enhanced to create a more feature-rich experience.

As the number of mobile web users increases, it is crucial for website owners to cater to this growing demand. If you’re interested in launching a new website or it’s just time to refresh your design, a mobile strategy should definitely be a requirement. Responsive design is one of the most stable methods of meeting that requirement. In addition to solving the technological challenges, it’s one of the most cost-effective methods from both an implementation and maintenance standpoint. Just like a website has become a critical part of any business, it’s time to connect with the booming mobile user base as well.