Blog

The face of online-learning is changing. Gone are the days of niggling, sarcastic jokes about online degrees as we face an increasingly mobile, tech-savvy, and education-hungry world. And really, it only makes sense given the increasing cost of education and the reality that many degree seekers today must fit their learning in-between an ever-packed schedule of family care, personal business, and demanding jobs. So it's with great excitement that we announce our contribution to that changing tide in the form of Norwich University's new online programs website: Norwich University Online.

<!--break-->

Almost as a direct answer to the changed state of online learning that's happened over the last 5 or so years, Norwich University sought to re-brand their College of Graduate and Continuing Studies, creating a new website as both the face and avenue into the platform for that change. OHO was engaged in a year-long comprehensive interactive marketing strategy partnership, seeking both to concept a newly-architected website and shepherd completely new web content for the new site.

Two Audiences, One Site

The folks at Norwich knew they needed a great website to serve as the face of the 193-year-old university's graduate, Bachelor's completion, and continuing studies program, but it was equally important that the new website speak to a distinctly diverse audience segment. Given Norwich's legacy as the country's oldest private military college, a vast number of the continuing students Norwich wished to reach held some relation to the military (including military personnel seeking officer rank, homecoming soldiers wanting to continue their Bachelor's or pursue private sector jobs, etc.).

But just as important was the university's audience of education seekers with no military ties. From retired "life-long learners" to full-time employed graduate students, the audience mix for Norwich University's online offerings stemmed from all walks of life, meaning the new College of Graduate and Continuing Studies website and its redone market positioning needed a smart, strategy-driven approach or risked audience alienation (and potentially a crippling drop in enrollment).

Informed Design Means Informed Decision-Making

While our traditional strategic approach works well for many of our clients who have their branding and marketing strategy nailed down, it became clear that this newly-branded program needed a deeper dive to drive the engagement. As such, OHO conducted everything from stakeholder interviews to audience research studies seeking a deeper knowledge of the average continuing student's motivating factors. Given this, OHO was able to work with Norwich's communications team to determine both the go-to-market strategy for Norwich University Online as well as the messaging that would support it.

OHO also coordinated surveys and audits, both to provide demographic and psychographic snapshots of the existing Norwich market and identify new and missed markets into which Norwich could consider expanding. With these comprehensive research findings, OHO was able to plan not only a well-built and beautifully-designed new site, but one that was essentially market tested long before it hit the web.

Web Service Goes Full-Service

With a host of research findings to aid in planning, the team at OHO conducted a full-service web engagement with the communications team at Norwich, including everything from information architecture and prototyping to visual design to web development using SaaS methodology on the Drupal 7 content management system (CMS). The site was even given a responsive design treatment, meaning it features a user interface that's optimized to be experienced on desktop computers, tablets, and mobile devices. Regardless of how users access the new Norwich Online, whether at home or on the go, they are guaranteed a beautiful, highly usable, and uncompromising user experience.

On top of all that, OHO also produced over 20 short-form videos for use throughout the Norwich Online site to aid in their brand positioning. These videos, featuring various interviews with Norwich faculty, staff, alumni, and graduating students, speak to the participants' experiences of pursuing a continuing degree at Norwich and the impact of a Norwich education on their careers. Intended as "feel pieces," these videos add to the library of content used by Norwich in furthering their message, engaging their audiences in new ways, and growing online program enrollment.

Interactive Elements, Engaged Users

Alongside the more traditional elements found throughout the website, users looking for a unique way of experiencing Norwich's distinctive online offerings can enjoy features like "A Week in the Life." Essentially an interactive calendar, users can click on a variety of sample student profiles and learn about what it's like to be a Norwich Online student day-to-day. The feature was custom designed and developed by OHO both to serve as a unique form of engagement on the site and to help prospective students answer that age-old question of "what is it like to go here?"

Higher Education Looks Forward

With education hanging in a perpetual state of flux, it's always inspiring to learn of a school or program's willingness to be different and try new things. Norwich did just that, putting faith in an education model that not only meets the needs of their network of busy and niche-focused students but represents a broader acceptance of our cultural shift to the online space. The new Norwich University Online, backed by enterprise-class services like hosting by OHO partner Acquia and integration with EmbanetCompass to support Norwich's online enrollment recruiting efforts, means Norwich has a new website that doesn't just meet their needs, but will continue to do so as their online programs and community expand.

For more information about Norwich University, the College of Graduate and Continuing Studies, and to see OHO's work for yourself, visit online.norwich.edu.

The hits just keep on coming here at OHO as we've been awarded four (count 'em, four!) 2012 MarCom Awards for our work with Boston Society of Architects, Uncommon Schools, and Northeastern University's School of Law. The awards, which were announced earlier this month, represent a broad range of the best websites, most inventive communications collateral, and greatest marketing campaigns around. Since OHO won for a broad range of services and clients, read on for details about the winning entries.

