Showing posts with label Responsive Design. Show all posts
Showing posts with label Responsive Design. Show all posts

Tuesday, June 9, 2015

Beyond Responsive Design: How to Optimize Your Website for Mobile Users


Written by Will DeKrey | @
Mobile-Inbound.png
You’ve weathered Mobileggedon. You’re confident that your website and blog will look great on mobile devices and that Google’s algorithm change won’t hurt your search listings.
Congrats! You’ve survived this skirmish ... but it's not going to be the last. 
The algorithm change is evidence Google knows it has to surface websites that painlessly get users what they need at the time that they need it. Google doesn't want to send mobile users to websites that provide a frustrating browsing experience -- that would damage Google’s promise to its users to always deliver helpful, relevant content. 
But this algorithm change is not what marketers should be reacting to. It’s a signal of a much larger shift that’s afoot. It’s the canary emerging from the mine shouting, “Consumer behavior is changing! We must adapt!”
Building a mobile-friendly website is step one, but tweaking your website will not keep you ahead of consumers’ changing behavior and expectations. In short, you have to infuse your marketing strategy with a “mobile mindset.” Here's how.

Map a Customer Journey Full of Interruptions, Detours, and Multiple Devices 

Imagine the experience of Sally, a young marketer who has just moved to Chicago. While out for a walk, Sally passes by a hair salon and realizes she needs a haircut. She pulls out her phone a search for hairstylists in Chicago who specialize in curls and color. Her Google search pops up Joann’s Stylez. She flips through the website quickly and wants to research more but it’s too hard while on the move -- so she emails herself a link. When she gets home, she uses her tablet to quickly check Yelp reviews, examine her calendar, and then book an appointment using the simple form on the Joann’s website.
When Sally loads up her laptop later that night to check her email, she discovers an email fromJoann’s that confirms her appointment and gives her the option to add it to her calendar. The next day, 30 minutes before her appointment, she receives a push notification on her work computer reminding her of the appointment. The next day Sally receives an email asking for feedback on the cut and offering to set up a recurring appointment at a discounted rate. She’s sold.
Sally’s experience is illustrative of the cross-device journey that many customers now make as they move through the marketing funnel: 75% of US online adults use 2+ devices connected to the internet, and 67% have switched devices while completing common tasks, according toForrester.
Consumers now expect this type of experience from all of their digital interactions. They want to be able to accomplish whatever fits their fancy on whatever device is at hand. This means that simply adapting your site to look nice on different devices is not enough. As a marketer, you must dig deeper into your customers’ and prospects’ lives.
For example, at HubSpot, we know that a visitor on a mobile device is very unlikely to fill out a long form on one of our landing pages. So we started using Smart Content to automatically shorten the form when a mobile viewer is looking at it. By doing this our mobile prospects increased by 5X

Seize Intent-Rich Micro-Moments, but Avoid Stripped-Down Solutions

You’ve likely already developed a strong set of buyer personas. You’ve conducted user research and testing to understand which content and CTAs to present to each persona as they move down the funnel. You must now go a step further. You must understand both the rhythm and rhyme to when, why, with what, and from where people are interacting with your website and content.
Google encourages marketers to identify the “micro-moments” in a customer's journey: 
Micro-moments occur when people reflexively turn to a device -- increasingly a smartphone -- to act on a need to learn something, do something, discover something, watch something, or buy something. They are intent-rich moments when decisions are made and preferences shaped.” 
A number of brands have figured out how to anticipate and capitalize on these mico-moments. Apple Passbook loads up your Starbucks card when you’re near a coffee shop. Hertz sends you an email when your plane lands to let your know that your car is ready. Starwood allows you to check in and open your hotel room with your smartphone. 
Consumers are increasingly becoming acclimated to companies offering such intimately responsive experiences. Already, 62% of US online adults expect a mobile-friendly website and 23% expect their mobile experience to change based on location, according to Forrester’s US Mobile Mind Shift Online Survey.
How can you figure out these micro-moments and design your content to meet prospects’ intent? Tap into your data. Here are three analyses you should start with:
  1. Search: Which queries, ads and keywords are bringing users on different devices to your website and landing pages? Once they land on your site, what types of searches are users on different devices performing?
  2. Content: Examine the content that users access by stage in the funnel and by device. Is there a trend around what prospects on their phones are downloading? Sharing?
  3. Flow: Dig into a flow analysis segmented by device. What is the path mobile-using prospects follow? What is the path tablet-using customers follow? From what sites and sources are these visitors arriving?
