Tweet

I just returned from vacation. I am thrilled to report that I did not turn my laptop on until the very end... but yet, I checked my email every day.

I have a Palm Treo 755P phone, and a nationwide Sprint "all you can eat" plan with unlimited calls, text messages, and data transfer. I decided to give it a workout while I was away.

The best part was that I always had a cell signal, wherever I was staying, and so I could always check my email for free.  Not true for a WiFi signal, which always seemed to cost something to access (unless I wanted to take a piece of vacation to go to a library or an internet cafe, which was not a high priority).

Email worked just fine on the phone. It downloaded 5K of each message (configurable, designed to keep your data transfer numbers low for those on a limited plan). I could download the rest of the message if I wished, or I could just delete it. I could also delete the message on the phone as well as on the server, so I didn't have to sort through the reams of Adobe User Group Manager list traffic again (sorry guys, but I don't want to read it twice).

The web, however, is a whole 'nother experience, as they say.

Over the last 4-5 years, maybe a little longer, there's been a huge shift in how websites are coded, both on the front and the back end. (I'm going to concentrate on the front end, because that's my area.) We've moved from 15 layers of nested tables plus spacer GIFs and font tags to lean, mean, CSS-driven layouts and few (if any) tables. That's a good thing.

But we've also moved from large, beefy web pages that were full of excessive HTML to very large, beefy web pages laden with video and images and excessive quantities of text. What's more, many of us haven't also taken up accessibility standards in our CSS adoption, meaning we're missing alt text or it's useless alt text, no skip to content links, stuff like that.

So, Jen's Rule #1 for Mobile Phone Front-End Web Development: Everything old is new again.

Back in the late '90's and early '00s, we web designers dealt with something called "dialup", a way of connecting to the internet via a phone connection. Connections were horribly slow, so we tried to streamline our web pages to download as fast as possible. That meant skimping on the total file size for the page, defined as the HTML itself, plus any additions like images, CSS files, Javascript files, etc. You should count anything that downloads "automatically", so you wouldn't necessarily count a YouTube video that doesn't download until you click the play button.

We also dealt with something called "Lynx".  Lynx was one of the earliest web browsers, which didn't understand how to display images or tables. It was wonderfully fast, as a result, but it was pretty challenging to get a web page to work without all of the pretty layouts.

So, what would my advice be for setting up your website so it works relatively well on a mobile phone?

If it works well for Google and Lynx, it's going to be mostly OK on a mobile phone. 

Remember that Google (and search engines in general) is your primary "blind" user for your website. Accessibility is often taught from this perspective these days.  Google doesn't understand tables/CSS layouts, images without clear alt text, etc.  It reads your page in the order the HTML appears. So if your page in the HTML goes logo, top nav, left column, right column, main content -- that's the order Google reads it.  (Better to use CSS to make it display logo, top nav, main content, and then the columns... or even better, logo, content, and then all of the extras. This gets Google to the juicy content as fast as possible and leaves the supporting stuff for later.)

My mobile phone doesn't display tables or CSS layouts. That's a great thing, because my screen resolution is small in width and height. The phone is smart to display content in the order of the HTML. It doesn't bother with video or sound, which I wouldn't want to watch/listen to on my phone anyway. Images are typically resized for the screen, or they don't download at all.

However, this does mean that I have to scroll past the logo, the top nav, and everything on the left (for most sites) before I finally get to the part I actually want to read. For those not on an all-you-can-eat data plan, that could mean downloading a ton of unwanted HTML before you actually read the stuff you're interested in.

How to deal with this? There are some great examples out there. More in another blog post.