<!--break-->

Website Redesign for Boston Society of Architects

The OHO-redesigned website for the Boston Society of Architects (BSA) represents not only a striking design, but a redesign built on the strength of the robust content management system Drupal. By leveraging smart designs and an even smarter site framework, the staff at the BSA are able to content manage and update their site quickly, easily, and effectively (all without sacrificing style).

To see the site for yourself, visit architects.org.

Award won: Platinum

Interior Site Design & Video Production for Uncommon Schools

The Our Stories section of the website for Uncommon Schools, a network of urban charter schools based on the northeast, was originally envisioned as a means of housing all of the great photography and video that were regularly captured at each of Uncommon's 17 various schools. What it ultimately became was an experience for users to feel what it's like to be at an Uncommon school. Image, media, and video galleries aren't so much "browsed" as they are "experienced," inviting users to get lost in the content (and, as a result, connect with the charter school network's story that much more).

To experience an Uncommon story firsthand, visit uncommonschools.org/our-stories

Award won: Gold

And what better way to tell a story than with video? As the first piece of OHO-generated content for Uncommon Schools' new Our Stories section, the Hear from Recruiters video is Uncommon's way of talking firsthand to those interested in working at Uncommon and growing their pool of applicants from a broad range of amazing applicants to well-informed superstars ready to rise to Uncommon's challenge.

The video in its entirely is embedded above and lives on the Our Stories section of the Uncommon Schools website.

Award won: Gold

Print Viewbook Layout & Design for Northeastern University School of Law

These days, with print brochures going the way of the dodo and people preferring their communications come in a more digital (read: easy to delete) format, a print viewbook's gotta be pretty special to turn some heads. And that's exactly what Northeastern University School of Law (NUSL) got with their new OHO-designed viewbook for the 2012-2013 academic year. Page after page of gorgeous design, engaging imagery, and enlightening infographics informs the reader both about the program and why it's worth looking at as a school that's not afraid of differentiating itself.

To see the viewbook in its digital form online, click over to zmags.

Award won: Platinum

These are big wins for OHO, as the four projects outlined above represent not only a broad range of the services we offer and the client industries we serve but work we're immensely proud of. We realize not every project is worthy of an award (and we've had our fair share of losses here), but when work that's so close to our hearts garners a win... well, it just makes the work that much sweeter.

To read about the MarCom awards and to see OHO's place alongside the full list of winners, visit www.marcomawards.com/winners/

Thank you America.  

Thank you Mitt Romney.

What a year.  The election is over and I’m very pleased to be able to announce that OHO Interactive was the lead interactive firm that powered MittRomney.com and all of the digital, social and mobile properties for the Romney-Ryan ticket.  While OHO isn’t a political firm, we are passionate about digital user engagement and are amazed at the enormous opportunity we’ve had to integrate the most cutting-edge technologies into a single digital platform: web, social, mobile, commerce, and data.

<!--break-->

Inauspicious Beginnings

