Responsive Design as an Expectation

Share

Tweet

by Cameron Alcorn August 6, 2014   Web Design

“Any fool can make things bigger, more complex, and more violent. It takes a touch of genius – and a lot of courage – to move in the opposite direction.”

Albert Einstein

It’s easy to create a giant, cluttered, discombobulated mass of information and content, and throw it up on to the Web. However, information and content is not consumed in bulk, but in small, tiny, bite-sized pieces. Content consumers on mobile devices need this content in even smaller, bite-sized pieces. At the very least, they need content organized in such a way that they can intake information and content without getting a headache from squinting to read full-size articles in fine print or blisters on their fingertips from pinching and scrolling side-to-side to view websites designed for desktops. Sounds like a pretty serious issue, right? Well, it wasn’t always this way.

Introduction of Responsive Design

In June 2007 Steve Jobs announced the release of the iPhone, the first widely-used touchscreen phone, which also happened to include a mobile version of Apple’s Safari browser. While, yes, there were some mobile browsers, up until this time, designing or optimizing websites for mobile devices was an afterthought, if it was even a thought. However, as the iPhone gained popularity, many smart phone manufactures, utilizing the Android operating system, followed in-suite, creating touch devices that included mobile browsers.

It was not long before browsing the web via mobile devices became commonplace. Over time, web designers began to take website design for mobile devices into account. With more than 30% of web traffic today being accounted for by mobile device users, it’s no surprise that small screens and varying device sizes have become a rising concern for web designers and developers.

At first, the most common trend was to detect what browser or device the user was using and redirect the user to a mobile version of that website. However, with the introduction of media queries, people began to see another alternative: the restructuring and redesign of a site based on device size. By 2010, this design approach had been termed “responsive design”, by web designer and developer, Ethan Marcotte, in an article published on A List Apart.

Responsive Design in Action

So, what is responsive design? In the very article in which Mr. Marcotte coined the term “responsive design”, there is an excellent analogy for this design process. In this example, one sees an illustration of a soccer team posing for a team photo. On large screens, the team is standing in one long row, whereas on smaller devices the team members begin to stack, or stand, on top of each other to accommodate the smaller device width.

 

image to display on large devices

image to display on large devices

image to display on medium-sized devices

image to display on medium-sized devices

image to display on smaller devices

image to display on smaller devices

image to display on smallest devices

image to display on mobile devices

So, responsive design is not so much the reactive approach of determining which device a user is using, but a proactive approach of having a consistent design prepared, so content will display in an acceptable manner on all devices.

The Resistance

Responsive design may seem like a no-brainer to most designers, but there are still some who hold the opinion that responsive design is a farce, a cop-out, or an over-complicated solution to a uncomplicated problem. Some of the more common reasons behind this opinion include failed user expectations, additional costs, slow loading time, and additional complexity in the design process. Seems like those are some pretty big reasons not to embrace responsive design. Let’s take a closer look.

1) Failed User Expectations

Users expect a consistent experience, which isn’t exactly breaking news. Why would a user expect that a website would display any differently on a mobile device? This must, of course, mean that a better or more optimized experience is an unpleasant surprise, right? According to some, yes.

2) Additional Costs

Responsive design takes time – it’s no surprise. When creating a responsive website, one must consider every element of a website, including overall layout, the display of content, and site navigation. For a client, this means hiring a designer or developer for additional time, which, no surprise, comes at an additional cost.

3) Slow Loading Time

Responsive design (or better stated, poorly executed responsive design) can cause a user to download more content than is necessary (e.g. style sheets, images, etc.). Thus, all responsive design is to blame for slow load times on mobile devices.

4) Over-complicated Design & Development

This may seem redundant to reason #2: Additional Costs, but it is not only clients who take into consideration extra time and effort. Many web designers consider responsive design to be a burden; a tedious part of the design process, which, if at all possible, should be tiptoed around. After all, who cares about quality? Desktop users are satisfied. If it was good enough for the 90’s, it’s good enough for today’s generation of web browsing content consumers, whose smartphones are never more than an arm’s reach away from them.

No Excuses

The time for excuses is over. Anyone who has not embraced responsive design is living in 2009 and needs to wake up. But, before making a blanket statement about how responsive design is the best thing since sliced bread, let me address each of the 4 reasons listed above for not embracing responsive design, by presenting the flip-side to each one of these arguments.

1) Enhanced User Experience

User experience is about accommodating every user or, at least, as many users as possible. Yes, consistency is important, but it does not override the need for the most optimal design decisions. As Jacob Gube, web designer and writer for Smashing Magazine, states, in an article defining user-experience as it relates to the Web:

“User experience design won’t work in every situation for every user because, as human beings, we are all different. What works for one person might have the opposite effect on another. The best we can do is design for specific experiences and promote certain behaviors, but we can’t manufacture, impose or predict the actual experience itself.”

In other words, user experience is entirely situational. To take the one-size-fits-all approach is to make a blind assumption. Every user, every device, every situation should, if at all possible, be taken into consideration.

2) Increased Value

There is absolutely no denying that a responsive website takes longer to design and develop than a website with a static design. However, how much is actually being saved or gained by creating a static website? If the bounce rate on a website is high for mobile users, that website is at a severe disadvantage, especially as more traffic begins to come from mobile devices. When paying for responsive design, a client is, in reality, paying for at least 2-3 different design variations and implementations. Unless clients are paying 1/3 of what they would pay for a responsive design, it is unlikely they are receiving that much bang for their buck by settling for a static design.

3) Faster Loading Times

Can responsive design slow down page load times? Absolutely. The fact is that poorly implemented responsive design can indeed increase loading times. The flip-side is that well-implemented responsive design can help reduce load times by removing features that are only practical to the desktop, optimizing images for mobile devices, and much more. So, there really is no reason to blame responsive design for slow load times but, rather, poorly implemented responsive design.

4) Better Executed Design & Development

Is responsive design all that complicated of a concept to wrap one’s head around? If so, that individual should reconsider his or her career path. However, it’s not that it’s a difficult concept to grasp, but that it’s a difficult task to implement it. Above all, laziness is the weakest and most pitiful excuse for a non-responsive website. A responsive website requires more time and effort, but is worth it in the long-run.

Setting Expectations

Up until this point, I have not explicitly stated that responsive design is an expectation, but, rather, shot down some of the arguments against it. So, I’ll say it: responsive design should be an expectation. If you are in the web design industry, you almost certainly know of the popularity of responsive design and how conscious web designers are of the need to optimize websites for mobile devices. In fact, there are very few individuals in this industry who would have the gall to dare criticize responsive design. That all being said, I’m clearly siding with the majority.

However, it’s not that responsive design isn’t embraced by most in this industry; it’s that most in this industry see it as an additional service. Too many times have I seen responsive design advertised as an extra; as some sort of add-on feature to a website; as something out of the ordinary. Responsive design is an essential part of modern user experience on the Web. Anyone who ignores this fact and opts-out for a static website should be banned from advertising his or her services as a “web designer”, or “web developer”, for that matter.

Takeaways

The era of static “Web 2.0” designs has ended. Gone are the days of one-size-fits-all. Is responsive design optional, or at the very least, mobile-centered design in some way, shape, or form optional? No. While, yes, there will be some exceptions, these exceptions should not serve as the rule. It’s time to raise the bar and, with it, user expectations.

 

  Comments

Written by
Business professional by day, web developer by night, when I’m not creating solutions for my clients, I’m writing or creating meaningful content for the Web.

Posted In