Responsive Design Pt. III : Getting It Done

The long-awaited (and I do mean long, oops), much-anticipated part three of the responsive design series I’ve been working on is finally here! Let’s dive right in…

Get Organized

The first thing you want to look into when you start work on a responsive site (or any project really) is how you are going to communicate about it, where all the “stuff” is going to “live,” and how you can keep it all organized. This is why I can’t recommend enough a project management application of some sort. Whether it’s web based (as most are now) or software based, invest (or look for a web vendor who does – like we did) in this tool. It will change your life. I mean it. Gone are the days of long email chains that get caught between one inbox and another, lost in the shuffle when someone doesn’t respond to the latest comment, etc. etc. I personally really like basecamp because it’s super easy to use and has a bunch of cool functions like file uploads, to-do lists, discussion threads, the ability to include (or dis-include) certain team members on pieces of the project, and a bunch of other great features – all in real time. This will save you time and sanity.

Clean Up

This piece of the puzzle can be done at the same time as a couple of others, but it still needs to happen early in the process – clean up your content. Go through every page of your site and decide if you still need it, if it needs to be updated, if it can be consolidated, and how it will fit into the new site (and – more importantly – your visitor’s experience.) One of the mantras in our office is “the website can be as robust as you want it to be,” meaning, add as much content as you like to your area of the site so that we don’t have to print it. In an effort to cut down on expensive print pieces this has been a really effective strategy, but when it comes time to figure out what’s moving, and where, be sure that the content you are offering is still valuable, as well as accurate. You don’t have to do this alone, and you probably shouldn’t. Ask everyone to go over their section of the old site and be 100% sure it is up-to-date, valuable information. Once that’s accomplished you can clean out information that is no longer relevant or useful, collect the newly updated info, and find the right spot for the rest, say, an archive?

This will also be a good time to decide on how you want your site to be used. Should this be an archive of every event, program and product your organization has ever produced? Should it be a place for people to find information quickly? Should it be a place for people to do in-depth research into your industry? If it’s a combination, be sure to prioritize those goals and plan storage, site navigation and architecture, and future areas of growth around those priorities. These decisions will also guide how you re-apportion the old content once it’s updated.

Brand It

This is probably my favorite part – creating a look and feel. This is the part where whoever is working out the creative and visual aspects of your site should be asking you about the character and personality of your brand. We already talked about hiring a web vendor you trust, and this is one of those critical areas where your vendor should be taking your ideas and turning them into gorgeous layouts that work. Just because you want to have a huge gif of a man shooting bananas out of his nose (because you’re a FUN banana company) in the background of every page does not mean that it will make for a good user experience. Your vendor should be guiding you toward beautiful ways of making things easy for your site visitors. It’s helpful to show your vendor sites you like. Be specific about the aspects you want to see replicated. Do you like their color palette? The way their buttons look? Is there some kind of functionality you want?

When it’s all said and done, the look and feel of the site should match the personality of your brand, and make people think of whatever values your brand stands for.

Frame It

Once you have a solid foundation forming on the visual side of things it’s time to start thinking architecture. No skyscraper could stand without the steel girding, and no person could move without a skeleton. Similarly, the navigation and architecture of your site make up the framework you’ll need to build something great. For us that started with navigation. If you’re anything like us, you don’t want to re-invent the wheel, but you are excited by the opportunity to shake things up. That’s why we started with our existing navigation, and then turned it, flipped it, spun it around and tried to see it from every angle. We finally settled on the idea that our outside users didn’t necessarily see us as the compartmentalized departments that we thought of internally. So, restricting some content to the “education” drop down, and other content to the “events” drop down wasn’t going to cut it. A good way to start is to ask yourself where you’d look for something on your site if you didn’t already know where it was. In short, organize your content and navigation like a user, not a staff member.

The other big issue we faced was the challenge of a mega menu. If you haven’t seen one before, a mega menu is a large drop down that lets you see a bunch of associated links at once, rather than organizing things into parent>child>grandchild lists that end up getting stacked over and down forever. It was a challenge for us to marry the new technology to an older way of organizing. What we ended up with was a hybrid of both where each column of our “child level” content is organized into what would have been a single drop down in the old style (and we’ve got “grandchild” links listed below), but it’s all under one umbrella, or what would have been a single “parent” before. The difference here is that the “parent” serves as a wider category for all of the things you’ll see in that section, but you get to see and choose from all of them at once.

