Website Design for a Multi-Device World

The array of devices through which people interact with online content is larger and more diverse today than ever. To underscore the point, try this little exercise – take a look around your house and find every device you own that can access the Web. For me, the list looks like this:

• Desktop computer
• Laptop computer
• Netbook computer
• iPod touch (x2, each a different generation)
• iPad
• Kindle (x2, each a different version)
• Android phone (HTC EVO)
• Gaming system (wii)

Each of these devices has a different screen size, and the experience of accessing web content is different on each.

That’s why, if you want to ensure that your website will provide an experience that truly engages your audience, it must be designed specifically for this multi-device world in which we all live today.

The multi-device user

The multi-device world is populated by multi-device users. While a staggering variety of devices are, indeed, being used to access web content today, it’s also important to remember that the same user is often using multiple different devices to access your website – and they expect that site to work well regardless of which device they happen to be using at the time.

To illustrate this point, let’s consider the scenario of an average everyday activity that occurs on the Web: mom planning the family vacation.

As she starts her day, she does a quick search on her iPhone and starts to peruse a few sites that strike her interest as she enjoys her morning coffee. Later she takes advantage of her lunch break to continue her research. She visits many of the same websites as she did before, this time reading more and delving deeper each one now that she’s seated comfortably in her chair behind her desk and has more screen real estate to work with. That evening she shares her findings with the family, flipping between sites on her iPad as they unwind on the couch. In each instance, she visits many of the same sites, and she expects them to perform just as well no matter which device she has in front of her.

More than just mobile phones

You have likely been introduced to the concept of “mobile websites” and have been told that your company needs one, but as the scenario above illustrates, the multi-device landscape encompasses much more than just large desktop monitors and small handheld phones. There are many devices and screen sizes in between, and your website must be equipped to work well on all of them. That’s why a separate “mobile-only” site is not the best way to serve the needs of the multi-device user.

A mobile-only solution relies on technology that detects when your website is being accessed via mobile phone and redirects the user to a completely separate version of your site – one designed specifically for the typical screen size of a smartphone. These mobile websites often feature less content and fewer features in order to minimize both navigational complexity and load time.

The problem with the mobile-only approach is that it only addresses the needs of one specific type of device. Large desktop computers get the “normal” browsing experience while mobile phones get a smaller, more streamlined version.

But what about the multitude of devices that fall between these two extremes? How do we serve them effectively?

Going responsive

There are a number of deficiencies with a mobile-only approach, but the inability to serve today’s broad array of devices is the most detrimental.

If the mobile version of your website offers less content and fewer features than your desktop site, you run the risk that a user will be looking for content that you have decided to eliminate from your slimmed-down mobile site. This is a problem, because when a user comes to your site looking for something specific and they can’t find it, their natural response is to go looking for it somewhere else – which usually means your competitor’s site.

After all the effort your put into attracting users to your website, anything that drives them away – like a user experience that is not optimized for the device they are using – runs counterproductive to your goals. So how can you embrace this multi-device world and ensure that your website can succeed in it? It’s time to go responsive.

What is responsive web design?

Responsive web design is an approach that has gained much favor and momentum in the web industry in the past few years – in part because it offers a solution to many of the limitations that mobile-only websites face.

A responsive website is one that intelligently rearranges its layout based on the size of the user’s screen. For instance, let’s say your site normally presents its content in three columns. The smaller a screen gets in size, the more problematic this layout can become, as the columns become so narrow that their content is unreadable and their buttons are un-pressable.

With responsive design, when a visitor is using a tablet in portrait mode or a laptop with a very small screen, those three columns reflow into a two-column layout that is better suited to the dimensions of those screens. For handheld phones, the design shifts to a single column of content with text and links that are large enough to be easily read and touched even on a very small screen. In this way, you have one website that “responds” to the multi-device user, adjusting its layout based on the particular device they are using – hence the name responsive design.

The benefits of responsive design

Efficient maintenance

It’s hard enough to keep one website updated with timely, relevant content; updating content across multiple websites is even more challenging.

When you go the mobile-only route, you end up with multiple websites to maintain. With a responsive approach, however, you have only a single website to manage. This makes it easier to keep your content consistent, because anytime you make a change to your website, that change is seen by all visitors regardless of the device they are using.

Zero gaps

As we saw earlier, supporting the multi-device user means being able to accommodate more than just large desktop screens and small handheld devices.

