About |

Quick tips from the dance floor from a Java specialist, enterprise developer, and mobile technology enthusiast.

Mobile-isticly optimized in 10 seconds

Anyone ever told you that your website isn’t mobile optimized? Or have you ever seen a lilliputian-looking website on your device? You know, one that renders so small you are forced to squint as you enlarge various parts of the site with your fingers just to read it?

Websites render this way on mobile devices because they lack a simple meta tag. While the subject of mobile website optimization can be rather involved (especially when dealing with CSS media queries, which take longer than 10 seconds to understand), there is a simple trick that can at least can make your website render normally on a mobile device. And it can be done in 10 seconds.

Simply add the following meta tag in the head element of your website’s index page:

viewport definition

<span class='line-number'>1</span>

<code class='html'><span class='line'><span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="nt">></span>
</span></code>

The viewport meta tag is supported by browsers on both iOS, Android, and by other device browsers including Internet Explorer Mobile on Windows Phone 8. This tag instructs a browser on how to properly display a webpage; without it, a webpage is, unfortunately, displayed mini-style on device browsers, which have a narrow width.

Thus, the viewport tag essentially zooms in the display of a webpage. In the case of the example tag above, the width of the website is set to the device’s width and the scale is set to 100% – this’ll allow the website to be displayed normally on a mobile device. Website visitors won’t have to squint or pinch and expand to just to read the site’s relevant text.

Paulund.co.uk has a really good write up regarding the usage of the viewport meta tag as well as CSS media queries; what’s more, the good folks who created HTML5boilerplate.com have a nifty presentation that’s worth a read too.

This story, "Mobile-isticly optimized in 10 seconds" was originally published by JavaWorld.

Next read this:

Core Java

When Andrew Glover isn't listening to “Funkytown” or “Le Freak” he enjoys speaking on the No Fluff Just Stuff Tour. He also writes articles for multiple online publications including IBM's developerWorks and O'Reilly’s ONJava and ONLamp portals.