how to be mobile friendly-resized

As we push into 2015, there has been a fundamental shift in the way the general populace access & utilizes the internet. With the majority of all internet usage being via mobile, not only is there value in putting your best mobile foot forward, but the mobile community is becoming increasingly impossible to ignore. With this paradigm shift toward mobile access, the question quickly changes from “why should I be mobile friendly?” to “how do I become more mobile friendly?”

On the heels of this shift, Google recently announced their intent to favor websites that have full mobile functionality, making the need for a seamless & fluid mobile experience no longer an option as there will be an inherent SEO benefit to ensuring your online brand offers nothing but the best mobile experience possible.

“ When it comes to search on mobile devices, users should get the most relevant and timely results, no matter if the information lives on mobile-friendly web pages or apps. As more people use mobile devices to access the internet, our algorithms have to adapt to these usage patterns. In the past, we’ve made updates to ensure a site is configured properly and viewable on modern devices. We’ve made it easier for users to find mobile-friendly web pages and we’ve introduced App Indexing to surface useful content from apps. ”

Google Webmasters Blog

Mobile Ranking Factors: What Has Changed?

The much-anticipated update to Google’s search algorithm is comprised of two independent factors. Firstly is their intent to favor mobile friendly websites in search & secondly to improve their ability to index and serve up mobile apps in conjunction with SERPS. At the surface these updates may appear benign, however, the implication of such an update will almost certainly have momentous ramifications rivaling that of the algorithmic updates penguin & panda.

For more information about these specific changes, click the Learn More buttons to dive into these comprehensive Google provided resources:

Back in November 2014, Google began actively labeling websites as ‘Mobile-friendly’ in search results in an attempt to make it easy for users to identify which websites are developed with mobile devices in mind. The goal being to improve mobile usability, saying “users will find it easier to get relevant, high quality search results that are optimized for their devices”. This new update to the way Google's Mobile Friendly Labelthe Google algorithm handles both mobile users and search results only seems like the next logical step to this process.

At the surface, Google’s decision to favor mobile-friendly websites in mobile search results seems minor. However, taking into account that mobile has officially overtaken desktop usage puts this update in a whole new light. It’s difficult to forecast what anyone could expect to see insofar as the impact of either being mobile friendly or not, but if Google foresees a “significant impact to our search results”, leaving mobile optimization until the last minute could potentially be devastating. The remaining piece to this mobile paradigm shift is that Google’s decision to favor mobile functionality is done in real time & as pages are indexed.

Gary Illyes spoke out and made it very clear that this new algorithm will either positively or negatively impact a site on a page-by-page basis, meaning that simply having a responsive, mobile friendly homepage won’t afford you the SEO ranking benefit we all are searching for. Ensuring a seamless mobile user experience across the entire website is the key to maximizing the SEO benefit gained from this upaleydate.

The second major component to this update has to do with indexation of mobile apps and their eventual placement in organic search results. Having apps show up in Google’s search index is a huge step towards full integration & will certainly have organic traffic benefits for app developers & development firms alike. The stipulation is that these results will only be displayed for users that are signed in & only trigger results for apps already installed on your device. Even being in its infancy & having a rather limited scope, this new addition to SERPS  has the potential of having a wide impact, but it also has some interesting implications as to what we should look to expect for the future of app handling in organic search. It seems to us that a shift to a world where app results are just as plentiful as organic documents is imminent, making the question ‘Is there an app for that?’ all but moot.

What the Experts Say

    • You can do a lot of things to improve the performance of your mobile pages, and that includes obviously speeding up download speeds Tweet: You can do a lot of things to improve the performance of your mobile pages... @randfish @TomGunson http://hubs.ly/y0FV1J0

      Rand Fishkin, @randfish

    • Making your site mobile-friendly is necessary in the present for many sites, and it’s a good long-term investment even if it doesn’t affect your short-term traffic Tweet: Making your site mobile-friendly is necessary in the present for many sites... @brysonmeunier @TomGunson http://hubs.ly/y0FV1J0

      Bryson Meunier, @brysonmeunier

    • Users are flocking to mobile, so websites without a good mobile experience will soon find themselves losing out to competitors Tweet: ...websites without a good mobile experience will soon find themselves losing out to competitors @aleyda @TomGunson http://hubs.ly/y0FV1J0

      Aleyda Solis, @aleyda

 

Am I Mobile Friendly? How to Check

