The "Zen" Factor
Guidelines > Join the Revolution
Okay, so now your head is spinning with device specs and media queries. You want a little simplicity. A little balance. Maybe, dare I say it, a "Zen" approach to mobile web design.
That's certainly what I was hunting for...
Guidelines
I, personally, find unbounded creativity unnerving and often paralyzing. I need structure, guidelines, even limitations, for my creativity to flourish (because the "closet rebel" in me always pushes right up to the edges of those limitations). When I had a broken foot, I was told I couldn't take any weight on it: a limitation. However, I wasn't told I couldn't dance: "closet rebel." So I performed a solo dance with lots of floorwork and balancing on one foot: working at the edges. Not that I'm saying that mobile devices are like a broken foot...but they are a design "limitation." And if you approach it in the right way, limitations can spark creativity.
So to that end, let's look at some of the W3C's Mobile Web Best Practices that relate specifically to design considerations (read: focused on CSS applications).
5.2.2 — Navigation Bar & 5.3.4 — Navigation Bars etc. (Extraneous material)
Provide simple navigation at the top of the page, but make sure that enough of your page content is still visible before scrolling ("above the fold" in journalist-speak) so that a user can tell what your page is about right away. Secondary navigation can be provided at the bottom of the page.
5.2.3 — Balanced Structure
Don't ask users to scroll through too many links to find the correct path, but at the same time don't ask users to follow too many links to get to the target of their inquiry. Scrolling is tedious on mobile devices, and each link that is followed generates a new page retrieval (which costs time, and often money). Rule of thumb: limit maximum number of page retrievals to four before reaching a final destination. Less is definitely more in this case.
5.2.4 — Navigation Mechanisms
Keep consistent. Utilize anchors where appropriate. Provide "back to top" links.
5.2.9 — Externally Linked Resources
Minimize the number of external resources because each reference necessitates a separate network request. This leads to longer load times, and potentially increased costs. External resources include images and style sheets. So consolidate and/or target style sheets wherever possible.
5.3.3 — Scrolling
As you probably already know from desktop designing: secondary (horizontal) scrolling = bad. It is especially detrimental on mobile devices because it leads to the "keyhole" browsing experience. Imagine trying to read a picture book through a keyhole. Needless to say, it is less than ideal.
5.3.5 — Graphics
Avoid using large graphics whenever possible. Do not use graphics for positioning (blank transparent gifs, 1px graphic tricks, etc.).
5.3.6 — Color & 5.3.7 — Background Images
General discussions of color, readability, and accessibility apply in mobile environments as well. Basically just keep in mind that mobile users are often in poor lighting conditions (such as direct sunlight) and that most mobile devices do not have the best display screen. So contrast, contrast, contrast.
5.4.5 — Non-Text Items
Avoid pictures of words (this is another general accessibility issue). Also avoid CSS image replacement (which can be, ironically, an accessibility feature in itself). The MWBP did not go into much detail about why this technique should be avoided. It seems to have something to do with adding superfluous graphics to a page when text can do the job just as well (with reduced size and better readability). However, it may also depend on the specific technique being used. I'd say that, in general, if you want to use CSS image replacement, just try to restrict its use to your "non-mobile" style sheets.
5.4.6 — Image Size
Specify image size in your markup. If you don't, the browser may be required to "re-flow" your page once the image is loaded. This can lead to a jarring and confusing browsing experience on small screens (especially touchscreens) as the page jumps around while a user is attempting to scroll through your page. I know I've ended up clicking links I didn't intend to because of this. It is very annoying. Also, do not resize image dimensions in your markup. Use image editing software. This is a general best practice note, but especially true on mobile devices where you need to conserve file sizes/data transfer amounts wherever possible.
5.4.8 — Measures
Avoid absolute measures in favor of using relative measures. This should be pretty obvious when trying to adapt your designs to a variety of screen sizes. I'm not saying to never use absolute measures, just use them with caution.
5.4.9 — Style Sheets
Keep in mind that your site should be understandable in the absence of all style sheets (in other words, have a sensible document structure/order). As you may have inferred from Media Type Mayhem, CSS support can be spotty on some mobile browsers. Don't rely on it blindly. Try to avoid forcing a mobile browser to download large/multiple style sheets that contain many style declarations that are not used in the mobile version. Again, it is a waste of time and, potentially, money.
5.4.10 — Minimize
Be efficient. First of all, separate style from content (we should all be doing this by now). Also, try to reduce excessive white space in the markup, since this adds to the file size of the document.
5.4.16 — Fonts
Mobile devices are often limited in their support of font faces, sizes, styles, and effects. Don't count on them.
Misc.
There is a lot of talk about reducing total page weight. So what size is acceptable? mobileOK caps you at 20MB to fall within their specs. I read another source (targeting iPhones, mind you) that put the number around 30MB. At this point in the game, I'd say do your best. Be efficient, minimize what you can, and optimize the rest.