User Experience

How to Make your Site Mobile Friendly, Part 1

Editor’s Note: This article was originally published by Web Marketing Today. Practical Ecommerce acquired Web Marketing Today in 2012. In 2016, we merged the two sites, leaving Practical Ecommerce as the successor.

Editor’s Note: This is “Part 1″ of a 2-part series on making your website mobile friendly. “Part 2″ we published subsequently.

According to a recent study from Pew Internet & American Life Project, 46 percent of Americans use smartphones. Small to medium-size businesses are searching for cost-effective solutions for capturing this audience and for making their websites more mobile-friendly. It’s also imperative that the mobile sites be visitor-friendly. To do so, design changes are often necessary, as is the focus of the site.

What Do Your Visitors See?

Do you know what your customers or site visitors see when they come to your website via their phones? Is it readable? Can they input an email address or a code? Can they accurately click the buttons on your site? Do they need to tap the links in your text?

To see what your website looks like on smartphones and tablets, you can use a mobile conversion website service such as G0 Mo, created by Google and Duda Mobile. It lets you see how your website looks to mobile users by entering your site’s address in its “Test Your Site” box. After it displays the results, it offers suggestions on how you can make your site more mobile-friendly, including an offer to do it for you.

Go Mo Test

Go Mo lets you test to see what your website looks like on mobile devices.

Technical Solutions

There are many solutions to optimize your site for smartphones. Each has pros and cons, and ranges from free to thousands of dollars. The amount you spend depends on the requirements of your business and your visitors.

Below are four strategies employed by small to medium-sized businesses.

1. Use a Mobile Website Conversion Service

There are numerous companies on the web, such as Duda Mobile, bMobilized, and Mobify, who will convert your existing website for you and provide a script that will direct your mobile users to your newly created site from your main website. These services also provide you with a way to edit your content. In exchange for this service, you pay an annual or monthly fee.

2. Design a Separate Mobile Site

Some companies want to keep their desktop and mobile websites separate, often due to how their visitors interact with each. jetBlue is such a company. Its main website has a distinctive look and feel, and while the branding is carried over to its mobile website, the mobile site is a separate entity geared to people on the go. It serves that audience.

JetBlue Sites

jetBlue’s smartphone-optimized site (on the right, above) is different from its full version (on the left).

By creating your own mobile website, you maintain control: its design, maintenance, hosting, and security. You can hire developers or designers experienced in mobile web design to create a separate mobile website. They’ll add a script to your main website that will determine if the visitor is using a mobile device and if so, it will automatically direct the visitor to the mobile version.

3. Use Responsive Design

Responsive design is becoming more common. It allows for a business to have one website that will display correctly on all devices — desktop, laptop, tablet, or smartphone. It takes advantage of CSS “media queries” to style pages based on the width of the device being used. Since responsive design employs multiple style sheets, it can be deployed, not always easily, in websites that have been developed in WordPress, HTML, PHP, Joomla, Drupal, and others.

When designing a responsive website, keep in mind how it’s going to look first on the mobile device. Otherwise, the site may have to be reconfigured so that the most important information is near the top and the navigation is easy to use.

To determine if your website is responsive, just resize the browser window. If it adjusts — so that the images and text are readable with a narrower browser window — it’s responsive. Below are examples of how Microsoft’s website displays differently across various devices.

Microsoft 20 Inch Display

Microsoft website on a 20″ display.

 

Microsoft iPad Mini Display

Microsoft website on an iPad Mini.

 

Microsoft iPhone Display

Microsoft website on an iPhone.

4. Link to Mobile Version from the Main Site

Bing Local will provide you with a free link to a basic mobile website when you claim your website using Bing Local. You can place this link at the top of your website so it will be available to your mobile visitors. A prominent button would be more visible than a text link but be sure to incorporate it well within your web design layout or it will look out of place. This option is a stopgap measure at best.

Coming Up

Now that I’ve presented the technical options, I’ll address the second, equally important component — assuring a good customer experience — in “Part 2.” It will cover ways to improve your visitor’s experience and make your site more effective on the small screen. Read “Part 2” here.

Kathleen Fealy
Kathleen Fealy
Bio   •   RSS Feed


x