SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    723
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Site to enlarge vs. single column mobile viewing

    Some mobile web sites appear the same as the original desktop version, and users just swipe on the mobile phone screen to enlarge and scroll back and forth, other mobile sites look different from the original desktop web site and seem to be in a new design which is just a single column for mobile viewing.

    What's the difference in regard to creation of each for mobile viewing?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by ChrisjChrisj View Post
    Some mobile web sites appear the same as the original desktop version, and users just swipe on the mobile phone screen to enlarge and scroll back and forth, other mobile sites look different from the original desktop web site and seem to be in a new design which is just a single column for mobile viewing.

    What's the difference in regard to creation of each for mobile viewing?
    Hi,

    If you do nothing special then most mobile devices will just scale down the page to fit on the screen which is why the site will look very very small. You then have to pinch and zoom to see the detail. The iphone assumes a screen width of 980px so if you have designed for 980px it scales it down reasonably well to fit 320px but if the original site is bigger then it won't fit quite so nicely.

    If you don't want your site to be squashed small then you need to tell the device what you want it to do and this will involve setting meta tags in the head of the page to control the viewport size and then use media queries to completely change your content into a form suitable to fit the device - usually a one column simple layout.

    It's not something you can do in a couple of seconds and usually has to be built into the design from the start for best results.

    More info here.

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,315
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    When it looks the same on the mobile screen as on the desktop (and it is too tiny to read), then the phone is viewing the same page and same css styling as the desktop. There are no adjustments being made for the smaller screen by the site.

    But if the site looks better on the mobile, then:

    1. You may be looking at a completely different site optimized for the small screen (perhaps a "web app") with its own URL, like http://mobile.somesite.com.

    2. You may be looking at a site that has screen-detection or device-detection enabled and is showing you a revised version of the content. That is, when viewed at a certain size, different CSS kicks in, showing, hiding, or changing elements on the fly.
    Steve Husting


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
  •