Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Mobile phone websites

    I am interested in putting together a web site that suits the size of most mobile phones. I wondered if anyone could point me to any tutorials to get me started.

    I have been building my own (normal sized) sites for some time, coding them with html and external style sheets.

    I am guessing that you start of with a narrow width and take it form there. However there might be a bunch of stuff I don't know about.

    I also reckon I would need a meta tag to direct mobile phones to the mobile version of the site but ad an option to redirect back to the main site if the searcher wishes to. (giving them the option)

    any help appreciated.

    thanks

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    The latest approach to this is called “responsive web design”. Using this key phrase in a search engine of your choice will bring you many examples and tutorials.

  • #3
    New Coder
    Join Date
    Jan 2011
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ok will have a look

  • #4
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    some more links

    See Major Payne's list at http://www.webdeveloper.com/forum/sh...d.php?t=258054

    I started off using "responsive" percentage % widths with min-width and max-width, which looked OK in Mobile Device Simulator. But on real-world cell phone the download time was too long for multiple-image sites. Thus, resorted to mobile-device version using animated GIF and inserted a switcher JavaScript from CSS Tricks
    Code:
    <meta name="viewport"  content="width=device-width, user-scalable=yes">
    
    <script type="text/javascript">
    <!--
    if (screen.width <= 699) {
    document.location = "indexmobile.html";
    }
    //-->
    </script>
    Used at http://www.josephdenaro.com/ to switch to http://www.josephdenaro.com/indexmobile.html and
    at http://www.jacquimorgan.com to switch to
    http://www.jacquimorgan.com/indexmobile.html

  • #5
    New Coder
    Join Date
    Jan 2011
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts
    <meta name="viewport" content="width=device-width, user-scalable=yes">

    <script type="text/javascript">
    <!--
    if (screen.width <= 699) {
    document.location = "indexmobile.html";
    }
    //-->
    </script>
    Yep it works well. I was thinking if there was a way to give a mobile visitor a further option to go to the main website if for any reason they want to.

    So at the top of the mobile page. I could put "click here to go to main website".
    The only way I can think of this working is if I direct them to a "index2.html" page that doesn't contain the code above.

    If anyone knows of a neater way of doing it with some code.....much appreciated.

    I don't really want to go down the RWD route just now as my main aim is to get a very quick download time with the information the visitor is looking for.

  • #6
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    yes

    Somewhere else, there was a post about using cookies etc. But that seemed to complicated for me,

    So, I too, would just create separate main page without JavaScript switching to small screen. I did include <noscript>and general link</noscript> to indexmobile.html version (mainly for myself to check it).

    A lot depends upon your main content. The sites I'm dealing with do not have complicated content so I just linked the indexmobile.html's navigation to various categories together.

    It's all still evolving so better solutions may turn up,


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •