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.
Thumbnails and Images
A thumbnail is often used in two different scenarios, to show a small version of something much larger to tease or give a hint of what can be found behind a link or as a form to give more life and personality to a page. Often it’s a combination but the important thing to remember is that when thumbnails are used as an expectancy provider they serve an equally big purpose (if not greater) on mobile devices as they do on the web. When they are merely used as visual candy they serve no real purpose and can be omitted.
Every image is a separate request which means that removing the thumbnails can substantially reduce the total number of requests and the total page load time, even if the total page size isn’t reduced to the same extent. It’s not enough to set the images to display: none in CSS since they might still load even if they are never shown. Other images can also be optimized by loading a more appropriate size, but this is more dependent on how the overall layout is adapted to the mobile device since the pixel density is often much higher.
Advertisement and Widgets
It’s often the ads that make a site tick and generate much of the income, but the reality is that most of the advertisement widgets (and other widgets as well, such as social sharing buttons) are one of the major sources of inline code and external JavaScript and CSS requests. These widgets often works by loading an external JavaScript-file that in turn loads more scripts, stylesheets and images and then generates HTML-code that’s inserted into the page. One of the downsides of handing over the code generation to a third party is that we have very little control of when it’s loaded, how it’s inserted into the page and how it works with the rest of the styling and behaviors on the page.
Third party widgets are very rarely optimized for performance, accessibility or performance; instead they are more often created to be self-sustaining units designed to work on the most number of systems, for ease of integration and to provide additional functions such as statistics and tracking to the publisher. Since they are created on the fly it’s often hard or even impossible to tweak them into a satisfying solution. One example is Amazons affiliate widget that from a single line of code leads to five JavaScript requests, one CSS request and a bunch of image thumbnail loads. Google Adsense is a little bit more restrained but it can’t even be deferred to the bottom of the page, it has to be loaded inline which is a problem when we’re trying to optimize total page load time.
Secondary Navigation
A good way to increase the number of page views and the time a visitor stays on the page is to present links to more content that they might like, for example related posts, the latest content and links to all categories. In a mobile setting a user is much more likely to be on a specific mission, either to find a particular page or to waste some time. In that case it’s better to strip away as much of this navigation as possible and provide one way forward at the end of the post, possibly a combination of related posts and the next one but the important bit is that the number of choices and the footprint has to be limited.
The main navigation should be available both at the top and bottom, but it can very well just be a link at one of these locations. The navigation at the bottom of the page is important to present a path forward; the top of the page is just too far away to work in this context.
Excerpts
Small excerpts are often used to give a glimpse of content hidden behind links. This is a very powerful way to entice further interaction from a visitor and to tempt them to further explore the site. However, on a mobile screen the available space is often too limited to warrant the tradeoff between the size of the content and the increased information.
By using the above techniques a page can be streamlined and optimized for mobile internet devices, the core content should never be changed but the peripheral content can be optimized for mobile viewing. All of these techniques should be implemented on the server-side, they can be implemented in the browser but then much of the potential benefits are thrown out the window; it’s just like putting big rims, a spoiler and some decals on a family saloon. It might look like a race car but it has no chance against a properly stripped, braced and purpose built touring car.