In November 2011, early in the primary season, I got a call from a start-up running a Drupal website looking for some help.  We work well with start-ups – so I went to meet with them.  I found great people, lots of energy, big ideas, enormous passion and limited resources to achieve their goals.  There was one twist, this start-up was a small band of committed folks who wanted to elect the next President of the United States – and believed the Internet was the way to do it.  We started immediately working on a few small projects.

Through the Primaries – Build a Digital Team

In February, OHO Interactive became the lead interactive agency for the campaign taking over project management, development and hosting management for MittRomney.com.  In May, the campaign moved from primary mode to the national presidential campaign. We were asked to build the digital team – from scratch – in 45 days. And we did.  We assembled a complete in-house agency of over 30 people and began work on the most advanced digital engagement platform ever developed by a Republican candidate.

The Most Innovative and Complete Cloud Platform – in 5 Months

Our team along with our partners built an all-inclusive, high-performance, multi-channel digital platform that connected front to back:  websites, Drupal, Mobile, Apps, Social Media, Facebook, Salesforce, Fundraising, Data warehouse and much more. 

A few highlight and results:

• Over $200 million dollars raised online
• 43,000 peak simultaneous users
• 30+ digital properties and apps
• 35,000+ hours of development
• Numerous new technology providers
• All cloud based, and a fantastic team! 

Lessons Learned

There is more to this story. There are many lessons from this forefront of digital innovation that can be applied far beyond the political realm.  I’m looking forward to sharing more soon.

A number of years ago, everyone from sensationalist bloggers to your next-door neighbor was sure the traditional news media, from weekly and daily newspapers to magazines, was on its deathbed. Little did they know the sentiment they were hearing wasn't a death knell for the news industry but rather a signal that the industry was changing. Digital distribution was soon declared king, and from dedicated apps to revamped websites, traditional news publishers quickly adapted to shrinking subscriber pools and shifting news consumption habits. Now, on the heels of Newsweek's announcement of a new digital-only strategy, the Vineyard Gazette, a news institution on Martha's Vineyard, has launched a completely new, OHO-architected web experience that brings the local news publisher into the digital news age in style.

<!--break-->

A Web-First Newspaper Website Redesign

The new website, which launched today, features a completely new design for the paper, a robust multimedia section to showcase the stunning photography and video regularly captured around the island by Gazette staffers, and a new font style, which was made possible through collaboration with Boston-based Font Bureau, Inc.

Device-Agnostic Responsive Design for Desktop, Mobile, and Tablet

But perhaps the best (and likely most subtle) detail is the site rocks a responsive design, meaning regardless of a reader's screen size or device, content on the new Vineyard Gazette site, from breaking news and featured editorial content to local events calendars and an archive of tens of thousands of articles from the publication's past 10 years, will feel, function, and look great. Using a customized cascading style sheet (CSS), OHO was able to optimize the site for a wide range of smartphones, tablets, and widescreen desktop displays so users could enjoy the same great reading experience found on the desktop without sacrificing functionality while on the go. Most users will likely be completely unaware of this bit of design magic (which is sort of the point), but for a taste of what we're talking about, a side-by-side comparison of desktop, tablet, and mobile will do the trick. Go ahead: we challenge you to find a missing feature or block of content!

Streamlining the Editorial Workflow and Adobe Web Publishing Process

Of course, good looks aren't the only thing to be found here, as the all-new Gazette also features a number of under the hood enhancements to optimize the editorial process for the island-bound newspaper website. The site's backend, which is built on Drupal 7, features custom integration with the paper's classified ad management platform, a robust taxonomy and tagging system, synchronization with the newspaper's subscriber/circulation system, and bi-directional workflow capabilities, meaning when drafting content the editorial staff can both import from and export to the Adobe InCopy and Adobe InDesign platforms at will.

Building Subscribers, Driving Readership, and Monetizing Content

