mobile friendly ebook

25
1 MOBILE FRIENDLY WEBSITES | AN eBOOK

Upload: brooks-manley

Post on 14-Jan-2017

19 views

Category:

Marketing


0 download

TRANSCRIPT

1MOBILE FRIENDLY WEBSITES | AN eBOOK

2MOBILE FRIENDLY WEBSITES | AN eBOOK

WHAT YOU’LL FIND IN THIS eBOOK:INTRO: WHAT IS MOBILE FRIENDLINESS | page three - What is Mobile-Friendliness? - Why is it relevant to my organization? - 3 Common Mobile Misconceptions

3 REASONS MOBILE FRIENDLINESS MATTERS | page eight

IS MY WEBSITE MOBILE-FRIENDLY? | page eleven - Take Google’s Test - Our Mobile Checklist

10 TIPS FOR OPTIMIZING YOUR SITE FOR MOBILE | page thirteen

WHAT DO I DO ONCE MY SITE IS MOBILE-FRIENDLY | page twenty-two - Re-Indexing Your Site - Submitting a Sitemap - The Importance of Content

3MOBILE FRIENDLY WEBSITES | AN eBOOK

4MOBILE FRIENDLY WEBSITES | AN eBOOK

THE MOBILE WEBUnless you live under a rock or have been out of the country for the last five years, you know how explosive the rise of smartphones has been in America. 64% of Americans now use smartphones and 45% own tablets.

Imagine you are looking for a new spot to go to dinner. A friend suggests a restaurant in town. What’s the first thing you do to evaluate their recommendation? If you’re like the majority of America, you pull out your smartphone and google it.

A few things could happen if this restaurant doesn’t have a mobile-friendly site:

1. It won’t show up in Google’s results, and you never find it.2. You get lucky and find this site, but you’re frustrated with how it displays on your phone. You pick another restaurant.

Needless to say, having a mobile-friendly website is crucial to your business.

5MOBILE FRIENDLY WEBSITES | AN eBOOK

WHAT IS MOBILE-FRIENDLINESSIn short, a mobile-friendly website is one that is both readable and usable on an array of mobile devices. It means your website is just as usable on a smartphone as it is on a laptop.

With more and more people using mobile devices as their primary means to access the web, having a mobile-friendly website is no longer a good idea. It’s a necessity.

If this scenario raises concerns for your organization, fear not!

We’re here to help you navigate and conquer the ever-changing world of websites.

6MOBILE FRIENDLY WEBSITES | AN eBOOK

“But I have a mobile version”

As stated above, the majority of Ameri-cans now use smartphones, but a signifi-cant percentage now own tablets as well. In addition, wearables like watches and glasses are gaining momentum. Heck, you may be surfing the web from your fridge in a few years. So keep in mind, having a mobile version does not equal mobile-friendly. You might be thinking, “Does this mean I have to make a differ-ent version of my site for each device.” Technically that is an option. But we rec-ommend responsive design, something we’ll discuss later.

THREE COMMON MOBILE MISCONCEPTIONS

1.

2. “But I have a mobile app.”

For a long time, many companies (even large ones like Amazon) held off on making their sites mo-bile-friendly, and instead built mo-bile applications. This simply won’t cut it anymore. Potential customers don’t start their search for you in the app store; they start by going to Google, and you better have some-thing to offer them there.

3. “You can still view my site from a phone.”

Just because your site can be viewed from a mobile device doesn’t make it mobile friendly. Mobile-friendliness is about much more than showing up on a phone. It’s about the user’s experience on your site. You can’t build a brand when people are having to pinch, scroll, and zoom their way through your site. And you can’t sell a product when the “Buy Now” button is too small for your user’s thumb.

7MOBILE FRIENDLY WEBSITES | AN eBOOK

MOBILE-FRIENDLY SITES: THE GOOD AND THE BAD

This site has bigger issues than simply not being mobile-friendly. On a small device, this web page still displays as its full, desktop version. So to find any-thing, you’ve got to pinch and scroll all over the place. If you’re not sure why this is such a bad practice, pull this site up on your smartphone and see if you can find and click their location “Can-nington, WA.” The thing to note is that in the transition from desktop to mobile, the site gets much more difficult to use.