The best way to know if your website is mobile friendly for sure is to simply try accessing it on your phone. Do the menus automatically stack or reformat based on the smaller screen size? Do images scale to fit nicely? If so, you just lucked out and already have a responsive website. It is important to remember that being responsive in-itself doesn’t make you mobile friendly. Ensuring that your website encourages the coalescent presentation of the desired content, brand messaging, & services offering will maximize mobile user experience, because after all simply being able to access your site isn’t enough. If it doesn’t attract, convert, close, & delight your customer, it won’t garner the results you’re looking for.

If your website isn’t responsive or mobile friendly, you will probably notice some of the following symptoms when you access it on your phone:

  • Oversized images
  • Clunky & awkwardly used forms
  • Issues with input fields
  • Mobile keyword compatibility issues

Another great tool for determining if you are in a position to cater to the mobile audience is to use the Google Mobile Friendly Testing Tool. This powerful tool offered by Google quickly and efficiently tells you if the desired page meets these new stringent rules on mobile functionality. After entering the desired URL, the tool crawls through your website and will offer up either a passing score or areas that could be improved based upon its findings, as shown below. The drawback to this tool is that you can only check one URL at a time making site wide tests long & cumbersome. As mentioned above, the ranking benefit for mobile functionality is awarded on a page-by-page basis, so ensuring site wide compliancy is hugely important to maximizing the return on this new ranking factor.

Google Mobile Friendly Tool

How to Check my Mobile Traffic; Is This Viable?

As a blanket statement, with mobile traffic superseding desktop search as of the beginning of 2015, it is probable that a larger percentage of your traffic is originating from mobile search than you may realize. The exact percentage will fluctuate based on your specific niche or industry so having some insight as to how you can check this data is crucial. Although there are numerous options available for 3rd party analytics and tracking tools, we will be looking at methods involving Google provided tools as they remain the industry standard.

Firstly, Google Webmaster Tools should be your first stop to see how many queries & impressions your website is garnering via mobile search. Within Webmasters’ Tools, under ‘Search Traffic‘ select the option ‘Search Queries‘. The search queries page shows which Google web search queries have returned URLs from your site. By applying a mobile filter to this data, we have the ability to see the total number of queries, impressions, & clicks acquired through the mobile channel. Queries are the total number of search queries that returned pages from your site over the given period. Impressions are the number of times pages from your site appeared in search results & the Clicks metric is the number of times a user clicked your site’s listing in the search results for a particular query.

WMT Mobile TrafficAs I said before, with each vertical being different there is no black and white defining line as to when you should consider mobile a primary channel, but with this massive shift to mobile search this isn’t something that should be ignored.

The second place you’ll want to lean on for mobile metrics will be Google Analytics. Depending on your experience with Analytics or big data, this interface can be daunting as it contains information about almost every aspect of your website. Within analytics, under the Audience Overview section, filter the data by ‘Mobile & Tablet Traffic‘.

Analytics Mobile TrafficThis breakdown of site performance gives you metrics like total mobile user sessions, number of pages viewed by the mobile audience, their average session duration, and website bounce rate. Knowing the total number of mobile users accessing your website, how many pages they viewed, and the average length of time they stayed on your site are key metrics to be aware of along with bounce rate, which is the percentage of users who clicked through to your site and immediately ‘bounced‘ back to the search results.

As with any industry these numbers will vary, meaning that it is largely up to you whether you feel like catering to the current & future mobile traffic. With the growing user base of mobile searchers, the question you need to ask yourself is “Are these users something my business can afford to ignore now & in the future?”

How to Become Responsive; Platforms & ThemesWordpress_logo_8

If you are part of the 60.7% of the index-able internet, you are currently sporting some version of WordPress. This is an asset as by default, WordPress gladly supports a wide array of responsive & mobile friendly themes. Not only does this give you the freedom to select almost any responsive theme, but it’s also completely possible that your current theme is responsive and you don’t even know it.

If this is the case, unless you’re a fairly technical person, the resolution to this problem may require some development time from a professional. Firstly I would recommend you thoroughly read all supporting documentation that came with the WordPress themes. This can usually be accessed through the WordPress interface itself as shown below under Appearance -> Themes

wordpressReason being is that it might be possible that your WordPress theme is indeed responsive but is missing a required supporting plugin, or perhaps that function simply hasn’t been enabled.