The site even features a customizable paywall (that news monetizer's oft-sought white whale) so the publisher can change what content is free and what content requires a subscription to suit their business model on the fly.

To get the latest happenings on the Vineyard, become a subscriber, or simply see the site for yourself, which was architected, designed, developed, and deployed by OHO, we proudly invite you to visit www.mvgazette.com.

Pop quiz: when was the last time you checked your personal email on your laptop or desktop computer?  If you answered "don't remember," chances are you're part of a growing trend of email users who are, rather than powering on their old, dusty desktops, using their mobile devices (tablets, smartphones, etc.) more and more to consume email and web content.  In truth, as our mobile gadgets become smarter, feature-richer, and enabled to handle our ever-increasing data habit this trend only makes sense.  But it also underscores a critical need in the marketing community that's only just now rearing its head: a mobile-friendly email communications plan should be at the top of every marketing & communications professional's marketing strategy.

<!--break-->

It's long since been understood that email is the easiest way to reach consumers.  We all have email, we use it regularly (even moreso now with the advent of smartphones), and people today seem significantly more willing to give out their email address than, say, their phone number or mailing address (old stand-by's for the marketer of yesterday).  But simply reaching them isn't enough - if the user experience is poor or the content doesn't work on the user's device of choice, the user won't feel spurred and your marketing attempt should be considered a failure.  Now, more than ever, mobile-specific, device-agnostic user experiences should be considered even when planning for the simplest of marketing messages.

It's a Mobile-First World

Take, for instance, how you use your phone.  Any smartphone user, whether they be on an iOS device like a iPhone or an iPod Touch, an Android-powered smartphone, or something similar, knows that things like horizontal scrolling, tiny text, and impossible-to-press buttons or links are annoying.  For an increasingly mobile-first world, design elements leading to a poor mobile experience seem to put words in marketers' mouths saying "we don't get you."  Sure, in someone's Gmail or Outlook inbox on their widescreen desktop monitor the message may look great.  But if it underperforms even the slightest bit on mobile, whether thanks to poorly-adapted layouts or outdated technologies like Flash, your users will feel alienated, disengaged, and unmotivated to take action.

The web design community has long been divided in its approach to this problem with many deeming mobile-first design a wayward concept.  And while yes, m-dot sites are awful, smartphones are still underpowered when compared to their big, lap-heating counterparts, and the notion of holding back a site's functions just to make it mobile-friendly seems counterintuitive, mobile-first has evolved since our phones were first able to connect to the internet oh so many years ago.

Mobile-First ≠ "m-dot"

We recently received an email from Brooks Brothers' marketing department that spurred this notion and it quickly became clear that regardless of whether you're marketing clothing, corporate consulting or B2B services, or even home-made wares in your community, how your users interact with your marketing is as important as the quality of the product or service you're marketing in the first place.

Exhibits A & B: two messages from the same email campaign, one viewed on a mobile device and one viewed on a desktop computer.  Can you see a difference (beyond content)?

The image on the right is actually a screenshot from the Mail app on iPhone while the the image on the left was taken from Gmail on a desktop computer.  By using a finger-friendly, consistent menu structure and bold, image-driven design for their email campaign, Brooks Brothers was able to create marketing that's not only as smart-looking as their clothing line but consistently laid out and device-agnostic.  Mobile, tablet, or desktop, this email campaign can be seen, read, and interacted with easily and effectively, meaning less chance users will have a poor experience with the content and (worst case scenario) unsubscribe.

Users > Awesome Features

No website will ever have mass appeal and no email campaign can cater to all users or devices.  Look at Internet Explorer's nightmarish history with site rendering or Outlook's handling of background images to know what we're talking about.  But everything you do as a marketer should be with the chief goal of making your content effortless and seamless to take in by your audience.  Whether using complex, new web design concepts like responsive design or tailoring your layouts to the lowest common denominator without sacrificing style, it's important to keep in mind that no matter how many flashy features, awesome images, amazing callouts, and sprinkles of web development fairy dust you've incorporated into the email (or website, or portal, or app, or...) you've built, if your users feel alienated they won't hesitate to delete, unsubscribe, or unplug from your brand entirely.  Remember: on mobile the delete button is just inches away.

