The Internet is a mobile space. Mobile devices (a smartphone or tablet) are almost always with their owner at any given minute. Stepping away from a computer is one thing, but the user is almost sure to have their phone within reach. Whenever the user desires, they can quickly use their mobile device to search for a product or service or to attempt to find the answer to a question that came up in their latest conversation. Google has announced they will update their search indexing rubric on April 21, 2015 to better serve mobile-friendly results to mobile users. The lack of a mobile-friendly site after this update will result in lower search rankings for your website.

Mobile analytics

The desktop is used primarily as a work device, operating mostly during the regular work day. Wellfire’s own client analytics shows a large portion of visits coming from mobile devices. A quarter of visits are happening through mobile devices! Our business-to-business clients are seeing roughly 26% while clients that are more lifestyle oriented are seeing a majority of traffic from a mobile device (51% mobile to 48% desktop).

According to the Mobile Marketing Association of Asia:

• Three out of five searches are through a mobile device.
• More people access Facebook and Twitter from their mobile phones than through desktops or laptops.
• Three-fourths of mobile owners are dependent on their device for location-aware data.
• 70% of mobile searches end with social media interaction or purchases.

Search engines, specifically Google, have taken note of this shift in usage and are preparing to update their search rubrics to better serve the mobile user.

Google remains king

Google remains the primary search engine for the vast majority of people. The directions that Google takes in its search engine indexing are quickly followed by other search giants like Yahoo and Bing as well as localized search engines like Yandex. Getting good ranking with Google is a good base for obtaining good results with the others.

At the end of April, Google will expand their search results to use mobile-friendliness as a weighted ranking value. Mobile users will receive results optimized for their device based on content and mobile-readiness. The mobile-friendliness of a site is based on Google’s own ruleset for what makes a site mobile-friendly. While this will not affect desktop-based search results, it will have a direct impact on search results originating from a mobile device. With mobile interaction ranging from 25% to 60%, this is significant and must be accounted for.

But we have an app for that!

Some companies may choose to spend time and effort on producing a mobile application instead of thinking strategically about a mobile-friendly site. This can only get you so far; your audience needs to know about your site and product(s) before committing to downloading an application to their phone or mobile device. Your intended audience will first expect to come to your site via the web, and 60% of the time this is through mobile search. Without a mobile presence, you may be hiding the way to your door from the outset.

A different Search Engine Optimization

Google’s update to its search rubric means updates to your search engine optimization (SEO) plan. Unlike general SEO, which revolves around copy and extra descriptive information such as keywords and description tags, this is a matter of User Experience design and development. A strategic update is recommended for sites that lack a mobile presence or are in need a serious overhaul. In the meantime, a few quick and relatively painless updates can help your site transition into being mobile-friendly:

1. Consolidation of style files (CSS) and interactive scripts (JavaScript)

   Each dependency, or external file, that a web page requests adds on time to download, process, and render to a page. Requesting multiple script and style files slows the speed at which your audience can begin using the web page. Consider consolidating these separate files into one style file and one script file, if possible.

2. Use a content delivery network (CDN) for your assets

   Browsers can only download so many asset files at a given time from a given domain (e.g., www.yourdomain.com). Each requested file after the limit is left waiting to be downloaded and processed, creating a bottleneck and limiting performance. By pushing some of these files off to a content delivery network, the browser will be able to download and process more files concurrently. Additionally, CDNs are location-based and the browser will be routed to download your assets from the location closest to the user.

3. Use a CDN for third-party assets

   It’s the same idea here. A browser will download from the closest CDN server available, lessening transit time. CDN files are often compressed and optimized for delivery. Additionally, if you are using third-party scripts like Angular, jQuery, Bootstrap, etc., these might already be in your browser’s short-term memory, having been downloaded from another site. This gives you a performance boost as the browser can use that common file instead of having to download a fresh copy.

