Responsive Web Design for Your Business

Wednesday, May 29th, 2013 at 7:10 pm

One of the web’s hottest trends over the past few years is responsive web design (RWD). Over and over, as a business owner you have probably been urged to make your website accessible to mobile phones, and perhaps you have begun to equate the two. After all, both internet browsing on cellphones and RWD seem to have risen at the same time. Unfortunately, that narrative isn’t quite right. You business should still (strongly) consider taking your web presence in a responsive direction, but allow me to explain the reasons why in greater detail.

First, A Short History Lesson

The web in its original conception had no real form, it was merely a jumble of text with hyperlinks dotted in between. It was fluid, meaning it was agnostic to the size, shape, or capability of the device that was viewing it; content reflowed to whatever was the size of its container. The content itself had to provide visual interest, perhaps, that was why blinking text, animated marquees (text that scrolled across the screen like a stock ticker) and nauseating animated images were so popular (see this list from Web Pages That Suck).

Not long after “table” based layouts became popular. Their breakthrough contribution to the web design world was the ability to position elements anywhere on a page. Moreover, these layouts also benefited from a structural fluidity, much like the early web. Suddenly web pages began to take a shape and have personalities distinct from what their content alone could provide. Alas, this technique was, like many of the techniques that would come after, a hack. Tables, like you find in your favorite word processor, are meant to display data and not to position and style elements on a page.

The next layout hack that would gain popularity rested on a property meant to align images while having text reflow around them. This technique removed the mess of having an innumerable number of nested tables on a page, making it so much easier to restyle and reposition elements on a page without starting from scratch, but sacrificed the ease of making a fluid website. In the pursuit of crafting “pixel-perfect” websites that looked exactly like their counterparts in Photoshop, designers began to create fixed width designs. This meant that to properly view a website whatever device you used to browse a site needed to have a screen larger than whatever the base design was set to.

The mobile web during this latest period was fledgling, at best. Mobile browsers, truthfully, browsers on any device besides a desktop or laptop computer were incapable of rendering even a small percentage of these features. As long as your website was not overly convoluted with tables or required any sort of black magic (like javascript, gasp!), then the content would render (sans layout) just fine. The capability of these devices simply could not render the “real” internet, so hardly anyone tried.

Skip forward to 2007 and you can begin to see the problem.

With the arrival of the iPhone and other world class cellphone browsers thereafter, the mobile web went through a momentous change. Suddenly phones could peek at an internet that was (currently) hostile to them. Websites were simply too big to fit on these small screens and provide a comfortable experience.

As a reaction designers and developers made “mobile” versions of existing websites. Typically, these are one-off versions of websites, targeted at a specific sized device (usually for the iPhone due to its explosive popularity) and often with a watered down feature set, because really, who wants to do everything with a phone?

The problem with this approach was quickly exacerbated by the launch of new classes of devices, like tablets, huge phones, smart watches, smart TV’s, and even the smart fridge, all of which had different sizes and capabilities. The common thread among all of these was their ability to display the “real” internet. This time, targeting one popular device wasn’t going to cut it.

Responsive Web Design

Responsive web design goes beyond the targeted approach by taking the web back to its roots as a fluid medium. Responsive web design (RWD) does not entail picking the two most popular screen sizes and cutting your losses, rather it means being open and viewable to all regardless of what you choose to view it with. That said, RWD does not have the same limitations that web design did nearly twenty years ago.

Instead of creating new fixed width designs for certain screen sizes the design remains fluid but at certain points in the spectrum (breakpoints) the layout can reflow to better suit the size of the screen. It doesn’t stop there either, RWD is not just a new way to handle layouts, it is an underlying philosophy that seeks to be accommodating to any device, from a monster 30″ desktop monitor with copious bandwidth to an old Nokia cellphone connected to a cellular network. Thus, the design community is starting to see new initiatives for the appropriate treatment of images, video, and other specific features (e.g., GPS and accelerometers) being worked into the fold.

All of this work goes into making websites accessible to everyone. This means that regardless of the viewer’s context, they are able to, buy your products, interact with your brand, or get whatever information they need. Instead of cutting and hiding features, arguing that users don’t really need them (when actually whoever is in charge just doesn’t want to put in the effort), they are re-imagined for all screens.

In my opinion, it is what the web was meant to be. We are only just coming to realize it with today’s technology.

RWD for Your Business

There are fairly obvious benefits to your business by choosing to create a web presence that features a responsive foundation. First, the rise of mobile web use is sky rocketing (see this prediction for 2015) and therefore, many (most?) of your users are going to be visiting via some other device, whatever it is, other than their desktop PC. Second, while no design could ever be entirely “future proofed”, RWD can provide a solid foundation that resists being outdated by a change in consumer electronics trends. Finally, by trying to consider the best possible experience across a spectrum of viewing contexts your brand’s message comes across clear without any frustration.

To be fair, there are a few downsides to this approach that need to be considered for your business’s circumstances. Namely, the level of commitment you are willing to put into your brand’s online presence. This approach, while in my humble opinion is better for everyone in most circumstances, requires a lot of consideration and creative problem solving; thus it requires a high level of expertise and more time to execute correctly. All of which may be asking a lot if your project is of limited importance to your brand or simply doesn’t fit your objectives.

If your business is running a one-off or short run campaign whose requirements do not entail broader reach, then be flexible and ask your team about alternatives. However, if your business is looking to make a mark and attract the right customers, no matter which device they use to find you, then you should consider RWD for your next project. And, if you need experts who understand this new era of design, then get in touch with us at Trends Mobile & Web Solutions.

Further Reading:

Technical Resources: