Internet Explorer Mobile Layout Meta Tag

[Jason Dunn]

<div class='os_post_top_link'><a href='http://msdn.microsoft.com/library/default.asp?url=/library/en-us/mobilesdk5/html/wce51conlayoutmetatag.asp' target='_blank'>http://msdn.microsoft.com/library/d...youtmetatag.asp</a><br /><br /></div><i>"The Internet Explorer Mobile default layout fits the page content to the Windows Mobile-based device screen. The Internet Explorer Mobile default fit-to-screen layout can be changed. The Windows Mobile-based Smartphones have a Layout menu that enables users to select the Internet Explorer Mobile layout they want....Web developers use the MOBILEOPTIMIZED meta tag to control the Internet Explorer Mobile layout. Setting the MOBILEOPTIMIZED meta tag is equivalent to the Layout menu Desktop selection. When the MOBILEOPTIMIZED meta tag is set Internet Explorer Mobile does not modify the layout at all for the page containing the meta tag. With the meta tag, the screen width, minus margins, and scrollbars, is used to determine the width for rendering with fit-to-screen"</i><br /><br />If you're developing a Windows Mobile-friendly site, this is a good bit of info to have. We'll be implementing this on our site as well, because it drives me nuts to see our carefully designed layout broken by IE Mobile because it's in one-column mode.

[bmck]

An alternative (ideal) approach would be to design a website using web standards, and use a web standards-compliant browser. For some webmasters, using proprietary tags to get around a company's desire to control the web and/or that company's laziness can be a difficult pill to swallow. Others take the "if you can't beat 'em, join 'em" approach given the dominant position of IE.

You can easily use JavaScript and CSS alone to make your site look good and work well on both the desktop and on a PDA. Here are some screenshots of NetFront, where JS + CSS are used to present a single column of "elastic" width to small-screened devices, and a 2 column fixed-width version to devices with larger screens (in this case 800+ px):

http://homepage.mac.com/bruce.mckenzie/blog/C1836766058/E20051028072021/index.html

Unfortunately, this doesn't work with the version of IE on PPC 2003 SE devices which is not very standards-compliant (it's not an absolute thing). AFAIK the only browser that currently meets the "Acid test" (www.webstandards.org) is Apple's Safari. Compliance is an ideal - something to strive for, even if it is not fully achieved.

One trick: If you're forced to use IE on a PPC, let Google do the reformatting/ image hiding for you. Try typing "pocketpcthoughts" (for example) into the search box at Google's PDA portal:

http://www.google.co.uk/xhtml

I've set this as Home. Some sites work better than others :-)

Cheers, Bruce

http://www.bioneural.net

[surur]

Hang on.. am I right in thinking this overrides the users choices? i.e. if I want one column, and the webmaster is precious about their amazing layout, I'll be forced to scroll? Thats just stupid. Typical Microsoft.

Surur

[d-roC]

I am with the user talking abuot just making a browser that meets standards. That would solve nearly all of the issues that any of us have. The other issue would be site developers just making a site that doesnt break and uses appropriate, if not a generation older, cSS and JS for good design work. At least this is somewhat of a solution for the IE crowd. It aint by any means a great browser (I mean that exactly the way I wrote it) but it is what we get with WM devices, lest others come and play.

[bmck]

Hang on.. am I right in thinking this overrides the users choices?... Typical Microsoft.

No, actually. What this can do is present an initial CCS-styled single-column layout to small screens, and an initial widescreen 2-column layout to users with large (desktop) screens - for example. The user might then choose to apply a different stylesheet to override the default choice (using JS-mediated stylesheet switching), given a browser that understands web standards. Typically un-Microsoft.

Cheers, Bruce

http://www.bioneural.net

[surur]

I'm not asking whats possible if done right, I'm asking what this tag can do. And I was right.

Note Web developers can only force a layout selection for their own pages.

I'm also not interested in ccs and stylesheets and javascript and all that junk that just make pages load slower and make mobile browsers more bloated, load pages slower and less capable of traversing the wider internet. Do everything server side and stop wasting my limited resources!

Surur

[bmck]

I'm not asking whats possible if done right, I'm asking what [the MOBILEOPTIMIZED] tag can do

Ahh, I misunderstood. Sorry.

I'm also not interested in ccs and stylesheets and javascript and all that junk that just make pages load slower and make mobile browsers more bloated, load pages slower and less capable of traversing the wider internet. Do everything server side and stop wasting my limited resources!

You might want to re-think this. Having to serve different sets of pages to different users can strain servers (not to mention developers). Furthermore CSS actually speeds things up; you cache it once and use it to layout ALL pages. It's a web standard partly because it conserves resources. Some sites provide alternatives for those users who choose to disable Javascript in their browser options, but the interactivity it brings helps distinguish such "new media" from earlier tools such as the pocket pad and pencil. There's always that option as an alternative to "browser bloat" ;-)

Cheers, Bruce

http://www.bioneural.net

[Ed Hansberry]

Hang on.. am I right in thinking this overrides the users choices? i.e. if I want one column, and the webmaster is precious about their amazing layout, I'll be forced to scroll? Thats just stupid. Typical Microsoft.

Surur
No web master that is concerned about their web layout is going to purposfully hose people on mobile devices. This tag is to let PIE know the web master has already formatted for Windows Mobile. If a web master did this and had not formatted for WM, why would you want to frequent their site if they are trying to screw you over? If they want to do that they can do that in a ton of ways without even knowing about this tag.

Banks do it all of the time. :roll:

[tea]

Hi, I'm usually just a lurker here, but I have got some opinions on this subject.

Reading about this meta tag makes me a bit sad:

Why can't Microsoft just follow the web standards? This issue is already taken care of in the CSS specification, so why does Microsoft invent its own proprietary tag?

Others mention web standards in this thread, but suggests a javascript method. Using javascript is more complex than it needs to be.

This is how it should be done when having a layout which looks good both in mobile browsers and at the desktop screen:

&lt;LINK rel="stylesheet" type="text/css" media="screen,handheld" href="optimized.css">

Note the attribute: media="screen,handheld" which is supposed to tell the browser that both desktop computers and mobile devices should use that stylesheet.

When the desktop layout is too complex for the small screen (for instance several columns), it is possible to provide different style sheets for desktop and for mobile devices:

&lt;LINK rel="stylesheet" type="text/css" media="screen" href="advancedlayout.css">
&lt;LINK rel="stylesheet" type="text/css" media="handheld" href="mobile.css">

An up to date browser like Opera for mobile devices would select the mobile.css stylesheet and ignore the advanced layout intended for desktop computers. PIE partly supports this, I think.

Note that when using this method, it is not necessary to do any server side checks for user agent strings in order to serve two different layouts, because the HTML output would be the same. The correct layout is selected in the clients.

And, despite what many web developers stuck in the 90-s believe, it is absolutely possible to make a complex layout based solely on CSS, leaving the HTML clean from nested tables and irrelevant tags. By using the CSS property display: none it is possible to omit parts of the layout in the mobile version.

Read more about handheld css here:

http://www.alistapart.com/articles/pocket/

A List Apart also contains a lot of other articles and tutorials about practical and advanced use of CSS combined with correct HTML.

Sorry for any bad English in this post.

Tor Erik