One fundamental rule of good web design is that the main content for a web page should be the same regardless of which kind of device and platform the visitor uses to view the page. This is to avoid confusion when they try to see the same content that they have previously found on another device and so that they know what other visitors find on the page if they share the link, regardless if one person uses a tablet and the other a 24″ iMac.
However, in order to make a successful mobile version of a website we need to streamline it and remove bloat, both in the form of data and requests. It’s simply not enough to hide parts of the page using CSS3 media queries since images and scripts will be downloaded anyway. What we can do is adapt the auxiliary content such as thumbnails, advertisement, secondary navigation and excerpts so that it isn’t downloaded in the first place or optimized for a mobile connection.
(more…)