Hands On With the BlackBerry Z103
Early versions of the BlackBerry OS either didn’t support HTML at all or completely mangled designs. While OS 6 made a giant stride forward by using WebKit to render email, turning on images was a pain and the small screen sizes on most BlackBerry devices didn’t help matters. The BlackBerry Z10 officially hit the market on Friday, and I was lucky enough to get my hands on one. Here’s a full report, screenshots and video on how the Z10 displays HTML email messages.
ACCESS EMAIL (AND EVERYTHING ELSE) IN THE HUB
The first thing I noticed after setting up my accounts (which, by the way, is a much easier process than in previous BlackBerry operating systems) was that there wasn’t an email app among the icons on the home screen. Instead, your inbox message count appears on the lock screen alongside notification and message counts from other services like Facebook and Twitter.
Viewing your inbox involves visiting the Hub, which is accessible from any app by first swiping up (to minimize the current app) and then to the right. “The entire experience is smartly built to be controlled with one thumb, so you can tap around while holding the phone in one hand,” writes Roberto Baldwin in his review for Wired. My only complaint is that the Hub can get cluttered with call, text and social media notifications, making my already noisy inbox even noisier. The good news is that you can also choose a specific account to view alone.
HORIZONTAL SCROLLING LEADS TO MIS-SWIPES
After a day of viewing emails on the Z10, I find that it reminds me of the Android email app. Responsive design is supported, images are blocked, and messages don’t auto-zoom or scale to fit the width of the screen. This last point means that there’s a fair bit of pinching and scrolling to the left and right to view emails in their entirety. The Z10′s sensitivity to gestures make horizontal scrolling interesting:
- Swiping too far toward the left brings you back to your inbox;
- Too far to the right reveals “minimized” apps and the home screen
There were several occasions where I intended to swipe and scroll to the right hand side of an email and instead found myself staring at the minimized apps/home screen.
WEBKIT RENDERING UNDER THE HOOD
Since the Z10 uses WebKit to render email, support for HTML and CSS is pretty good, although with a few quirks:
|BlackBerry Z10 Email Rendering|
|HTML and CSS||Yes|
|Media query support||Yes|
|Blocks images automatically||Yes|
|Displays ALT text||Sometimes|
|Styled ALT text support||Yes|
|Displays background images||No|
|Animated GIF playback||Yes|
|HTML5 video playback||No|
|Symbols in subject lines||Limited|
|Zoom/scale to fit||No|
|Pinch to zoom||Yes|
I was most surprised by the lack of support for background images and some of the more popular symbols I’ve seen in subject lines.
Z10 QUIRKS IN DETAIL
The slides below highlight many of the quirks and features in the Z10, with more details below.
The inbox view places the most prominence on the from name, followed by the subject line. Preview/snippet text (usually pulled from the preheader, or first few lines of the email) is not displayed. To optimize from names and subject lines for display on the Z10, keep these character counts in mind:
- Between 22-27 characters for the from name, and
- 42-45 characters for the subject line
HTML and CSS
Rendering on the Z10 ticks most boxes on the Email Standards Project acid test, with a notable exception for background images. There’s also support for some fun CSS3 tricks, like text-shadow and rounded corners.
Media queries/responsive layouts
Responsive layouts work great and render beautifully. However, some adjustments to your media queries may be in order. Keep in mind that the Z10 has a 768 x 1280 resolution screen but a device pixel ratio of 2.2. Media queries targeted specifically for the iPhone may not display the mobile version. You may need to adjust your queries, or plan to use multiple breakpoints in your design.
The bad news is that the Z10 blocks images automatically. But the good news is that turning images on is much easier (and much less scary!) than it was in OS 6. The Z10′s image blocking behavior is very similar to Android and Windows Phone, displaying a “load external images” link near the top of the email. One tap, and the images are there. There is a setting to download images automatically, but like most preferences, it’s buried away.
ALT text is supported, although it doesn’t always display. I need to do some more testing, but my gut is that display is linked to the length and size of the ALT text. This is a behavior also found in desktop mail clients. Styled ALT text is also supported!
Background images aren’t supported on the Z10. Neither HTML nor CSS methods worked.
Here’s another area where the Z10 is similar to Android. Emails don’t automatically zoom to fit the size of the screen, but you can pinch to zoom and re-center the email in the viewport. Web pages, however, do scale to fit. For some emails, it was a better experience to tap the “view as webpage” link since images were automatically enabled and the email fit within the browser window, negating the need to swipe around. I also haven’t noticed any font resizing behavior.
Again, more testing is necessary but I did notice that rounded corners and text shadows were supported.
No flashbacks to the Outlook 2007 release here. You can use animated GIFs in all their 1995 glory. Which is good lead-up to my next point….
There’s no support for HTML5 video. I was optimistic, given the play button I saw on my screen. But after tapping said button, I received an error message stating that the media was unsupported.
Similarly to Hotmail, forms display just fine, but simply don’t do anything after you’ve hit the submit button.
Symbols in subject lines
Some symbols displayed, but some of the more common ones (hearts, airplanes) weren’t supported.
HTML5 videos, as well as some symbols don’t work on the Z10
Overall, the UI and rendering on the Z10 is really good. While not quite up to iPhone standards, it blows previous versions of the BlackBerry OS out of the water. The left hand side of emails on BlackBerry also becomes very important since emails don’t automatically scale. You’ll want to place important information, design cues and calls to action along the left hand side. Anna Yeaman’s post on designing for Android’s preview pane does double duty for the Z10.
I also noticed that email addresses and URLs turn blue automatically. You’ll want to wrap these items in <a> tags and set the color yourself.
Z10 DETECTION FOR EMAIL ANALYTICS
We’ve added support for tracking opens made on the Z10 in Email Analytics. We’ll also keep you up to date on overall market share stats, and report back on any significant uptake we see. Rendering testing is in the works, too, but we don’t have an ETA yet. Stay tuned!
REGISTER FOR OUR MOBILE EMAIL WEBINAR
I’ll be covering strategies and approaches for tackling mobile email (including email on the Z10!) in our upcoming webinar, “Mobile Email: Why, What and How” on April 9th. Register now!