Articles

Why It's Time to Consider Responsive Design

Blog-mobile-mainimage

When I think about how I accessed information five years ago, it's hard to believe how much my behavior has changed. I now carry a powerful computer in my pocket that keeps me connected to the information I want anywhere. And I'm not the only one, as of 2013, 33% percent of Canadians own smartphones and 60% use them to access the internet daily. (Source:http://services.google.com/fh/files/blogs/our_mobile_planet_canada_en.pdf)

But the smartphone isn’t the only new device. Between work and home, I access information on tablets, iPods, laptop computers and home entertainment devices like my PlayStation and Roku. I've come to expect the information I want, anywhere, anytime and on any screen or device.

So what does this mean for your business? You should start thinking about making your website accessible on an ever expanding variety of devices and screens.

But People Don't Like to Browse on their Mobile Device

You may assume that people don't want to browse the Internet on a small screen as they won't get the full experience they are used to on a desktop computer. But the convenience of accessing information, the core reason a customer goes to any web site, outweighs old habits (desktop use) and expectations for what a website should be.

As device capabilities have grown, less traditional computers are being purchased. Instead we're buying phones or tablets that enable more convenient access to the Internet everywhere.

The Solution for an Explosion of Access Points

Responsive design is a maturing technique that allows a website's content to be presented in different ways based on the device the customer is using. The technique was introduced in May 2010 and has rapidly evolved to become the leading standard for today's website design.

Mobile Main Jaj
Responsive website designed by Eyelight for John Anthony Jewellers.

Instead of designing and programming a website and native apps for IPhone, Android, tablets and game consoles, we can use responsive design to build one website that adapts to any existing and future device that has a web browser. This is not to say there isn't a place for native mobile applications. However, if you are building a traditional B2B or B2C content based marketing site, a responsive design is probably the best approach today.

Examples of Responsive Web Design

Take a look at each of these sites on your mobile device and desktop to see how they present the same content and design on different platforms. If you're browsing on a desktop and don't have a mobile device handy, you could resize your browser to see how it reacts to different screen sizes.

Mobile Bostonglobe
Mobile Starbucks
Mobile Bbc
Mobile Mashable
Mobile Microsoft

How Does Your Site Stack Up?

Open up your website on a smart phone, tablet or iPod and consider a few things:

  1. Is the content easily readable or do you have to zoom in to read? If so, do you have to pan around to see the entire page?
  2. Does your content communicate who you are and what you offer within first glance or do you have to scroll around to find that information?
  3. Does the website have a professional branded appearance that matches your company?
  4. Does your key content answer questions that people have about your company, products or services?
  5. Is the site easy to navigate? Since there's not as much screen space on a phone, different navigation patterns are often needed.
  6. Does the website offer all key content? Don't assume that someone on a mobile device is only looking for contact information. I often download full product manuals when trying to repair things. Sometimes this takes place in the garage or on my deck.

If your answers to these questions are mostly no, you probably need a responsive redesign.

I’m Convinced, Now What Do I Need to Know?

Building a responsive site is different than building the sites we've been building for the past decade and a half. Naturally, there are few things to consider:

Development Cost

Responsive sites are cheaper than building a website and multiple apps for all of the different devices mentioned above. But they’re more expensive than a non-responsive website. Why? More thought has to go into the design to make it adapt and present a usable experience. More time goes into strategy, programming and testing too.

Efficiency and Maintainability

Since there’s only one site to maintain, content is entered once, there are fewer bugs to fix, and adding a new feature or piece of content later will mean less work and expense. With one platform you can put more effort into making it the best it can be.

Visual Design

Designers have less control over the design in a traditional sense. Since we're developing for hundreds of screen dimensions (many of which we don't know about yet) the design will not look the same everywhere. What's important is that the content is readable, the site is easy to navigate and your brand is presented in a consistent, professional manner.

Focus on Content

With less on-screen space to work with, it's more important than ever to put content first in the process. Designing with ‘lorem ipsum’ placement text was never a good idea; it's an even worse idea now. Any good design firm should be working with you to define and enhance content to meet users’ needs and business goals before visual design is ever started.

The User Experience

One of the main benefits of responsive design is that we can make the site easier to use on a mobile phone or tablet. A small screen comes with some challenges, less space to present content. Less room for superficial fluff that departments wants to feature on the home page. This is great for potential customer whom really just want answers to their questions.

Interacting on a mobile device is different too; we've grown accustomed to using the keyboard and mouse to navigate with pixel precision. Interactions that are standard on computers like hovering over a button to reveal a drop-down menu won't work, instead we need to make those interactions touch or click. Of course when the drop down appears, we need to ensure there’s enough space to display it. This is just one example. Many of the elements that make up websites like image galleries, videos, forms, tables, light box windows and the layout of content need to be given special consideration.

Media and Bandwidth

Plugins like Flash that have been the standard for animation, interaction and video are quickly loosing favor as they don't work on many mobile devices. New web technologies have come along to replace these. But Flash is not the only thing we need to consider. Images that are used for desktop layouts are larger than they need to be on mobile devices. Forcing the user to download these on a slower mobile connection degrades their experience. Serving these users smaller or alternative images is a good approach.

Experienced Web Professionals

Considering that your website is the public face of your company and first contact point for any interaction, you want to put your best foot forward.

Visitors shouldn’t have to figure out how to use the site and jump through hoops to access the information they came for. A site that is specifically designed to take advantage of the screen size and touch interface improves the experience that a customer will have with your site, brand, product or service.

An experienced designer will take all of these things into consideration ensuring visitors needs are met.

Responsive Design – It’s a Good Thing

People are learning about products and services in more places and on more screens than ever before. A website that is accessible on any device that customers are using can only be a good thing. If you are considering a new site or redesign in 2013 you absolutely should include responsive in the requirements.

Convinced that a responsive website could help your business? We'd love to talk.

Ready to discuss a project?

GIVE US A CALL TOMORROW 519.743.2600OR Tell us about your project

Tell us about your project:

Not sure where to start? Check out these suggestions.