Welcome to WebmasterWorld Guest from 54.224.63.26

Forum Moderators: bakedjake

Message Too Old, No Replies

Take this with You

Need help allowing mobile users to take our site w/ them

     
4:03 pm on Mar 1, 2012 (gmt 0)

Preferred Member

10+ Year Member

joined:Jan 8, 2004
posts: 563
votes: 1


I want to develop a mobile version of our site.
  • What might be the best way to do this and which tools should I use?
  • Is there a not so technical site that would show me what the general settings on mobile sites should be, etc.?

    Also, What is the best script to use for detecting the mobile device, then redirecting them to our mobile site?
  • 5:44 pm on Mar 1, 2012 (gmt 0)

    Senior Member from US 

    WebmasterWorld Senior Member 10+ Year Member

    joined:Sept 4, 2001
    posts:2173
    votes: 13


    In many cases, mobile versions are stripped down version of a regular site, fewer (and smaller) images, larger space between links for use with touch screen, and so forth. A good resource is Developing mobile sites [support.google.com]

    As for the detection script to redirect visitors, I personally recommend you do not use one. It is better to give your visitors a choice by having a link at the top of your regular site saying something like "Mobile Friendly Version" and one on your mobile version saying "Full Site" rather than forcing them. Except for "dumb" phones, virtually all new smart phones can view a normal web page. The advantage is offering a mobile version is so they can use less bandwidth.

    And remember, JavaScript and Flash are problematic on mobile devices, especially smart phones. I seem to recall that iPhone does not support Flash and Adobe has stopped trying to make a mobile friendly Flash version.

    And if you do a web search, I know there are mobile friendly dynamic menus available that rely solely on CSS and are spaced for use with touch screens. I just put one on one of my sites and it is really nice.

    Marshall
    6:01 pm on Mar 1, 2012 (gmt 0)

    Preferred Member

    10+ Year Member

    joined:Jan 8, 2004
    posts: 563
    votes: 1


    Thanks Marshall,
    In creating this mobile version of the same site, I wonder what the parameters are?
  • Like what's the max width?
  • What is the correct font size?
  • What is the best font?
    Etc.
  • 6:13 pm on Mar 1, 2012 (gmt 0)

    Preferred Member

    10+ Year Member

    joined:Jan 8, 2004
    posts: 563
    votes: 1


    Marshall,

    What about this?
    <script type="text/javascript">
    <!--
    if (screen.width <= 699) {document.location = "mobile.html";}
    //-->
    </script>
    mobile.html is the page to be redirected to.
    6:40 pm on Mar 1, 2012 (gmt 0)

    Senior Member from US 

    WebmasterWorld Senior Member 10+ Year Member

    joined:Sept 4, 2001
    posts:2173
    votes: 13


    Everything I have read about and seen on mobile designs usually have a screen width set to a maximum width of 480px. Also, usually a line or block height for links is around 40px to allow for, dare I say, fat fingers on a touch screen. As for fonts, I follow the rule of thumb that sans-serif fonts are better on screen while serif fonts are better for print. I also keep font sizes at defaults setting them at 1em or nothing at all. And tags like <h> can have a weird effect. Not all mobile devices support CSS well and even if you set your tags to a specific font size, it may be ignored.

    I would still discourage you using an automatic redirection. However, when I need to use a script for mobile devices, I use .asp as most of my sites run on .asp. When possible, scripts are better server side.

    Marshall
    7:39 pm on Mar 1, 2012 (gmt 0)

    Preferred Member

    10+ Year Member

    joined:Jan 8, 2004
    posts: 563
    votes: 1


    Great. Thanks for the tips Marshall.

    Have you ever thought of or tried this in the .htaccess file?
    RewriteEngine On
    RewriteBase /
    # Mobile redirect
    # If desktop cookie is not equal to true - then process
    # Prevents an endless loop
    RewriteCond %{HTTP_COOKIE} !^.*desktop=true [NC]
    #Only proceed if the host is www version (ignore on mobile site)
    RewriteCond %{HTTP_HOST} ^www\.fullsite\.com$ [NC]
    # if the browser accepts these mime-types, it's mobile device
    RewriteCond %{HTTP_ACCEPT} "text\/vnd\.wap\.wml|application\/vnd\.wap\.xhtml\+xml" [NC,OR]
    # Try different mobile user_agents
    RewriteCond %{HTTP_USER_AGENT} "sony|symbian|nokia|samsung|mobile|windows ce|epoc|opera" [NC,OR]
    RewriteCond %{HTTP_USER_AGENT} "mini|nitro|j2me|midp-|cldc-|netfront|mot|up\.browser|up\.link|audiovox"[NC,OR]
    RewriteCond %{HTTP_USER_AGENT} "blackberry|ericsson,|panasonic|philips|sanyo|sharp|sie-"[NC,OR]
    RewriteCond %{HTTP_USER_AGENT} "portalmmm|blazer|avantgo|danger|palm|series60|palmsource|pocketpc"[NC,OR]
    RewriteCond %{HTTP_USER_AGENT} "rover|ipaq|au-mic,|alcatel|ericy|vodafone\/|wap1\.|wap2\.|"[NC]
    RewriteCond %{HTTP_USER_AGENT} "smartphone|mobile|iPhone|android"[NC]

    RewriteRule ^(.*)$ [m.fullsite.com...] [R=301]
    9:01 pm on Mar 1, 2012 (gmt 0)

    Senior Member from US 

    WebmasterWorld Senior Member 10+ Year Member

    joined:Sept 4, 2001
    posts:2173
    votes: 13


    Since most of my sites are on a Windows IIS shared server, I can't use .htaccess, but I'll keep it in mind for those I can.

    Marshall