The other option here is to look at selecting an entirely new WordPress theme. This is a really great option as you can keep mobile functionality at the forefront of your mind during development, assuming you are fully prepared to absorb the cost & time associated with that. Regardless of your technical ability, this option highly warrants ensuring you seek a web development team you can trust. Unfortunately in most cases, you can’t simply just switch themes, making development time almost a certainty. Switching themes in most cases also mean drastic aesthetic changes to the website. If you find yourself completely smitten with its current look, design, & feel just remember that there are 1.75 billion reasons to be responsive.

If you are on a custom back-end such as ROR, Joomla, or Drupal then you probably have some more work cut out for you. If a responsive functionality wasn’t implemented when the site was originally conceived, designed, or developed it’s unlikely to simply be a switch that someone neglected to flick into the ‘on’ position. Generally speaking, custom development is going to require a custom solution, meaning it would be best to seek a professional developer to plan out what that will look like insofar as cost and time.

I’m Responsive, Now What?!

So now you have a responsive site & you want to ensure that users from all venues can access, view, and interact with it as easily as possible. For the sake of ease, let’s break down your shiny mobile site into 5 key areas and discuss the most important aspects of each.

Buttons

Images

Forms

Text

layout

Buttons & Menus

It may seem obvious that having functional buttons and menus is important, but the reason or need might not be overly apparent. Some of us, including myself, have enormous hands which make mobile surfing cumbersome at the best of times. Ensuring buttons and menus are easily accessible & functional, for hands of all sizes, is hugely important as a frustrated user is not a user for long.

  1. Consider the Finger

As I said, I have enormous hands. Nothing is more frustrating than trying to navigate a site that claims to be mobile friendly, but at every turn find myself faced with buttons or menus that are so small you have no choice but to mash the screen & hope for the best. Your potential readership shouldn’t require a dialing wand just to interact with your website. Fingers are not nearly as accurate as a stylus or mouse so ensuring that buttons, menu options, and drop downs are of ample size as to not cause frustration for us clumsy fingered users.

  1. Don’t Block Content with Menus

Similarly to the problems that ensue from utilizing image or form overlays, excessive drop down menus is guilty of blocking content from view. There are tons of creative ways to get around this problem ranging from menu sliders to drop-down transparencies, making your decision largely dependent on preference & esthetics. Research your options, and see what your theme offers. Maybe the theme developer already included an option for you.

Images

Everyone loves images, right? Not when they dominate the screen or cover up the desired information. Images are great and can convey tons of great information for your mobile fan base, but here are some key considerations to keep in mind when selecting images & contemplating placement:

  1. Don’t Use Loads of Images

Having tons of images on any page of your site can severely impact mobile user experience. Too many images mean more scrolling (think of those poor fingers!). The opposite is also an issue as well; if the desired content IS the image, burying it in a sea of pictures can be frustrating.

  1. Size Does Matter

Whether you have a single 10mb infographic or hundreds of 10kb images, it is still data that mobile users have to pay a premium for these days. Respect your mobile user’s data by only serving image content that is relevant & meaningful. Data usage aside, it also slows down page load speed across all device types, which can be one of the biggest killers of user engagement around.

  1. Avoid Image Overlays

Akin to the ‘pop-up’, image overlays do nothing for a mobile user except cover up valuable content & force excessive scrolling in search for the close button. If the image is so important that it requires a dynamic overlay, just put it in the page copy.

Input Fields & Forms

The majestic form, a lead generation necessity for most websites now-a-days. Forms and search fields provide a wide array of options for your users and more benefits than I can count for your business, so I would never ask you to remove them completely. I only ask that they are used effectively, where they genuinely add value or serve a purpose. Here are some things to consider when relying on forms or input fields with a mobile website build.

  1. Use Input Fields Sparingly

We all know that lead generation forms are the lifeblood of online business & marketing so removing them for the sake of the mobile users doesn’t make sense. Use them only where necessary, ensuring they have a purpose is key. An abundance of input fields for a user can be quite the headache as mobile keywords are quite often clunky & slow to type on.

  1. Use Placeholder Text in Form Fields

Something simple like putting grayed out placeholder text in the form field can save a mobile user from having to scroll around to as they try to figure out what they need to enter.

  1. Prominent ‘Next’ Button

Another piece that seems like such a small thing, but truly means worlds to anyone that has had to fill out a form on their cell phone. Having a brightly colored ‘Next’ button takes all the guess work out of how to proceed, and any time saved from having to finger scroll around the page is always a huge benefit.

  1. Don’t Hide Content Behind Search Fields

