The Vanguard View: Insight for Association Websites

On the go with your members: The case for responsive web design for your association website

Posted by Ray van Hilst on Sun, Jan 27, 2013

    

computer tablet mobileMobile and tablet computer sales are expected to surpass sales for desktop and laptop computers in 2013.  So why are you still designing your association website for only the desktop experience?

Today’s devices include a plethora of mobile devices with varying screen resolutions and just as many tablets with their own specs.   This is why the concept of Responsive Web Design (RWD) is so important.   Responsive web design changes the web experience based on the resolution of the browser and is device-agnostic.

What’s the big deal?

Responsive design is a relatively new term.  Many attribute it to an article by Ethan Marcotte on the website A List Apart in 2010. The basic principle is to develop a website so that the same base code and web content will display appropriately whether the user is looking at a website on a desktop, iPad or mobile phone.  One of the most cited examples of responsive web design is the Boston Globe website but more recent examples include the websites Mashable.com, Disney.com and Starbucks.com.

Why does this matter? Once upon a time, developers would build the main site (think “YOU.org”) and then create a separate version just for mobile devices (think “m.YOU.org”).  This works well with a small site and when there were just a few mobile devices out there. 

But what happens when your site grows to hundreds of pages and the mobile market grows to include the iPhone, Galaxy, Razr, iPad, Nexus, Surface and more?  You can’t keep building a new site for each new device.

This is where responsive design needs to come into your project plan.  But where should you start? 

Think “Mobile First” 

The mobile/tablet web is not the desktop site made smaller. Users have less time to absorb the content and need to make their decisions quicker.  Prioritize content and layout based on users’ needs.  As the screen resolution gets larger, add in other content and design elements while still addressing WIIFM (What’s In It For Me). 

Consider Context

It is important to not simply re-arrange content to fit into a device, but consider the context in which the content is experienced. Look beyond simply emulating your website across multiple devices, rather provide functionality and content to your members in a way that makes sense to the situation they might happen to be in at the moment.

An event planner might need suppliers, so instant access to your member directory on their mobile device is extremely valuable. Or a realtor might need access to a mortgage calculator more than they need access to your upcoming annual conference registration.

Consider these uses and the context in which your website will be used on one of these devices as you plan for the mobile web experience.

Plan Ahead

Building an experience for all devices takes time and requires additional effort. As you look at your redesign process keep in mind that you now need to develop at least three designs and implement them.  Yes, this will add time to your project and increase the cost. But you will now give the web experience your members expect by delivering your content on all devices.  (Plus, you’ll save time in the long run as you no longer need to maintain both a mobile and a desktop site.) 

The road to a responsive website takes extra effort in the planning and development of your new website design. But in the long run, you’ll be prepared as more of your web site traffic moves to mobile devices such as phones and tablets.  And you’ll also be prepared as new devices come on the market.

 

 

Topics: association website design, responsive web design, project management, mobile, tablets

Subscribe via E-mail


New Call-to-action

Follow Me

Latest Posts

Our Most Popular Posts

Concepts

Tools