Getting Started
To make this easy, I have provided a mobile template for you to download, which means that all we will have to do is set up redirects for mobile browsers. You can customize the template landing page however you see fit – it’s just standard HTML/CSS.Here’s what you need to do to get started:
- Download the template file.
- Create a directory (or page) to send mobile users to – some common subdomains are “m” or “mobile” (eg. m.digg.com and m.facebook.com).
- We will be using JS Mobile Redirection to redirect mobile browsers, the script can be downloaded on GitHub. Place the .js file wherever you choose, I have placed mine in a folder called “js”.
Set the Redirect
On the index page of your site, in the <head> section paste in the following lines:- <script type="text/javascript" src="js/redirection_mobile.min.js"></script>
- <script type="text/javascript">
- SA.redirection_mobile ({param:"isDefault", mobile_prefix : "m", cookie_hours : "1" });
- </script>
That’s pretty much it. Congratulations, you have a mobile landing page – now go forth and customize.
Note: If you are redirecting to a specific page rather than a subdomain you can do this by including mobile_url : “website.com/mobile” and mobile_prefix : “http”. Refer to the documentation for further explanation.
Additional Notes
Fitting to Screen
You may have noticed the following meta tag in the downloadable files for this tutorial:- <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;" />
