Blog

It's with great excitement that we announce the inaugural website for the Kraft Center for Community Health has launched and is live to the world.  The new site, which was architected, designed, and coded by OHO, serves as Kraft Center's first foray into the digital space and a smart, efficient means of reaching the public.

<!--break-->

The site, which blends modern yet user-friendly design elements with a straightforward and easy-to-navigate site structure, was built with the chief goal of telling the Kraft Center's unique story all while serving as a helpful resource for the community.  With an eye on the future and the inevitable growth of both the Kraft Center and Partners Healthcare by extension, OHO's work for the foundation not only gives them a best-in-class site design, but sets up the site through smart, informed structures for an easily scalable, deeply evolvable user experience down the road as well.

The Kraft Center for Community Health, which was founded last year as a gift from the Kraft family to Partners HealthCare, provides quality, cost-effective health care for low- and moderate-income families.  It's a wonderful initiative and one that OHO is proud to have in our ever-growing roster of world-class healthcare and hospital clients.

For more information about the Kraft Center or to see OHO's work for yourself, visit www.kraftcommunityhealth.org/.

While we think all of the work we do for our amazing roster of clients is worthy of a case study, some stories are more fun to tell than others.  Take our work for Match Education, for example: a custom-designed, responsive, fully-implemented Drupal site in under 6 weeks?  Pish tosh, the cynics may have said, but we knew otherwise and took on the website redesign with aplomb.  For the whole story, check out our video case study, embedded above.

<!--break-->

And be on the lookout for more video case studies on the horizon, as OHO, raconteur cap firmly on-head, has a number of great stories we're dying to tell.

For more information about Match Education or to see our work living and breathing on the web, check out www.matcheducation.org/.

“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
 

Many times, part of a website redesign includes a complete rebranding. Even if you’re only redesigning your website, though, it makes sense to update all of your digital properties to reflect the look and feel of your new site. 

Nowhere is this more apparent than in email design. Your email marketing and communications are a vital extension of your web presence in the eyes of your stakeholders. Email’s also the second most-viewed digital asset you have after your website. Your social media properties may have more followers, but they’ll tend to consume your content from their own accounts, only looking at your social profile once, when they sign up. Any branding you do on these profiles is not wasted, but it also won’t be seen a lot by your customers.

Email, on the other hand, arrives in their inboxes every week or month, straight from you. Many consumers have images turned off, or read your emails on feature phones with limited capacity for visuals, but for a majority,  your email will arrive complete with some branding elements. Thus, it presents a great opportunity to reinforce your brand. When your brand experience is strong on your site, you want customers loyal enough to subscribe to your list to have that same great experience when opening your emails.

How do you carry over the look and feel of your website to the very different medium of email? You don’t—not entirely. You translate elements to provide the same experience, often with very different visuals.

Here are some tips when building a new email to match your relaunched website:

• Look at the dominant colors in your design, including which are the most prominent. Try to use the same colors in the same proportions, but mix it up a bit. Perhaps blue dominates in your website, and you use a balance of blue and yellow in your email.
• Simplify all layouts. Multiple columns don’t work well in emails, so if you have a three-column layout for your homepage, try a one- or at most two-column layout for your emails.
• Think of the types of images you use on your site. Do you have candid shots of your team, beautifully staged product photography, witty illustrations? Assemble a library of images with the same style for whoever creates your emails. That way, it’ll always be easy to add consistent visuals.
• Remember to have multiple templates for different occasions. At the very least, you need a template for newsletters, brief announcements, and events or offers. For a quick, consistent set, simplify your newsletter template for the shorter forms.
• Focus on headers, footers, shapes of content boxes, and other major features. These are the easiest to translate into the email format. They also have the most impact in creating a feeling that emails and the website are consistent.

Email communications that carry over the look of your website are an essential for most marketers. With thought, a step back from your design, and a deep feel for your brand, emails can be consistent with your site, yet meet the unique requirements of the form.  

 D4D Boston 2011, also known as Drupal Design Camp, is just two weeks away. The only Drupal conference dedicated to design, D4D is in its 3rd year. As usual, it's bringing together the Drupal community for a weekend-long series of great sessions, June 25-26. Also same as last year, it'll be at the MIT Stata Center in Cambridge, a great space for thinking about design. We're especially excited this year, since we'll not only be speaking, but also sponsoring a luncheon on Saturday. We'll also be exhibiting: if you've ever considered working for OHO, drop by our table to talk about what you're interested in doing, and what we're looking for. 

Saturday's keynote speaker will be Dries Buytaert, the founder of Drupal, who'll be talking about Lessons Learned from the Drupal Community, and Sunday's will be usability expert Josh Porter of Performable. There will also be multiple sessions on design and more--including a talk on usability by our very own Jason Smith. If you love Drupal and design, this is a great event. We hope to see you there! 

Boston Society for Architects (BSA) launched the completely revamped architects.org website this evening. The site was developed by Design&Co and OHO Interactive. The site is built upon Acquia Drupal and includes integration with the association management tool produced by ACGI.

Congratulations to the team at BSA – Adam, John, Jon, and Dan!

We've seen an increased desire by clients to add mapping to their websites – but they usually don't ask for it that way.

Clients begin by seeking new ways to visualize their information and make it easier to sort through information. In other words, they are looking for ways to make the content more relevant to the user.

Google Maps and Professional Associations

Some examples – I sat in a meeting today with an large professional association where the executive director talked about the "fire hose" of data their current site provides. It's too much; it's not relevant. His quick solution – not a better search or filters or better information architecture – is to show people and businesses near the user.

In his mind, nearer to me = more relevant to me.

A map view of search results is the ideal way to present this information rather than a filtered list. Why? Because maps offer a visualization of information that is easy to scan – and scanning is the way we all read on a screen.

Plot Custom Data on a Google Map for Universities

Here's another example – we launched a website for Lesley University last fall. Lesley offers off-campus programs in 250 sites across the US. I knew this – but it wasn't until I saw all 250 sites plotted that I understood at glance where they offer classes.

• I could see the clusters of regions where they work
• I could quickly see how far I would need to drive to take a course
• Clicking on the map pin showed me only the course available at that site

What's essential here is that the prospective student is asking a number of questions about the degree program: cost, time commitment, value, and course material. A standard text search is good for finding courses by name, but this isn't the only important decision factor. In this case a map more quickly answers other questions – how far will I have to drive? does this fit into my life?

Google Maps API and Google Maps Mash Up

The Google Maps API provides a way to plot your data on the Google Maps base. Plus you can plot third-party geo-coded information – such as transit stops – to add more value to your users. In addition, your users can add data to your maps such as polygons and lines plus the supporting meta-data.

See Examples of Google Maps Mash Ups

Today is World Usability Day sponsored by the Usability Professionals Association (UPA). This year's theme is sustainability.

Virtual and in-person events are being run in over 30 countries.

Find An Event Near You

OHO Interactive and Usability

The World Usability Day site was produced by OHO Interactive and runs on the Drupal content management platform.

A New York Times audio reports states that due to the economic pressures we'll begin to see more exhibits from permanent collections. These shows will require new strategies to bring in audiences because they don't have the same draw as large shows assembled from the collections of other museums. Some museums are trying turning their galleries into a community meeting place where people will meet friends and offering non-traditional programming such as yoga classes.
Read full article here.
Listen to the report here.