Vista Homes is a great example of a mobile-friendly site. You’ll notice a few things: first, the menu doesn’t try to squeeze itself into the width of a smart phone. Instead, it becomes a dropdown or slide-out menu. You’ll notice the button on the smartphone stays the same size - making it easy to click or tap. Some aspects are left out the smaller the device gets. You’ll see that the blur effect isn’t on the smartphone, because some things that look great on a desktop just don’t work on smaller devices.

http://www.msy.com.au/home.php

ourvistahome.com

8MOBILE FRIENDLY WEBSITES | AN eBOOK

9MOBILE FRIENDLY WEBSITES | AN eBOOK

3 REASONS MOBILE-FRIENDLINESS MATTERS

1. YOUR AUDIENCE IS MOBILEThe people your organization is trying to reach are using mobile devices. Our culture has become very on-the-go, and you must adapt. The numbers don’t lie:

2. GOOGLE’S “MOBILE-GEDDON”Beginning in 2013, Google began placing a special emphasis on mobile-friend-ly sites. Simply put, these sites began to rank higher in searches, while sites that weren’t optimized for mobile began to rank lower. In 2014, Google intro-duced “Mobile-friendly” tags to make it easier for on-the-go users to find con-tent optimized for their devices.

21%of Americans now own a

wearable device

94%of smartphone owners use their phone to

search for local information

60%of all media consumption is done

on a mobile device

80%of internet users own

a smartphone

53%of emails get opened on

mobile devices

<50%Google searches take place on

mobile devices

10MOBILE FRIENDLY WEBSITES | AN eBOOK

3. USER EXPERIENCEAs we’ve already addressed, being mobile-friendly is about more than rank-ing well on Google. It’s about your user’s experience on your website. Maybe you’ve heard of the buzzword UX, or User Experience. In essence, UX is the level of satisfaction (or dissatisfaction) your website provides each visitor. If a user is able to do what they need to do on your site, they are satisfied. If accomplishing their objective is difficult, they are dissatisfied.

Not having a mobile-friendly website leads to a very poor user experience for a visitor on a mobile device. And a poor user experience leads to a lost oppor-tunity for your organization. Read more about UX on our blog.

In April of 2015, Google announced: “we will be expanding our use of mo-bile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search re-sults. Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices.”

The main takeaway is that it will now be very hard for people to find your site in Google searches if it’s not optimized for mobile use.

11MOBILE FRIENDLY WEBSITES | AN eBOOK

12MOBILE FRIENDLY WEBSITES | AN eBOOK

SEE FOR YOURSELFThe first thing you should do is take out your device and see what your site looks like in the mobile world. Try accomplishing a few things someone com-ing to your site would want to do. This could tell you all you need to know.

Are you having to zoom in on pieces of text? Is it easy to accomplish actions and tasks on your site? Is the navigation easy to find and use?

TAKE GOOGLE’S TESTFor your mobile-friendly pleasure, Google has created a free tool - the Mobile-Friendly Test - which will analyze your site’s URL and deter-mine if it meets Google’s standards. The good news is, if your site isn’t mobile-friendly by their standards, Google will give you a few items to improve on.

RUN IT THROUGH THE CHECKLISTWe’ve put together a short checklist of mobile optimization basics:

□ No horizontal scrolling or zooming necessary to see everything on a page.

□ All links are tappable, and not too close together. □ All fonts are readable, and not too small. □ All content loads and plays, including photos, videos, and animations. □ Pages load quickly.

13MOBILE FRIENDLY WEBSITES | AN eBOOK

14MOBILE FRIENDLY WEBSITES | AN eBOOK

1. USE RESPONSIVE DESIGNThere are a few different options you have for making your site mobile-friendly:

A MOBILE VERSION You may notice some URL’s you visit on your mobile device begin with an “m.” For instance, m.engeniusweb.com. Having a mobile version means you’re literally making a separate version of your site. One of the major downsides to the mobile-only option is the need for careful alignment — and extensive redi-recting — between the desktop and mobile versions of your site. This in turn can bring page load times down and make it more difficult for Google to index your site’s content.

DYNAMIC SERVINGDynamic serving is a configuration that generates different HTML for each device your site is viewed on. Specific versions of content must be created to adapt to every individual device. Dynamic serving is “Google-approved,” but very prone to error.

15MOBILE FRIENDLY WEBSITES | AN eBOOK

RESPONSIVE DESIGNResponsive design gives your visitors the most consistent experience across the board. No matter what kind of device your site is viewed on - whether a massive projector or a tiny watch - the content and URL remain the same. The content is flexible in that it automatically adapts to different screen sizes and orientations. Responsive design is Engenius’ preferred choice, as well as Google’s.