A responsive web design approach does indeed address these two extremes, but it also fills all the gaps in between, adapting its layout to perform seamlessly on the widest range of screen sizes and devices possible. This is especially helpful for those users that jump from device to device, as described earlier, because the site will adjust to their needs and present them with a consistently good experience regardless of their choice of device.

Adaptability

Because a responsive website design will reflow based on the screen being used to access it, your website will be equipped to support not only those devices that are popular today, but also those that we don’t even know about yet.

As new devices are released – some of which will undoubtedly also introduce new screen sizes or resolutions to the market – you can rest assured that your responsive site will do its best to present an optimal experience by “responding” to whatever type of screen it might be presented with.

Go big

While much attention is paid to how your website will handle smaller screens such as those on smartphones, there is another end of the spectrum to consider: large devices.

A responsive website can not only reflow its layout to present an optimal experience for small screens, but it can also do the same for very large screens. Large screens are often neglected in website design because even sites that are engineered for desktop monitors are not built to suit many of today’s widescreen displays. However, a responsive approach can allow your site to stretch its legs a bit in order to better fit bigger screens, making use of the additional space to better communicate your organization’s message.

Cost effectiveness

Since responsive design means you need only a single website, deploying this approach can often be much more cost effective than developing separate websites for different devices. This cost effectiveness is compounded further over time as you save the added expense of having to update, maintain and host separate sites for desktops, mobile phones, tablets, etc.

The challenges of responsive design

While there are a number of advantages to responsive design, there are a few challenges as well.

First, responsive design is not a feature that you can simply tack on to your existing website. To be done right, a responsive approach requires you to redesign and redevelop your site from the ground up so that responsive logic can be built into every aspect.

Another challenge of responsive design is that, if not done properly, it can result in loss of performance for users on devices where bandwidth is a concern. Often the small-screen version of a responsive design does away with some of the elements that exist solely for aesthetic purposes (large background images, for example). When such elements are “turned off” for smaller devices, if not configured properly, they might still be sent to the device anyway, meaning those devices are required to download excessive and completely unnecessary data that negatively impacts performance. To avoid this pitfall, make sure you’re working with a team that’s experienced in responsive design and has the technical expertise necessary to ensure that your site tailors both its layout and performance to deliver an optimal experience for any device.

Embracing the multi-device world

Traffic to websites from devices other than desktop computers has risen dramatically in the past few years, and industry analysts predict that number will continue to soar in the coming years. Looking at the hundreds of websites that I help maintain and manage, I am seeing an average of about 30 to 35 percent of all traffic coming from mobile devices of one kind or another and even a few sites where mobile traffic is nearing 50 percent.

As we head toward a future where more than half of our website traffic will come from visitors not using a traditional desktop computer, now is the time to ensure that your website is armed to compete effectively in a multi-device world.

---

The Who, What, When, Why and How of Successful Email Marketing, Part II

