Option 1: Responsive design

Explained simply, responsive design is a web design technique that uses CSS and a series of coded rules to dynamically adjust the appearance of your desktop content so that it best fits within the screen-size parameters of different mobile devices. Responsive design uses JavaScript and client-side serving (also known as front-end serving) to alter the way pages appear in mobile or desktop browsers after the server has already loaded the page. See how responsive design works in Figure 3-1.

Websites using responsive design have one single set of URLs for all content regardless of whether that content is being delivered to a desktop computer or a mobile device. See the example in Figure 3-2.

When to use responsive design

Choosing responsive design makes sense in the following five circumstances:

• When you want a coherent desktop and mobile experience.
• When you have a strong desktop website that has built up years of link equity, trust, and industry authority. Responsive mobile sites benefit from shared indexing with desktop sites, which can result in improved mobile ranking. Although you can use special code if you go with other mobile design options for your website to make sure the search engine sees the mobile site as the same as your desktop site, this is a technical issue that can introduce complications. (Learn more about shared indexing in the “Optimizing to rank in mobile search results” section, later in this chapter.)
• When you want your desktop and mobile visitors to convert in the same way.
• When you have limited development resources, which can make maintaining a custom mobile experience with custom content seem out of the question.
• When you want to manage the maintenance and search engine indexing of just one site.

Option 2: Dynamic serving

Dynamic serving is a server-side development approach that detects which type of device your visitor is using to deliver unique content that is optimized specifically for her device. As you can see in Figure 3-3, the user searches with a mobile device and the server responds accordingly.

Like responsive design, dynamic serving uses one single set of URLs for all content regardless of whether that content is being delivered to a desktop computer or a mobile device. But that’s where the similarity ends.

See, responsive web designs dynamically adjust the appearance of content — but the URLs stay the same because the mobile content and desktop content are essentially the same, other than appearance. With dynamic serving, the URLs stay the same, but the content delivered to mobile devices is not always the same as the content delivered to desktop devices.

This difference in content is possible because dynamic serving is a server-side approach that alters content code (HTML, CSS, PHP) based on the device that is asking for it before the content is delivered to the browser (where the user sees it). This code allows the server to alter the content of the page without altering the URL of the page. You can find more on how to set up your server for dynamic serving in Book VII, Chapter 1.

When to use dynamic serving

Using dynamic serving makes particular sense in the following five circumstances:

• When your website needs to include complex mobile-friendly functionality, such as multipage forms or interactive tool dashboards. In this case, dynamic serving can be a great solution that allows you to serve the best experience based on user circumstances.
• When you find that your website needs to serve two different device markets very differently. Some examples are that your iPhone users take a very different path to conversion than your Android users, or you want your pages to render differently for smartphone users than for tablet users.
• When your visitors largely use different keywords to access your website via desktop search and mobile search. Dynamic serving lets you alter the way content is rendered on a page-by-page basis, so it is a great resource if you want to optimize specific pages for high-volume mobile keyword phrases without changing the desktop language.
• When you want your desktop visitors and mobile visitors to convert in different ways.
• When you have strong development resources that are comfortable with manually coding and maintaining complex, clean code.

Option 3: Building a separate mobile site

A mobile site is just what it sounds like: a separate website that has been created specifically for mobile device users. With a separate mobile site, rather than altering content for mobile upon request, when searchers navigate to your website from a mobile device, they are redirected to a mobile-only version of your website that lives on a unique domain, such as m.domain.com (as shown in Figure 3-4) or mobile.domain.com. If you go with this choice, you need to set up your server to detect the device and then send the user to the right site. Read about how to redirect users in Book VII, Chapter 3.

An important technical implementation of a separate mobile site is the proper use of canonical tags. From your mobile pages, include a canonical tag that points to the correlated desktop page so that the trust, authority, and link equity of your desktop site will be associated with your mobile site as well. Read more about this in the Google Developers documentation (https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/separate-urls).

When to build a separate mobile site

Here are a few circumstances in particular when it may make the most sense for your business to build a separate mobile site:

• When you need to prominently include elements on your desktop website that don’t render well on mobile devices — Flash, for instance. Although we don’t recommend using Flash or other high-bandwidth interactive elements on your website, we do recognize that sometimes you have to (say, if you are running a movie website and need to create image-based experiences and show movie trailers). If your boss says you have to to do this, you’ll benefit from building a separate mobile site.
• When you need to build a mobile-specific conversion flow or your visitors use search terms on mobile that are very different from the search terms they use on a desktop.
• When you have a huge website with lots of pages and limited resources. Making a large website multi-device responsive can take a lot of resource time. A mobile site can be a solution that allows you to show your mobile users a smaller, refined, sampling of your website content.
• When your visitors use older — not “smart” — phones to access your website. Mobile sites tend to work better on these types of older, less dynamic phones.
• When you have the resources to build, update, and maintain a separate mobile site.