4. Set up a front-end caching manifest and use local storage

   Setting up a caching manifest is newer technology as is local storage. Both are well supported in mobile browsers. A cache manifest will enable your site to dictate to the browser which assets get saved to the device and allow for the site to run both more efficiently by using local copies and to browse offline (assuming additional technological caveats). Local storage enables your site to retain assets and data within the browser that might otherwise require a server request.

5. Optimize your images

   Any images used in the user interface or outside of CMS content that typically don’t change much can be optimizedAny images used in the user interface or outside of CMS content that typically don’t change much can be optimized through build processes before being published. For CMS content-type images, the CMS and server framework can be used to optimize images for publishing. More control will be available by optimizing images before upload than would be through a catchall system within your server framework. However, even light optimization is better than no optimization at all. This will lessen the transfer size of the images and help the browser render your site more quickly.

6. Use new HTML elements, new CSS and JavaScript techniques

   The <picture> element and srcset attribute enable a browser to dictate which image of multiple supplied images may be used within the given element. The browser detects the device it is being run on and chooses the best fit out of the given images. This enables you to give an optimal image to the user depending on the device they are using. While only currently available for Google Chrome (the most popular browser out there right now), some great work has been done with Picturefill, a JavaScript solution that smartly uses the same HTML syntax and gives your users the same optimized experience.

   Additionally, usage of new CSS and JavaScript code libraries and patterns will lessen the amount of images that a site needs to use. Scalable Vector Graphics (SVG) are pieces of code which create images that scale with a browser’s and device’s viewport and at a percentage of the cost of images.

7. Clean up your database queries

   Large amounts of database queries will slow down any browser response as the server churns through its processes and then returns a result. Whether you are doing a full page reload or using Ajax refreshes, check and see where you might refine your database queries. The longer a user waits for a page to load on their phone, the sooner they are to leaving. Your audience is apt to leave your site sooner on a mobile device than a desktop.

Keep in mind that older devices can be locked to an operating system version and browsers; special care will be needed to ensure these users are getting a good experience too! With each bit less to transfer, the mobile device can process and render your website more efficiently and your user will spend less money in their monthly transfer rate. These new techniques will help lessen the load that a browser needs to produce a representation of your website on the mobile device. Mobile browsers are geared towards the mobile web and often are a step ahead of desktop browsers in the technology that they support. Pay attention to your site analytics to determine what steps you can take to use newer technology to provide a mobile-friendly experience.

Be selective with third-party add-ons

Using lots of third-party plugins and add-ons can damage the mobile experience for users. A popular option is AddThis, which greatly helps users share socially. AddThis, however great, comes with a lot of baggage and can slow your site down to a crawl for users. For needed third-party apps like AddThis, consider heavy configuration to use just what you need and leave all the extra cruft out.

Analytics systems are important to understanding your users by showing you where they come from and how they use the site. Be conservative when it comes to how many different systems you want running on a page though. This applies equally as well to A/B tests, user heat mapping, and other specific analytics packages. Use these on selective pages rather than on sites as a whole. Once a test has completed, remove the extra add-on calls until they are needed again since each one adds to the amount of processing that the browser must have running.

Proactive vs. reactive

Though a website may sit in the “cloud” and not take up physical space, it’s just like any car you drive, and general upkeep of your website’s inner workings is a must. An ongoing maintenance plan is key to keeping your mobile site running smoothly. Without budgeting for maintenance, your team is left to react to web environment changes and new technologies and user trends. You’ll be a step or two behind where you should be. Budgeting for a plan that fits your website’s needs will allow your development team to be proactive and adjust the site accordingly.

Make mine Mobile-friendly

Mobile users reach for their browser first and a strong mobile presence will keep them returning. With social media primarily used on the go, a mobile site will foment easier social sharing. Think about putting effort into strategic updates to get your site mobile-friendly and the dividends will pay out for you and your users.

---

Is your website mobile-ready?

Wellfire Interactive excels in the strategy, design, and development of mobile-friendly websites. Whether it’s a fresh idea or needing a new strategy for an out-dated site, we’re here to help. Drop us a line and we’ll be happy to chat with you about your project needs.