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.

---

Intelligent Design: Transform Your Website into a Sales Engine with Machine Learning

Machine learning: The phrase evokes images of computers playing chess or IBM’s Watson destroying two legendary Jeopardy! champions in a three-day tournament. The truth is, though, machine learning is no longer a novelty; it’s now an integral part of our daily lives. Every time you receive a product recommendation from Amazon, your email server weeds out spam before it reaches your inbox or you enjoy a playlist on Pandora, you’re seeing machine learning in action. In a nutshell, machine learning is the science of training computers to recognize data patterns and make adjustments automatically when those patterns change. While on the surface this may not sound very exciting, nothing could be further from the truth. In fact, machine learning is the key to transforming your website into a lean, mean selling machine.

Understanding machine learning in 100 words or less

Machine learning uses algorithms to build models from data; as more data is collected, the algorithms are “trained” to adapt to changes. There are two ways in which machine learning can be implemented: supervised and unsupervised. Supervised learning algorithms are used to create models that establish relationships between types of data — the relationship between purchase data and user clickstream data, for example. Unsupervised learning uses algorithms to gain insights into customer behaviors and preferences by looking for patterns within the data. Both of these methodologies are designed to make marketing and e-commerce more exact, more personal and more profitable.

Putting machine learning to work

Netflix, Pandora and Amazon are all familiar examples of machine learning in action. All three use recommender systems powered by complex algorithms. These systems collect data about your browsing activities, past selections and any ratings or reviews you may have provided. Then they segment you into clusters with other customers who have demonstrated similar interests or behaviors and use this data to suggest items that might appeal to you based on the browsing and purchasing habits of these other customers. You see this on Netflix as the category titled “Because you watched...” and on Amazon as “Customers who viewed this also viewed...” To gain a deeper understanding of how these algorithms work, let’s take a closer look at Amazon. To Amazon, you are a very long row of numbers in a massive table of data. Your row represents everything you’ve looked at, clicked on, purchased (or, equally as important, not purchased) or reviewed on the site. The other rows in this gargantuan table encompass the same thing for the millions of other customers who shop on Amazon. With every click, visit and purchase, more data is added to your row, which allows Amazon to constantly mold and shape the products it recommends to you and the special offers you receive based on an ever-evolving stream of information about you that is being collected and stored. Another innovative example is True Fit, a retail software start-up that is on a mission to apply data analytics to increase customer confidence in online clothing purchases while decreasing the number of returns for e-railers. Well-known fashion retailers, including Nordstrom, Macy’s and Guess, have implemented True Fit’s algorithms on their e-commerce sites. When customers shop on these sites, they’re asked to create a profile that includes their height, weight and perhaps most importantly, the size and brand of their favorite piece of clothing. Using that data, True Fit is able to recommend the correct size for a specific brand and article of clothing. Even more importantly, as customers continue to use the True Fit system, it learns more about their personal style and preferences and steers them toward purchases they’ll be more likely to keep and enjoy rather than return.

How machine learning drives smarter marketing

You don’t need the resources of major e-commerce giants like Amazon or Netflix to take advantage of machine learning to to improve your e-commerce site and your online marketing efforts. By enhancing your existing site with systems that allow you to create a virtual marketing intelligence brain, you can create a more personalized – and therefore higher quality – shopping experience for your customers. By establishing this type of marketing intelligence ecosystem, you can mine the data provided by customers every time they visit your site to answer vital questions that will help you fine-tune your site and your online marketing strategy – questions like these:

• How likely is a given website visitor to convert?
• What behaviors characterize customers who are likely to buy?
• What behaviors characterize customers who are likely not to buy?
• How can new visitors be identified as high-potential long-term customers?
• Which type of web traffic has the most value?
• Which products or services appeal most to a given segment of customers?
• Given the contents of a particular customer’s shopping cart, which additional products are high-potential recommendations?
• How can website visits be optimized to provide the best possible experience for each individual customer?

Making it personal

The final question in the list above is one that deserves special notice because of the staggering potential for using machine learning to create a more personalized shopping experience – one of the key drivers for increasing online sales. Not only can the data collected via such marketing intelligence ecosystems be used to drive recommender systems, it can also be used to create personalized advertising based on market segments — or even individual profiles — that can be distributed across a variety of desktop, mobile and social platforms. This type of advertising can be tailored to any number of personal preferences and demographic information, including age, marital status, location, lifestyle choices, typical purchases, brand preferences and so on. Ads can be focused to such a granular level that they reflect specific colors a given customer prefers, and their individual purchase drivers, such as status or cost-effectiveness. Another exciting aspect of machine learning-based personalization is the development of individual customer profiles. You can even combine online and offline customer data to create a more complete picture of a given user. Types of data included in this profile might include online and in-store purchases, membership and activity in rewards programs, product ratings and clothing sizes. Just imagine how much more powerful your marketing efforts could be if you were armed with this level of information. One of the most important aspects of a successful marketing intelligence ecosystem is how data mined from customer activities is combined with sound business rules in order to make smart recommendations that are well received by customers and that do not compromise their trust in your brand. For example, most people who walk into a supermarket like bananas and will often buy some. So shouldn’t the recommender simply recommend bananas to every customer? No – because it wouldn’t help the customer, and it wouldn’t increase banana sales. So a smart supermarket recommender would always include a rule to exclude recommending bananas. At the other end of the spectrum, the recommender shouldn’t push high-margin items just because it’s beneficial to the seller’s bottom line. It’s like going to a restaurant where the server steers you toward a particular high-dollar entree. Is it really his favorite? Or did the chef urge the staff to push the dish because it comes with a side order of premium mark-up? To build trust, the best recommender systems strive for some degree of transparency by giving customers clues as to why a particular item was recommended and letting them adjust their profile if they don’t like the recommendations they’re receiving.

Science fact, not fiction

Machine learning can give your business a serious competitive edge by opening the door new opportunities in the marketplace. It can help you personalize and improve your customer experience dramatically and thereby drive sales and revenues. Creatives and developers alike are rapidly pioneering new and innovative ways for marketers to use machine learning — and the future of marketing built on these ideas has seemingly endless possibilities.

---