After building your trove of micro-moments, it would be easy to think: “Okay, we just need to strip our website down to the specific things our visitors will mostly likely want to access on the go.” But mobile users are not limited to completing short, simple tasks. Device does not directly imply location or intent.
A busy professional may use her commute time to conduct in-depth industry research on her phone, process her email inbox on her tablet while watching a movie with her family, and browse the websites of potential contractors while flying across the country. Confirming this intuition, the Pew Research Center’s study of U.S. smartphone use in 2015 found that 99% of smartphone owners use their phone at home, 82% use their phones while in transit, and 69% use their phone at work each week.
People don't want a stripped down set of content. Instead, they want quick and easy access to the materials they need on whatever device they happen to be using. Thus, while you want to optimize your site, landing pages, emails, etc. for micro-moments, you do not want to force visitors into a box from which they cannot escape.

Reconsider Your Metrics

The metrics you established in the desktop-centric days may not seamlessly translate to our new multi-device, micro-moment world. For example, you might have fought tirelessly to find ways to increase visitors’ time on your site, recognizing that more time means higher engagement, which translates to higher conversion.
The micro-moments you identify for mobile visitors, however, might suggest that you want a lower time-on-site. A prospect visiting the website of a consulting firm may be looking for:
  • An infographic they want to show a coworker
  • The bio of a partner with whom they are about to meet
  • A case study to read while traveling
In order to meet this prospect's expectations for their mobile experience, you must design your website to quickly and intuitively help them find the specific piece of information for which they are looking. If their mobile visit is distracting, frustrating, or too time consuming, you’ve damaged their perception of your brand.

Embrace the Intimacy of Mobile

For better or worse, I go to bed with my phone (reviewing tomorrow’s schedule and reading a nighttime meditation) and I wake up with my phone (silencing the alarm and checking the weather). I communicate with my fiancĂ© and my best friends everyday -- all through my phone. When my MBA classmate sends a GIF of Tyra Banks being sassy, I turn my phone to the person next to me and we have a good laugh together.
Day-in and day-out, these interactions create an intimate connection between my phone and me. And I’m not alone: Most consumers imbue their mobile experiences with more intimacy than desktop experiences. The Pew Research Center found that Americans view their smartphones as freeing, connecting, and helpful, and associate their phones with feelings of happiness and productivity.
These associations can inspire greater engagement with and interest in content. Google has found that individuals watching video content on their phones are 1.6X as likely as TV viewers to talk about what there watching with peers and 2X as likely to feel a sense of personal connection to brands that show video content.
As marketers, we should take advantage of these trends and consider how to make our prospects’ mobile experience more personal and social. Perhaps change your website to increase the proportion of social CTAs you display when someone arrives on mobile.

Remember the Basics and Think Multiple Steps Ahead

Overall, embracing the mobile mindset means ensuring that the entire customer journey is responsive, relevant, actionable, and frictionless. As a marketer, you want to help consumers quickly and easily find what they want to find and do what they want to do. Again, this means thinking ahead, understanding when, with what device, and from where your prospects will interact with your content.
This can seem daunting, but mostly it means diligently applying the basics across channels. For example, since over half of all emails are opened on mobile, ensure your emails are mobile optimized. Litmus recommends doing the following:
  1. Use large, easy-to-read text.
  2. Use large, clear images.
  3. Keep layouts simple.
  4. Use large, mobile-friendly calls-to-action.
Recognizing the personal associations people have with their phones, you’ll want to ensure that the “From” name is familiar and that the preview text is inviting. And think ahead: Don’t email a link to a form or an event registration landing page that is not mobile friendly.
Follow these tips and you will be well on your way to living the mobile mindset and weathering the change in consumers’ digital behavior. Forrester predicts that the vast majority of companies will underinvest in mobile in 2015. Move quickly and your organization could be at the head of the pack.

Tuesday, September 23, 2014

The Next Big Thing In Responsive Design

The Next Big Thing In Responsive Design




RESPONSIVE DESIGN HAS TO GO BEYOND OPTIMIZING FOR DIFFERENT SCREEN SIZES. IT HAS TO SUFFUSE AN ORGANIZATION’S ENTIRE CULTURE.
Responsive design, which allows designers and developers to build websites that adapt to every screen size, is one of the most empowering web tools to be adopted in the last decade.
But adapting to the screen is only the first frontier of a new, responsive web. Today, users expect online experiences that not only respond to what device they're using, but also their location, time of day, what they’ve already read, and events happening in real time.
To capture a user’s attention for the next generation of the web, you’ll need more than just responsive design. You’ll need a responsive philosophy.

