Prolegomena to Mobile Web Development

The mobile web is on my brain constantly these days. This is partly because I work as a development lead for Match.com in their mobile group, and I happen to be working on a big mobile web project for them (yet-to-be-launched). This is partly because I have...um...other projects around mobile web going on. This is also because Match gave me an iPhone. My first smartphone was a Windows Phone 7 device. Given that I have in the past much indulged myself in the Microsoft Kool-Aid, I bought that thing the day it came out. In general the phone was very good but the browsing experience was very bad (it got better with “Mango”, but it remains less than thrilling). So owning that deviced did not at all excite me about mobile web development. But then I switched to the mobile group at Match and they gave me an iPhone. Suddenly, I had a device that had a great browser. Perhaps you are surprised, but that makes a huge difference. And I’m a web developer by trade anyway, so the world of mobile web development offers an interesting new avenue.

So for all those reasons, I am quite excited about mobile web development. The last few months have involved a lot of reading and writing code, and I have some things to share that I think many developers will find helpful.

Tech

Good mobile web development takes a mixture of engineering and design thinking. The stronger you are in both realms, the better off you will be. If you are not strong in both, either learn what you don’t know or find a partner. I am not a designer. I don’t pretend to be one. If you read this blog, chances are you probably aren’t one either. But I do read a lot in web design and can bridge the two worlds of engineering and design on the web enough to point you in the right direction. Reading on web design does not make you a designer (and a good designer is worth their weight in gold), but reading their stuff will at least allow you to understand them a bit more. And who knows, perhaps you will pick up some knowledge of design along the way.

If you are a designer, this series can be useful for you as well. I probably won’t have much to say to you in terms of Css or design, but you are going to see a lot about JavaScript, and should get some exposure to some server-side stuff.

Alrighty...so what do you need to learn to do this whole mobile web thing effectively.

You should know some server-side platform. Technically this isn’t necessary, but unless your site just serves static Html, you will need to have something here. What platform you choose does not really matter for mobile web development. Php, Ruby on Rails, ASP.NET, Node.js, Django...does not matter. The concerns of mobile web development are mostly something that happens client-side. Now, that being said, there are sometimes things you can do on the server-side to help you deal with your assets and whatnot, and we will discuss this. And I’ll try not to just use ASP.NET.

You need to know Css. Css is about presentation, making your site/app look the way it should. Many developers think that Css is something that designers deal with, and to a certain extent they are right. Using Css effectively to create a fantastic user experience is something designers are uniquely skilled in. But knowing what to do and how to do it are completely different though complementary skill sets. Many web developers leave both up to the web designer, which is a shame. The question of what is a question of design, and I may not be able to help you there. But the question of how is as much an engineering task as any. So learn Css if you do not know it. Fortunately the core concepts of Css are mostly quite simple.

You need to know JavaScript. The type of mobile web project you work on will determine how much JavaScript you need to know. If you are just making a mobile version of your blog, you may be able to get away with none at all. But if you are going to build a mobile app, you may need to know a lot. It depends on what you are doing. We will talk about this more later.

You need to know Html. Html is what you send over the wire. It is the document that all your JavaScript and Css are built on.

Big Questions

When considering the prospect of building a mobile website, there are a few questions of particular importance because they greatly impact how you build what you build.

• Is this mobile website primarily about reading (e.g., are you making a mobile version of your blog) or is about doing something (e.g., it is primarily for performing a particular function, and you could imagine it being seen as an app)?
• Are you making a mobile version of an existing site, or are you starting from the ground up?
• Do you intend for your mobile site and “regular” site to be the same site, or do you need to separate them?
• What range of devices are you planning on supporting? Are you just supporting recent versions of iOS and Android? Or do you have to support old school feature phones? Perhaps somewhere in between.

Books

Here are some books to start with, and I would work from top to bottom.

• Designing with Web Standards (3rd Edition), Jeffrey Zeldman.
• Responsive Web Design, Ethan Marcotte.
• Mobile First, Luke Wroblewski.
• Bulletproof Web Design (3rd Edition), Dan Cederholm.
• JavaScript: The Good Parts, Douglas Crockford.
• JavaScript Web Applications, Alex MacCaw.

There are a lot more useful books out there, and we will probably mention a number of them. But start here. And then go spend a lot of time on A List Apart, and follow links from there.

So there is your ever-so-brief introduction. Next we will cover a small item that pays large dividends, the viewport meta tag.