Hands On With the BlackBerry Z10

[ 7 By

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.

hero

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
Preview/snippet text No
Displays background images No
Animated GIF playback Yes
HTML5 video playback No
Form/input support 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.

[metaslider id=4344]

Preview/snippet text
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.

Image blocking
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
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
Background images aren’t supported on the Z10. Neither HTML nor CSS methods worked.

Auto-zooming/scaling
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.

CSS3 goodies
Again, more testing is necessary but I did notice that rounded corners and text shadows were supported.

Animated GIFs
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….

HTML5 video
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.

Forms
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.

not-supported
HTML5 videos, as well as some symbols don’t work on the Z10

Design Notes

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!

  • http://twitter.com/DinoVICi Vic Dinovici

    Couldn’t wait for this moment. So happy BB will display properly the emails newsletters. Any idea when you guys will add the new BB10 into the Litmus tests?

    • http://www.litmus.com Justine, Litmus

      Agreed! I was very happy to see the good rendering support, although the quirks were also a bit odd. We don’t have an ETA yet on when we’ll have BB10 available for testing, but we’ll announce it here on the blog and on Twitter when it’s ready!

  • remi_grumeau

    Please BB now update Playbook OS mail client…. !!

  • Chris P. Bacon

    It looks like their latest OS10 update breaks media queries support on HTML emails (browser works fine).
    Even the old opened emails that would display properly before are not responsive anymore… Anyone found a workaround?

    • http://www.litmus.com Justine, Litmus

      We installed the update on our BB Z10 (we have a regular Gmail account set up in the Hub—no personal/work accounts). In my testing, it seems like the update still supports responsive design and media queries, but that the Hub email view isn’t scaling them to fit the size of the screen. It’s a bit odd, since the queries are scaling the email appropriately, but not zooming the viewport at 100%.

      • Adam

        Justine, mine seems to broken on both Work and Personal accounts using the
        same media queries as we were months ago and we had no issues. I test
        emails so this poses a real big issue.

    • Adam

      Chris, mine seems to broken on both Work and Personal accounts using the same media queries as we were months ago and we had no issues. I test emails so this poses a real big issue.