Most people like to watch online video. Some business owner remain doubtful about the profit of incorporating online video into…
Building a Simple Mobile Version of your Small Business Website
After building a few mobile versions of websites for some clients I though I would share some insights. I tend to work with small businesses that operate in local areas so this guide is catered primarily to simple ways to create a mobile version for those types of websites.
This is a 3 part series starting here with a basic overview of considerations when building a mobile version. Part 2 gets into the specifics of coding mobile pages and part 3 takes that one further with a guide on coding a mobile theme template for websites using WordPress as a CMS.
Now onto the major considerations you need to think about before building your mobile web pages.
Target the Right Phones, the smart ones
There are oodles of cell phones on the market that are capable of browsing the web. From older phones with a small black and white, or black and green, screen not much bigger than a wrist watch to full sized touch screens like the iPhone. As we all know the growth market in mobile are these larger screened Smartphones and those are the users who are venturing onto the web via their phone. You can basically ignore those older small screen phones.
The iPad and the other tablets to come are technically mobile devices but they are not phones and their screen sizes are not much different than many laptops. If you plan on using user agent detection to redirect mobile users to your mobile version don’t include the iPad in that. Those users can use your full sized site just fine.
Minimized Page Layouts
As large as the screens are on an iPhone, or Blackberry, or Android, they are still quite small compared to a desktop monitor or laptop screen. You need to tailor your design to these small screens so your site is actually usable. Screens are small so your pages should be small, in all aspects.
Also recognize that user behavior on a phone is different than on a full sized monitor. People browsing the web from a phone, and in particular if they are searching for a local business, are in a hurry. They want to very quickly find what they are looking for then go about their day. They do not want to read pages and pages of text so make your mobile web pages very short and concise. Get right to the point an avoid fluff. A headline and a few sentences of text plus a call to action can often be enough.
Flexible Layouts for Different Screen Sizes
Among the large screen smart phones screen dimensions vary widely. Design your mobile pages to fit most the phones out there by using dynamic page widths. Or if you need or want to use a fixed width then make it small enough to fit some of the smaller phones yet render nicely, but not too small, on larger phones.
Small file sizes for speed
The mobile web is slower than a hard-line high speed connection. Many mobile users are also on data plans with bandwidth restrictions. Keeping your page files, style sheets, and image files light will speed up load times and help conserve your users bandwidth. Keep your code light. Bare bones HTML markup and make sure your css is not declaring styles for elements you are not using. If you are including a contact page with an email form, the css for that form can be as large as that for rest of your site markup. In that case you should serve the css for that form separately so it is only loaded when that page is viewed, not all your pages.
Minimize the use of images and where you do include an image optimize it. Re-size images to fit a typical phone screen. When saving jpeg images, if your software lets you, reduce the image quality percentage down to 6o% to 70%. That is enough that the human eye can’t quite see the image degradation yet can cut file sizes, in bytes, by 50% or more.
Site Navigation, again minimal
The mobile version of your website likely only needs a handful of core pages. Most local small businesses don’t have a very large website to begin with. Your mobile website can be as small or smaller. Just focus on your primary service/product pages, plus the home page and a contact page.
Many guides on best practices for mobile web design will tell you to place your navigation links at the bottom of the page. A decent idea, except I prefer to include it right up top on the home page, below the header but above the primary page content. This helps users get to the specific page they need. Internal pages can stick to the navigation on bottom rule.
A Sample Small Biz Website with Mobile Pages
I recently finished up a mobile version for a client, an air conditioning company in Houston, Texas. If you are viewing that link from a full sized web browser (Firefox, Chrome, or Opera), just shrink your window to about iPhone width to see how the mobile pages would render. But if you are using Internet Exploder you won’t be able to see it as it does not know what to do with xml.
Their full website, here, has about 40 static pages, not including blog posts. The mobile version has a grand total of 9 pages. We cover just their primary products and services and a couple pages about their pricing policy and guarantees. That’s it. Come winter we’ll add a page for gas furnaces but there is no rush on that.
You can see the difference in content between their full page for ac repairs versus the mobile ac repair page. The mobile version is much thinner on content, else the user would need to scroll about 10 screen heights to get it all. We focused on delivering the message in a few words as needed and emphasized the contact button and click to call links.
Yet another example can be seen here for this law firm in Los Angeles.
A Simple Search Optimization Tip
Include your phone number in your meta description tags. Phone numbers, even when just plain text, become a click-able link that will dial the number on some smartphones. When a user does a Google search and that description tag as displayed in the results, people can click to call without even visiting your website. Certainly worth adding.
Now that those things are covered, on to coding up your mobile web pages.
Contact HeyGoTo at (702) 475-4227 or go to www.HeyGoTo.com today to find out how we can help you! To read more industry information go to the HeyGoTo Blog at http://heygoto.com/wordpress/
The following two tabs change content below.
My Mission is to Motivate & Empower others to Genuinely Succeed with Online Marketing through Training & Mentoring!
Latest posts by David Moceri (see all)
- - August 12, 2023
- Internet Marketing – The Art of Capturing Market Share - May 20, 2017
- Top 3 Social Media Mistakes Online Marketers Need to Avoid - December 31, 2016
This post was written by David Moceri
