SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Wizard johntabita's Avatar
    Join Date
    Mar 2001
    Location
    In a big, big house, with lotsa lotsa room
    Posts
    1,062
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)

    Beginner Question about Developing Mobile Websites

    I have a basic question about developing mobile sites for clients.

    From what I understand, you can create a single site that's optimized for both desktop and mobile devices, using either a responsive design or some CSS tricks.

    Or you can use a service like www.mobisitegalore.com or a WordPress plugin to convert the site on-the-fly for mobile devices.

    Or you can create an entirely different mobile site.

    Assuming I've got that right (please correct me, if not), what are the pros and cons of each and which do you prefer?

    Thanks!

  2. #2
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It's possible to create a responsive site that views well on a desktop, iPad, and smartphones. By using @media queries, you target screen sizes and adjust the content to fit. For instance, in one case I set it so the site shows two columns in the desktop and iPad, but the right column goes under the left column on a smartphone like the iPhone.

    Using a Wordpress plugin is good if you are using a Wordpress site. Some free conversion sites, though, will limit what kind of pages, number of pages, or kind of content you can have in the conversion.

    There's no need to create a mobile-only site unless your visitors are 100% mobile.

    You can check out my links for a fluid site in the Mobile Makeover Guidelines section of this page:
    http://iphonedevlog.wordpress.com/ph...va-crib-sheet/

  3. #3
    SitePoint Wizard johntabita's Avatar
    Join Date
    Mar 2001
    Location
    In a big, big house, with lotsa lotsa room
    Posts
    1,062
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by StevenHu View Post
    It's possible to create a responsive site that views well on a desktop, iPad, and smartphones. By using @media queries, you target screen sizes and adjust the content to fit. For instance, in one case I set it so the site shows two columns in the desktop and iPad, but the right column goes under the left column on a smartphone like the iPhone.
    Thanks for the explanation and the link. When you use @media queries, does that automatically redirect the user to the m. subdomain, if you've created one?

  4. #4
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    To redirect a user to a particular site based on their device, you would use a detection script. For instance, this script redirects to the appropriate iPhone or iPad landing page in an universal app made from HTML/CSS. I suppose you could replace the URLs for mobile-formatted URLs in your web site.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <script type="text/javascript">
    if(navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
    window.location = "iPhone/index.html";
    }

    if(navigator.userAgent.match(/iPad/i)) {
    window.location = "iPad/index.html";
    }
    </script>

    </head>
    <body>

    </body>
    </html>

  5. #5
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One nice way is to use www.jquerymobile.com framework which does your job 100%, You dont need to worry about device type, resolution and orientation.

  6. #6
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If you size your graphics at 2000px for maximum impact for the iPad, then that'll be a problem for smartphones and cell phones - too much data. Separate files is better (if high-quality graphics warrant it). However, you can use the same code if the content is mostly text.

  7. #7
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    Hi John,

    The idea behind media queries is that you can layout one site that adapts to different devices, feeds different CSS (to not bloat css downloads on phones for example), present already scaled images and video to meet the size of a screen rather than scaling these assets as they typically will look bad when doing so, and move ADs to more prominent positions as device sizes change (advertisers get upset when a dynamic resizing pushes their right column AD to the bottom of a mobile screen. This does not provide ways to route you to m.domain.com, but the point is that you are not feeding a user a different site your are reformatting the layout of one site. In cases where you see m.domain.com they are most likely using browser/device detection like @StevenHu mentioned. Generally detection is a bad idea, as it needs to be updated frequently and there are quite a few things that can trip it up.

    Hope this helps,
    Steve



    Quote Originally Posted by johntabita View Post
    Thanks for the explanation and the link. When you use @media queries, does that automatically redirect the user to the m. subdomain, if you've created one?
    ictus==""


Bookmarks

Posting Permissions

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