Designing mobile-optimized web sites is hard enough. Imagine spending all of that time and money building a fantastic mobile-optimized web site — only to discover that no one actually visits the site because they can’t find it.
Experienced mobile web users have learned to expect that major web sites also have mobile versions. Unfortunately, the major mobile web sites use a handful of conventions for providing access to the mobile-optimized version of their sites. Some sites offer “m.mycompany.com” while others use “mycompany.com/wap” among many other variations.
So what is the best practice for supporting all of these different mobile web site address conventions? Support all of them, of course! Don’t turn away mobile traffic unnecessarily (nor the juicy mobile advertising dollars, if your site is ad supported). Best yet — it’s easy to do and ought to take only a few minutes’ of your tech team’s time. (Okay, maybe as long as an hour…)
Directory Structure
At Hand Interactive, all mobile-optimized web pages are saved in the “m” directory. So our mobile-optimized home page is actually:
Virtual Sub-Domains & Directories
It doesn’t matter too much where your content lives, whether it’s the “m” directory, “wap”, “mobile”, “foo” or whatever. What does matter is whether your users can find your mobile content.
So this is where you need to take the smart approach and re-direct the short list of easily “guessable” domains and directories to your mobile content’s real home.
We recommend that you enable the following addresses and redirect them to your mobile content. Click on the links to see them work with Hand Interactive’s own web site.
- /m: www.hand-interactive.com/m This is the real location where our mobile content is stored.
- /mobile: www.hand-interactive.com/mobile
(Redirected to /m) - /wap: www.hand-interactive.com/wap Even though our content is not in WAP format, it can be easily viewed on most WAP browsers, and many people are in the habit of looking for content using the WAP keyword. (Redirected to /m)
- m.mycompany.com: http://m.hand-interactive.com
(Redirected to /m) - mobile.mycompany.com: http://mobile.hand-interactive.com (Redirected to /m)
- wap.mycompany.com: http://wap.hand-interactive.com(Redirected to /m)
iPhone-Specific Sub-Domains & Directories
There are a growing number of companies offering content that has been optimized for display on the iPhone (plus iPod Touch, Android, Palm WebOS, etc. etc.). As with generic mobile web addresses, there appears to be one of several approaches to web naming that companies follow.
We don’t currently have any iPhone-specific content, but if we did, we would store it in the “i” directory. Until we do, we redirect the following sub-domains and directories to our regular mobile content directory (/m):
- /i: www.hand-interactive.com/i This might be a good place to store your iPhone-optimized content. (We redirect to /m)
- /iphone: www.hand-interactive.com/iphone
(Redirected to /m) - i.mycompany.com: http://i.hand-interactive.com(Redirected to /m)
- iphone.mycompany.com: http://iphone.hand-interactive.com (Redirected to /m)
Summary
In summary, the best practice is to support all of the obvious sub-domains (like wap.mycompany.com) and directories (like www.mycompany.com/wap) and redirect them to the real location for your mobile content.
(This article is re-posted from the original source on Hand Interactive.)
FYI: This page has been translated into Serbo-Croation: http://science.webhostinggeeks.com/mobilni-dizajn
Owner of the MobileESP project. For the latest source code downloads, visit: https://github.com/ahand/mobileesp
I’ve read a google blog post stating it’s great that if one URL exists in the Desktop URL that same URL should work in the mobile world. Every site I create autodetects devices and keeps the same URL’s so no subfolder or subdomain needed, just a well organized framework setup to keep track of all the specific layouts.
I see alot of sites with the subdomains and subfolders and they are ranking well on the SEO as well. I think the way Google will go is that it will rank sites specifically for each device. As for now google only sends a regular crawler and “mobile” crawler, but I believe they will delve deeper and start crawling as iphone, android, bberry and many other devices soon if not already.
Designing for so many devices is not fun 😛 Even liquid layouts won’t show up the way you want on every device :S
Hi.
I’m trying to add your javascript code to my blog hosted on blogspot.com.
I see that your code detects all the mobile browsers and such, but I’m new to javascript and have yet to figure out a way to *do* anything with these detections. How do I make my blog redirect to a version built for mobile if a mobile browser is detected?
Refer to the PHP Redirects How-To guide. The same principles apply to JavaScript.
http://blog.mobileesp.com/?p=69
Also, refer to the significant caveats that go with JavaScript in the first place.
http://blog.mobileesp.com/?page_id=60
I’m not sure that having an “iPhone-specific” directory is a best practice. Seems to me that if you want to have advanced features that are supported in higher-capability browsers you should do that by using feature detection, not browser detection. This is really no different than the bad old days of “Best Viewed in IE4/NS4”.
@Joe –
The point isn’t that the /i directory is iPhone-specific, but rather specific to iPhone-tier devices, which includes Android, WebOS, Windows Phone 7, and other modern browsers. Devices in this tier can be all consume the same content with the same presentation capabilities and very small differences between them.
This is a content organization technique for publishers that’s simple and straightforward, but there are others. For example, a truly smart system wouldn’t need different mobile folders, but would redirect traffic to the main mobile landing page regardless of device type, then serve the appropriate combination of HTML, CSS and JavaScript based on the device’s capabilities.