Navigation for mobile web is a tricky subject; it has to conform both to web and native app conventions while being as useful and unobtrusive as possible. Both the W3C and Luke Wroblewski (in his book Mobile First) propose to position the navigation below the content at the bottom of the page with a link at the top of the page. Using a link this way has one big problem though; it messes up the history stack. When clicking the back button in a browser the expected result is to go to the previous page, not the menu button at the top of the page. Starting to mess with the stack can be done but then the beauty of a simple solution is lost and it’s easy to create much more problems down the road.

(more…)

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…)