How to Make Your Website Mobile Friendly

It’s all you hear these days – “There’s an app for that . . .” or “Get it on now your mobile phone . . .” The fact is, more and more people are surfing the web on these tiny No mobile website yet? mobile devices, so if you don’t already have a mobile site or app, you are certainly missing valuable traffic and possibly losing money. Already have a website?  Read on.

Been a While Since Your Last Site Redesign?

Your site probably has fallen behind in some (or many) respects, since web technology moves faster than most of us can predict. In fact, If you don’t freshen things up every few months, your search ranking will suffer, and in turn, your bottom line. The mobile phenomenon is still gaining steam and shows now signs of slowing down. On every website I manage, the number of hits from mobile devices has increased greatly over the last couple of years. If you want your site to stay up-to-date and accessible, you need to learn what it takes to deliver content to these mobile platforms.

Mobile Devices Have Smaller Screens

The web browsers on today’s mobile phones are capable of almost the same functionality as their desktop brethren, with one big difference – screen size. Instead of multiple columns like on regular sites, single columns are required for layout and vertical scrolling is expected. Go easy on the images, as they eat up bandwidth and slow down the user experience. While you’re at it, rethink your content—just present the most important stuff, not the fluff.

A mobile site is often a stripped-down version of your normal site, with mobile-friendly navigation and content that loads quickly. Big, clear buttons and text that can be maneuvered around with just a single clumsy thumb. Let’s hope they’re not driving as well…

How to Direct Mobile Devices to Your Mobile-formatted Site

The web browser on every computer and device has what is called the ‘User Agent String’ that identifies the browser type. With some clever site coding, you can use this bit of info to direct visitors to the appropriate version of your site. Other modern techniques such as CSS media queries can detect a device’s actual characteristics such as screen size, enabling you to deliver device-specific styling without altering the actual content.

Many sites actually create a full mobile-friendly version of their content and put it on a subdomain of the main site, such as: m.google.com or mobi.somesite.com, etc… The ‘.mobi’ domain has even become available, enabling sites to have ‘sitename.mobi’ addresses. There are valid arguments for choosing these different options—your specific situation can determine which way to go.

Once the user gets to the mobile site, they will see the content presented in the stripped-down format that works on a small screen, but (if you planned well) they won’t miss any important stuff. I sometimes prefer the mobile version of sites because they are simpler and faster to get around in. You can maintain enough of your branding and stylistic flair to keep your marketing team happy, but just stay lean and mean in terms of content.

The Latest Trend – Responsive Web Design

Well, maybe not the latest as of the writing of this article, but certainly a new approach if you judge by the sites using it – responsive web design is an amazingly refreshing approach for delivering content that adapts seamlessly to the device being used. Whether you view the site on an iPhone, iPad, Desktop, or some oddball screensize, the site will adapt itself and look good.

Instead of building separate sites for mobile and desktop, you create one site to serve all. Ethan Marcotte’s Book has some groundbreaking insight into this method, and should be required reading for modern web developers. The simplicity of the concept was enough to grab my attention, and the benefits for a client are: reduced site maintenance costs (you’re only maintaining one site…not two), wider audience reach, more versatile content (folks with 32-inch screens won’t see a narrow little column of content down the middle…) to name a few. The responsive approach may not work in every situation, but it is definitely an exciting tool to have in the box.

Don’t Treat Web Design Like Print Design

Print designs require strict pixel-perfect representation of imagery and text. Advertisers spend unheard of amounts of money to make sure their graphics look just right in every situation. When you’re dealing with web displays, (especially mobile devices!) you can’t expect every user to see the same exact thing. Each device, monitor, browser, user setting and more will have an effect on the display of your site’s content. The goal should be delivering content that makes sense and functions as intended, while adapting smoothly to each platform. The old-school method of coding a bunch of hacks and workarounds so that every pixel is a certain fixed way…well, you can see where I’m going with this . . . Focus more on ‘solid & flexible’ than ‘rigid & unyielding’. The number of mobile devices and tablets will continue to skyrocket, and trying to learn all the little quirks that each display presents just isn’t an option. Concentrate on a flexible, adaptive user experience and you will save a lot of headaches.

Mobile Doesn’t Have to Be a Pain

Many popular content management systems (CMS) like WordPress (you are reading a WP blog right now) have built-in mobile styling via plug-ins that handle the mobile-specific formatting for you. Mobile users will automatically see the small-screen formatted pages and desktop users still get the full-screen version. Slick!

Just Don’t Say I Didn’t Warn You!

If you don’t jump on the bandwagon, you’ll be losing visitors or money or both. the choices are simple: If your website doesn’t work well on a mobile device – have it redesigned to adapt gracefully to different platforms, or build a separate mobile-formatted version of your site. Hurry up – time’s a-wastin’!