Responsive Design Pt. I

Hello again! It’s been almost two months since I’ve written (where the heck does the time go?!) and I’m sure you’ll excuse my tardiness when you read about what’s been going on, at least I think you will. I spent most of my summer re-designing the Morikami Museum and Japanese Gardens website. I knew it would be a big undertaking, what I didn’t know was JUST how big it would get. I literally spent ALL of my time at work, and many hours at home, molding the site, making decisions and finding solutions from May through September. It. was.crazy. Directly after that I jumped head first into helping plan and execute Morikami’s most popular annual festival. Now that I’ve got a little breathing room, and the new and improved morikami.org is live, I want to tell you all about why I think responsive design is so important, and cool, and some of the things I learned along the way. This will be a multi-parter, so stick with me!

First, let’s start with what responsive design actually is. There are a lot of pseudo-definitions for responsive web design out there, and I was just as inclined as anyone to take the first one and run. Simply put – responsive design means your site responds to the width of the internet browser your visitor is using. Whether they are on an ultra-skinny iPhone 5 (more on that later) or a super-sized desktop monitor, the site is programmed to add or subtract content, re-align columns and stack things up to give the visitor the content they need most in whichever format they choose to view it. Many see responsive as a one-size-fits-all solution that serves up identical content for a mobile user and a desktop user. Detractors would say a mobile website, or an app, are more effective tools. However, after a brief twitter exchange with our web provider, Venture Industries Online, and their principal – Drew McManus – I’ve come to see things a little differently. The full blog by Drew is here and here.  But I’d like to excerpt some of it for you.

Here’s how it started:

Here’s where it ended up:

Responsive design has been a boon for arts organizations and what was once a nearly unknown term three years ago is increasingly common; so common in fact, that the development field is beginning to distort what responsive design is all about. Case in point, one of Venture’s users, Rachel Carneglia, Morikami Museum and Japanese Gardens’ Online Marketing Coordinator, recently pointed out an article at venturebeat.com (no affiliation to The Venture Platform) titled “Is responsive design killing mobile?”

It’s a good article except for the fatal flaw of categorizing what responsive design is really all about then portraying it as a jack of all trades but master of none solution.

“The content served up to the user is the same as on a desktop site, and while they layout is organized to accommodate a smaller screen, it is important to remember that the integrity of the desktop site is intended to remain as true to form as possible and any changes to the desktop site will also affect the mobile site”

Simply put, that is categorically incorrect. The notion that a responsive site must deliver all content from each page on all browser widths is the opposite of what good responsive design is all about.

Can you see where this is going yet? While venturebeat is correct that some changes to the desktop site may affect the mobile site, it’s a little more nuanced than that. As Drew says above, if you’re serving up the exact same thing to your mobile users as your desktop users – you’re doin’ it wrong. The beauty of responsive design is that you can make text changes to a page on your desktop site and then move on with your life….because your mobile site is the same site. You can also dig deep into your google analytics and see that mobile users are dropping off your e-commerce site like flies, maybe removing that big header image would make it easier to purchase? Remove it from the mobile version, and ta-da! your conversion rate is through the roof. Responsive lets you experiment on one, without compromising the other, AND without compromising the overall consistency of your web experience.  I highly recommend reading through all of Drew’s two-part blog on this because he explains some of the more practical applications, as well as what all of this means for those looking to make the switch.

In the next piece I’ll take you through what it was like to actually make the switch to responsive design, why we did it, and why I think responsive is so important. In the meantime – got questions? Want to discuss? Disagree? Leave me a comment below!

Until Next Time,

-RachelAnn

 

P.S. A special thanks to Adaptistration for that cool sketch image of the morikami site on each device!

2 thoughts on “Responsive Design Pt. I

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s