Subscribe to the::unwired's RSS Feedthe::unwired at Twitterthe::unwired on Facebookthe::unwired on Google Plus
the::unwired Article
SITE: Optimized the mobile version with 'MobileOptimized'-tag
Posted by Arne Hess - on Saturday, 03.12.05 - 13:17:22 CET under 06 - Site News - Viewed 22339x
Not Tagged

The latest Internet Explorer Mobile versions for Windows Mobile Smartphone (2003 Second Edition and better) and Pocket PC (Windows Mobile 5.0) does a great job in rendering and optimizing websites to get the best display results, compared to the previous Pocket Internet Explorer results, thanks to the introduction of different layout options.
However, the Internet Explorer Mobile default fit-to-screen layout can be changed. The Windows Mobile-based Smartphones And Pocket PCs have a layout menu that enables users to select the Internet Explorer Mobile layout they want.

Internet Explorer offers the following layout menu options:

  • Default: Narrows content width to reduce horizontal scrolls.
  • One Column: Forces all content to fit in a single column with no horizontal scrolling.
  • Desktop: Makes no change to the content. Rendering for Internet Explorer Mobile is as close as possible to the rendering for Windows Internet Explorer on a Windows-based desktop platform.

The Problem
While Default works perfect with optimized sites (like the::unwired), One Column and Desktop screws up the design (of Windows Mobile optimized sites) which looks like this on Smartphones and Pocket PCs.

On the Smartphone the One Column (left) the Desktop (right) layout-view:

While it is designed to look like this in the Default layout-view:

Same on the Pocket PC with the One Column (left) the Desktop (right) layout-view:

While it is designed to look like this in the Default layout-view:

Now the problem is, that many Pocket PC and Smartphone users prefer to use the Internet Explorer Mobile in a different mode then the Default view, either because they are visiting a lot of non-optimized sites, where One Column makes sense or because they want to see the real layouts where you have to use Desktop view.
However, if you return to the::unwired (and other Windows Mobile optimized sites), Internet Explorer Mobile always try to take care about these sites too, even if the site is already well prepared and it re-renders the layout which makes it either ugly (One Column) looking or your get the additional scroll bar on the bottom for left/right scrolling (Dekstop).

The Solution
Microsoft implemented the support for a widely unknown tag called "MobileOptimized":

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 off.


Note The default width for the body when fit-to-screen is off is 640 pixels.
The following meta tag indicates that the page should be rendered as if fit-to-screen were turned off.


<meta name="MobileOptimized" content="width">

I've just added the MobileOptimized tag into the mobile version of the::unwired now and as the result you always get the Default layout, doesn't matter if you have selected One Column, Desktop or Default which makes reading and navigating easier and more convenient.

I've figured out, that <meta name="MobileOptimized" content="176"> works best since it supports Smartphones with 176 x 220 pixels up to Pocket PCs with 640 x 480 pixels:

I hope you enjoy this improvement as I do since this tag is really handy! Therefore, I also recommend to use the MobileOptimized tag too, if you have a Windows Mobile optimized version of your site too.

Microsoft offers an interesting section at msdn (accessible even without a msdn subscription) which is about designing web sites for Mobile Devices and there, this MobileOptimized tag is explained. I think mot of us (webmasters) haven't given this too much attention so far (mostly because we wasn't aware that this tutorial is available) but I recommend to give it a visit if you run a Windows Mobile site too.

Thanks to Aaron Filner from Microsoft for giving this tip!

Cheers ~ Arne

Related Links

Article Source

Related Articles mobile version

Social Sharing
This Week's Top Stories
Feeds & More
Awards & More
Recent Discussions

No items available

© Copyright 1998 - 2013 by the::unwired® & Arne Hess
All rights reserved!
the::unwired is a registered trademark of Arne Hess.
All trademarks are owned by their respective companies.
All site video, graphic and text content is copyrighted to the respective party and may not be reproduced without express written consent.