It was last night when I was on the couch with my iPad mini in hand, pinning away DIYs and vegetarian recipes on Pinterest, when a picture of lollipops dressed as ghosts lead me to MarthaStewart.com. I clicked on the image and arrived on the site, but it was not what I remembered. As a usability researcher, I knew exactly what was going on - large pockets of white space, difficulty finding the navigation menu, Martha had gone RWD! *The site did feature a responsive homepage earlier this year, but it looks like all content pages have now been converted to responsive designs.

MarthaStewart.com is currently running a beta Responsive Web Design (RWD), which means that the site can offer the same content on any device, any screen size, and it will adjust accordingly. RWD is a relatively new concept in terms of web design; you can learn more about it on a previous blog post that my colleague wrote. What’s important to know here, is that RWD can result in a beautifully efficient site that seamlessly delivers content to the user across devices without any sacrifices. Websites that are not using RWD often curate content specifically for their mobile site, causing frustration for some users who seek the “full” site experience. As with all new things, there is a bit of a learning curve. In this case that applies to both the web designers and the users.

On that note, let’s take a look at the new Martha Stewart responsive website. For this blog post, we thought it would be fun to point out some of the key differences between the old site and the new responsive site. We would love to hear your thoughts and reactions to the new design, so please don’t hesitate to leave a comment.

MARTHA GOES RWD!

Let’s start with a side-by-side comparison of the old homepage and the new homepage. At a glance, we first notice that the overall color scheme has transitioned from shades of blue and greens, and orange to a more minimalist look that is mostly white with touches of grey and green. We are seeing less use of borders, bullet points, and left-aligned text on the new design.

Now let’s take a closer look at how Martha’s team dealt with the navigation. When moving to a RWD, navigation is one of the most challenging obstacles. Mobile web designer, Brad Frost, put together some great examples of responsive web design navigation styles, which you can look at here. Below shows the old navigation and how the architecture has changed:

• “Food” turned into “Cook”
• “Crafts” and “Home & Garden” are now found under “Create”
• “Entertaining”, “Holidays”, and “Weddings” are now rolled up under “Celebrate”
• “Weddings” also lives on its own tab in the primary navigation

Please note, that there are a few areas of the site we were unable to locate on the new site, including “Pets” and “Whole Living.”

Now as I mentioned before, I was on my iPad mini when I first explored the site; here’s a snapshot of what the site looks like on that device.

Overall, the site looks great on the iPad Mini. My only complaint is that the line items are a little narrow and it is easy to click the wrong one, even with my tiny little fingers! The dropdown arrows make for an even smaller target; let’s just say that the menu is not “fat finger”-friendly (NN/g talks about “fat fingers” here).

Lastly, I would like to share just a few more screenshots of the content experience so you can see how Martha’s team has optimized the experience to further encourage social sharing on sites like Pinterest.

Notice the in-page navigation, which allows users to click to certain areas of the page vs. forcing the user to scroll.

We are looking forward to seeing what changes Martha’s team makes to the beta site, and hope to see a new and improved RWD from them soon!

Not too long ago, websites were tested solely on a desktop computer. Now we are often testing websites across many devices including desktop computers, laptops, tablets, and an array of mobile phones. As screen sizes proliferate, how does a website keep up? That is where Responsive Web Design comes in to play. Responsive design is flexible and adjusts to any screen size by using media queries to figure out the resolution of the device it is being accessed on. The content will always be the same, but may shrink when accessed from devices with smaller screens.

What’s the big deal?

Despite Jakob Nielsen’s argument, the evolution of smartphones and tablets has left many sites feeling outdated. Not only do these limited functionality, mobile-only sites now seem obsolete, they are also trapping users in an environment that makes completing a task online confusing or impossible.

