Developing on BlackBerry Web UI is like stepping into 1996 with one-hand tied behind your back. It teases you into thinking you can use css, but without the ability to position divs, table-based layouts are the way to go. If you are surfing the open web, you get to use the 4.7 browser on newer devices; however, if you are using a web UI control in your app, either natively, or with the Rhodes framework, then you are using the BlackBerry 4.2 browser.
From the BlackBerry Browser Version 4.2 Content Developer Guide (p. 120-121)
Element/CSS property matrix
Element/CSS property matrix (continued)
Additionally, you a free to use any font, as long as it Arial, Courier or Helvetica — and I don’t believe Helvetica was designed to really look like this. Here a screenshot of your options (with code below):
.arial { font-family: "Arial"; } .arial12 { font-family: "Arial"; font-size: 12px; } .c { font-family: "Courier"; } .c12 { font-family: "Courier"; font-size: 12px; } .helv { font-family: "Helvetica"; } .helv12 { font-family: "Helvetica"; font-size: 12px; } <p>no font</o> <div class="arial"> <p>Arial <b>bold</b></p> </div> <div class="arial12"> <p>Arial 12pt <b>bold</b></p> </div> <div class="c"> <p>Courier <b>bold</b></p> </div> <div class="c12"> <p>Courier 12pt <b>bold</b></p> </div> <div class="helv"> <p>Helvetica <b>bold</b></p> </div> <div class="helv12"> <p>Helvetica 12pt <b>bold</b></p> </div>
Lastly, here’s a handy list of screen resolutions you will need to consider (via Mobile Phone Digger). It is critical that you test on the device early, since the range of pointer accuracy on the BlackBerry is vast — from the precision of the Bold or Curve where the trackball lets you roll from element to element to the tactile frustrations of the Storm where you need to leave wide spaces around your UI elements to give people any hope of hitting them.
BlackBerry 857 160 x 160
BlackBerry 8830 320 x 240
BlackBerry 950 132 x 65
BlackBerry 957 160 x 160
BlackBerry 7100 240 x 260
BlackBerry 7130 240 x 260
BlackBerry 7520 240 x 160
BlackBerry 7730 240 x 240
BlackBerry 7750 240 x 240
BlackBerry 7780 240 x 240
BlackBerry 8120 240 x 260
BlackBerry 8130 240 x 260 (Pearl)
BlackBerry 8220 240 x 320 (Pearl Flip)
BlackBerry 8300 320 x 240 (Curve)
BlackBerry 8310 320 x 240 (Curve)
Blackberry 8320 320 x 240 (Curve)
BlackBerry 8330 320 x 240
BlackBerry 8700 320 x 240
BlackBerry 8703e 320 x 240 (Verizon Wireless)
BlackBerry 8707 320 x 240
BlackBerry 8800 320 x 240
BlackBerry 8820 320 x 240
BlackBerry 8900 480 x 360 (Curve)
BlackBerry 9000 480 x 320 (Bold)
BlackBerry 9500 360 x 480 (Storm)
BlackBerry 9530 360 x 480 (Storm)
BlackBerry Charm 324 x 352
BlackBerry 8100 240 x 260 (Pearl)
One Comment
Thanks a ton for this analysis. Very helpful.