How to make your website mobile today

It's 2010 and your users are on smartphones and iPads. Here's how to make sure your website is too

By Dori Smith, InfoWorld |  Internet, web development

Next up, it's time to tweak your fonts. Each device comes with certain fonts, and I wasn't able to find any one font on all devices (but then, you can't even necessarily find out what Web fonts ship with a given device -- I'm looking at you, Android). But here's what's worked for me:

h1, h2, h3, h4, h5, h6 {

font-family: Albany, Georgia, "Times New Roman", "Droid Serif", serif;

}

Albany is a serif font found on the Palm devices, Droid Serif on all Android devices, and Georgia and Times New Roman are on the iPhone and iPad. If you're supporting BlackBerry as well, add "BB Alpha Serif".

If you prefer sans serif fonts, try:

h1, h2, h3, h4, h5, h6 {

font-family: Prelude, Verdana, Arial, "Droid Sans", sans-serif;

}

Prelude is a sans serif font found on the Palm devices, Droid Sans on all Android devices, and Verdana and Arial are on the iPhone and iPad. If you're supporting BlackBerry as well, add "BB Alpha Sans".

If you've used one of the higher-end mobile browsers and swapped orientation, you may have found it, well, a little disorienting. You're looking at a page where the fonts are a certain size, but then you go from portrait to landscape and the font size suddenly makes you feel like you're in a funhouse. So let's add a little styling to handle that:

.landscape { font-size: .5em; }

.portrait { font-size: .8em; }

I'll show you the JavaScript later that provides the functionality behind this, but suffice it to say for now that when the page has its class attribute set to landscape, your fonts are at half-size; when it's in portrait orientation, the fonts are at 80%.

The lucky iPhone 4 and iPad have some special styles of their own:

.portrait #header img { width: 50em; }

.landscape #header img { width: 75em; }

Looking back at Figure 1, you see that the header graphic is larger than will fit properly in most mobile browsers. The others will cut it off, and that's fine. But some browsers can handle oversized images, so tell them to compress it a tad instead.

A little bit of script. My sample page is already using an external JavaScript file to handle its navigation menu, so only a little more code is necessary:

addEventListener(

'load', function() { resetPage(); androidSS(); }, false

);

addEventListener(

'orientationchange', function() { resetPage(); }, false

);


Originally published on InfoWorld |  Click here to read the original story.
Join us:
Facebook

Twitter

Pinterest

Tumblr

LinkedIn

Google+

Answers - Powered by ITworld

Join us:
Facebook

Twitter

Pinterest

Tumblr

LinkedIn

Google+

Ask a Question
randomness