If you, like a lot of us at OHO, remember graduating high school, college, or graduate school and being promised access to a wide, hyper-connected network of eager-to-chat-and-help fellow alumni only to be met with the reality of a few crudités-flecked local minglers and an Excel spreadsheet filled primarily with out-of-date email addresses and a bunch of names you've never heard before, this latest launch announcement may cause your ears to perk up.  As part of their commitment to the mission of ensuring their network of students get to and through college, OHO and charter school network KIPP have launched an exciting new, socially-driven alumni portal called KIPPster.

<!--break-->

The portal, which is built on Drupal 7, features a responsive design (since most kids predominantly access the internet via their smartphones), and was information architected, designed, and developed by OHO in under 12 weeks, stands as the charter school's digital extension of their KIPP Through College (KTC) program and creates a socially-driven, metrics-supported platform that blends cutting edge designs with a number of features charged with building, speaking to, and engaging a very specific community of over 700 KIPP alumni and over 30 KIPP advisors.

Users landing on the homepage will notice aside from the bold, educational multimedia splash, the brunt of the site's content is for authenticated users only.  This is by design, as the site is a gated platform for young KIPP alumni.  The focus here was to create a sense of community for KIPP alums wanting to connect with and motivate one another.

Access is easy for KIPP graduates, though, as the platform integrates user-friendly features like Login with Facebook, customized KIPPster profiles, and a content-rich splash screen on the User Dashboard that is updated regularly with new resources and timely information.

Once logged in, users are invited to customize their profile, which is visible to the KIPPster community so others can connect on their shared campus, interests, classes, etc.

KIPPsters can also apply to various programs to help pay for and make college life easier, earn social engagement points as they use the site's many features, look up other KIPP alumni just like them, engage with their peer community by voting in polls, participating in forum discussions, voting content up through various social Drupal modules, and creating resources to help other KIPPsters, learn about upcoming events for KIPPsters-only, and a host of other features all tasked with one goal: creating a sense of community to support those KIPP graduates now out in college and beyond.

The site even contains a dashboard for program advisors to track user metrics on the site and engage with the students who have joined the program.

The most exciting news for the KIPPster, though, doesn't lie in its announcement but in its future.  Being built on an open and easily-customized platform like Drupal, the new site already has the folks at KIPP planning for some amazing evolutions to the platform, including enhancements to the program advisor dashboard to allow tracking alumni engagement, integration with Salesforce databases, and a host of other features and changes to deepen the site's engagement with the alumni community.

To see the site for yourself visit www.kippster.org.

For those of you who were dying to see more than just our two shots of the Northeastern University School of Law 2012-2013 viewbook, we've got great news: Northeastern has partnered with zmags to digitize the entire book.  That means even those of you not on Northeastern's mailing list can take a gander at every one of its 28 gorgeous pages at your own leisure.

The digital viewbook can be seen here.  Happy flipping!

<!--break-->

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!

Think back to the year 2000.  Though surely a distant memory for many of us (the fashion, the music, dial-up internet - yikes!), the beginning of the new century marks a special place in OHO's heart.  It was the year we officially opened our doors for business and started, despite humble beginnings, our tradition of tireless customer service met with cutting edge work.

<!--break-->

Flash forward to today, with our ranks ballooning, our work evolving, and our list of happy clients growing longer and longer that we are humbled by our inclusion on Inc. magazine's list of the 5000 fastest growing companies in America - the Inc. 5000.

Needless to say, without those amazing people who call OHO home day after day, the technology we back getting better every day, and countless clients who consider OHO a true partner rather than a meer vendor, the growth we've seen, globally-crippling recession notwithstanding, wouldn't have been possible.

