Thinking Responsively Part 1

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 at 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.

Having said that, it’s still all too easy for developers to sit back and overlook the entirely useful content pruning process that helps users determine which content to include across every display threshold; i.e. the max browser width on the typical smartphone, tablet, laptop, and desktop displays. Most folks are familiar with this concept via the name mobile first design, which purports building out your content architecture starting with mobile thresholds and working out from there as opposed to the more common method of starting big and going small.

As a result, it’s no surprise to see an opinion like the one from the article assert the misnomer that responsive design is all about serving up identical content.

But it’s high time to update the “mobile first” so to that end, let’s start calling it “thinking responsively” and since Rachel at Morikami was good enough to tip us off to the venturebeat.com article and their site is currently in development, they are perfect candidates to use for this public examination. To that end, I’m grateful for their willingness to let us use an in-development version of their site for everyone’s benefit.

Thinking Responsively About The Morikami Homepage

One of the best candidates to use for this process is some sort of popular landing page; to that end, the homepage is a good target. Most homepages are fairly straightforward these days: some sliders or a hero area, some modular content, some text and ta-da, you have a slick looking homepage! But what if you’re not using sliders to actually convey necessary info and instead rely on them more for visual impact. Do users really need that on your mobile device view (i.e. smartphone and tablets)?

What about pruning down the homepage elements to a point where you get far less content but maintain 100 percent of critical conversion elements?

Let’s take a look at the ongoing Morikami project’s homepage as an example:

Morikami thinking responsively - desktop
This is how the site looks on a standard desktop or laptop browser.
Morikami thinking responsively - smartphone01
Here’s the site on a Smartphone browser in portrait aspect ratio (the narrowest option). This is how the site looks using 100 percent of the content. Sure, the hero image is awesome, but it eats up real estate that could otherwise be used to move critical info to the site visitor.
Morikami thinking responsively - smartphone02
This is how the site looks with the hero image removed (it only took a single line of CSS to accomplish, that’s how awesome Venture is, more on the concept of ease of implementation in Part 2). Definitely better, but not quite there yet.

Morikami thinking responsively - smartphone03
Here’s a version that is closer to where we’re headed; in this variation, the search field was removed as were the text descriptions under each mission based activity promotional image.

Using the blue background image as a guide, we’re now in a position to think about how those images and related bits of copy should be designed. Think of this step as something akin to designing a television commercial; to that end, talk to enough producers and you’ll encounter many who advocate watching an advertisement with sound off in order to see if it still manages to convey the core message. If so, mission accomplished and when you apply that concept at this stage, it is a good way to make sure your homepage images and headers are contributing to positive user experience (UX) by conveying the message you need to deliver.

Consequently, if the images and remaining copy don’t convey a clear enough message, then it probably won’t take you very long to make the needed adjustments; which, in turn, carry over to the tablet and desktop versions so hooray for universally improved UX.

In Morikami’s case, they are going to think about refining the images and header content plus consider inserting a copy of the search field into their hamburger menu (adorable name, no?) so that it isn’t entirely absent from the mobile experience.

We’ll expand on this in Part 2 by providing step by step instructions on how you can apply our “thinking responsively” approach to your organization’s website.

Morikami Sketch
In the end, each stroke of the mental pen throughout the thinking responsively approach brings Morikami Museum and Japanese Gardens’ new website one step closer to maximizing UX.

About Drew McManus

"I hear that every time you show up to work with an orchestra, people get fired." Those were the first words out of an executive's mouth after her board chair introduced us. That executive is now a dear colleague and friend but the day that consulting contract began with her orchestra, she was convinced I was a hatchet-man brought in by the board to clean house.

I understand where the trepidation comes from as a great deal of my consulting and technology provider work for arts organizations involves due diligence, separating fact from fiction, interpreting spin, as well as performance review and oversight. So yes, sometimes that work results in one or two individuals "aggressively embracing career change" but far more often than not, it reinforces and clarifies exactly what works and why.

In short, it doesn't matter if you know where all the bodies are buried if you can't keep your own clients out of the ground, and I'm fortunate enough to say that for more than 15 years, I've done exactly that for groups of all budget size from Qatar to Kathmandu.

For fun, I write a daily blog about the orchestra business, provide a platform for arts insiders to speak their mind, keep track of what people in this business get paid, help write a satirical cartoon about orchestra life, hack the arts, and love a good coffee drink.

Related Posts