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