Get your website ready for the Mobile Web in 10 steps

Posted 2007-11-14 in Mobile Web by Johann.

The mobile web is going to be the next big thing but is your website ready?

Here are ten techniques that will make your website ready for the mobile web.

1. Keep page sizes down

Ideally you want your page size to be less than 10 K or 16 KB. This is tiny, I admit, but you can include remote content on the client-side using IFrames, AJAX, Flash or hybrid AJAX/IFrame solutions such as inc.

The reason behind this is that some mobile browsers (Motorola, OpenWave) only load that much before giving up.

2. Add shortcuts

Make navigation of your sites easier by providing

• Links at the bottom of the page to jump to the top of the page again.
• Links at the bottom of the page to go to the home page.
• Links to the site map.
• Links to the search engine.
• Links to skip the menu and go directly to the content.

If you want, only show these links in mobile browsers by using a rule like .handheldShow { display: none } in your screen style sheet.

Use short link texts such as “Top” or “Home” for these shortcuts. Avoid empty anchor elements (<a name="anchor"></a>).

3. Use few images

Images are huge compared to the size of a typical web page. You should avoid using images that only serve presentational purposes.

• For logos, use CSS image replacement and define the rules only in the screen style sheet.
• For photos, use JPEG with high compression ratios and thumbnails. Note that some online photo sharing sites have rather low compression ratios for higher image quality.
• Compress PNG images with OptiPNG. This can be easily automated.

4. Use less text

Long text is painful to read on mobile phones because the user must scroll a lot.

You can use CSS to fade out certain text passages only on mobile devices. A simple declaration like .handheldHide { display: none } in your handheld style sheet is enough.

I use this in my blog to fade out the “Share/Bookmark” links and other smaller elements that do not make much sense in mobile browsers.

5. Avoid horizontal scrolling

Horizontal scrolling is especially bad on the smaller cell phones.

• Search for overly long words and use &shy; or <wbr> to indicate places were the word may be wrapped. Unfortunately, support for &shy; is far from perfect.
• Restrict the width of images to 100 % of the screen size using img { max-width: 100% }.
• Write short headlines and titles.

6. Provide a handheld style sheet

Of course you can and should define colors in your handheld style sheet that match your regular branding but the real beauty lies in the fact that you can fade out elements.

Embed the handheld style sheet before the screen style sheet and use a little bit of JavaScript for mobile browsers that don't get CSS media types.

7. Be careful with JavaScript

While some mobile browsers (NetFront and IEMobile) support JavaScript, they only do so to a certain degree. You can use JavaScript but – from my experience – it needs to be really simple and should be included before “serious” code is run.

There is no real way to debug JavaScript and in Windows Mobile’s IEMobile, JavaScript errors aren’t even displayed.

8. Get emulators

Most of the mobile phone emulators do a good job at giving you an idea of how pages will look like. Use them to find major problems.

Opera is great for its small-screen rendering support. Preview pages in Opera Mini with the Opera Mini bookmarklet.

9. Get mobile devices

By using real mobile phones, you will discover usability problems you might not find using emulators.

1. Buy a mobile phone with a low-level browser (Motorola browsers come to mind).
2. Buy a mobile phone with a more fully-featured browsers (such as NetFront or OpenWave).
3. Buy a PDA or a SmartPhone running Windows Mobile.

HTC devices running Windows Mobile 5 can be picked up used for little money. Windows Mobile devices are nice because you can test pages through ActiveSync with a local Internet connection.

Having a mobile phone with a “real” desktop browser – such as the Nokia E90 – is a great idea, too.

10. Keep mobile browser statistics

Go through your web server’s log files and extract the user agent strings. Build mobile browser statistics and see which popular mobile browsers you can cover with emulators and which ones you cannot.

I hope you find these tips useful. If you have more ideas or would like to add to this entry, please leave a comment.

4 comments

Ibanez 2027XVV – my main 7-string guitar

Posted 2007-11-11 in Guitar by Johann.

My main 7-string guitar is an Ibanez 2027XVV that I bought used mid-2005. It currently has a DiMarzio D Activator Bridge in the bridge position and a DiMarzio Air Norton in the neck position.

2 comments

Guitar effects pedals over time morph

Posted 2007-11-10 in Effects by Johann.

I briefly mentioned my stint with DOD pedals during 2004–2005.

Being a very organized person, I always took photos of my guitar effects pedals. To show the growth of my pedal collection, I morphed the pictures together.

The pedals

You can see the following pedals in this morph:

• Yamaha FL-01 Flanger (sold)
• Boss DC-3 Digital Dimension
• Boss DC-2 Chorus (sold)
• MXR Blue Box (sold)
• DOD FX32 Meat Box (crazy, but noisy, sold)
• DOD FX70-C CoRrOsion (insane gains, aggressive sound, sold)
• Zoom 509 Modulator (crap, sold)
• Ibanez SP5 Slam Punk (crap, sold)
• HAO Rust Driver (does one thing well, but only that, sold)
• DOD FX56 American Metal (these do actually sound quite natural, sold)
• Maestro Fuzz-Tone FZ-1A (great)
• Marshall Shredmaster (“shred” – what were they thinking, sold)
• Ibanez BN5 Black Noise (insane from what I remember, but probably not good, sold)
• DOD FX101 Grind (not Grind, but still good, sold)
• Colorsound Supa Tonebender (sold for too little)
• Ibanez CD5 Cyberdrive (useless, sold)
• Ibanez SM7 Smash Box (generic, sold)
• DOD Grunge (ha, sold)
• DOD FX70-P Big Pig Fat Distortion (yeah, fat, but still sold)
• DOD FX25 Envelope Filter (difficult to set up, sold)
• Ibanez SH7 7th Heaven (unique crusty distortion, the only pedal I ever used on a track)
• Ibanez Standard Fuzz (pretty perfect)

How to include a page onclick on the client side

Posted 2007-11-03 in JavaScript by Johann.

Here’s a simple example on how to include another page on the clientside using the inc clientside include plugin:

<div id="bla"></div>
<p onclick="$('#bla').inc('blob.txt')">Include stuff</p>

I’m using the onclick event handler here but you could use javascript:-URIs like <a href="javascript:"> as well.

Clientside includes have some limitations.

• You can only include resources from the current domain (or sub-domain).
• Mozilla-based browsers seem to only load content with MIME types text/* though I have to look this up.

Demo

Click here to include my robots.txt.

Pages

Page 10 · Page 11 · Page 12 · Page 13 · Page 14 · Page 15 · Page 16 · Next Page »