A note about mobile apps

A mobile app is a self-contained computer program, or application, built specifically to provide users with a tightly controlled way to access content outside the mobile browser. Although mobile apps are great for user experience, they are very different from mobile websites.

Because the scope of this book is limited to techniques that can help your mobile website rank in search engine results pages, we don’t go into depth about when to build a mobile app, or how to optimize mobile apps for iTunes or the App Store. To learn more about that, we recommend that you dig deeper with a book specifically about mobile app marketing.

Prioritizing mobile content creation

Think of all the things your users see when they visit your website. From words, pictures, and video to your site’s navigation, they see the content of your website.

Now, get in your mobile mindset and think about how your visitors will experience your website content when they are on mobile devices walking the streets of New York.

If you remember only one thing about designing for mobile friendliness, it needs to be this: Mobile-friendly websites need above all else to provide the best user experience possible.

Think of your user’s needs first and you’ll always end up with a better design. Plus, the search engines love a great user experience! So, by designing to make your human user happy, you are automatically designing to make the search engine happy. The following sections describe seven ways to design mobile websites that keep users happy.

Create single-tap calls to action

To make your content mobile friendly, you want to make it as easy as possible for your user to find what they need and take action. In the mobile environment, in which users are working with small screens and finger taps rather than mouse clicks, prominent click-to-call call-to-action buttons are a great way to help users easily accomplish common tasks. And completing a task means a conversion for you!

Click-to-call buttons are a great mobile-specific call to action because mobile users are often already holding a phone. This button helps users get what they need (a chat with you) and for you to get what you need (a conversion).

Figure 3-6 shows an example of a click-to-call button, placed strategically at the top of the Bruce Clay, Inc., mobile experience.

Also consider creating single-tap buttons that help mobile users find your store front or accomplish tasks on the go. You can see an example on the Progressive mobile site, shown in Figure 3-7, which has buttons to help users find local agents and make payments without having to scroll down the page.

Avoid using Flash

In general, designing with Flash is unreliable and not recommended for either desktop or mobile design. This includes relying on Flash to play video content. Some mobile devices, such as iPhones, can’t render Flash at all, so any elements of your website that require Flash will render a poor user experience.

Flash is also bad for SEO because Google has been known to bump SERP rank and insert SERP warnings when mobile sites use Flash.

Designing mobile-friendly navigation

Your mobile-friendly navigation can take many shapes. The option that is best for you depends on how complex your navigation needs to be, your conversion goals, and your users’ preferences.

Remember that your site’s navigation needs to help visitors — and search spiders — navigate through your website. So your mobile navigation needs to be intuitive, functional, crawlable, and optimized for touch.

Keep these best practices in mind when designing your mobile-friendly navigation:

• Keep it simple, sweetie. Keep top-level navigation as simple as possible, especially if you want your navigation displayed across the top of your mobile page. Remember that you’re designing for a small screen size. (An iPhone 6 is 750 pixels wide in portrait mode, whereas a 13-inch laptop computer is 1,280 pixels wide).

  The point of a mobile site let your visitors easily browse your website with a mobile device. Your navigation should give them links to your main category pages and pages that improve usability (such as a “Call Now” option and a link to your shopping cart).

  You don’t have to link to every page in your website here. In fact, too many options can result in decision paralysis and confusion, which creates a poor user experience.

  Including four to eight items in your top menu is usually a good rule of thumb. See the example of Bruce Clay, Inc.'s top menu in Figure 3-9.

• List your most important pages first. These are usually your conversion calls to action, such as “locate store,” “shop,” “subscribe,” and “products,” as shown in Figure 3-10. If your website is more content oriented than sales oriented, list your most important category first.
• Consider losing the Home button. To save space, you can leave off the Home button in your navigation and instead have your top-of-page logo navigate to the home page when tapped.
• Design for touch and give enough space for a finger. Because both your tablet and smartphone users are navigating your mobile site using touchscreens, it’s very important to make sure that the tap sensitivity of your navigation buttons are large enough to use. The average finger requires a space at least 44 pixels large, left to right and up and down.
• Make your menu intuitive. Your visitors should know exactly where each of your menu items will take them.
• Minimize multilevel navigation. We encourage you to keep it simple, but if your navigation simply must have drop-down levels, never add more than two layers of drop-down functionality.
• Make sure that drop-down menus are activated by touch. Although mouse-hover activation works in the desktop experience, it leaves your user stuck in the mobile experience.

