Warning

This technique can only do so much. It can’t handle complex design using just CSS and it can’t remove large images using advanced techniques like image replacement.

File sizes of pages designed for bigger screens are significantly larger, so CSS needs to hide extraneous elements like headers and sidebars. While this improves the content’s readability, the user’s device still downloads the hidden content. The user pays for every kilobyte including the hidden content’s bits.

More importantly, this technique doesn’t affect the mobile context in terms of providing information that’s relevant to the users’ physical location or mobility. Nonetheless, this provides an acceptable solution for those with well-coded Web sites who simply want to publish simple content and have it display well on mobile devices.

Part II of this guide will address more sophisticated method of publishing content including adaptation techniques to customize the content to the requesting device.