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:

  1. Download the template file.
  2. 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).
  3. 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:

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:

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.

Posted Wednesday, January 26th, 2011 · Back to Top

SPONSOR

Add Comment

117 Comments 16 Mentions

  1. Tim Wright Author Editor

    A splash screen?

    ·

    • Pete duncanson Author Editor

      @Tom that was my first thought but it’s a bit more than that. This one is actually useful rather than a self indulgent “skip intro” style splash screen of old.

      Only issue I would have is with the js detection, looks like it needs jquery (and the rest of the page/assets. Would be better to do it server side (if possible) or have a small script up the top of the page to redirect asap.

      I love the idea though

      ·

    • Sam Dunn Author Editor

      If you’re traveling and want to quickly check the phone number of a restaurant, you don’t need to be greeted with the full site. The concept behind this is more contact info driven than glorified splash page.

      ·

      • Rehana Sulthan Author Editor

        Nice thought Sam Dunn, appreciate such techies like you.

        ·

  2. Damon Author Editor

    This is a really neat idea. It kind of goes along with the notion that using “responsive” designs isn’t always best for mobile, because you still have to load all the content, then hide it.

    If you give mobile users super quick access to the info they are probably looking for, that would be a huge help. Faster loading, less searching for info, in and out!

    ·

  3. Jordan Author Editor

    What happens if the mobile browser has cookies disabled? Do the visitors get sent in a never-ending loop and never get to actually view the full version?

    ·

  4. Chris Author Editor

    Just went to One Mighty Roar on my iPhone, looks awesome. This is great.

    ·

  5. Connor Crosby Author Editor

    Looks great! Thanks for the idea, I might try it out :) But, like @Jordan said, what if cookies are disabled? Is there a way to make it so it doesn’t redirect if that’s the case?

    ·

  6. Fredrik Author Editor

    We are currently doing this to our site at the moment. Thx

    ·

  7. Darryl Young Author Editor

    Thanks for the great article. I have a question though: I’ve tested it on an iPhone 4 and it works great but I tested it on a HTC Desire HD and it doesn’t display the mobile site – I just see the full site straight away. How do I get it to display the m. version when the user first hits the site? (as it does with the iPhone). Thanks in advance.

    ·

  8. Adam Author Editor

    I like this idea in principle if you haven’t got time to produce a more robust mobile version, but using Javascript to handle the redirection is pretty horrid.

    Why not use something server side and use a query string parameter in the ‘full version’ link to prevent further looping? For example, http://fullversion.com/?desktop=true

    ·

  9. Claudio Author Editor

    Just wondering, this script redirects all index page traffic to the mobile website… What if a user goes to http://test.com/news.html

    What do we have to edit to achieve a redirect from any page?

    ·

    • Sam Dunn Author Editor

      With the current setup you would need to also have the JS redirect on that page, pointing to the page you wanted.

      ·

  10. Rakesh Kumar Author Editor

    Before reading this post i was thinking that the only designers can make mobile compatible site but now i can do this task also. Thanks for sharing.

    ·

  11. Grant Bajere Author Editor

    Looks nice, but you should make the browser bar move out of view on load.

    if (navigator.userAgent.indexOf(‘iPhone’) != -1) {
    addEventListener(“load”, function() {
    setTimeout(hideURLbar, 0);
    }, false);
    }

    function hideURLbar() {
    window.scrollTo(0, 1);
    }

    something like that, im sure there are other ways

    ·

  12. e11world Author Editor

    Pretty interesting and easy to use. I just used it on alenelias.com and my own site e11world.com and tested on my X10a (android 2.1) and it worked aside from the Continue to full version part. Not sure how I would direct the user to a full version of a full flash site?

    ·

  13. Tony Author Editor

    Great Post and I’m going to try this out. I have a question. Suppose you were running an adwords campaign and your landing page was http://www.somesite.com/landingpage……and suppose you set up the standard site landing page and a mobile version landing page….and a mobile user clicks on your ad goes to the http://www.somesite.com/landingpage and then is redirected to the http://www.m.somesite.com/landingpage…….

    Wouldn’t this violate Google Adwords redirect policy? I’m not sure so I posing this question to see if anyone is a subject matter expert because I could really see a huge benefit to running the mobile version in an online campaign.

    Thanks!

    ·

    • Trafficwhizz Author Editor

      Simply create a separate mobile only campaign and set the target URL’s to m.yoursite.com :)

      ·

  14. Matthew Cowan Author Editor

    I’m kind of unsure about this. I’ve noticed that many of my friends get upset when mobile sites display content differently than the regular sites; They have all learned how to navigate on pages that weren’t designed for their phones and don’t mind it so much now.

    I think it’s good in theory, but in practice I can already imagine that it would give off the impression of a splash screen as the first commenter said. I would be VERY interested in seeing some usability testing on this concept.

    ·

  15. Crank Cases Author Editor

    Has the impact on organic search results on mobile been considered?

    ·

    • Sam Dunn Author Editor

      This really doesn’t have an impact on that – when you Google “Facebook” from a mobile phone you aren’t getting different results than if you were on a desktop.

      ·

  16. Bogdan Pop Author Editor

    What if I go to the specific website after a google search and I should be taken to an inline page? After getting the awful landing page I am taken to the homepage if I choose so not the actual page I was looking for.

    ·

  17. peterborto Author Editor

    For mobile detection server side detection is better than javascript client detection… great tutorial :)

    ·

  18. Irma Author Editor

    It looks as something rather handy, but it depends on what website you make this for. If the website is like an interactive folder, this will be really useful, but if you really need to acces information on products or services, contact-information is useless. Then you would have to reconsider what to make of this landing page.

    But, as Luke Wroblewski has already stated, designing websites nowadays should start by designing for mobile devices and then eleborate it for use on a bigger screens like pc’s/laptops. This way usability is narrowed down to the most elementary form and forces you to focus on the navigation structure/information architecture.

    ·

  19. Scott White Author Editor

    Well with a WordPress installation it is so much easier. A simple plugin detects all mobile phones, including iPhone and Android and redirects the css. Its fast and easy.

    The majority of the content is still available in the “mobile” edition as well. http://wordpress.org/extend/plugins/wptouch/

    ·

  20. Anthony Author Editor

    Is there any other steps I need to take to create a mobile directory on my server?

    I created a folder called “m” on the root directory. My website redirects but i get an error “Cannot Open Page”

    Any suggestions?

    ·

  21. Preeminent Author Editor

    Yes, I too need some suggestions as to why this won’t work. When I try it with my iPhone, there is no redirection. I have everything right and I’m trying to redirect with this method:

    SA.redirection_mobile ({
    mobile_url : “www.site.com/m”,
    mobile_prefix : “https”
    });

    ·

  22. Lee Fuller Author Editor

    Brilliant, will come in handy when I start development on a mobile version..

    ·

  23. Jack Author Editor

    Great tidbit of info! Just one little noob question, how do I create the m. prefix?

    ·

  24. Kyle Author Editor

    Great Article!
    I took your directions and modified them slightly to use on a WordPress site:

    - Theme file modifications
    - Custom page template
    - Etc

    View that here:
    http://www.enlightenmental.com/news-blog/add-a-mobile-landing-page-to-your-wordpress-website-using-javascript/

    thanks

    ·

  25. laptop repair wythenshawe Author Editor

    Good article, but when I set it up there was no redirection

    ·

  26. daddydesign Author Editor

    I have a question, is their code to hide certain sections or things when viewed on a smartphone? Example: we have a wordpress toolbar plugin we created and we want to hide / disable it when viewed on a smart phone.

    ·

  27. Web Design Adelaide – Proof Creative Author Editor

    Looks great and easy. Will look at using this more =]

    ·

  28. Danny Wauters Author Editor

    Thx. Gonna try this.

    ·

  29. rob Author Editor

    mobile landing pages getting pop, as high % searches on phones nowadays
    cheers rob

    ·

  30. Buckingham Post Author Editor

    Great tool!

    ·

  31. Chris Stott Author Editor

    Just wanted to say thanks for sharing this. Got a few clients looking for this feature, it’s going to get more and more popular!

    ·

  32. Becky Riggle Author Editor

    Thanks for the great article. I like your idea about only presenting the important contact information on the mobile site. I can see real benefits to the way you have this setup. Thanks for sharing the idea!

    ·

  33. stomp web design melbourne Author Editor

    Thank you. A modified landing page for mobiles with contact info as mentioned is a great idea. Lets see how it goes, if it works as good as it sounds then it’s going to come in very handy!

    ·

  34. Phil Winkel Author Editor

    It looks easy enough to implement – just add some javascript inclues; but I don’t know what to think about the redirect. Why not detect the user agent server-side and respond with the correct version of your site?

    ·

  35. shoesforest Author Editor

    Most of the trouble in the world is caused by people wanting to be im-portant.

    ·

  36. emma Author Editor

    “Why not detect the user agent server-side and respond with the correct version of your site?” — can i ask does anyone know a good reference for me to learn how to redirect to a landing page server side, as people have suggested here? (still a good tutorial just want to know so i am informed..)

    ·

  37. Shoxee Author Editor

    Excellent Tutorial !! One should try thiss…

    ·

  38. Matt Gaidica Author Editor

    Great article, I think the reasons behind going mobile are well-put. We just launched a mobile landing page builder (http://landr.co) to solve many of the problems you bring up, but for the person without coding experience (small business, event peeps, campaigns, etc). I think “simple” is always appreciated!

    ·

  39. Akif Author Editor

    Great article! Just one little question, how do I create the m. prefix?

    ·

  40. Anna Author Editor

    I never knew we could have this much of Possibilities in ios

    ·

  41. Phil Author Editor

    While a mobile landing page is a good path to take, I would not recommend this approach at all- you should really be handling this server side, it’s simply too much overhead to handle client side (especially for cellular network traffic).

    ·

  42. Phil Author Editor

    Emma- It’s simple, use the Superglobal $_SERVER with the index ['HTTP_USER_AGENT'] then normalize the string and use a regular expression to detect the user agent you’re looking for. To figure out more info about the User Agent strings, make a test page that is just print_r($_SERVER['HTTP_USER_AGENT']); and visit it from a variety of different browsers, you’ll see the difference. It’s also a great way to work in some regressive enhancements for IE without making your source ugly. http://php.net/manual/en/reserved.variables.server.php

    ·

  43. Signals Media / Webdesign Berlin Author Editor

    The whole “fit to screen”-thingy didn’t work for me on Android. I replaced the meta viewport tag with … By the way: thanks for this great post!

    ·

  44. Signals Media / Webdesign Berlin Author Editor

    ok it deleted my HTML :D
    meta name=”viewport” content=”target-densitydpi=medium-dpi, width=device-width, user-scalable=no”/

    ·

  45. OSTIORE Author Editor

    trying this on my websites, thanks. like to see the developments…

    ·

  46. Ryan Author Editor

    FANTASTIC…worked perfect, thank you!

    ·

  47. Joe W Author Editor

    Great work, thanks for that!

    ·

  48. Dan Di Gregorio Author Editor

    It’s exactly what I was looking for. Thanks :)

    Dan

    ·

  49. Techmug Author Editor

    Huge sharing mate
    Ill surely apply

    ·

  50. wholesale nike jordan Author Editor

    Power invariably means both responsibility and danger .

    ·

  51. noriko Author Editor

    This works perfect. You saved me. Thanks.

    ·

  52. Brian Wiltshire Author Editor

    Great tutorial, although server side is better with user agent with the guys from handsetdetection.com. Although this is a great quick fix !

    ·

  53. Sam Author Editor

    I have an iPhone and I HATE mobile websites, but this is very acceptable. I’ve been searching for a good solution and this is perfect thanks! I’m going to use it for my clients too.

    ·

  54. Cheryl Author Editor

    I have a client that likes the idea of a mobile ‘landing page’, but I have never created a ‘sub-domain’, so would the code to redirect be:

    SA.redirection_mobile ({
    mobile_url : “clientswebsite.com/mobile”,
    mobile_prefix : “https”
    });

    with “mobile” being the name of the folder/directory?

    Also…would I leave the name of the Mobile Landing Page as index.htm?

    ·

  55. David Proctor Author Editor

    I hate mobile websites too, they’re such a pain. But this works really well to give visitors the information they need right away with speed. The trouble with smart phones is that inevitably the users have a poor attention span and unless they find what you want quickly they are likely to go somewhere else. I guess that’s the classic design conundrum, how to create the ballence of functionality, attractive design and loading speed. Thanks for the tutorial.

    ·

  56. Angel Author Editor

    Thank you so much!!! This is so awesome. Just did it. Can’t believe it was that easy and I’ve been racking my brain for the last two days trying to figure out what the heck I was doing wrong. So awesome!!

    ·

  57. Ray Cassidy Author Editor

    Once it gets as technical as server side scripting, I do get a bit of a panic on! The ingredient that seems to be missing in this discussion is any thought about what the happy little mobile toting customer wants. Some have been dismissive of just presenting the basic contact info on the mobile screen, but surely that is most likely what this type of customer wants, particularly when they are looking for a local solution to their current need or problem. The notion that people would choose to navigate round the full size page on their mobile device doesn’t really hold water I feel. It just presents so many obstacles to comprehension and access to info. Mobile sites are a necessity; love them or loathe them and the sooner we get our heads round them, the sooner we start accessing those affluent customers that we would all like to have on board. Thanks for the article even though I’ve now got a headache trying to understand it.

    ·

  58. Atticus White Author Editor

    Great idea. Super minimal and nice looking, yet delivers what’s most important effectively.

    If contact information isn’t what I wan’t, boom, “continue to full site” is ready for me to click.

    ·

  59. Rob Author Editor

    Since many visits to my website are now from people using a mobile, and i think visitors using mobiles to access the web is only going to increase. i will have to create a mobile version of my site or at least an entry page as suggested.
    I think the splash page style is a great idea and has got me thinking that it could include links to the more important parts of my site.
    As for redirection i was curious if search engines would identify a mobile user and give them mobile biased results > sending them automatically to mobile page ?
    I will soon experiment and create an m/subdomain !

    Like the idea its got me thinking.

    ·

  60. Ivo Author Editor

    Furnishing concepts for making your home interior. News and fashion trends from the world latest shows.

    ·

  61. Milo Milord Author Editor

    Keep up the superb work , I read few content on this website and I conceive that your website is very interesting and holds sets of fantastic information.

    ·

  62. jimmy karwal Author Editor

    i am gay and lun

    ·

  63. Unseen Mobile Apps Author Editor

    A quick ideas

    ·

  64. java training in bangalore Author Editor

    Maclynne is the No.1 Corporate Training Institutes provides best Training for Java Training, J2ee Training, J2ee Certification, J2ee Projects, java j2ee training in marathahalli, Bangalore.

    ·

  65. Itep Dj Author Editor

    This is the article that I was looking for, thank you very helpful

    ·

  66. Gel code Author Editor

    Thanks sam, Great stuff again !

    ·

  67. medya Author Editor

    Thank you, so I need it for work.

    ·

  68. Mandy Author Editor

    Hi Sam, This is great, but “Continue to full site” redirects me again to the mobile version. Any idea what I am doing wrong? Everything else works as expected. Thanks!

    ·

  69. Sourav Author Editor

    Will it work for RIM Blackberry?
    I heard that BB dont allow JS to load in them.

    Thnx

    ·

  70. Rose Information Author Editor

    Thanks sam, Great stuff

    ·

  71. Pakistan Sows Author Editor

    Totally agree with your suggestion… Very nice post and good information here… Thanks for posting that…

    ·

  72. Pakistan Drama Author Editor

    This template file is relay great and relay quickly access to telephone numbers… Nice information… Keep it up….

    ·

  73. sam Author Editor

    thanks buddy i was searching for this good work !!

    ·

  74. manoj Author Editor

    i m creatin a mobilestore project,in home page of that pro. showing many pic of mobile and i wanna show description of mobile when i click any mobile but i dont know how so plz tell me?….

    ·

  75. manoj Author Editor

    i m creatin a mobilestore project,in home page of that pro. showing many pic of mobile and i wanna show description of mobile when i click any mobile but i dont know how so plz tell me its code?

    ·

  76. Drew Author Editor

    Do I need to make any changes to the script inside the redirection_mobile.min.js file I downloaded?

    I’ve uploaded the template folder provided, along with the .js file to my server and pasted the code provided within the on the index page of my main site and it does nothing different when pulling the site up on my iPhone.

    The only change I’ve made thus far is editing the script pasted into the main site index page to point to the folder I made for the .js file on my server. I instead called the folder ‘Script’.

    ·

  77. сотовые телефоны | аккумуляторы для сотовых телефонов | устройства GPS-навигации | MP3 и MP4-плееры | аксессуары для сотовых телефонов и КПК Author Editor

    Magnificent site. Plenty of helpful info here. I am sending it to a few buddies ans additionally sharing in delicious. And of course, thanks to your effort!

    ·

  78. Guy Manningham Author Editor

    Does this override your website’s current mobile setttings? For instance, if your site is viewed a certain way on mobile devices and you have a QR code scanner set up to send them to a specific landing page, would it allow the user to view the landing page without automatically jumping to the mobile version of the site?

    ·

  79. pakistani talkshows Author Editor

    thnx mate…you make my work easy

    ·

  80. Magical Button Author Editor

    Simple but effective. Looking forward to read the rest of your tuts.

    ·

  81. London Carpenter Author Editor

    Thanks, it’s worth a try and will let you know if I succeed..

    ·

  82. shah Author Editor

    thanks its a worth a try and will let you

    ·

  83. lnick Author Editor

    hanks for this information.. was really helpful. I’m trying the same method for my website iPhone service Επισκευή iphone

    ·

  84. Asghar Ali Author Editor

    I am searching for info to provide free subdomains to my users like bravehost. How it is possible?

    ·

  85. web developer Author Editor

    Hi..
    Thank you for making the only actual tutorial that I’ve been able to find. Other ‘tutorials’ haven’a actually explained how to do things, but you did so, very clearly.

    Thanks…

    ·

  86. Martin Author Editor

    I keep getting a “pageok” text when i access the mobile site. What does this mean?

    ·

  87. Samsung Galaxy Author Editor

    wow its really cool idea. Will save a lot of time for my customers… awesome

    ·

  88. pakistan dramas Author Editor

    nice post good information for me

    ·

  89. Nancy Author Editor

    Does the landing page allow for click to call functionality?

    ·

  90. How To Increase Site Traffic Author Editor

    I am really impressed with your writing talents as smartly as with the format in your weblog. Is that this a paid subject or did you modify it yourself? Anyway stay up the nice high quality writing, it is rare to look a nice blog like this one nowadays.

    ·

  91. Charlottesville Web Developer Author Editor

    What is the purpose of the one hour delay? Also, what’s the purpose of disabling the “full site” feature? … assuming some mobile users will want that. Thanks!

    ·

  92. caesartsui Author Editor

    这个效果也很好。

    ·

  93. Fawad Author Editor

    i will try it but anyone can post link of this tutorial in video thanks

    ·

  94. Waffa Author Editor

    sure why not fawad i will create video tutorial for you soon

    ·

  95. Online Tv Channels Author Editor

    Good site you’ve got here. It’s difficult to find excellent writing like yours these days. I seriously appreciate individuals like you. hope you will update site with new excellent. Take care.

    ·

  96. Ross Author Editor

    Can someone post the file for the code ? js/redirection_mobile.min.js.

    that other site is terrible to navigate and find the right file/code etc…

    ·

  97. DJ Melbourne Author Editor

    Mobile Website is so important for business now. 20% of all google searches are done via mobile.

    ·

  98. Indian Drama Author Editor

    wao you now get it…………
    sure why not fawad i will create video tutorial for you soon

    ·

  99. Mobile Web Site Converter Author Editor

    Mobile Website: Mobile Website is so important for business now. People are using their mobile and smart phones for browsing for the information.

    ·

  100. zahid Author Editor

    Mobile Website is so importan

    ·

  101. joanna Author Editor

    Heh I have been looking for you or something like this …but what you call a template is not the same definition for me..it does not seem like i would know how to follow your instructions. Is there another way or some real template where you just fill in data perhaps? or who can do this for me? because i would have to decode your instructions..but i am closer I feel to my initial dreams of a simple actionable mobile site.

    ·

  102. Homer Lathrum Author Editor

    Excellent goods from you, man. I’ve bear in mind your stuff prior to and you’re just extremely wonderful. I really like what you’ve got here, certainly like what you are saying and the best way by which you are saying it. You make it entertaining and you still take care of to keep it wise. I can’t wait to read much more from you. This is actually a great web site.

    ·

  103. Yagnesh Patel Author Editor

    I sold my smartphone at http://www.smartphonecashin.com – was a bit reluctant at first because they offer more money than anyone else, but the process was easy and hassle free

    ·

  104. jam tangan Author Editor

    thanks

    ·

  105. kursat Author Editor

    This is excellent. Thanks

    A question, how can I add a Paypal button with couple of payment options to a mobile landing page like this?

    ·

  106. Ahsan Raza Author Editor

    everyday smartphone internet users are increasing so we should always make sure that our sites are mobile friendly.

    ·

  107. John Author Editor

    Great idea and tutorial, thaanks for the template!

    ·

  108. chris turner Author Editor

    well written article! Thanks again! I used NowMobileME to create my full mobile site…check them out http://www.nowmobile.me

    ·

  109. kaleem Author Editor

    Excellent Tutorial !! One should try thiss…

    ·

  110. Matthew Author Editor

    Not a bad idea, If you cant close them on a responsive design or a full mobile design.

    ·

 

Build Internet by One Mighty Roar. Since 2008.