( read )

The Future is Responsive Web Design

http://cdn2.hubspot.net/hub/497826/file-4035562409-jpg/blog-files/131997102_sm-300x199.jpg

Responsiveness, in terms of website development, means that the visual elements on a website re-arrange based on who is viewing it (actually, based on the viewer's screen resolution... but more on that in a bit).

This might sound like something out of Star Trek or an excerpt from a Quantum Mechanics text book. However, let me promise you this is real technology. You may have noticed bigger websites are already responsive. At KathodeRay, we build many of our new websites using responsive design.

Before we can talk about the benefits of responsive design, however, we need a little background...

The Resolution Problem

Screen resolution is measured in “pixels”. A pixel is a small little square of color which the computer uses to paint the screen. The more pixels that are available, the bigger the canvas is. For a long time there were a few extremely common screen sizes with 1024px x 768px being the most popular.

Web designers used to pick a resolution and paint their website on an appropriately sized canvas. You could expect your site to fit within a frame that was roughly 960px wide.

Before: One Website, One Resolution

Let's take as an example, a non-responsive website designed for 1024px x 768px. This website will be scaled down on a small cellphone with a resolution of 320px x 200px. The scaled-down site will require zooming in and out which, while functional, takes away from the user experience.

On the other hand, a website could be designed to display optimally on a small cellphone at a resolution of 320px x 200px. This, however, would alienate the desktop users at 1024px x 768px because these wider screens that would only see a single column of visual elements stacked to display nicely on smaller displays.

Cellphones, tablets, wide-screen monitors, and plasma displays are just a few of the new technologies which allow people to view the Internet using a much greater array of resolutions. If a web designer targets just one of these devices, invariably a subsection of the website's target audience will be alienated.

No longer can we aim at a single resolution – a single canvas.

Now: Responding to Resolutions

A responsive design will literally “respond”, or adapt, to the resolution of the user's device.

When a desktop user comes to the website, they will see a page that expands to an optimum size for their display. Is the user on a wide-screen monitor? If so, the page container will expand to 1200px wide, margins between elements increase, and font-size adjusts if necessary.

Cellphone users, with a small display, will trigger the website into a corset-like action, decreasing the container's width. Elements which were once next to each other now stack one-after-another to fit within that column.

But is the adjustment to responsive web design worth it?

At KathodeRay, we say absolutely! Here's why:

• Large numbers of users browse the Internet on their phones or tablets
• Non-responsive websites deliver a less-than-ideal experience on small displays
• A positive customer experience contributes to an increase in customer conversion rates

By avoiding table-based designs and using the latest cross-browser compatible technologies, we are free to create unique, feature-rich responsive websites. Additionally, by using CSS frameworks like Zurb Foundation or Twitter Bootstrap, we can offer offer responsive websites that are very user-friendly with content management systems (CMS) that make editing site content very easy. It’s perfect for a business planning for the future.

Conclusion

Some websites rely on old technology and resources to deliver their content. In today's mobile world, these old technologies are no longer on par with consumer demand.

Responsive design adds an element of future-proofing to a website, allowing the site to expand or contract on any device regardless of the device's resolution.

Tags: Web Design