To read more about our place on the list or the Inc. 5000 in general, check out our press release.  You can be sure we've got our eye on climbing the list in the coming years (and, fingers crossed, one day cracking the top 500).  So be on the lookout for that announcement when the time comes.  But for now, let's just say thank you to everyone who made this possible and here's to the next 12 years!

Hey there and welcome to a new series we're putting on the blog: The Best Stuff on the Web.  In this series, we'll cover the best websites, design concepts, development trickery, and other fun bits we've seen across the web.  It's worth noting the things we'll discuss are not OHO's own work, but rather the stuff we've seen that makes us proud we work on the web.  You'll see a number of posts like this for the conceivable future, but this is our inaugural post so let's get things started.

<!--break-->

So what are we discussing this week?  Parallax Scrolling.

If you're like us, you've probably come across a webpage that seemed inordinantly tall, right?  No, I am not talking about a lazy loading infinite scroll site like Facebook's news feed.  I'm talking about a page that, as you scroll, loads different animations and content changes that are tied to the scroll.  Like a zoetrope laid out vertically.  With us?  Good.

Well that's parallax scrolling.  With its roots in video game background animations, parallax scrolling uses just HTML and CSS (no Flash - hooray!) to create a sense of depth to the content.  It's a simple concept in theory, sure, but whoever first thought of it as a way of inspiring the user to interact with the page contents without forcing the masses to use an ages-old plugin is bloody brilliant.

