The Rules of Engagement

Restrictions

Let's take a look at some of the obvious restrictions, and see what we can do about them.

First of all, let's talk about real estate. In case you hadn't noticed, allow me to state the obvious: mobile devices have small screens. For example, the iPhone's dimensions are 320px by 480px. Unfortunately, you don't even get all of that space to work with. The iPhone's status bar takes up 20px and Safari's control bar steals another 32-44px (depending if you are in portrait or landscape mode). When the page first renders, the address bar takes up 60px (but it does scroll with the page to move off-screen). That makes for a default first impression of only 320px by 356 (in portrait mode) or 480px by 208px (in landscape mode). Not a lot of space to work with "above the fold," as they say. Oh, and when a user needs to fill in a form, the on-screen keyboard takes up between 224px and 260px. (Reference: Put Your Content in My Pocket, Part II.)

And then there is the lack of a cursor/pointer on touchscreen devices (and also on older phones that rely on tabbed browsing). Hover becomes an issue, along with certain JavaScript events.

If you combine the small amount of real estate with the touchscreen interface of many smartphones, there is also the issue of making sure links are large enough and spaced far enough apart so that users can get where they want to go when "clicking." You don't want your users "playing Russian roulette," as Craig Hockenberry puts it (Put Your Content in My Pocket, Part I). Hockenberry suggests at least a 40px area/spacing for links.

Also, the use of absolute positioning and floating can become problematic on small screens.

Besides the dimensions of your website, you also need to consider the file size of your website. Not only will large websites take an especially long time to load over mobile networks, many users are charged based on the amount of data they transfer. Therefore if you have a gorgeous webpage that has an HTML document with attached CSS and JavaScript documents that add up to 500MB, just keep in mind that you are costing your users money for all those frills (that may or may not even function on their particular devices).

Possibilities

Allowing your users to access your site on-the-go is already pretty exciting. Most of the other "possibilities" that are available pretty much exclusively on mobile devices are not CSS specific, so I won't go into much detail. These features involve location awareness, direct dialing of phone numbers, and other cross-app behaviors.

The CSS possibilities are primarily in the design challenge it presents. Do you dare accept this challenge? If so, read on to some suggestions of how to make your sites "Zen"!

Back to top

© Julia Canavese 2011