BlackBerry Simulators: Enabling JavaScript and CSS

Posted 2008-01-19 in Mobile Web by Johann.

I always get a number of hits from BlackBerry browsers. Fortunately, free BlackBerry emulators are available so I can make sure my sites work as expected.

Installing a BlackBerry Simulator

You need to download one or more “BlackBerry Device Simulators” and the “Email and MDS Services Simulator Package.” Downloading is free after registration.

I had no problems installing multiple device simulators on my computer so you can download simulators for all of the BlackBerry devices you can identify in your log files.

After installation, run the “MDS” application from the “BlackBerry Email and MDS Services Simulators 4.1.4” folder and then start any of the device simulators.

You will be asked to set up your virtual BlackBerry the first time you run a simulator.

Enabling JavaScript and CSS

The BlackBerry browser lets you change several aspects of how the device displays web pages.

1. Loading JavaScript.
2. Displaying tables.
3. Using colors.
4. Support of Cascading Style Sheets.
5. What CSS media type to load (handheld or screen).

First, select “Applications.”

Then, select “Browser.”

After loading the browser, select “Options.”

Select “Browser Configuration.”

Configure the browser. In this example, I have JavaScript and CSS on. Unfortunately, I have no idea of how the average BlackBerry browser is configured. I would recommend that you identify a small number of sessions and see whether JavaScript and CSS files are loaded.

6 comments

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

How to test Mobile Style Sheets

Posted 2007-07-27 in Mobile Web by Johann.

Not everybody uses an iPhone to surf the web. There are billions of other cellphones around. Most of them have browsers installed, but will your website work in it?

If you want to make your website ready for mobile usage, you’ll find the following list of mobile browser emulators useful.

OpenWave browsers

OpenWave browsers are a popular choice and their latest version is offering some decent CSS rendering.

You can download several versions of their phone simulator (free registration required).

Motorola browsers

Looking at their emulators, I would think that Motorola’s built-in mobile browsers barely deserve the title “browsers.” The emulators suffer from FUC and severe size limits, but hey, they’re free. CSS support is experimental at best, I would say.

• MOTODEV developer site.
• MOTODEV > Search Results for “ADK.” From this page, just download all ADKs, like this one or this one (free registration required).

Opera

As a web developer, you have Opera.

Just press Shift + F11 and you’ll switch to “small-screen rendering.”

It’s worth noting that, as of now, you should try the small-screen rendering with version 8 Operas (although I am unsure how Opera synchronizes their version numbers) because version 9 of the Opera Mobile Browser isn’t out yet.

Microsoft Windows Mobile

Windows Mobile also comes with some useful browser options. You can try using the built-in IEMobile, Opera or NetFront.

At the rate older Windows Mobile 5.0 devices are going for, you should buy one just for tests. I have an XDA mini that’s going for around 150 €.

IFrame support on mobile devices

Posted 2007-12-28 in Mobile Web by Johann.

How viable are IFrame for use on mobile devices? IFrames could come in handy to add specific content to more capable browsers and hide it from down-level browsers.

In this blog entry, I’m looking at 6 mobile browsers and their support of the IFrame element.

Motorola

The Motorola mobile browser doesn’t support IFrames (tested here in the Motorola V600 emulator).

OpenWave 6

OpenWave 6 doesn’t support IFrames.

OpenWave 7

OpenWave 7 also doesn’t.

BlackBerry 8700

BlackBerry 8700 running a 4.2.1 firmware does not support IFrames.

BlackBerry 8830

BlackBerry 8830 running a 4.2.2 firmware also does not support IFrames.

IEMobile 6.8

IEMobile on Windows Mobile (formerly Pocket Internet Explorer) supports IFrames.

Opera Mobile 8.5

Opera Mobile 8.5 does not support IFrames.

Summary

Can you use IFrames in a mobile site? Yes, but the content will only be loaded by more capable browsers so plan accordingly.

Pages

Page 1 · Page 2 · Page 3 · Page 4 · Next Page »