Skip to Content

Blog

Syndicate content

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

Rachel Sherman
Oct 10, 2012

 

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

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

Responsive Design ExampleA 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
 

 

Rachel Sherman
Jul 16, 2012

The web is changing. With some of the new HTML5 and CSS3 standards now being supported by IE 8 and above, more options are available now than ever before — especially for forward-thinking UI Developers.

It’s hard sometimes to keep these new techniques at bay when they are able to do such amazing things for your clients, like restructuring a web site layout on the fly with a flexible, responsive grid system — one of my favorite being designer Andy Taylor’s (@andytlr) 1140 CSS Grid System

In the spirit of collaborative development, let’s take a look at how the historic Boston Globe redesigned the new BostonGlobe.com using a flexible grid to create an all-in-one web application that scales for tablets, desktop browsers, and mobile devices. Jeff Soderman (@jeffsonderman) of The Poynter Institute has a nice, concise write-up on the Poynter blog.

Catering to the plethora of mobile devices on the market today is a new and evolving challenge, according to Chris Coyier of CSS-Tricks.
“Browser support for media queries is surprisingly decent. Internet Explorer 9 will be supporting it, but IE8 and below do not. If I wanted to deliver the best possible experience in IE 8 and below, I'd either fake it with JavaScript or use anIE specific style sheet and style it in the same style as the most common browser width (sic).”

Implementing Flexible Grids

To really embrace these new standards one must dig in and apply these technologies to their designs. Earlier this summer, I had an opportunity to embrace these new standards when I worked on several iPad applications. As you may know, Safari browsers use WebKit as their rendering engine, making Safari one of the most progressive layout engines in use today.

The joy of working with a WebKit browser (like Chrome or Safari) is that that it supports most of the latest standards and you rarely have to employ fixes or hacks. In addition, the iPad has a fixed height and width for both horizontal and landscape display, so we had a progressive, stable development environment that really allowed us to push the UI envelope.

Immediately after wrapping up these projects I wondered how these technologies could be applied to standard web sites. You know, the ones that have to respect antiquated browsers like IE7.

In A List Apart article in May of 2010, Ethan Marcotte, a fellow Boston designer, coined the term Responsive Web Design. Since then, he’s published a book on the subject and has prompted some very interesting challenges and questions for modern development. 

In the book, Marcotte compares web architecture to traditional architecture, and the new trend of having spaces, like walls, mirrors, and other dynamic construction materials, adjust to building occupants. Have a dinner party with a crowded room of people on a summer night, and then maybe your LCD-enabled wall changes from a warm red color to a cool blue. Some walls are actually able to sense when a room is filling to capacity and adjust to expand the space of a room. As web architects, we can take several cues from the architectural community.

At the end of the day, the web is a very dynamic environment and many budgets have gone overboard trying to accommodate the various entry points to a “web business” or application. From URL redirects, to micro sites for mobile, why choose?

I suggest that a standards-compliant site can be built using today’s technology that not only adjusts its display based on whichever medium the client is using, but also responds to client feedback and allows users to customize their experience with simple browser cookies.

I always found it disconcerting to open a site on my iPhone only to get prompted to visit the mobile site. What’s wrong with the site I’m currently on, and what am I going to miss if I visit the mobile version?

A smart UI Developer should avoid tasking the user with making that decision. It is our job to stay 2-3 steps ahead of the consumer, making their web experience simple and fluid. Today, due in part to Ethan Marcotte’s trend-setting article, we shouldn’t have to ask users to choose between different versions of content when today’s web sites can be scalable, not only in design, but in structure.

Doug Shults
Sep 30, 2011

The rising prominence of mobile—and the growing awareness of the importance of good user experience—came to the fore yesterday when Google announced that AdWords ads will be dinged with lowered quality scores if they lead visitors to poor mobile experiences. That’s right—a Google ad that points to a website that doesn’t render well on mobile devices will cost more, rank lower, and possibly not show at all.

Quality Score (QS) is the score Google gives to ads in its popular AdWords program. It’s based on a variety of factors, and impacts how much an advertiser has to bid for an ad to appear, show up in a prominent placement, and be served on relevant searches. Now, one of those factors will be the mobile user experience. In a blog post announcing the change, Google

 explained the impact of pointing visitors to a site that doesn’t work on mobile devices. “A poor mobile web experience can negatively shape a consumer’s opinion of a brand or company and make it hard for them to engage or make a purchase,” noted Google’s David Nachum, the Product Manager for Mobile Ads. He added that “61% of users are unlikely to return to a website that they had trouble accessing from their phone.” This change in Google’s method for calculating QS signals a new maturity for mobile. It also further marks the mainstreaming of user experience from a specialized technical concern to one that is broadly relevant to all marketers. As Google has now signaled again, great user experience is rapidly becoming essential to an effective marketing campaign, across all platforms.

 

