Mobile Selector
This essay proposes a method to allow users with handheld devices to select between normal and small-screen versions of a website, and discusses the business requirements leading to this solution.
Method:
1) Every page on the mobile site includes an obvious link to the full site.
2) On the full site, a hidden link at the top of the page is revealed by javascript if the screen size is below a threshold.
You could either have separate hostnames (mobile.example.com vs. www.example.com), or you could use the same approach to let mobile users switch interfaces by changing a cookie.
Example code is presented below, following the discussion.
Discussion:
I believe that the ideal case is that a single URL delivers the content, regardless of any desired optimization for different device characteristics. The 'u' in URL stands for 'universal,' after all.
If user agents sent the browser or screen size to the server in http headers, the single URL would be reasonable to implement.
In fact, life is more complicated.
User agents don't send the screen size to the server
Some mobile devices with small screens are sufficiently powerful to display 'normal' websites.
Mobile bandwidth is sometimes limited, so that although a user with a high-end device may prefer the normal site when connected via wifi, the same user may prefer a stripped down interface when connectivity is poor.
There are several implicit assumptions, as well.
Basing the version of a page on the user agent string is guaranteed to fail frequently, and to irritate the people you want to use your website. Some common problems: people with iPads don't usually want the version of the site tailored for phones; the mobile version of Firefox should be allowed to see the mobile version of the site. In fact, there are so many different user agents, that you will never be able to keep up with the changes.
You want to keep most users on the 'normal' version of the site because you want them to have the best experience possible, and especially if you are selling ads that don't appear on mobile pages.
This discussion simply ignores WAPP browsers, so it is biased to wealthier nations that are adopting high end phones.
The all-CSS approach of hiding page elements from small screen devices is not generally appropriate. A handheld device with low bandwidth should not have to download all the cruft associated with most desktop-oriented websites.
The link to the mobile site should be so prominent for mobile users that it would be too distracting for desktop users.
Taken together, the above points argue that mobile device users should have a convenient choice between mobile and desktop versions of a website, but the choice should be hidden from users with large screens.
Code with annotations:
Create a div or anchor with an id. Style it as "display: none" in the style attribute.
<a id="mswitch" href="http://m.example.com/article.html" style="display: none">View on mobile</a>
If you don't have use a separate hostname for the mobile site, the href value above could be to a server-side script that would change a cookie setting and reload the same URL. (Or you could use client-side javascript.)
Follow the link with Javascript to turn on display if the screen size is below the desired threshold. Phones with high resolution have only slightly fewer pixels than small laptops ('netbooks'), so one needs to be somewhat careful in choosing the threshold.
<script>
if ((screen.width<=800) || (screen.height<=700)) {
document.getElementById('mswitch').style.display = 'block';
}
</script>
If desired, repeat the link within a noscript tag in order to catch mobile browsers with no javascript.
<noscript>
<a id="njms" href="mobile.html" style="display: none">View on mobile</a>
</noscript>
On the mobile site the link to the full version of the site can be quite prominent, and there's no need to hide it from any browsers.
Copyright © 1998-2011 J. R. Boynton