Although somewhat of a faux pas for SEO in general, this is doubly true for mobile functionality. Forcing your readership into using a search field who, in most cases, are interacting with your site on a device that is generally very cumbersome to type on, by hiding everything behind a search function will, without a doubt, dissuade all but the most diehard users out of continuing. Ensuring the four corners of your site are accessible via a robust navigation menu will prevent any hindrances as your mobile readership digest your content.

Typography & Text

The text color, size, and font can all drastically impact user engagement & overall usability. As I’ve mentioned before, every website will look slightly different based on a plethora of variables from the requesting device. Here are some items you should keep at the forefront of your mind when deciding on the desired typography.

  1. Font Choice Matters

Font selection in of itself has a subtle science behind it. Certain font types evoke specific feelings, mannerisms, and emotions when read. I don’t want to get lost in the psychology of font selection, as I think CrazyEgg hit the nail on the head here if you want to read more about this interesting school of thought. The second item to consider about a font is how well it scales. Try some of the fonts in whatever your preferred writing tool is & see how legible they remain as you shrink the font & window size. This is essentially what happens when viewed via a mobile device so it’s certainly something to consider.

  1. Leave Room Between Content

Although walls of text might be great for a scientific journal or literary masterpiece, it is not very appealing & will come across as too daunting for most readers. This is doubly true for mobile devices. All that glorious content, being reformatted for a vastly smaller screen than your laptop or desktop computer. Ensuring you leave ample room between paragraphs & even lines of text is important to developing a clean, non-threatening experience for mobile users.

  1. Font Size is Important

As I said before, spend some time in notepad playing with fonts. When that page scales to fit the mobile browser, will the content still be viable? Looping and Swooping fonts may look great initially but on a potential customers’ Blackberry, it might not be something they want to waste time trying to decode. Typically the rule of thumb is a font size of 16px will deliver optimal reading levels but keep in mind that this is a general statement and will vary based on font selection and a number of other variables.

Page Layout

Arguable the most important piece to a responsive website is its design and layout. Regardless of what your website offers, if the layout doesn’t offer a fluid & visceral experience to the user, then it will be all for naught. Remember that you are formatting your website to be viewed on a screen that is potentially smaller than your own smartphone. All of the juicy goodness that you want to offer your customers’ needs to digestible, as well as offer value to your customer base no matter what device they happen to be using.

  1. Design & Develop for Multiple Screen Sizes

Screen size varies from device to device. If you’re on a desktop or notebook, you’re probably reading this at either 1680×1050 or perhaps 1920×1080. Most smartphones will have a display that is around 320×640, plus or minus a bit depending on the device. Tablets are a little larger with an average of 800×600. This wide variance in display resolutions means that you must ensure your website is versatile in how it serves content to mobile users. If you haven’t already, dive into your Google Analytics and see what type of devices visits your site most prevalently and try to tailor the experience to that user base.

Responsive Screen Sizes

  1. Create a Fluid Design for Touch Device Users

I’m not saying you should tailor your whole experience to touch friendly devices, but ensuring your website has a logical flow to it will benefit all involved. For instance, having a website that serves content in an up and down format will always be easier for mobile users to utilize & absorb. Although not necessary, if you want to get fancy perhaps look into something with parallax scrolling. Very mobile friendly and looks amazing, but typically will require some development time to implement and have the function the way you want it to.

  1. Have Valuable Content Higher On the Page

Due to the plethora of ways different mobile devices will render your website, striving to ensure the content is above the fold isn’t feasible and largely may not even be possible. That being said, no one likes having to scroll to infinity & beyond (that’s right, Toy Story reference) just to find your contact information. Having a lot of great content is awesome, but making sure the meatier details like service offerings & contact information is higher up on the page can save your potential viewership from having to scroll down into the abyss.

At the end of the day, all we want to do is offer the best user experience that we can to our desired client base when they visit our website whether they come on a desktop, notebook, mobile phone, or witches broom. With the impending update roll out date of April 21st just around the corner, being ready to welcome this ever growing mobile fan base should be high up on the priority list of any webmaster or business owner looking to capitalize on this ‘Mobilegeddon’. The days of discounting mobile traffic are over, the future is now & the mobile generation wants the content all the same, is your website in a position to serve it to them?