Site to enlarge vs. single column mobile viewing

[ChrisjChrisj]

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?

[Paul O'B]

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.

[StevenHu]

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.