Developing Web Pages for BlackBerry
You may not use one, your friends may not be using one, but the people who sign the checks for large mobile web projects likely are. BlackBerry (BB) is still a large part of the smartphone ecosystem and any mobile web project should have support for BlackBerry.
This article summarizes some tips for anyone developing web pages for BBs. You should be generally familiar with how to build web pages and also optimize them for mobile devices.
Current BB Ecosystem
There are currently 3 major Operationg System (OS) versions of the BB OS that you’ll need to be concerned about. They are 4, 5, and 6. The good news is that BB OS6 is Webkit and I have yet to see a single rendering difference between BB OS 6, Android, and iOS. The bad news is that from my experience the majority of BBs you’ll see in use are version 5 of the OS. Version 4 and 5 of the OS are not Webkit. I wasn’t exactly able to determine what they are, but there are rendering differences between BB OS 4 & 5 and BB OS 6. The best resource for seeing what versions of the BB OS are out there and on what devices is the wikipedia page on the BB OS.
Some BB devices can be upgraded to newer versions of the OS, but others cannot. These upgrades are also dependent on mobile carriers pushing them out which they are very slow to do. It’s usually a good assumption that a BB still has the same OS version that it was originally launched with. BB has stated that Webkit will never be brought to version 4 and 5 of the OS.
Viewing Your Web Pages on a BB
The first step to making sure your web pages actually display properly on BB is checking them out on BBs. At the moment there is no way to do this on OS X. You’ll have to be running Windows to access the simulators that BB provides.
You can download the emulators here. You can choose what device you want and then choose OS version and even mobile carrier. I’ve always used the Generic emulators provided rather than the carrier specific ones. You’ll have to provide some personal info and then you’ll receive the installation file to download. You need to download and install one of these files for for each BB that you’ll need want to test on.
Assuming you’ll be setting up a few simulators it’s easy to create shortcuts to them and note the OS version in the shortcuts.
The simulators take a few minutes to fire up and you can only use one at a time. Initially the simulator will not have Internet access. To set it up press the BB icon (the cluster of circles) on the device and use the arrow keys on your keyboard to look for Manage Connections and press Enter. Follow the steps here to join a network and choose Default WLAN Network. I wasn’t able to get internet to work properly on any of the OS 4 simulators.
After you have Internet access press the end call button (red) to get back to the home screen and fire up the browser. Press the BB icon to choose a new URL to visit. You may have to use some of the simulated hardware buttons to navigate the website and it will require some patience. You can use the Space Bar to quickly scroll down a page or Shift + Space to scroll back up.
Additional Stylesheet for BB OS 4/5
You likely should be fine for any OS6 BBs but you’ll likely have to write an additional stylesheet targeted to OS 4/5 BBs. To detect pre OS 6 BBs you can check their user agent string for the word BlackBerry and the absence of the word Webkit. Here’s a bit of PHP to accomplish this.
<link rel="stylesheet" type="text/css" href="/css/bb5x.css" />
<?php } ?>
The issues you see are usually spacing related and seem to occur more often with floated elements. They can usually be easily addressed by modifying margins and padding.
What’s Left
At this point you hopefully have a website that renders the same on all BB devices as it does on iPhone and Android. Congrats! You’ve got most got the majority of mobile users covered at this point. Here are a few more items to consider.
Performance Limitations
New Android devices and iPhones handle animations just fine, but in my experience any sort of JS based animation (like a <div> sliding open) run very poorly on BBs and is not worth implementing. Your JS should detect for BB and provide a non animated version.
Touch Events
Some BBs do support touch events similar to how Android and iPhone do but the majority do not. Your code should detect properly for touch events. In theory any BB’s that do not support touch events should respond correctly that they don’t support touch events, but I have seen instances where they respond with touch event support if they don’t have it. You may want to force BBs to a non touch event capable experience. It's OK for all devices not to receive an identical experience. Progressive enhancement is king in the realm of mobile web.
HTML5 Video Capabilities
BB currently does not have any support for the HTML5 <video> element firing a native player the way you can on Android and iOS. There is a way to fire the native player using RTSP links, but it is not pretty. A decent fall back in this scenario is linking to a YouTube URL where you've uploaded the video you want to play.