Going Mobile - How to Make Your Website Mobile-Friendly - John Rust Business and Marketing Consulting

Going Mobile – Part 2

Making Your Website Mobile-Friendly

By John Rust

It's safe to say that mobile-friendliness is no longer just "nice-to-have" for your business' website. As long as you rely on the internet to reach customers this is now a requirement.

Becoming "Mobile-Friendly"

Your website might already be mobile-friendly, or nearly so. The "Catch Up" changes mentioned in Part 1 got you pretty close. Google "likes" three different configurations for mobile sites:

Separate mobile sites: Visitors using a smartphone are directed to a separate mobile URL (such as http://m.yourcompany.com) that is optimized with different, device-specific code and content.
Dynamic serving: Your host's web server identifies each user's device and browser. It then sends that visitor appropriate code based on that information.
Responsive design: Desktop content is adapted to appear nicely on a mobile device. This means page addresses remain the same and your visitor analytics reporting is easier. However, resizing and re-formatting the same content for various devices may not always deliver ideal results.

1.Separate mobile sites

You may already have a separate mobile website. This is great as long as it meets Google's new "friendliness" test.

Google's new requirement must also be met – that links from any given desktop page will lead to a specifically matching mobile site page. Linking from every desktop page to the mobile site's "homepage" is not acceptable.

Depending on your desktop site's design, this may be easily implemented. Unfortunately, many designs use one navigation menu throughout the entire site and adapting it to meet the new criteria might be difficult (ie, costly).

One significant advantage to this approach is that the mobile website can be completely optimized for small devices. This means using fewer and smaller image files to speed up your download time, and customizing the content to best suit the unique behaviors of those visitors who are "on the go."

There are some disadvantages to having a separate mobile site. For one, your mobile site was most likely designed for the smallest smartphones, and now cannot take advantage of the larger screens on some phones or tablets.

Another disadvantage is the need to maintain two sites – one for mobile and one main website (desktop). This adds costs for updates and possibly hosting.

2.Dynamic serving

For most small businesses, dynamic serving will be too costly. The technical aspects do lend themselves to "Content Management Sites" (CMS), but the costs for implementation and ongoing maintenance are prohibitive for most small business budgets.

3.Responsive design

Fortunately, Google does recognize the challenges faced by smaller businesses, and officially recommends a "Responsive" approach.

Once your design is "responsive" you will satisfy Google while only needing to maintain one single website.

There are a couple of disadvantages to this approach. One is that mobile device users will be downloading image files that are large enough for a desktop site, but unnecessarily large for a small screen. This adds to a website's download time.

Another disadvantage is that some mobile visitors actually want to see the same website whether using a small device or their office desktop. Your visitor analytics will help you know if this is a concern.

Your Best Mobile Solution?

The right choice for you depends on a variety of factors: your website content, your own technological capabilities, your budget/resources, your industry, your business goals, your conversion points, and your visitors' expectations all play a role in dictating which mobile configuration works best for your website.

Obviously, this article cannot cover all the technical or business considerations. Yes, there are compromises to consider that are not covered here.

I recommend having a discussion with a good technical Search Engine Optimization (SEO) consultant for advice on planning and implementation.

For most small businesses building a responsive site is the best solution. Google actually recommends responsive site design. Responsive Web design has removed the need for alternate mobile versions of websites and gives you the ability to maintain a single website that automatically adjusts to the size screen that it is displayed upon.

What makes a Website Responsive?

Start by looking at your own website on a mobile device. It will probably be shrunk in size (zoomed out) so an entire webpage width fits on the screen. Without spreading the page, consider how readable it is and how easy it is to tap a navigation link.

Now, try some of the samples below. These are demo pages and samples of small business-type websites that are already responsive.

Visit the sites and watch what changes when your screen width is changed. If using a laptop or desktop, just drag the browser window narrower. If using a smartphone or tablet, try rotating from portrait mode to landscape mode.

1. Basic Demo Pages:

Demo Page 1 – Demo of a very basic touch-friendly "toggle" navigation menu. http://www.johnrustconsulting.com/responsive/responsive-menu.html
Demo Page 2 – A simple responsive website layout. The image and the "Archives" block will adapt to smaller screens. http://www.johnrustconsulting.com/responsive/responsive-demo2.html
Demo Page 3 – Demo of a two column layout with a toggle menu. http://www.johnrustconsulting.com/responsive/2col-responsive-menu.html
Demo Page 4 – Demo of a responsive flexbox-based webpage with vertical navigation menu. Uses partial html5. Note: Internet Explorer 9 and earlier versions do not support the flexbox technique. The browser versions (and later) that do are: IE - 11.0; FireFox - 28.0; Safari - 6.1; Chrome - 29.0; Opera - 12.10. http://www.johnrustconsulting.com/responsive/3col-responsive-flexbox-menu.html
Demo Page 5 – Demo showing several responsive design features that are possible using html5. Old browsers may not render the full effects. Utilizes a horizontal navigation menu that toggles on small screens. Includes an html5 Flexbox demonstration to show the SEO benefits. Includes a "Fluid" table demo. http://www.johnrustconsulting.com/bootstrap/navbar-test-1.html

2. A few responsive local websites:

Family Camping Gear – this WordPress-based demo site uses a basic responsive design. http://www.familycampinggear.com
Maine Woods Tourism – this is also WordPress-based and uses a mix of responsive design techniques to allow a different layout on its homepage. Be sure to try both the homepage and an inside page. The site is provided by the Piscataquis County Tourism Development Authority. http://www.mainewoodstourism.org
Visit Maine – the website is provided by the Maine Office of Tourism. It is a responsive design with partial use of HTML5. http://www.visitmaine.com
Coastal Enterprises – one of Maine's leading economic development agencies has fully implemented responsive design and HTML5. http://www.ceimaine.org

3. For WordPress users:

Your WordPress site might achieve "Mobile-friendliness" by installing a readily available "plug-In." Several free ones are available. These create a separate mobile website which is delivered to your site's visitors who are using a mobile device. There is usually an option for the visitor to switch back to the desktop version if they desire.

This approach is easiest for sites that use a standard WordPress layout with very few options. However, adding a plug-in always results in added maintenance and software update complexity.

Jo Mary Riders Snowmobile Club – the club's website uses one of the most basic WordPress layouts for desktop visitors, and a popular mobile conversion plug-in. If you can compare the two versions you will see the limitations inherent in this approach. However, it does satisfy Google's new requirements. http://www.jomaryriders.com

What did you see on those examples?

Fluid Design – The first thing you will note is that the images and text areas (columns) will become narrower this is called being "fluid" because the text "flows" so it stays in the columns.

Then you might see an entire column "disappear" – or actually it probably dropped down and "appears" just below the content that was originally to its left.
Touch-Friendly Toggle Menu – You will also see the navigation menu change into a "toggle" system. At some point, menus that work well with a mouse or touchpad become very hard to use if it is resized to fit on a small device – the link area is either too small to tap, or the drop down menu won't work. The toggle system hides the menu when not in use so more content will show on the screen. The toggle system is also more ideal for a finger to "tap."
Simplified Content – It is possible to make certain parts of a desktop site "disappear" on a small screen. Often, sidebar info, ads, and "nice-to-have" content of a desktop site are simply not shown on a small screen. This helps maximize the use of the small screen for the primary content without forcing your customer to scroll down repeatedly to find the main info they seek.
Improve Readability – Finally, at the smallest screen sizes you might note that the text size has been adjusted in order to keep it easily readable.

More "Must Do" Changes

When updating your website to become mobile-friendly, it is an opportune time to update the technical side:

Replace "Flash" The first technical change is to eliminate all content that uses "Flash" to display content such as motion or slideshows. One old reason to avoid this content was that Google, and other search engine robots, could not read and interpret it so it was useless for enhancing a page's search placement. A new reason to avoid Flash content is that many mobile browsers will not display it (ie, Apple products).
Update Code The second technical aspect to consider updating is the actual coding of your webpages. Most sites were first created using standard "HTML" code. More recent sites, or sites that have already done their "Catch up" improvements, might use the newer "XHTML" code.

Designers are now building sites with "HTML5" code. This provides some very useful new techniques, and is especially favorable when optimizing a website for search engines (SEO).

Remember the Basics

Now is a great time to reassess your website strategy and content. A question to ask is whether your content should the same for mobile devices and desktops? You must consider the visitor's needs and expectations, such as:

User attention span
Noise and distractions
Goals on pages
Business goals

Trying to display the same content from a webpage designed for desktops on a smartphone can affect your conversion rate and sales.

You must look beyond code and styling, to consider the intent and meaning of each page to your audience. Sometimes, mobile visitors want just the bare basics.

Bottom Line

Your website must now be "mobile-friendly."

Over half your visitors are now using a mobile, or handheld, device like a smartphone or tablet, and you need to provide them with an optimal user experience in order to get their patronage.

Your placement in search results for both Google and Bing will now depend greatly on being "mobile-friendly."

A responsive design may be the best approach for you. However, copying the same content from a big screen to a smaller one might not be effective, and must be planned carefully. Designing separate mobile versions of your website can boost conversion rates but this will cost more to properly implement and maintain.

I hope the information above is of some help. If you have any more questions, let's get together and talk about them.

Read "Part 1" of this article for "Why You Must Have a Mobile-Friendly Website."

"Call Now to Arrange a Free Consultation"

Or click here to send me an E-mail, and I will call you. Let's get to know each other, and discuss some of your most pressing problems, during a brief, confidential, visit in your office. I will freely share my ideas with you, even though there is no charge for this meeting, and no obligation.