Here are a few parallax scrolling sites that just blow our minds (don't forget to scroll!):

The Volkswagen Beetle for Germany

A highly clickable, nostalgically-driven lookbook at the newly redesigned Beetle that does everything a car model lookbook does but better?  We know what our next car is going to be...

Ben the Bodyguard

The noir inspired visuals and wonderful color pallate are enough to draw us in, but the best part is as Ben casually walks his crime-riddled streets, a grimy, Bensky-tagged subway passing overhead and heinous acts happening all around him, you can't help but wonder: "am I playing Grand Theft Auto?"  Talk about immersive.

Samsung Galaxy S II

So what if the Galaxy S 3 is newer, sleeker, and probably better?  The microsite for the S 3 pales in comparison with this stunner for the S II.  The visuals are bigger than life, the elements have that slow rise that reminds us of Willy Wonka's fizzy lifting drink, and you really can't leave this page feeling uninformed.  A win.

Grey Goose

Another win for the "parallax sites are beautiful" category.  We don't love the nail-biting experience of "maybe this link will open here, maybe it'll take me off-site" provided here, but the lush visuals and "holy crap how'd they get so big?!" YouTube embeds are stunning.  Don't forget to click the menu buttons along the bottom (an incongruous place, but we like it) to see that it's not just the landing page: nearly the whole freaking site is parallax!

Other Examples

These sites have some great other examples of parallax sites that we don't have the space to cover but are worth checking out:

• http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling...
• http://slodive.com/inspiration/showcase/parallax-scrolling/
• http://css-tricks.com/fancy-scrolling-sites/

As you can imagine, there are tons and tons of parallax sites across the web (as this design concept is gaining momentum rapidly) so we're sure to have missed a few good ones.  Think we missed a parallax scrolling site that's worth an honorary mention or think parallax scrolling is yesterday's news?  We want to hear about it!

Getting excited about the newest web tools and techniques is something every front end developer can relate to and after attending An Event Apart, Boston, we could hardly wait to turn up the volume on some of our development practices, in this instance, preprocessing our CSS. There are multiple ways to preprocess CSS or Cascading Style Sheets but two most popular are SASS & LESS.

<!--break-->

For those still unsure what SASS is exactly:

“Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.”

- SASS website (http://sass-lang.com/)

So what’s it good for?

Both languages, SASS and LESS, were created for the same reason: to cut down on stylesheet repetition. After researching both languages we ended up choosing SASS over LESS, primarily because SASS can be processed and output locally as a standard CSS file, whereas LESS uses Javascript to render the standard CSS file in the client’s browser. That’s not to say that LESS can’t be rendered server side with node.js or another similar plug-in but for simplicity’s sake we found SASS’s ability to render an editable, malleable CSS file a deciding factor - this way, while rolling out this new technique, we could spot check the output to make sure the SCSS authors and the compiler are all on the same semantically styled page.

Because this project did not require Ruby on Rails, our SASS development process is a little more creative, though still very manageable. Here at OHO, we are using a combination of Expandrive to mount the server and CodeKit as our local SASS processor/compiler. This solution has worked with great results as we have the best of both worlds: the ability to develop on live servers without the need for Ruby and a set of standard style sheets we can review should we need to take a closer look at the compiled results.

One of the biggest benefits from this approach we’ve found is the the ability to create variables. These variables can be as simple as setting all your brand colors prior to starting a new project as shown in the following example, or as complex as creating variables for specific RWD media queries. So, the following lines show an example of preset color and border variables that we are using in a current project:

$blue: #0040FF

or entire sets of property declarations:

$border-grey: 1px solid #C0C0C0

Using variables simplifies the need to continually add a specific hexadecimal value to each element every time you need it. Not only does it make this process somewhat modular, but it removes the risk of user error. Additionally, because this color value is now available as a variable in one set location, global updates to your colors or other features becomes one line or code, rather than spending time finding and replacing values in the stylesheet. Instead of changing every instance of your color, a change to a single variable will be reflected across the entire stylesheet.

Variables are great, no doubt about it, but the most valuable feature above all others has been the use of SASS Mixins.

“…mixins allow you to re-use whole chunks of CSS, properties or selectors. You can even give them arguments.”

- SASS Website (http://sass-lang.com/)

For an example of how mixins are streamlining our development process, look no further than vendor specific prefixes. Rather than remember each vendor prefix for a gradient, for example - and there are about a half dozen - we can list all declarations for our gradient values in a single Mixin. These gradients come in a variety of colors and are used on different element types. This time consuming task has been achieved over the years by using a combination of sprites and repeating background images. But now with SASS & CSS3 we’re able to create reusable blocks of code that can be shared across the entire development team, and wrapped neatly into a single Mixin that can be added to most elements properties.

So this:

@mixin black-gradient {
background: rgb(113,113,113); background: -moz-linear-gradient(top, rgba(113,113,113,1) 0%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(113,113,113,1)), color-stop(100%,rgba(0,0,0,1))); background: -webkit-linear-gradient(top, rgba(113,113,113,1) 0%,rgba(0,0,0,1) 100%); background: -o-linear-gradient(top, rgba(113,113,113,1) 0%,rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(113,113,113,1) 0%,rgba(0,0,0,1) 100%);
background: linear-gradient(top, rgba(113,113,113,1) 0%,rgba(0,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#717171’, endColorstr=‘#000000’,GradientType=0 );
}

Becomes this:

#nav {
@include black-gradient
}

Much more sensible, no?

Using CSS variables and mixins is a great way to speed up development time and to share reusable snippets of code across your development teams. Another example of how adding SASS to your development workflow will save time can be found when developing with a repository like GIT or Subversion. Because SASS and SCSS files are preprocessed multiple files can be included within one another and the compiled output will still be a single file. One instance would be to share a SASS file dedicated entirely to mixins that can be shared among all the developers on a large scale project. That way all colors, fonts, gradients, resets, etc. are uniform for all the developers who have included that file in their own stylesheet. Sound complicated?

Here’s the code we use to include all of our compiled mixins between developers:

@import "mixins"

These tips didn’t take long to discover and we’ve only recently rolled out SASS so we look forward to taking advantage of its many features in future projects. That said, we encourage you learn more about LESS or SASS and decide for yourself. Nesting in particular is an interesting feature in-and-of itself as browsers like Google’s Chrome have started to support some of this basic functionality. Will this be the future of CSS, and if so, how modular can each piece of markup become? Only time will tell.

Until next time, happy coding.

*This article was co-written with Doug Shults