Blog

Hey there and welcome back to our series, The Best Stuff on the Web, in which we break out our plumber's tools, make sure our belts are nice and tight, and inspect that series of tubes we call the internet to find the greatest stuff (best websites, most innovative designs, coolest features, most mind-blowing [insert awesome thing here], etc.) we've seen this year.  While our last entry celebrated the second coming of the zoetrope vis-à-vis the recent web trend of parallax scrolling, this time around we're looking at parallax scrolling's spiritual companion: the supertall, single page website.

<!--break-->

To anyone even remotely paying attention as they journey the web, the tropes  and bludgeoningly repetitive motifs of the standard website should offer no surprise: homepage, main menu, interior page, blah blah blah.  Yawn.  After having seen myriad pages use the same layout, design metaphor, and organization, we're fairly confident that though the general public may appreciate the consistent, familiar nature each new website brings, there are very few experiences to be had that are actually interesting.

A lot of this likely stems from the SEO explosion that happened over the last decade.  In a (merciful) response to the single-page Flash "experiences" of the 90's, Google worked with the web community to establish an evolved way of thinking of content on the web: create deep, content-rich, keyword-targeted, Flash-less experiences across numerous pages and expand your potential to capture search traffic.  And so, as Google's stock price climbed higher and higher into the sky, so too did the average number of pages of the modern website.

Truth be told, we can all probably agree it was nice getting from a Google search to the hours of operation page for our local coffee shop, the menu page of our local sandwich joint, or the history page for that famous pastry place we'd heard about (noticing a trend there?  Psh, we know you're a foodie too).  But all-too-quickly, "helpful, content-specific page" theory turned into "create as many pages as you can muster" theory, and websites, not to mention our web searches, became cluttered by needlessly complicated structures, half-baked content, and a hell of a lot of white noise.  To those keeping score: more in fact is sometimes less.

Enter the supertall, single page site.  Imagine a website with every page of content crammed onto a single page.  No dropdown menus.  No sub-pages.  Just a unified, one-and-done experience that breaks the confines of the traditional "page" paradigm.  Think that sounds crazy?  We think it's bloody brilliant.  Why?  One word: the-death-of-the-click (okay, that wasn't one word but sue us - we hate clicking just to get a bit of content and you should too).  That said, here are some examples of excellent supertall sites from our collective recent memory:

Skittles

Widely known for their trippy ad campaigns, Skittles is one of the modern kings of breaking the marketing mold.  A few years ago, the Skittles website featured not a homepage, but distinct widgets featuring content from Facebook, Wikipedia, YouTube, etc. that would pop up and vie for your attention.  Pretty cool if you ask us, so it should come as no surprise that their latest website similarly breaks the mold in the latest (albeit less groundbreaking) trendy fashion.

Featuring bold fonts, a sickeningly sweet rainbow palate, aggressive messaging, and Skittles' famous brand of off-the-wall nonsequiturisms, the Skittles website does the supertall site right, with little to no clicking required, a seemingly bottomless stream of user-generated content through social channels like Twitter and YouTube featured as the site's content (not an afterthought), and even the boring legal stuff tossed in for good measure (via an all-too adorable bowtie hover in the lower-right).  Truthfully, we'd be remiss if we said a candy website deserved a deep, complex sitemap to market their product (is there really that much to say about colored sugar orbs?).  But it seems like Skittles is a proud believer that the less you have to say, the louder it should be. Skittles: lowbrow never seemed so classy!

G'nosh

Who said party dip had to be boring?  Rather than leverage the passe landing page/interior page style used by seemingly every other CPG, G'nosh, the UK-based brand of gourmet dips and spreads, went loud with their page design that would normally, had it been confined to traditional spaces, break the page.

Large imagery, even larger, skewed type, and fake out elements make a bold statement that this brand is anything but blah.  Think that menu at the top will take you to a new page?  Wrong - it's an anchor list for the page!  Think anchor hashtags have to appear post-click?  Womp womp.  Think that block of text in the middle of the page is just there to fill some white space?  Nah, it's a hover-activated recipe filter.

Expectations be damned, G'nosh proudly makes the statement that their site, much like their dips, can't be bound by traditional viewpoints.  Nothing embodies the supertall page ideology better, we'd say.

Bonus Points

