Post by Paul Stephani, Senior Manager, Content
Google announced back in May 2015 that mobile searches surpassed desktop in the U.S. and in at least nine other nations. And according to StatCounter, worldwide internet usage has tipped in favor of mobile devices for the first time as of October 2016. Now that mobile has become predominant, what should brands focus on in 2017?
Smartphones replaced and surpassed feature phones nearly ten years ago. This encouraged developers and designers to create devices that cater to the consumer. At first, apps provided smartphone users with the best user-friendly experiences available. However, familiar browser-based desktop content that people craved outside the app experience was essentially non-existent. Users agonized pinching, tapping and scrolling their way around desktop-oriented websites. Waiting for the content to load on cellular network was best left for a Wi-Fi connection. Browsing could be tolerable at times, but ecommerce transactions and forms were simply too cumbersome to complete and were ultimately abandoned for the web’s native environment: the trusty desktop.
When the Boston Globe rolled out its new responsive design website using HTML5 in 2011, the days of requiring an app to navigate content began to shift (Wired). Today, new challenges face marketers as mobile dominates user behavior, the competition catches up, and more nuanced considerations and optimizations are required to stay ahead. So what can we do as marketers to take our clients a step further when everyone already has a mobile experience available?
Now that Google will prefer the mobile version of a website in rankings, once acceptable tactics for content configuration may be in flux. Separate mobile websites on a subdomain or dynamically-served content will put brands at a disadvantage if the mobile version is trimmed down compared to its desktop counterpart. In other words, if the richer experience in terms of META data, structured data objects, images and text lies on the desktop site only, then mobile content will be at a significant disadvantage in Google’s mobile-first shift. Google doesn’t explicitly state that a separate mobile site will be a disadvantage, but future configuration strategies should call for an alternative approach in housing mobile content. Responsive design remains the industry standard, but is inherently slow. There is a solution for this: accelerated mobile pages (AMP).
ACCELERATED MOBILE PAGES (AMP)
Google’s preference of mobile-friendly content should come as no surprise with the rollout of the mobile-first index within a year of the accelerated mobile pages (AMP) project release. The AMP framework was developed due to the relative slowness of the mobile web. As the developer community lagged behind, Google decided to kick start the community into action and reward those who adopt the framework.
This mobile-first index, the AMP project, increased smartphone usage – yes, mobile had finally matured.
With these built-in advantages, no other framework can compete with page speed rendering times. Adoption of the AMP framework has expanded beyond news publishers to a wide variety of websites. AMP should be a serious consideration for most types of websites wishing to stay on the leading edge of mobile technology and speed.
Ensuring that a site is optimized for mobile is becoming increasingly important not just because of the large number of users that visit sites through mobile, but also because of the weight search engines are placing on mobile usability. Websites with an optimized mobile site are more likely to rank higher than websites with a poor experience, and users are more likely to engage with a website and brand when the site is easy to use – a very important factor in consumer digital satisfaction (see Performics Digital Satisfaction Index™). The stronger the site experience for consumers, the more confidence they’ll have in a product or service. By focusing on this critical piece, clients can achieve multiplied value across all paid, owned and earned marketing efforts.
Allow for easy scrolling
Since screen size is limited on mobile, it’s important that there’s additional information available on the page. There should be no false bottoms on the site that will make users think there isn’t any additional information and if there are, there should be guiding iconography that lets users know there’s additional content. Once users reach the bottom of the page, it should be just as easy to reach the top of the next page. This reduces the time required for users to get through the content and locate what they are looking for.
Make sure site accounts for fingers of all sizes
Touch screen navigation can lead to accidental clicks if buttons are too big, too small or too tightly packed. It’s easy to click these buttons when a user is simply try to scroll down the page. Because of this, touch targets should be appropriately sized and spaced well.
Prioritize most important content
Space on mobile is greatly reduced and users are typically more interested in quickly scrolling and finding what they’re looking for. Content should be prioritized to allow users to quickly access the most important information. Elements that aren’t as effective for the mobile experience should also be excluded. Elements such as sliders aren’t always effective on desktop and are less effective on mobile. Key information can be hidden within these sliders and should be eliminated on mobile so users don’t miss any key pieces of information.
- Page context is extremely clear
- Body copy font size is at least 14px
- Line height of paragraph text is at least 1.5x
Leverage mobile specific features
Features like GPS, scanning of codes, or click-to-call can greatly improve a site’s usability when users are on the go. This provides users with a way to interact with the site that can only be available on mobile, creating a unique experience that takes them beyond reading and scrolling.
Ensure all forms are mobile friendly
Forms within the mobile site should be optimized to be easy to use since providing information on mobile is more difficult than it is on desktop. Required information should be limited to only the most important fields.
- Forms use custom input types (i.e. numbered keyboard for ZIP)
- Forms are as short as possible
- Autocorrect and auto-capitalize are disabled on form fields
Make options clear
It should be clear to the user what can be selected, tapped or swiped. Making sure this is clear will make it easier for the user to understand the site. It’s unlikely that users will scroll through the entire page to determine what information is available. This means that they will possibly miss out on information that may be of interest to them. Pages with a lot of sections and content should include above-the-fold summaries of the available content with links to each section.
Optimize calls-to-action (CTAs) to drive users to action
The site should be optimized to include relevant and dominant elements that increase motivation to complete the most desired action. This can be accomplished by:
- Including action and benefit-oriented language within the CTA
- Provide incentives and options for users higher in the funnel
- Make the CTA dominant by including contrasting colors that still fit into the overall design
Ensure articles and product information is readable
To increase engagement and encourage users to return to the site, content should be readable and skimmable. This can be done by:
- Keeping content as concise as possible, avoiding long paragraphs and sentences
- Leveraging headings to break up long articles
- Writing in an inverted pyramid style, placing most important information above the fold
- Leveraging bulleted lists and text formatting
- Making sure images support textual content
- Providing an option to view larger product images
Ensure that it’s easy for users to navigate the site
The site should be optimized so users aren’t required to rely on browser options to reach different sections of the site. It should also be clear to users how to access menus and search options. A clear understanding of the user is required to create an optimized experience. Some users still aren’t aware of what a hamburger icon means or even that they can use the Safari’s back button to return to the previous page. Considerations should be made for these groups if they are active site users.
- Touch elements are spaced appropriately
- Site is laid out with common touch areas in accessible spots
- Functionality of the site is touch friendly (i.e. swiping, touching, dragging, tapping, etc.)
- Navigation is optimized for common mobile actions
- Button and touch targets are at least 44px by 44px
- Buttons, menus and other relevant features make use of CSS
- Non-essential items are moved away from prominent positioning
2017 MOBILE TO-DOS
Search engine marketing experts need to step out of their comfort zone and learn to embrace user experience concepts, pay closer attention to all the engagement metrics to see where the biggest shortfalls exist and where improvements can be made, embrace mobile design concepts, taxonomy strategies, and mobile conversion testing, and deploy structured data markup when possible.
- Incorporate all available page-rendering speed efficiencies
- Markup as much content into structured objects as possible
- Invest in mobile design concepts, conversion optimization and testing
- Consider AMP implementation