Add a Mobile Landing Page to Your Site
Give mobile visitors a way to quickly access your company phone number, email, or just directions to the office.
Why Have a Landing Page?
Having a mobile specific layout allows on-the-go visitors to quickly access to telephone numbers, email addresses, and directions – exactly the sort of thing a visitor from a mobile device might be there for.
This tutorial isn’t about creating an entire mobile version of your site, although some of the stuff you’ll see here today can be used for exactly that. Instead, this is a means of offering a quick introduction to visitors from the mobile world before passing them through through to your main site.
The Goal
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>
This will send any visitor that arrives on the index page to the subdomain “m.website.com”, but only once every hour. If they press the link on the template page that says “continue to full site”, they will not be redirected within the defined timeframe.
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;" />
This is the tag that determines how the page fits to the screen and if a visitor can zoom in and out. Mozilla does a fine job of explaining this in great detail, check out their page on the viewport meta tag for a more rigorous exploration.
Further iOS Reading
For more information regarding possibilities on iOS, check out the Safari Web Content Guide. Some nice ones to start with include their viewport and text size adjustment pages.