WHAT PRINT NEWSPAPERS GET RIGHT

When you look at the print version of any major print publication over time, you realize that they don’t just have a couple of templates. They have hundreds. They have the ability to respond to any combination of events with a design that gives each event the proper editorial weight.
Somehow, we’ve lost that ability on the web. Most homepages use the exact same layout, day in and day out. And it’s not just homepages. Article pages--where most users first land on websites--look exactly the same, too. To a user, a day when war breaks out in Iraq can feel exactly the same as a day when the biggest news is a change in Bieber's hairstyle.
These limitations aren’t just stifling for readers. The lack of variation inonline presentation limits a news organization’s ability to communicate its perspective and editorial voice to readers through design choices.
It’s no wonder that some publications feel so one-dimensional online: not all are equipped respond to events with the cultural understanding and editorial vision that once made newspapers so essential.
Websites should do more than respond to devices. Web experiencesshould respond to multiple contexts so that they’re meaningful to every reader, in every moment, on every device.

SOLUTIONS FOR ADOPTING A TRULY RESPONSIVE DESIGN

One example of this approach is the reuse of elements. We’ve long noticed that publishers invest massive amounts of energy and resources designing front-page and section treatments, and spend too little time designing elements for the articles themselves. An easy way around this is to empower editors to reuse packages of content originally designed for one context anywhere on the site, and make these packages automatically respond to their context.
For example: on the homepage, a gallery might expand to take over the entire width of the page. On an article page, it might take up only half the page. This allows editors and designers to create unique designs quickly without repeating work they’ve already done.
The other place where a responsive philosophy can figure prominently is at the bottom of an article page. Unlike the print newspapers of yesterday where the front page sold the newspaper, most visitors to today’s news websites visit to read a particular article. They may never visit the homepage. To convert them into multi-page and even repeat visitors, you have to capture their attention as soon as they finish the article and direct them on the path most likely to make them stick around.
To address this, most publishing sites throw in a comments section or put a static, poorly designed "recommended content" module at the bottom of the page. What they should be doing is reusing more dynamic designs and responding to users to create an ideal path for them to follow.
When users finish an article, why not allow them to continuously scroll right back into the section page? The section page is already well-designed and editorially curated to contextualize the article in a larger flow of news. Scrolling back into it after an article feels completely natural, and invites the reader to dive deeper into the section.
From there, you can incorporate what you know about users. It's easy to glean what device users are browsing on, the time of day they’re visiting, where they are in the world, whether they’re regular or new visitors, how long they’ve been on the site, and where they’ve just come from.
When we redesigned the Los Angeles Times, we collaborated with theTimes on an algorithm that automatically decides the best thing to serve each user, based on all the information we know about them. Crucially, the system still allows editors to override those choices when they need to respond to major events.
For example, if users come in through an article on the Times' Dodger’s blog, and they’re frequent readers of baseball articles, the default setting might be to serve them more sports content. But if an earthquake has just happened, an editor can override that behavior to serve the news organization’s editorial agenda.

THE FUTURE OF RESPONSIVE DESIGN IN NEWSROOMS AND BEYOND

As this philosophy becomes more commonplace, you can imagine a new role developing inside newsrooms. This person would combine a deep understanding of the editorial mission with empathy for the user to constantly tweak the algorithms governing how readers consume content, and design responsive pathways throughout the site that keep users engaged.
Media outlets aren't the only organizations that could benefit from a more holistic approach to responsive design. On the web, the definition of a publisher has become fluid. Anyone who wants to reach a user through media can become a publisher. Increasingly, brands are co-opting tools designed for publishers to offer better experiences for their customers.
As brands become more publisher-like, they’ll also need to incorporate a responsive philosophy that adapts to the user so that they can reach them at the right time, with the right messaging, and an understanding of cultural events.
But to truly adopt a responsive philosophy, you can’t slap newpaint on an old house. You must create dynamic systems that can ingest, analyze and act on information to serve a tailored experience. In the future, these systems can adjust to incorporate new editorial needs, technologies, and user behaviors.
Responsive philosophy is not just about designing websites that adapt to screen size. It’s not just about designing new interfaces. It’s not just about upgrading a technology stack. It’s about suffusing an entire organization’s culture, process, and technology with the ability to respond to any situation, anywhere, for any user, inside and out.