• Use visual menu indicators. If you use an off-screen menu, use a three-line menu indicator so that your visitor can access your menu. We talk more about off-screen menus later in this chapter.

  If you have a multilevel navigation, use an intuitive symbol, such as a plus sign (+) to indicate that the menu item has further drop-down options. Also consider using a symbol to differentiate buttons that navigate to a new page from buttons that reveal more drop-down options. REI uses a right-pointing arrow (>) to indicate when a navigation item takes you to a new page, as shown in Figure 3-11.

• Add touch feedback. When users tap an item in your navigation, something needs to happen to assure users that they tapped in the right place. This feedback can be a color change, a blink of color, or a font change. Figure 3-12 shows that Local, tapped by a user, is highlighted in blue (although you can’t see the blue in the printed book).
• Avoid horizontal scrolling. In general, search engines aren’t fond of excessive left to right scrolling, and neither are users. If your menu is too long to fit within the parameters of the screen from left to right, consider a vertical navigation.

Exploring mobile navigation styles

Because the space you have on a smartphone is so limited, the off-screen toggle menu (a navigation that can be expanded when tapped) is a common mobile navigation. With this option, the user sees three stacked lines in either the left or right corner of the mobile experience. The user must tap the lines to see the navigation. Figure 3-13 shows two examples of off-screen toggle menus.

Another navigation option is to have a minimal static navigation that runs across the top of the mobile browser window. Figure 3-14 shows an example of the static navigation experience. In this example, GameStop has identified these five pages as being the most important to its mobile users' experience, so these navigation items are always present on the top of the mobile web page.

A third option is icon navigation. Figure 3-15 shows a mobile site that has created a series of graphic buttons as its home page navigation. Note that this approach is applied in addition to — not instead of — an off-screen toggle menu.

Optimizing forms

Forms are used on websites to collect information from users. Sites use this information to complete transactions and registrations, or to complete other tasks such as submitting an insurance claim online.

When approaching form design for mobile devices, keeping the physical mobile experience in mind is important. If you make your form slow to load or overly complicated, your visitors will likely abandon the form in the middle, or even before they begin.

Keep these best practices in mind when designing your mobile-friendly forms:

• Keep forms short and sweet. Make your forms easy to complete by minimizing the number of required fields. Having one field for “Name” rather than two fields for first and last name is a good example of an easy way to make your form one field shorter.

  Ask for too much and you may end up with nothing at all.

• When they can’t be short, create multipage forms. If you must have a long form, break it up into multiple pages, present only a few above-the-fold fields on each page (“above the fold” means before you have to start scrolling down the screen), and include clear Next buttons so that visitors don’t have to scroll excessively. A progress bar can also help keep users committed to multipage mobile forms.
• Make the Submit button and the form fields finger size. Your mobile users are completing forms with their fingertips, so your fields and buttons need to be big enough to make tap interaction easy. No standard size exists that works best for every mobile device, but creating buttons and form fields that are 44 pixels wide by 44 pixels tall is generally a safe rule of thumb.
• Minimize typing by using drop-down menus, radio buttons, and auto-selected answers. Anything you can do to limit the amount of typing required will help speed up the process and improve your customer satisfaction. For example, if your form asks for a state, let users select their state from a drop-down menu so that they don’t have to type it.
• Make what you’re asking for clear. Above each field, clearly specify exactly what you want the user to put in the form field. If you’re asking for a birthday, for instance, clarify whether the form wants the birth year entered as two or four digits. See an example from Progressive in Figure 3-16.

  If you’re asking for a piece of information that requires additional explanation, including a button that offers more information when tapped (often called a tooltip) can aid user experience. Figure 3-17 shows a form using a tooltip to explain what CCV means.

• Clearly specify which fields are required. If your form has more than one field, make sure that your users know exactly which fields are mandatory and which they can skip. Placing an asterisk (*) next to required form fields is a common convention. If all your form fields are required, place an asterisk next to all your fields. Don’t assume that your visitors will understand that they are all required.
• Allow log-in using a third-party provider like Google or Amazon.com. Sometimes a registration form can become a barrier to entry for a first-time user. Allowing your customers to sign in using a third-party provider that they are already connected to can speed up the process and eliminate the registration barrier.
• Figure 3-18 shows an example of a third-party integration that allows first-time users to sign in using their Google account information. This is much easier for the user than typing registration information into a form.

  Third-party log-in is also a great way to get customers through the purchasing form. By allowing users to log in and pay using a service for which they already have credit card information stored, such as Amazon.com, you allow your customer to skip a multifield credit card authorization form. See an example in Figure 3-19.