Another consideration while you’re framing is what kinds of way-finding technology you’ll be using. Our wordpress site allows us to create a single page with multiple tabs that display only the content you put inside the tab tags, sort of like dividers in a binder. What we didn’t realize, until pretty late in the process, is that if you have a link to a specific tab in your main navigation, and you want to click on a link in the main navigation to a tab on that same page….nothing happens. As it turns out, that’s because the system is reading that you’re already there – because you are on that page. This caused considerable heartache for us, and I can’t emphasize enough how much trouble and double work I would have saved myself if I had asked more questions and taken a little more time to understand (and explain) the tech I was employing.

There are a lot of other options for navigation you should consider too – things like buttons and plain links are some basic options, but there are also breadcrumbs that let you see where you are in the navigational levels, and sidebars with mini versions of your main navigation tailored to the section of the site a user is on. Keep your options open, and ask your web vendor to walk you through the benefits of using one vs. the other.

Lastly, take care of the orphans. Orphaned content is anything you can’t get to using the main navigation. (Side note: some say it’s anything that isn’t linked from some other page on the site. I think that’s generous from a user experience standpoint because if I have to click more than a couple of times to find it, I’m going to leave your site….. just saying). This was another big hurdle for us. Our old site was positively lousy with orphans. We had content 3 or 4 pages deep and no way to get to it other than a labyrinthine series of clicks. So, when it came to building the new content we tried to keep that top of mind. If the content is important enough to have on the site, it’s important enough to help visitor’s find it.

Think In 3D

Now we get to the meat of designing responsively – actually creating a responsive site that makes sense on mobile, tablet and desktop. I’ve heard people say designing a responsive site is thinking “mobile first,” but I don’t completely agree with that. When you are designing a responsive site you should really be thinking in 3D – meaning every idea should be run through your “how does this work on mobile/tablet/desktop” filter before it’s set in stone. Thinking mobile first is really creating a mobile site that happens to work on a desktop. Our goal is to create a site that works elegantly on all three platforms (or four or five as the technology grows.)

My best example of thinking in 3D was when we were incorporating our mobile guided tour. used to take you directly to the mobile guided by our third-party vendor, but when we started designing responsively this made less and less sense. If you’re on a desktop and you visit you want to see something tailored to you and your screen. The same is true if you’re on a tablet or phone. Instead of sending visitors directly to the tour that page has a short explanation of the tour (for desktop users) and a big button that takes you to the tour (for mobile and tablet users). While this adds an extra click, it allows us to offer ALL of our users something that makes sense for their platform. The idea of tailoring the experience to the user isn’t new, and we could certainly go further to offer tailored content, but this is a solid first step.

The other great thing about designing responsively is that there are endless options when it comes to offering your site visitors a good experience – I’m talking about thresholds. When you set a threshold for your mobile users you can tell your site to display, or not display, certain pieces of your site based on the screen size or browser width of the user. For us that meant getting rid of the hero image at the top of the homepage (because a horizontal image look s great on a big screen, but gets squished into insignificance on a phone) and bringing them straight to the main content of the home page. We also set our mobile menu to kick in on a tablet held in portrait mode, but the full mega menu shows when the tablet is in landscape. These types of tweaks are the heart and soul of designing responsively, and the best part is – changing them is incredibly easy when you build it right.

Test, Gather Data, Adjust

The last phase – and the one that pretty much never ends – is the testing phase. Because it’s so easy to make adjustments to things like your mobile thresholds you can adjust to your heart’s delight. Create a heat map, check out your analytics, and make informed decisions based on what the data tells you about user behavior. Things might be challenging at first, there will be little bugs, unexpected kinks and just plain-old, change-averse users. I speak from experience when I say it can be frustrating, confusing and downright hard, but the challenge of this process is what’s so interesting and exhilarating. Keep at it, stay positive, and have fun!


That about sums it up! If you’ve gotten this far – snaps to you – I hope you found some useful info. If you’ve still got questions, leave a comment or catch me on twitter @rachelanndesign. I’d love to hear about your challenges, insights and ideas!

Until Next Time,