You can likely imagine that, given supertall sites quickly becoming something of a trend, there are countless other examples to be found across the web.  Another example worth a mention?  Twitter, Facebook, Pinterest (and likely some new fangled social media hub you've never heard of yet) and their use of lazy loading: it's supertall in sheep's clothing!

“What are you guys doing with mobile?”  It’s a question that gets lobbed our way seemingly daily.  Truth be told, it’s an important question to ask, as the digital space is being shaped by the ever-improving devices we use (rather than the other way around).  But it’s also a loaded question, as the notion of “mobile,” thanks to all those ever-improving, continuously-advancing devices, has become stratified.  While at one time a simple, stripped down mobile site was enough, their successors (namely the “app-ification” of the web and, more recently, responsive designed sites) have sought another revolution.  So which of these three concepts has reigned victorious and won OHO’s favor?  Let the battle begin.

<!--break-->

 FIGHT!

Responsive Website Designs – Not Your Father's Mobile

Mobile (or m.dot, or .mobi, or…) sites have a long history on the web.  You probably remember seeing your first m.dot site on your (gasp) web-enabled Nokia phone back in the late 90’s.  Remember how your first impression was “Wow, the internet in my hand!” and your second impression was “Hm, seems kinda bland and unhelpful”?  Yeah, so do we.

The good news is mobile sites have come a long way from those simpler times (thanks in no small part to devices that are better equipped to handle more than just text content).  A decent example is what the New York Times presents when you visit mobile.nytimes.com on your phone.  You’ll notice this isn’t your father’s mobile site, as nearly all of the site’s editorial, supplemental, and ad content is presented here (albeit in a tinier, simpler form factor).  Sure, it’s not perfect (there are plenty of things that don’t carry over from desktop to mobile, like Flash, standardized ads, dropdown menus, etc.), but, for the most part, no longer does using a mobile site mean being forced to endure a content-hindered user experience.

There are downsides to mobile sites, though.  Chief among these is no matter how awesome your site template is for desktop and notebook computers, your mobile site will still need its own template.  This means additional wireframing, duplicating your designer’s efforts on look and feel, and a development process that now has at least double the number of page templates to build.   For a site experience that’s already not a perfected copy of your original website, the cost-to-benefit ratio begins to drop quite rapidly.

Yup, There’s an App Even for That

You’ve heard the slogan.  You’ve seen the ads.  You probably have a few dozen in your pocket right now.  The truth is, apps are hot and, no matter if you’re on iOS, Android, or even BlackBerry, here to stay.

But for every disgruntled bird or rope that needs cutting or fart generator in your pocket, chances are there are at least two apps that are really just mobile sites in better, tailored clothing.  Twitter?  IMDb?  Yelp?  Zipcar?  Facebook?  All just websites declaring “we can do better than m.dot.”

And they have.   Each of these example apps and so many more are proving daily why “app-ifying” websites is a win.  From deep integration into their devices (like notifications, location-based activity, background multitasking, etc.) to more robust, unique UI’s, nearly all of these experiences are proof that optimizing per device can pay its dividends.  Kudos for that.

But there’s a hitch: device fragmentation.  If your user base is 100% dedicated to a particular device, then your app strategy is pretty simple: develop for that platform and that platform only.  But what if 42% of your users are on an iPhone, another 35% are on Android, and the remaining 23% are on a smattering of additional devices and platforms?  Developing a dedicated app for each user base is not only costly and time-intensive, but needs to be revisited each time a new form factor (hello, iPad Mini) or marketplace is introduced (rumored Amazon Phone, anyone?).  Suddenly, app creation seems less a glitzy crutch for thin mobile sites and more a cost-prohibitive concept reserved for the top-tier.

Responsive Website Design – Mobile Evolved

So how to avoid the miragesque simplicity of a mobile site while also sidestepping the needless (and likely ever-expanding) complexity of a device-specific app strategy?  The saving grace is found in leveraging a web concept called “responsive design.”

A term coined by Ethan Marcotte in his 2010 article on A List Apart, responsive design’s goal is to make websites device agnostic.  By this we mean whether viewing on an iPhone, a BlackBerry, that rumored iPad Mini, the “we’ll-believe-it-when-we-see-it” Amazon phone, a Kindle Fire, your desktop computer, or the dozens and dozens of other web-enabled devices in your life, all of that site’s content can be displayed similarly and without compromise.

This means a single page template that all devices can read and render.  It means little to no “stripping down” when it comes to your site’s more robust features.  It means a process that doesn’t have to pick sides in the “mobile first” or “mobile later, after your real site’s done” debate.  But most importantly, it means a simpler, unified design and development cycle to get your new site, in all its glory on countless devices, up to speed even more efficiently.

The Winner: Responsive Website Design

Responsive website design is definitely gaining momentum as we see more and more interactive agencies dipping their toes in the water (shameless self-promotion: we have a super exciting responsive site launching soon), but the truth is the concept is still in its infancy.  Best practices are still being hashed out in the web community, the concept (which didn’t even exist a few short years ago) is still evolving, and the public is only starting to learn of the concept.

Still, one of the great things about Responsive Website Design is it’s a transparent concept: the less extra effort that goes into building it, the more ubiquitous the experience, and the less the public notices that experience, the better.  And that’s really what evolving the web, be it mobile or otherwise, is all about, right? 

Examples of Responsive Websites Designs

View these sites in desktop, tablet and mobile phone browsers to see how the sites "respond" to the different form factors.

Norwich University Online

Martha's Vineyard Gazette
 

Brandeis University partnered with OHO Interactive to launch two new websites: BrandeisNow and the Brandeis Magazine site. The sites mark a shift to publishing and archiving more content online to reach a wider audience.

The Brandeis Magazine website is the merger of two print magazines and accompanies the redesign print magazine. In addition to feature articles and department columns, the Magazine contains an extensive online class notes section. The Magazine will be published quarterly in print and online.

BrandeisNOW is the centralized hub for all of the news content for the university. It is targeted at the Brandeis community, student, parents, alumni, and the broader national audience. The site contains:

• Feature articles
• Extensive video content
• Slideshows
• News releases
• Upcoming events

Both sites were built on Hannon Hill Cascade CMS solution and on extremely aggressive timelines. OHO Interactive worked as the project lead with a team at the Office of Communications, and provided the following services:

• Information Architecture
• Visual Design
• HTML/CSS Javascript
• Cascade CMS Build
• Traning and Launch

A third web project is underway and due to launch later this fall – stay tuned.

Update! Meet up with OHO at DrupalCon 2010 this week!

Many enterprise IT organizations are looking to manage a wide range of web properties with a single content management instance. Drupal provides three options for multi-site management. One of the better options is the Domain Access Module.

Benefits of the Drupal Domain Access Module

• Maintain multiple Drupal sites with one install of Drupal on one server
• Using Domain Access, there is one master web site and any number of sub-site domains.
• Each sub-site domain can have its own navigation structure and visual design or it can inherit the navigation structure and the visual design from the master.
• Content can be shared (or affiliated) from the master with all or some of the subdomains. This allows content editors to edit content on the master and automatically push it out to the sub-sites.
• Not all of the sub-sites need to share the content. Each sub-site can be customized to use (or not) content from the master.
• Content management permissions to edit or to publish content can be restricted so that users are allowed to edit content on just a sub-site.

Examples of the Drupal Domain Access Module

• Content editors and writers can edit master content in one centralized location and have this populate across some or all of the sub-sites
• Allows for easy updating of contact information or footer navigation
• Financial services and banking organizations can update disclaimer information easily
• Allows a brand to maintain a presence in its sub-brands through the use of persistent top header or other design element.
• Organizations can maintain one calendar of events and push these events to sub-site domains. On the sub-site domain, the calendar could either show all events or just events related to this sub-site domain.

Practical Applications of the Drupal Domain Access Module

Colleges and universities can deploy a master Drupal instance and then use the Domain Access module to create sub-site domains for departments or programs allowing all sites to have integrated brand and marketing messages. With the distributed permissions, each department has access to editing and maintaining its departmental content.

Want to learn more?

One of the concerns we hear about using the content management system Drupal for website design and implementation is that all of the sites "look the same."

While it is true that out of the box Drupal templates – or themes – have a similar design structure, the Drupal theme engine allows for extreme flexibility.

As we've used Drupal for website design implementations, our team has been able to create interface and design themes that meet the business and marketing requirements of our clients without experiencing limitations from Drupal.

Here's some sites that showcase the variety of Drupal website design options:

• A video-rich, documentary style site
  Mass General Hospital Addiction Answers
• A social networking community
  MIT Media Lab Scratch-Ed
• An advocacy and arts organization networking site
  Leveraging Investments in Creativity

About OHO Interactive

OHO is an interactive firm in Cambridge, MA that creates exceptional web experiences for clients, connecting people to their mission, moving individuals to respond, and making an impact.