The use of smartphones and tablets have as we all know gone through the roof already and this expects this to change.
This has placed webdesigners in a bit of a bind, we do not only need to concider different browsers but also a large spectrum of screen sizes along with mouse and touch interaction.
The use on a webpage in a smartphone is so drastically different from using a PC that I’ve opted for the solution of pure mobile versions of a page.
Some systems as wordpress have plugins that does this for you, which is very convenient.
I’ve gathered some of the essentials for getting started with your own adaptation in case you are not using a system with this functionality available.
Metatags:
These tags specifies the icon that is placed on the home screen when a page is added to it:
<link rel="apple-touch-icon" href="/img/touch-icon-small.png" /> <link rel="apple-touch-icon" sizes="114x114" href="/img/touch-icon-big.png" /> <link rel="apple-touch-icon-precomposed" href="/img/touch-icon-precomposed.png" />
This metatag makes the page as wide as the device is and disables zooming. This is by far the most important metatag for a successful mobile adaptation
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
The metatags below are mention rather frequently but are to me quite useless.
First they only work if the page is loaded from the home screen as it would be an app.
Secondly you are not reload a page. The entire site must be ajaxed, frankly thats a bit too advanced for my taste.
Redirection
There are a number of ways to do this, all of which spells Javascript.
I have used a well written script by Sebastiano Armeli-Battana You can find it on
github: https://github.com/sebarmeli/JS-Redirection-Mobile-Site
the following should go into your header of the MAINSITE, before anything else:
<head>
<script type="text/javascript" src="/javascript/redirection_mobile.js"></script>
<script type="text/javascript" >
SA.redirection_mobile ({ mobile_prefix : "mobile", keep_path : true, keep_query : true });
</script>
the rest of your head content to follow after (no need to load them as we're not staying)
</head>
This will redirect mobile devises from http://www.example.com/mobile-redirect to http://mobile.example.com/mobileredirect.
The cookie_hours setting is so if you go back to the main site (manual links back), you do not trigger the script again.
That’s pretty much what you need to get started. Take your tempalte that you use for the normal website, condence it and clear all css for it and make a new one for the mobile website.
Information about how to build the design, make it flexible etc will be written at a later time.
Have fun and go mobile!