Anonymous
Sep 22, 2011

Time and again, when the time comes to build a new website, the question increasingly arises: what about a mobile site? Although an increasing amount of web traffic is mobile, the costs and additional development time associated with building a mobile site make this a very real question for many organizations.
Luckily, the choice is not simply between building a separate mobile site and leaving your mobile visitors frustrated.

There is a middle way—several, in fact. The least costly and fastest one is to build a site with a simple layout, minimizing columns, hover behaviors, and other factors that make a site non-mobile-friendly. This can make your design work reasonably well on most recent devices, and can dramatically cut down on development costs, as well as timelines.

Another alternative, one that is gaining ground, is responsive design. Put simply, responsive design is the use of multiple style sheets, or sets of instructions to browsers, that reassemble the layout of a site based on the device being used to view it. One recent much-touted example is the Boston Globe’s new paid content service, BostonGlobe.com. At this week’s Mobile Monday here in Boston, the Globe’s VP of Digital Products, Jeff Moriarty, demoed the beautiful responsive design of the new service, showing how it plays out on different devices, from smartphones to iPads. Responsive design is not a less-expensive alternative to having a mobile site, but it is the wave of the future, as devices proliferate and developers need an elegant way to have sites work across them all.

For the time being, if your budget doesn’t allow for responsive, creating a site that simply looks good, no matter what device someone is using to access it, remains an effective option. Think of these options when designing, and you’ll find that your site may not be mobile, but it is mobile-friendly:

 

  • Look in your Google Analytics or other analytics tool, and determine what percentage of your visitors are mobile. If it’s less than 10%, designing for mobile may not be a high priority, if it means sacrificing other functionalities. Use what you know of your target customers, too: if you’re in retail, you may have a lot of mobile visitors, but if you’re a B2B service provider, you may not.
  • Still in Google Analytics? Good! Now look at the devices people are using to access your site. Remember to test your site on those devices before your launch.
  • Don’t use Flash. It’s not mobile-friendly. If you must use Flash, don’t put any key functionalities, such as email signups, into a Flash page. (This tip is from Senior Information Architect Jim Dalglish).
  • One-column layouts render more elegantly on a mobile phone than three-column ones, so if you get a lot of mobile traffic, you may want to consider a single column layout.
  • What about hover behaviors? These are actions that happen when someone hovers their mouse over something. Try to keep them decorative rather than essential for people so people on mobile devices don’t miss functionalities.
  • Keep navigation fonts large, and choose ones that look clear on the tiny screens of smartphones.

Designing for mobile is challenging to add on to an existing web design project. Creating a mobile-friendly site, on the other hand, is a matter of some tradeoffs, testing, and thought about how people access your site today. Although it does add a layer of complexity to a new site project, it can be an alternative to a full mobile site with high usability with a lower cost.
 

Anonymous
Sep 14, 2011
Mobile, Mobile UX

The PEW Internet & American Life Project announced that as of December 2008, 11% of adults used Twitter or similar service to share updates about themselves and to read updates about others. In May 2008, just 6% of adults reported using this type of service and in November 2008, 9% of adults reported using this type of service.
Twitter was launched in August 2006 and allows people to send short messages known as "tweets" to friends. These messages are less than 140 characters and can be sent from a computer or, more likely, a data-enabled phone such as a Blackberry or iPhone.
Other highlights from the report include:

  • Use of other social networking sites and blogs increase likelihood of use of Twitter
  • The service is most popular with internet using adults under 35 - with nearly 1 in 5 online adults between 18 and 34 using Twitter or similar service
  • Only 1 in 10 online adults over age 35 are using this system
  • Twitter has been used to disseminate information about California wildfires and the January 2009 crash of the US Airways flight #1549

Source: Pew Internet Project Data Memo, February 12, 2009, "Twitter and Status Updating" by Amanda Lenhart and Susannah Fox

Jason Smith
Mar 23, 2009

A review of our clients’ site traffic for January 2009 reveals an average of about 0.5% of visitors are using an iPhone to browse sites.  Consumer focused sites – such as museums – are seeing the biggest iPhone usage with rates starting to pass 2%.   With record numbers of iPhones being sold, these numbers are sure to increase.  Other newcomers including Google’s Chrome browser and Sony Playstations are showing up on usage reports.
As the increase in mobile access continues we will see more opportunities to segment web site traffic and address individual audiences more effectively.  For example, that iPhone user might be down the street and interested in what service or programming is happening right now. 

Want to learn more about your site statistics and their impact on your organization?  Contact OHO today.

OHO Newsletter
Mar 02, 2009
iphone, Mobile
Syndicate content