In times past, you could get by with a “Mobile Strategy” – but not in 2013. You need a website that looks great on all phones, tablets and desktop computers. As of November 2012, almost 15% of all web consumption is on a mobile device. Generally, an effective mobile site will double conversions and lead generation. Here are a few tips for designing your mobile site.
A website’s purpose is to share content. Don’t let fancy graphics, rollovers, endless scrolling, and endless load times get in the way of sharing your content. A mobile visitor’s only goal is to consume your content. Your job is to help them do that in the most familiar way possible. Easy things are easy because they are familiar.
Have you ever visited a site from your phone only to get the “This feature is not supported by your mobile device” error? Or better yet, you can’t even find what you’re looking for? This is the all-too-common, frustrating reality of today’s mobile web.
A mobile website shouldn’t be a cheap, watered-down sample of the desktop version, but rather a complete replica. Guests want content. If you can’t fill that need, they’ll move on.
If someone is viewing your site from a mobile phone, make it easy for them to call you. A prominent Click-to-Call button would do wonders for your conversion rate. Here’s a quick HTML snippet to get you started:
<a href=”tel:18883700370″>1-888-370-0370</a>
Keep in mind that mobile users usually have limited screen space. As a general rule, keep the header of your mobile site under 130px tall (shorter is better).
Make it easy for your guests to find their way through your site. If you have a popular product or monthly special, make it easy to find – especially if you have print advertisements that are pointing to your site.
Short, mobile-friendly URLs are also be beneficial:
onlinelivechat.com/special
Your readers are visiting your site to… read. So, choose a font that is readable. Arial, Courier, Georgia, Helvetica, Lucida Grande, Palatino, Tahoma, Times New Roman, Trebuchet MS, and Verdana are highly-readable, web-safe fonts that work on most devices. Steer clear of fancy, curly, and busy fonts. Verdana is widely accepted to be the most readable because of it’s size and wide-spacing. Arial is great font to use for smaller areas.
For areas requiring heavy reading, use a light background with a dark font colour. For more info, read the Colour chapter.
Eliminate rollovers. On a touch screen, sometimes these rollovers require the reader to click on the link twice to follow the link. Other times, they can’t follow the link at all. Better to err on the side of caution.
Websites are divided into 2 parts – the structure (HTML) and the design (CSS). There is a great war waging over whether mobile sites should just add a new design layer on top of the desktop version or define a completely new structure. It is the author’s opinion that Responsive Design is the only way to go:
1. They are easier to maintain (you’re dealing with 50% less code).
2. Your desktop and mobile sites will always have the same content by default.
3. More and more phone models are being added daily. This means constantly updating your UserAgent string detector to prepare for each device.
If your desktop version is slow loading, a separate mobile site may suit you better, but I would first recommend removing these “slow-loaders” before opting for a separate mobile site.
In case it needs to be said, your website’s mobile guests should *always* be redirected to your mobile site first.
One of the drawbacks of Responsive Design is that images are sized for the desktop experience. When a guest visits the mobile site, they are required to download the full-size images. This can be a challenge on slow, cellular connections.
Here are two questions to ask when considering the footprint of an image:
1. Does the image require transparency (or can I accomplish this some other way)? Choose the smallest file type for your needs (JPEG vs PNG). I would generally not encourage the use of GIF files because of their poor quality.This is an image specific choice.
2. Does this image need to be pixel perfect (or will “close enough” do)? When saving an image for the web, decreasing the “Quality” of a JPEG can drastically decrease the footprint of an image. I usually export my JPEGs at about 70% quality, without any significant quality loss.