homepage Welcome to WebmasterWorld Guest from 54.161.143.22
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Hardware and OS Related Technologies / Smartphone, Wireless, and Mobile Technologies
Forum Library, Charter, Moderators: bakedjake

Smartphone, Wireless, and Mobile Technologies Forum

    
Take this with You
Need help allowing mobile users to take our site w/ them
Propools




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

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?

  •  

    Marshall




    msg:4423722
     5:44 pm on Mar 1, 2012 (gmt 0)

    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

    Propools




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

    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.

  • Propools




    msg:4423752
     6:13 pm on Mar 1, 2012 (gmt 0)

    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.

    Marshall




    msg:4423764
     6:40 pm on Mar 1, 2012 (gmt 0)

    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

    Propools




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

    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]

    Marshall




    msg:4423827
     9:01 pm on Mar 1, 2012 (gmt 0)

    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

    Global Options:
     top home search open messages active posts  
     

    Home / Forums Index / Hardware and OS Related Technologies / Smartphone, Wireless, and Mobile Technologies
    rss feed

    All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
    Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
    WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
    © Webmaster World 1996-2014 all rights reserved