• Keep the focus on the form and minimize other content on the page. When your visitors have landed on a web page with a form, they are on a conversion page, and you want the content of the page to do everything in its power to keep the conversion momentum going. You want to get your visitor interacting with the form and tapping the Submit button as soon as possible.

  Adding a lot of content on top or next to your form can end up being a conversion distraction that can slow down or completely derail the form submission process. To minimize distraction, try to include only explanatory content that helps the user complete the form. If you do want to include content that isn’t explanatory, keep it concise and directly related to the form — just like the example from BruceClay.com in Figure 3-20.

• Visually validate when a form line is completed correctly. Mobile users don’t love filling out forms the first time, and they really don’t love having to go back and fill them out a second time because the form has errors. Using visual cues to let your user know they have completed each line of the form correctly — or incorrectly — can save time and limit frustration (see Figure 3-21). A green check mark next to the field is a great way to clearly indicate that the field has been completed the right way, and a red X works well to communicate when something is wrong. If something is wrong with the line, make sure to clearly explain how the user can correct the error.

Comparing mobile results to desktop results

Mobile search results are the results that users see when they search the web using mobile devices.

Sometimes mobile and desktop search results can look very similar. This is because Google uses one search algorithm to analyze and rank both desktop and mobile results.

Other times, mobile search results can look very different from desktop results. This is because Google and Bing use a number of independently weighted ranking factors within their algorithms, and because the search engines strongly consider mobile friendliness when determining the order of their mobile search engine results.

Despite the visual differences, the good news is that optimizing for mobile results doesn’t have to feel like reinventing the wheel. In fact, it shouldn’t feel like reinventing the wheel. Although you want to employ some mobile-specific optimization tactics to gain an edge over the search engines’ weighted ranking factors, for the most part, your mobile site and your desktop site should be optimized using the same tactics — from keyword research to competitive analysis and technical SEO (which you learn more about in Book VI).

Optimizing to rank in mobile search results

Up to this point in Book IV, we discuss the principals of mobile-friendly website design. In this section, we tell you about the mobile optimization tactics that can help your mobile-friendly website rank higher in mobile search engine results. Yes; mobile friendliness and mobile optimization are not the same things. Making your site mobile friendly is the act of making sure that your site is designed to deliver an optimal user experience for your mobile searcher. Making your site mobile optimized means thinking about the factors that can help your site rank higher in search engine results pages — such as making sure that you’re using keywords, optimizing for local search, and granting search engine spiders access to your content. To make matters just a tad more confusing, you should also know that making your site mobile friendly is actually a part of the mobile optimization process because the search engines consider user experience when they determine rank.

In addition to the SEO strategies that you learn throughout this book, the following sections describe several mobile-specific tactics that might improve your site’s mobile search engine results rank.

Is mobile a ranking factor?

The search engines use hundreds of proprietary ranking factors to decide the order of search engine results pages. We know some of the factors for sure; for others, we have to make our best guesses.

But when it comes to mobile friendliness, we can say with 100 percent certainty that it is a ranking factor for both Bing and Google! In November 2014, Bing announced that it is officially taking into consideration a website’s mobile friendliness to determine mobile search engine results rank. This means that the search engine will boost web pages identified as mobile friendly and demote the unfriendly results. “We know which pages are mobile-friendly so [we] automatically rank them higher with the new update,” says the Bing blog (https://blogs.bing.com/webmaster/2014/11/20/bing-and-mobile-friends/).

In April 2015, Google confirmed the same in its Webmaster Central blog: “We will be expanding our use of mobile-friendliness as a ranking signal. […] Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices” (http://googlewebmastercentral.blogspot.com/2015/02/finding-more-mobile-friendly-search.html).

It doesn’t get much more straightforward than that. You must make your web pages mobile friendly in order to rank high in mobile search results.

Google has other ways besides higher rankings to show preference to mobile-friendly results:

• Google appends a “Mobile-friendly” label to mobile search results listings that are optimized for mobile user experience. You’re safe to assume that not having the mobile-friendly label makes a site less imperfect — which often means a rank demotion.
• In recent years, Google put a lot of time into the development of mobile-friendly design documentation and tools to help website owners create improved mobile experiences for their users. Most notable among the list, perhaps, is the recent Mobile-Friendly Test tool that analyzes a website’s mobile friendliness and offers feedback to help the site owner make improvements. Clearly, Google considers mobile friendliness very important.