From this perspective, RWD becomes a no-brainer; do you want to limit content and functionality or, provide a consistent brand experience regardless of the device used to access the site? Additionally, how do you keep up with the mobile device explosion? Resolutions and device types continue to change and broaden. Iterating designs for each device or screen resolution would either be an endless game of catch-up or next to impossible to do. An RWD approach currently offers the best solution to these problems. When executed properly, a responsive design will work seamlessly across all screen types and, as a result, make updating content a snap. However, as many design teams are less experienced with the new fluid grids and all-in-one approach, there are often some usability hurtles to overcome.

Below are some of the most common usability issues we have seen when testing Responsive Web Designs (RWD):

1. Many feel that design RWD design should start with the mobile experience, but this can lead to a less than satisfying desktop experience.

While RWD lends itself to a simplified design style that maximizes flexibility, the mobile-first focus can lead to a desktop experience that does not seem as robust in comparison to user expectations. Users can find the scaled-back design lacks the professional feeling they seek in order to trust a website or work effectively and efficiently with what they expect from the brands they know.

While many designers do not want to “hide” content on smaller screen resolutions, there are times when this approach makes the most sense, for example, to achieve a complete and professional desktop experience.

The Boston Globe website handles this issue well; the site displays additional menus and graphics on the desktop version, but hides them on the mobile version. This gives the best possible experience to the user regardless of how they access the site.

2. Device-specific conventions do not always make sense outside of that device.

The settings menu is a prominent example. While the convention of a gear icon is easily understood in mobile, it is not conventional within the desktop experience. Even some experienced mobile users are unable to find and expand a menu using this icon from the desktop. Unlike on the desktop, users can easily find the icon within the mobile experience; therefore, context matters. For example, an icon with three horizontal lines indicates it is the menu. However, while many users may intuitively identify and understand this icon on a mobile device, they may not necessarily be able to do the same on the comparable desktop version.

Starbucks is an example of a navigation menu done right. On the desktop version, a traditional horizontal navigation menu drops down and displays subcategories. This dropdown allows for quick navigation to lower level pages of interest. The menu moves behind an easily recognizable icon when the site is resized. Here, it becomes a streamlined version of the menu with only main level categories available.

This example from Sony is an even better example. On the mobile version, they use the word ‘Menu’ as the icon label making it even easier for users to find:

3. Usability guidelines apply regardless of how users enter the site.

While we have covered basic usability guidelines before in our blog, it is still important to apply them to new designs as well. In fact, it may be helpful to revisit them to ensure users can adjust seamlessly to the new versions of your site. Here are a few places where usability principles are not being applied in responsive designs:

Disney’s website is an example. Regardless of how you enter their website, it is easy to get lost once the menu is opened. On the desktop, it drops to cover the page whereas on the mobile, it moves to the left to accommodate the menu. Again, the menu gives no indication of one’s location on the site. Also note here that we lose the site logo and therefore the visibility of the brand.

Grey Goose is another example of a site that does not adapt well to mobile. Sure, this looks like an elegantly designed website; however, when viewed on mobile devices, it lacks the ability to navigate between the main stories. To boot, the page break makes it unclear that stories are available below the fold. Unfortunately, as a result, many users may miss the gorgeous photography beautifully displayed in the desktop version:

While Crayola also designed an excellent responsive site, they forgot to speak in their customers’ language. For example, labeling their ‘Main Navigation’, just that – is not a particularly customer-friendly way of talking to consumers:

Many RWD with clear call-to-action buttons often mistakenly place this vital part of the page below the fold on smaller resolution screens. For example, Burst Creative’s site has their ‘Get Started’ button front and center on the desktop layout; however, for those accessing the site via mobile, the call-to-action is at the bottom of the page.

Now, compare Burst Creative’s site to Lanyrd.com, where the call-to-action always remains above the fold. The World Wildlife Federation (WWF) site is another example where the key calls-to-action, “Donate” and “Adopt”, always remain visible at the top of the page. These two buttons stand out on both designs and are never collapsed or deprioritized on the page.

As shown in these RWD example websites, if you keep basic usability principles at the forefront of your mind when designing your site, it can offer an excellent and consistent experience for your users. Tell us how you feel about responsive design. Are you considering it for your site?