2. DESIGN A FINGER-FRIENDLY LAYOUT60% of digital media consumption is now done on mobile devices. This means that 60% of digital media is navigated by people using their fingers.

Picture this: you own an iPhone 6 and are left handed. You’re on your favor-ite site doing some shopping. You’ve added a few things to your cart and are ready to check out. Here’s the issue: the cart icon is positioned in the very top right corner of your phone (like most are) - this is a heck of a stretch for your left thumb. Though this is a small and specific example, you’d be surprised at how negative of an effect this could have on your user experience.

16MOBILE FRIENDLY WEBSITES | AN eBOOK

Link placement that might make sense on a desktop may not be user friendly on a smaller mobile device. Here are some other “finger-friendly” suggestions:

• Use “back-to-top” buttons while scrolling down• Compress your menus into drop-downs or slide-outs• Place buttons in the center of rows

3. USE READABLE FONTSLegibility is a key piece of a quality user experience. This makes font choic-es and styling a crucial part of mobile-friendly design. There are many fonts covering the web that are simply hard to read on different devices and back-grounds.

Font size, line height, and letter spacing all come into play. Fonts less than 14px are very difficult to read on smaller screens. Compact lines of text might be readable on a laptop, but wind up overlapping on a phone. The same goes for tight letter spacing. General guidelines for creating legible text include:

• Use BIG fonts. This is simple, but we can’t stress its importance enough. There is no hard and fast rule for size, but 18-22px is a good range to fol-low.

• Apply a line height of around 1.2em. This means that the space between the lines of text are at least 1.2 times the size of the text itself.

• Choose a font that displays clearly on all screens. Most people use high resolution screens, but using a sans-serif font for body text guarantees that it will look good regardless of what device it is read on. Serif fonts are saf-est to use as headings. In the end, choose the font that best matches your brand and personal tastes.

• Limit the number of fonts you use! Too many fonts will make your site look messy and overload your users. Less = more!

17MOBILE FRIENDLY WEBSITES | AN eBOOK

4. MAKE CONTENT DIGESTIBLEIt is imperative that content is easy to read on mobile devices. This means that it’s broken up with line breaks, not clumped together in a massive para-graph. Headings help to distinguish content and make it easy to scan lengthi-er pieces. What else can you do to create consumable content?

• Make lists, like this one! Lists aren’t intimidating and provide key points in an easy to follow format. Numbered lists can also indicate a user’s prog-ress through some bit of content, so they don’t feel lost or confused.

• Leave some room for your users to breathe by using white space. You don’t want every piece of real estate on your site to be filled; that leads to a clut-tered and overwhelming experience.

• Use beautiful photography. Regardless of screen size, people love having text broken up by big, relevant images.

• Preface sections of content with headlines so users can easily find the information they absolutely need.

• Summarize key points at the end of long sections of text.

DIGESTIBLE TORTURE

18MOBILE FRIENDLY WEBSITES | AN eBOOK

5. MAKE LINKS CLICKABLEThis has been touched on, but its importance can’t be stressed enough. Think back to the last time you tried to click a link on your phone, but just couldn’t quite get it. Nothing is more frustrating. Having a non-clickable link is like see-ing an item on a menu you can’t order.

Nearly every action on your site requires links. If they aren’t easy to click on mobile devices, your website is essentially useless. “Add to Cart,” “Donate Now,” “Request a Quote” — these are the calls to action that matter most. If they aren’t easily clickable, you are losing conversion opportunities. What do we mean by “clickable?”

• Create sufficient space within the link. • Allow sufficient space around the link. • Don’t put two links right next to each other.• Use large buttons.

19MOBILE FRIENDLY WEBSITES | AN eBOOK

6. MAKE CALLS TO ACTION STAND OUT Mobile users are largely objective-oriented. In other words, they aren’t stum-bling across your site and leisurely perusing it. They have a specific reason they came to your website. At the same time, mobile users typically have short attention spans.

What’s this mean for you? You must make it easy for users to find what they’re looking for. If the primary objective of your site is to get donations, don’t make your visitor search for it. Put a big button front and center.

• Put contact info at the top of your pages • Ensure that the phone number is clickable so that users can immediately

call from phones.• Use loud - but not abrasive - accent colors for the links you want your visi-

tor to click

