The Mobile Market Cometh

The basics to making your website mobile-friendly

Not sure if you’ve noticed this, but people are surfing the good ol’ fashioned web with some decidedly not old-fashioned devices these days. I’m talking about mobile devices, of course – smart phones and tablet computers. And in case you haven’t heard the news, there will actually be more of those devices than standard computers surfing the web by the year’s end. If you’ve seen how the web looks and functions on any of these devices, you know that things work a little bit differently there. So what does this mean for your website? What can you do to make your site more mobile-friendly? Well, let’s start with a little break-down on how web browsing works…

The Fundamentals

When you visit a website with any device, your computer is asking the computer that’s hosting the site to send you code, text, and images, as well as other content like video, sound, downloadable media, etc.. These two entities represent the “client side” (your computer/web browser) and the “server side” (the website host computer). Most of the time, the client just asks for data and the server delivers it. In some cases, the server actually puts the page data together on the fly when the client asks for it, such as sites built with WordPress or another content management system (CMS).

But there are two factors that can affect which content is actually viewed in that client computer’s/device’s browser:

1. The server can tell exactly what kind of browser is asking for the website data, which gives us the potential to deliver content/structure that is specifically engineered for that type of browser (Internet Explorer on Windows, Firefox on an Android phone, etc.).

2. The browser knows what kind of information it is allowed to make use of, which gives us the ability to make available specific data for that type of browser (e.g., Safari on the iPhone) that will be ignored by other browsers.

Then and Now

Prior to 2007, little development was done specifically for hand-held devices. Any number of mobile phones could technically surf the web, including very popular devices like the Palm Pilot and the Blackberry, but they all did so very poorly, and they all did so differently (and the existing tablet computers were far from popular). In short, it was a moving target that very few people cared about, so there wasn’t really any point in worrying about it.

And then the almighty iPhone landed. Suddenly, a popular mobile device could view the web in almost exactly the same way that a desktop computer did… just on a much, MUCH smaller screen. This represented a revolutionary shift that was a double-edged sword for internet mavens; suddenly we had a new, “always on” channel with which to deliver website information, but in order to do so, we also had to be aware of that tiny screen.

Oh, and that’s not all we had to contend with – Adobe Flash was not welcome on such devices. To make a long story short, Flash was just not destined to make the transition. This meant that many websites were hindered right out of the gate. They either wouldn’t work at all (such as those really dynamic, movement-based websites that were built entirely with Flash), or the specific areas of their site that made use of Flash wouldn’t work (including Flash-based video, which was the gold standard at the time).

And now, as you are probably aware, we have a litany of mobile devices gaining in popularity, including the iPad and any number of Android-based devices. In one way or another, one must adjust the content of one’s website in order to gracefully cater to those new browsers.

The Tailored Solutions

Here, then, is an outline of the various stages of “mobili-fying” your website, ranging from the simplest to the most complex…

Stage 1: Friendlier

The majority of websites still don’t provide any provisions for mobile devices. They take for granted (or completely ignore) the fact that people are looking at our content on an itty bitty screen. Even so, there are a couple of things we can do to make browsing better for smart phone users. The first is add the “tel” tag to any phone numbers. This ensures that a smart phone user can tap the phone number to call it. We can also use specific tags for email addresses, web addresses and phone numbers on any forms that people may need to fill out, which tells the device’s keyboard how to handle to the task at hand. It’s the small things that count! Another nicety that can go a long way is to make the text size a little larger, and for goodness sake, put a little space between text links (I, for one, find it very frustrating to try to tap on text links with my sausage fingers). These are three simple alterations that can benefit your mobile users but require very little development time.

Stage 2: Even Friendlier

The next level in this process is the rejiggering of major structural elements for delivery on small screens. The simplest way to do this is to add an instruction in your website code that essentially says, “if you’re viewing this with a screen smaller than X pixels wide, use this style sheet:”. That directive points to an addional, small-screen-only version of the cascading style sheet (CSS). Virtually every website in the world uses a CSS file to determine a wide variety of stylistic options: font sizes/colors, background image arrangement, column widths, etc.. So in this case, you would be handing a special version of the CSS to those small screen devices that would do things like bumping up the font size, making buttons bigger, and narrowing the column width to one that makes more sense for them. This is a reasonably small job for web designers/developers that will usually require 1-4 hours of work, depending on the complexity of the site and the required solution.

Stage 3: Super-Duper Friendly

If the server knows you are using a mobile device, it can redirect your web browser to a completely different version of the website. This option requires a second set of code, images, and other content that’s all formatted with a small screen in mind. Depending on how your site is constructed, create this setup can either be very simple or very complicated.

These days, a high percentage of websites are built on top of popular content management systems like WordPress and Drupal. If you’re lucky enough to have such a site, you may be able to offer a minimal version of the above experience just by installing a plugin that adds such functionality. This addition will tell your site to watch for those mobile browsers and deliver to them a simplified version of your site that contains smaller graphics and bigger buttons, sometimes reformatting the site to be menu-driven, just as so many mobile apps are setup.

If your site is not built upon a system that already has a ready-made mobile solution created for it, however, you may be facing a significant development project if you want to create a truly mobile-savvy rendition of your website. In this case, the solution is closer to a full site redesign (taking the content that you already have but engineering a new interface for it) than a simple add-on. But it’s certainly feasible to make it happen, and depending on the purpose of your web presence, it may be highly recommended.

A still broader definition of the tailored concept is outlined by a term that’s currently all the rage in web development circles: Responsive Design. This approach seeks to offer a unique browsing experience for all the major browser types/sizes, not just phones. While generally requiring the assistance of a strong development team, this approach makes all the sense in the world for big internet juggernauts who cater heavily to a wide variety of users.

Sooooo… Which of These Solutions Makes Sense for Me?

That’s probably the biggest question of all in this discussion, but the Angled End staff understands the playing field and is more than happy to discuss all of the options that make sense for your business and brand. Drop us a line if you’d like to get that conversation going! But above all, don’t ignore the mobile movement. It’s not on the way, folks, it’s here. Better to get a leg up on your competition while you have the chance than have to react once they do so. The best defense, after all, is a good offense.

Dan Lipe is a creative engineer at Angled End.