Email marketing: it’s not the newest, shiniest weapon in your business growth arsenal. But there’s no denying that it’s still a highly efficient and cost-effective way of communicating with your existing customers as well as new prospects. But don’t let the low barrier to entry lull you into a false sense of security. There are certain fundamentals you must follow if you want to create a campaign that captivates and motivates versus one that is ignored and condemned to the trash folder. In part one of this series (http://www.famefoundry.com/11041/the-who-what-when-why-and-how-of-successful-email-marketing-part-i/), we examined the quality of the recipients to whom our campaigns are sent and solidified a strategy for when and why to send them to ensure that we do not overwhelm those recipients with messages that are unimportant or unnecessary. Now, we’ll turn our focus to the remaining two fundamentals of email marketing success: what we will say and how that message will be delivered.

The How

No matter which email marketing platform you use to create and send your campaign, all include templates that provide designated areas for content that can be easily edited. The issue with these templates, of course, is that they are, well, templates. As a result, when you use them, you run the risk that your emails will look nearly identical to others that your customers receive, and simply adding your logo is not enough to create real differentiation. As a result, used as-is, they can make your marketing campaigns look cheap and unprofessional. This is why customization is a must. All of these email templates are built with HTML, the same programming language used to construct websites. Behind the scenes are code and images that can be edited to create a more custom-tailored look and feel. Due to the highly technical nature of making modifications within the HTML code, this is probably not something you should DIY but rather entrust to your web development team. They can shape and refine these pre-existing templates or even create a completely unique template design from scratch that integrates seamlessly with all elements of your brand’s visual identity (i.e., your website, printed materials, etc.) and sets you apart your competitors. Whichever approach you choose, this represents a relatively small one-time investment that will pay great long-term dividends as you use your branded templates time and time again. Ideally, you’ll want to establish a few different email layouts that can be used for various purposes, such as newsletter-style content, major announcements and perhaps service alerts or other time-sensitive notifications. The template formats you require will of course depend on your business needs, but by having a few on-hand to choose from, you can ensure all of the email communication that you send reflects well upon your brand.

The What

Subject, subject, subject

No matter how beautifully designed your email might be, that design isn’t worth the pixels it’s transmitted on if your message goes straight to the trash unread. Your subject line is the make-or-break factor that will determine whether the recipient will grant you even just a few seconds of their precious time and attention. A line that’s boring and unimaginative provides zero motivation for them to give your message a second glance. One that’s too over-the-top screams “SPAM!” and is just as likely to be ignored. Subject lines that are too long, written in ALL CAPS, filled with exclamation marks or intentionally deceitful (e.g., including “Re:” to make the email appear as if it’s a direct reply to a message from the recipient) are guaranteed to work against you, so avoid them at all costs. Effective subject lines are neither vague nor dull. If you received an email with the nondescript subject line “News Update,” would you read it? Neither will your customers. Similarly, the subject line “April Customer Newsletter” explains what the email itself is, but it offers no insight into the content of its message. For my own company’s email newsletters, we have eschewed these types of easily disregarded subject lines in favor of more descriptive ones that tease the content. In doing so, we have achieved much better open rates. One way to boost the success of your subject line is to frame it in the form of a question, such as “Are you considering a move to the cloud for your business?” or “Do you know the reasons companies usually struggle with a move to the cloud?” Those two subject lines are ones I actually tried recently along with a more straightforward one – “Challenges of Moving Your Business to the Cloud”. While all three saw relatively good open rates, the two that posed a question to the recipient well outperformed the other. Start paying attention to the emails that land in your own inbox. Which subject lines catch your eye? Which do you gloss over without a second thought, and which ones prompt you to hit the “delete” button immediately? Soon you’ll begin to discern which types of lines are most effective, and you can apply these techniques to your own campaigns.

Inform, don’t overwhelm

Now that you’ve formulated an attention-grabbing subject line that will motivate your recipient to open your email, the next challenge you must conquer is the content of the email itself. All too often, companies try to communicate too much via their emails, with the end result being that the recipient is too overwhelmed to fully process and take action on the information being conveyed. Many email newsletters fall into this trap, with company announcements, blog articles, product highlights and more crammed into a single message. In an attempt to make sure the recipient has access to every piece of information that could possibly be of value to them, the e-newsletter becomes a scattered mess that lacks organization and direction. Additionally, this information is usually presented in full within the body of the message itself, instead of prompting the reader to click a link to access the full text via a web page. As a result, the number of ideas coupled with the depth of their presentation spells doom for the campaign. A quick scan of the message is enough to turn the recipient away because they have no desire to invest the time necessary to sort though the barrage of content to find the one or two bits of information that might be of use to them.

Be a tease

Avoid this “much too much” trap by editing and teasing your content. Include no more than three key ideas per newsletter. Sure, you may have more than three things to say, but you must be ruthless in your selection process, and save the rest for another missive or another medium. Next, present those three (at most!) ideas in the form of short teasers. A title, a short intro to the news item or article being highlighted and an accompanying image are all you need to pique your reader’s interest – along with a link prompting them to read more on your company’s website. By doing so, you’ll ensure that your email newsletter offers a clean, visually appealing presentation that can be scanned and processed in a matter of mere seconds. If a reader is interested in one of the three key ideas you’ve presented, they have the option to easily obtain more details for themselves. Of course, this approach has the added benefit of driving users to your website and increasing that site’s exposure to new audiences. When I suggest this “click to read more” approach, the reaction I most often receive is that readers “don’t like to click a link” but rather want to read the article in their email message. I have no idea where this belief came from, but it is false. Users are more than comfortable with clicking links, especially if it comes from a trusted source (see Part I for the benefits of using a carefully curated email list of customers who know who you are already). The Internet is driven by clicks, so do not be afraid to embrace this behavior! By mastering these five fundamentals of successful email marketing – the who, what, when, why and how – you can help to ensure that your messages are a welcome presence in your recipients’ inboxes, that they are read and, most importantly, that they motivate your customers and prospects to take the action you desire.

---