mac

Moving Forward into the New World of Responsive Design

This year there are more people going online with their mobile devices like phones and tablets than their laptops. Already, reading and sending email, checking social media and catching up on news are as frequently done on a phone as on a computer. And these people who are most using mobile web - 25 to 44 year olds - are the exact demographic marketers most want to impress.

In addition to what technology is being used, think about how (and when) the person will interact with your website. It's rare that they will be at home, on a desktop, with no distractions. It's far more likely someone will be out to dinner, or walking down the street or stopped at a red light when they decide to open your website and see what it's all about. Today's market is information driven and revolves around instant gratification. The user experience has to be clean and it has to be easy to navigate or else that potential customer is gone.

In short, if your company's website isn't viewable from a variety of devices, it needs to change. Now.

Having been part of the evolution of responsive design over the past four years, we've seen it take its first steps, take off its training wheels off and become the industry standard. We've worked through the rapid-fire improvements of responsive design and our experience is going to put you ahead of the game.

It sounds complicated but it doesn't have to be.

Step 1. Define your goals:

What should the website accomplish? What is the most used information? Base that answer on analytics, not your gut feeling. When the user is accessing your content via a small screen, real estate is at a premium. You've only got so much space and if the user has to hunt and peck to find what they are looking for, they are simply going to stop looking.

Step 2. Concept a Style Guide:

Some people will call this "Information Architecture". No matter what term is used, it is vital to gain consensus and get approvals on how the site will resize based on different browser windows. Before any logo is dropped on a page or any Pantone guide is consulted, make sure you have a robust architecture defined. There are many online templates to help you do this but, in our experience, nothing can replace an architecture built custom to meet a project's unique goals.

When creating your Information Architecture, it's helpful to show the main landing page, a sub-page and then any page that might be of particular interest to your unique client (a registration form, a salesperson locator, etc.) Make sure to layout each of those pages to clearly demonstrate how they will function on a desktop, on a tablet and on a mobile phone.

Make sure every element is accounted for on the style guide pages. Show where the main header image is going to be. Show how many navigation buttons will be at the top. Show where the data form will be and make sure to show each field that will be on all forms. Details like that are so easy to overlook but can cause major delays and mistakes in the process later on.

Pro tip: Keep your website navigation simple and short. Just like anything else in life, 'simple' is easier to understand and will enhance the user's experience.

Step 3. Plan, plan and plan some more:

After you've gone through revisions of the information architecture, your design and development teams take over. They now have specific plans and can allot for variations in design and functionality of the site. If your teams are used to working without a wireframe and then you present them with this? Can you say "ticker-tape parade"?

Step 4. Test everything.

Any good Project Manager will build beta testing into the overall project timeline. And please take advantage of that. Hopefully, testing in different browsers (IE, Firefox, Chrome, Opera, Safari) is de rigueur. Now, you have to add on to that list - test using iPhones, Androids, iPad Minis, etc. If you're a small business, you may not have the resources to buy all those products yourself. If so, just smile nice and ask your employees and co-workers to chip in with their personal devices.

Testing responsive designs is more than just making sure the brand standards are met. Make sure the contact form works on an Android phone. Make sure your iPad lets you select the state name from the dropdown. And so on. It's all about the details - functionality QA can make or break a project.

Step 5. External beta testing with your client:

Once your internal testing phase is complete and any issues are addressed, prepare a QA test plan so your clients will understand how the site functions. From there, let them see what they can do to break it! Some of the most valuable insights come from people who don't know the thought-process behind how you constructed the site. They just know how they want the site to work and, if it doesn't, this is the time to know about it before the site is made live.

In addition to your direct clients, engage a slightly larger group of stakeholders - those who will be power users of the site - to be part of the initial beta testing of the site. Make sure that this group accurately reflects the characteristics of the general target audience so that their feedback will serve as sample data.

There are so many reasons (and methods) to conduct beta testing but take it from us, this is a step you can't skip. The honest feedback of real people using the new site in real situations is essential.

Don't worry - it's not an imposition - people love to have the inside scoop and be selected as part of the initial roll out.

Pro tip - Set up a clear system for providing feedback. Give your clients parameters for submitting feedback and make sure they provide a link to the page in question and which browser/device they are using.

Step 6. Make it live:

After you've worked through the QA test plan and have addressed all the issues that arose it's time to make your responsive site live. One thing we have learned from launching responsive sites - schedule a meeting with your client (and key stakeholders) to show how the site functions on different size devices.

Also, make sure you point out how differences in design and functionality were implemented to support the original goals of the project. That will go a long way towards easing everyone through the transition to a new site and will provide the talking points your clients need when they are showing the site to their customers.

In Summary

Responsive web design is the industry standard. Non-responsive sites are outdated and, by proxy, consumers will view your company and products as being outdated, as well. Although responsive sites require more planning than a traditional website, it benefits your customers and, therefore, benefits your business.

Need a little inspiration to get started? There are several award-winning sites that will give you the motivation you need. And, of course, let us know in the comments if we can help answer any questions.

It's not magic. It just looks that way.