A Case Study In The Value Of Responsive Design

by
LinkedInCopyPrint

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

Get Into The Responsive Groove

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.

Thanks to the folks over at The Lost Colony for letting us use Psychopath: Haunted Island for today’s example.

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.

View all posts by Drew McManus | Website

LinkedInCopyPrint

Related Posts

9 thoughts on “A Case Study In The Value Of Responsive Design”

    • Actually, disabling JavaScripts in your device browser has no impact on responsive functionality. What I believe you’re referencing is how doing so impacts the functionality of specific design elements such as the image slider.
      Moreover, disabling JavaScripts in a mobile device is a method from the pre-2010 era to control data usage as most high speed cellular service areas were still comparatively limited. Anyone genuinely concerned about security should simply use Apple products or install a product such as Norton on their Windows OS powered devices.
      But more to the point, the elements impacted by disabling JavaScripts are commonly disabled manually in the design process at browser widths tablet or Smartphone thresholds. Alternatively (and the option I recommend more often than not), the issue is best addressed by content planning; meaning, don’t put critical info in those elements.

    • It sounds like you’re the sort of user that makes a number of custom changes to browser and OS configurations and settings which means web based user experience for all but the most rudimentary site designs is greatly diminished. And since you’re not an Apple user, my advice is simply trust the solutions from the leading security software providers. Moreover, providers like Google (and even most browser providers) regularly monitor sites for malicious scripts and will warn users if they inadvertently stumble upon a site that is unwittingly compromised (web users who have seen this know what I mean).

      In the end, relying on deactivating something like JavaScript as a first line of defense strategy for web browsing security may be more of a negative ROI than taking advantage of one or more numerous high quality security solutions available and making sure your browser is always up to date.

  3. Responsive design is awesome! It means more work upfront, but is SO much easier to maintain. Plus, it doesn’t use javascript at all. It uses CSS and something neat called media queries. The CSS detects the size of your browser window, and adjusts your website accordingly.

    • That’s correct and for those interested in diving into the deep end of the geek-speak pool, here’s a good overview.

      I would say that for some groups, the costs may not be any more upfront at all; especially if they were already putting a good bit of resources into several device specific mobile ready designs and/or platform specific apps.

      The one big change I’ve observed with clients is getting used to approaching the entire design and development process from the mobile perspective instead of treating everything as a mutually exclusive elements.

      • Exactly. I love that responsive design means you don’t have a separate mobile website. That alone is invaluable in making sure the correct information is always there.

  4. Making your website device agnostic is crucial nowadays. Most of our customers include this as one of the main requirements and it’s not hard to understand why. Since mobile devices are very (increasingly) popular as a way people use to surf the web and buying from the internet. Thanks a lot for a great post.

  5. Pingback: What Everybody Ought to Know About Page Load Speed | Adaptistration

Leave a Comment