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!

Tags: Industry Example, navigation, Online Trends, Responsive Web Design, RWD, usability, ux

This entry was posted on Monday, September 16th, 2013 at 12:24 pm and is filed under Online Trends, Responsive Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.