Green

Tuesday, May 28, 2013

A Case Study In The Value Of Responsive Design

In advance of the responsive orchestra website review later this week, it makes sense to provide a working example of not only what responsive design is, but why it is a necessary component for contemporary performing arts org web design.

In order to get a really good idea of just how effective responsive web design is at producing both desktop and mobile versions of a website via single source contact, take a look at a psychopath; or to be more accurate, the Lost Colony’s Psychopath: Haunted Island website.

In 2013, Venture Platform user The Lost Colony decided to launch a new fall attraction and needed a simple micro-site to help promote and brand their outdoor haunted trail, which features special effect lighting, animation, and live actors.

The end result was www.hauntedisland.org; the entire project cost less than $500 and took 13 days to produce an incredibly tap-friendly site that works equally well on Smartphones, tablets, laptop, and desktop browsers. Everything a site visitor needs to know about the attraction, right down to a button for ordering tickets, is on a single fast loading page.

When was the last time you heard about a project that took so little time, at that price point, and produced such a powerful user friendly end result that works across all platforms? That’s what responsive design is all about when implemented properly.

Here are some actual screencaps from this project on Smartphone, tablet, and desktop browsers.

mini-ipadsiPhonesDesktop and Laptop

If you don’t have a Smartphone or tablet handy, you can still get a good sense for how responsive design works by resizing your browser. Try this:

Open another browser in a separate window and/or screen and head over to http://hauntedisland.org/.Minimize your browser window.Drag the window so the browser width gets smaller or larger.Keep an eye on the page elements while you’re dragging, do you notice what happens to elements like the slider text, which moves below the slide image on narrow browser widths (i.e. Smartphone) then back to the image overlay position when the browser is wider (tablet and desktop widths)?Same thing is true for the purchase tickets button which is located to the right of the related text on wider browsers but moves below on narrow widths. And keep an eye on the line break points for all text based content.

Or just sit back, relax, and watch this screencast video.

Yes, it was fun to put an upbeat tune behind a demo featuring a scary, thriller style design.

In the end, this case study provides a better understanding of not only what responsive design is, but how it works and how you need to begin thinking about incorporating it into the very first steps of your design process.

"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, and love a good coffee drink.

View the original article here

0 comments:

Post a Comment