Mobile Site Development Made Easy
Building mobile versions of client websites has become part of my regular service as a freelancer. Here are some of the things I’ve learned along the way. (Plus some snappy links for technical deep dives.)
I know these “9 Billion Tips For Mobile InterWeb Development” are popping up all over the place, and not just for cheap SEO reasons. There really is a disparate list of random tips and tweaks that make for easy list-writing, and I wanted to highlight a few of the core tricks that make the production of mobile versions easy. Like print style sheets, it’s something I’ve rolled right into my regular set of services because these days, there is no reason a site should not be optimized for different screen sizes.
Over the past dozen or so client projects, I’ve settled into a quick groove that makes mobile development snappy.
Build for iPhone, Others Will Fall Into Place
I do this for several reasons. The iPhone is the smartphone that matters. While there may be more total Android devices out there and Nokia is bigger than Hasselhoff in Europe, the web-browsing experience on iOS has been spectacular since the first generation. People buy an iPhone to browse the web, and they expect a good experience.
More importantly, getting the mobile version right in the iPhone means getting it right in others. Webkit is used in many devices, the screen resolution is about average, and it uses touchscreens, which are a bit more finicky than the traditional point-and-click of a device like the BlackBerry Curve. In my decidedly unscientific tests, a site that works in iOS works perfectly in different BlackBerry devices, the Palm Pre, and others.
Apple defines trends. Optimize for them, and almost by definition you’ll stay ahead of the curve.
A lot of visual whiz-bang effects written for large screens loses a lot of potency on mobile browsers. jQuery UI effects like sliders and accordions fall apart because of no touch support, photo galleries collapse in small widths, and lightboxes break very quickly. In these instances, a website must operate without JS support. I don’t even load jQuery UI for my mobile sites.
screen.width conditionals. I prefer doing this via PHP, and find Andy Moore’s lightweight detection script invaluable for this task. Every kilobyte of JS not loaded by a mobile device is one modicum of better user experience.
Placement of Media Queries
CSS3 media queries are by far the most efficient means of altering the display of a page based on screen dimensions and density. A lot of articles discussing this recommend a separate CSS file optimized for mobile in addition to the desktop version. They might be loaded like this:
<link rel="stylesheet" href="desktop.css" media="only screen and (min-device-width: 481px)" /> <link rel="stylesheet" href="mobile.css" media="only screen and (max-device-width: 480px)" />
This works, but it’s not always efficient. For instance:
- Older IE does not recognize media queries, so desktop.css has to be called a second time inside a conditional comment. Unnecessary page weight.
- Because some of the core color and type styles will be repeated between both desktop.css and mobile.css, it’s one extra step to maintain consistency. It also means a lot of repeated code.
- If you ever wanted to create a third style sheet (maybe for the iPad), you would have to add yet another CSS file to the set.
If you add the media queries inside a single CSS file, you avoid the need to treat IE separately, have built-in consistency with core visual styles and no code repetition, and can easily scale the file to alternative sizes and pixel densities. However, this also has downsides:
- The CSS file itself is a larger initial download. Based on my work to date, it’s about 15-20% more code.
- If the CSS file calls a lot of assets such as background images and fonts, they’re going to be downloaded for both desktop and mobile. A separate mobile-only CSS file could exclude these.
The second point is the real killer, so weigh the options carefully. I tend to work in one single file, but your mileage may vary.
Go For Speed
In the wonderland of mobile, it’s all about bandwidth. Speed matters, and it matters big time. Here are the simple tricks that help me make things go a little bit faster:
- Compress everything, even the HTML.
- Minification is cheap and easy. I love this simple PHP minifier.
- CSS3 “effects” over images. Rounded corners, gradients, bevels, shadows and all sorts of other goodies can be rendered at lightspeed with a few lines of CSS, and obviates the need for bulky images. Less to download and fewer HTTP requests makes everyone happy. For those on older IE … well they just get square corners and no nice shadows.
- Avoid unnecessary font-face rules. I just finished a client site that used League Gothic, and it costs me 84.7 kb to load the four file formats. Ugh.
- Put the necessary JS at the bottom of the page so it’s called last. But you already knew that.
Optimize for the Viewport
Beyond media queries, there’s only two things you need to add to make your mobile version sing. This bit goes into the CSS file:
This avoids the iOS’s bizarre need to fuck with font sizes every time you turn a device on its side.
Also, the viewport meta tag should be loaded at the top of the HTML page. There are a bunch of attributes, but the base installation is best:
<meta name="viewport" content="width=device-width" />
This sets the width correctly and still allows the user to zoom into selected areas. To prohibit zooming, the following can be used:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
However, removing the ability to zoom is an accessibility barrier, and should only be used for application-level sites where the dimensions are critical to a better user experience. For content-driven sites, this is rarely the case.
More Technical Advice
Here is where those “9 Billion Tips For Mobile InterWeb Development” articles come in. These are a few I have found valuable.