Mobile Web Page Detection?

If you have a regular web page and a mobile web page, how does the mobile device know what version of the page to load. Do you have to have detection of sorts ? How do you view your web page if you don’t have a smart phone or iPhone is their a program ? I think I asked the second question before but found it a bit crude that it wasn’t as simple as previewing your regular web page on different browsers, maybe something has changed I haven’t kept up in that area.

You have a few options, such as

  • create separate sites and use browser/device sniffing to detect which one to server up;
  • have separate sites and make the default the desktop site and offer the mobile site via a link;
  • have a singe site and style it differently for different devices via media queries etc.

As for testing, if you have a Mac you can download the Apple developer tools which include an iPhone and iPad simulator which is quite accurate. For both PC and Mac, there is also Mobilizer, which shows you how your site will look in a range of devices such as iPhone, Android, Blackberry etc.

There’s also the [URL=“http://www.opera.com/developer/tools/mini/”]Opera Mini simulator and the [URL=“http://mtld.mobi/emulator.php”]dotMobi](http://www.springbox.com/mobilizer/) one, which emulates a more basic phone.

Thanks. What screen resolution do you begin with ?

Any mobile sites that I can view on a PC compared to their PC based counterpart ?

Well, the BBC has separate versions of its site http://www.bbc.co.uk/. If you visit that with a mobile, it should automatically take you to the mobile version. However, it doesn’t have any method that I’ve found to switch between versions by choice.

320 and up is the “norm” I think these days. That covers you for most smart phones. Though, to be honest I do recommend to our designers that we make it 300px with a 10px padding on either side, to be extra inclusive (of course, between 280px and 480px it would probably be quite acceptable to have a fluid layout for many designs).

Check out http://www.stuffandnonsense.co.uk/projects/320andup/ on a modern browser and resize the window. Good example of a responsive layout right there :slight_smile:

I recommend browsering around the web with the Firefox addon "User Agent Switcher" set to a mobile user-agent. (For example http://www.bbc.co.uk/ will then show you its mobile version)

Aussie is their a Chrome version of User Agent Switch ?

Or Opera version, as I don’t know if I’ll be sticking with Chrome.

There’s a different one for Chrome. Go to extensions and search for user agent switch.

Opera used to have a pretty good built in “Identify as” feature, it looks like they have it hidden away in to their “opera:config” page.

Type “opera:config” in your address bar and search for “spoof useragent”, here you can change the ID of the user agent

Unfortunately, the only options here are:

[LIST=1]
[]Opera Opera/9.80 (Windows NT 6.1; U; en) Presto/2.10.229 Version/11.60
[
]Firefox 4 Mozilla/5.0 (Windows NT 6.1; en; rv:2.0) Gecko/20100101 Firefox/4.0 Opera 11.60
[*]Internet Explorer 9 Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; en) Opera 11.60
[/LIST]I haven’t yet found a place to edit / customise the user agent for Opera to a greater degree than this.

Opera only has those options, no iPhone, Android etc ? I can’t enable UserAgent in ChromePlus or install the add-on because ChromePlus has not updated it’s self :frowning: My Chrome Vanilla is at version 13. I came across this page that mentions you don’t need an extension. After watching the video I can’t find that option, maybe someone else will have better luck.

That page mentioned it was in the Dev channel (and it was posted on the 12th of Dec). It’s not in Chrome 16 (Beta channel) yet.

It’s not in Chrome, yet ?

It might make it in to Chrome 16 or 17… so, soon hopefully :slight_smile:

What do I do in the mean time :slight_smile: ?

Use Firefox. :slight_smile:

well I think instead of doing these cody thing you should get a developer who actually code your website resolution free or more technical word would be a responsive web design because then you wont have to worry about mobile or other versions.

Ralph :slight_smile:

+1 for ye good ole Firefox.

I would recommend the Chrome User Agent Switcher extension but since the author has updated, he states:

Currently, this version requires Chrome 17.0.963.0 or higher.

(Which I find a bit odd, I’m on the beta channel which is up to version 16.0.912.63 - so I wonder if he is using Chrome’s new built in user agent switcher and just providing some extra bells and whistles around it.)