7. USE A SITE SEARCH FEATUREBecause visitors are coming to your site with specific goals in mind, having a search feature is vital. Let’s say someone is looking for a piece of information not featured at the top of the home page. Very few people are going to spend more than a minute or so skimming your site to find something. This is where a search bar comes in:

20MOBILE FRIENDLY WEBSITES | AN eBOOK

8. MAKE FORMS SHORTNo one enjoys filling out forms online (think contact forms, billing information, etc.). This task can be especially difficult on mobile devices. To make it easier on your user, they need to be short. For instance, you probably don’t need the middle initial of someone trying to get in touch with your organization. Only ask for the most important information. Additionally, use large and easily identifiable boxes for inputting this data.

9. SIMPLIFY YOUR CODE AND OPTIMIZE YOUR ASSETSHaving excessive and poorly organized CSS or JavaScript on your website can have a serious effect on your site speed, and, in turn, hurt your search rank-ings. For these reasons, Google recommends compressing or “minifying” your site’s code wherever possible.

Google (to the rescue again) offers a free tool called PageSpeed Insights that will report on how quickly your website’s pages are loading across all devices. After analyzing a page, the tool will give you a speed score and let you know what, if anything, can be improved. Another tool we would suggest is HTML 5’s “srcset.” This is a tool that makes your images responsive. Learn more about it from our friends at SitePoint.

21MOBILE FRIENDLY WEBSITES | AN eBOOK

10. HIRE A DESIGN AGENCYAs we’ve discussed, the web industry is constantly changing. New mobile devices are coming out every week. Web trends are going in and out daily. Unless you are in the web marketing industry, you’ve got your own area of expertise to worry about.

There are countless agencies out there full of passionate individuals with the knowledge and expertise to help you conquer “Mobilegeddon.” The going rates may be a little higher than you expect, but it’s hard to put a price tag on having an excellent online presence.

Hire a design agency and breathe easy.

22MOBILE FRIENDLY WEBSITES | AN eBOOK

23MOBILE FRIENDLY WEBSITES | AN eBOOK

ASK GOOGLE TO RE-INDEX YOUR SITEOnce you’ve finished making your website mobile-friendly, Google will auto-matically re-crawl and re-index your site’s pages. This means that Google will reevaluate how it ranks your website based on all of the factors we’ve dis-cussed here. However, you could speed up the process. Google offers a tool (you may be seeing a trend here) called “Fetch as Google” to trigger a re-crawl and re-indexing of your website. Fetch as Google is available through Google Apps.

Learn more about this directly from Google.

SUBMIT A SITEMAPSubmitting a sitemap is a great way to help search engines crawl your site. Simply put, a sitemap contains all the pages of your site, and you want search engine bots to see it. You submit your sitemap through Search Console, an-other free tool from Google (“Do they do everything?”).

You might ask, “Why bother submitting a sitemap if Google is already crawling and indexing my pages?” Well, a sitemap can improve the quality of the work already being done by Google. It’s especially important if you have a particu-larly large website, a lot of archived pages, pages that aren’t properly connect-ed, or a new website with few external links that lead to it.

Learn more about submitting your sitemap from Google.

24MOBILE FRIENDLY WEBSITES | AN eBOOK

CREATE GREAT CONTENTWhile optimizing for SEO is important, content is still king. With so many or-ganizations on a quest to get the coveted “top spot” in Google searches, it’s easy to take your focus off of creating quality content in an effort to “satisfy the search engines.”

Know this: Search engines will not be fooled.

A mobile-friendly site won’t be much help if the content of your site isn’t valu-able and relevant to your audience. Google knows if you’re merely shoving keywords in every other sentence of your blog posts. There will never be a substitute for generating valuable content for you audience.

CONSIDER SEO SERVICESHaving a mobile-friendly site doesn’t automatically shoot your site to the top of Google searches. It’s just a tiny piece of Google’s search engine algorithm, and unless you have hours of free time every week, you won’t be able to tackle it yourself. If SEO is important to your organization, invest in it. Contact Engenius to find out how we can serve you.

25MOBILE FRIENDLY WEBSITES | AN eBOOK

MOBILE-FRIENDLY WEBSITESHow to Navigate Through the Rigors of a Mobile World

AN ENGENIUS eBOOK

24 Vardry St.Suite 303

Greenville, SC 29601(864) 977-1767

www.engeniusweb.com

THANK YOU FOR READING!

LET’S TALK ABOUT HOW ENGENIUS CAN HELP YOU NAVIGATE THE WORLD OF MOBILE