CODEWITHSUNDEEP
cssblackberry
andresmijares
andresmijares

Reputation: 3744

Blackberry media query

I'm trying to make a version of my website optimize to Blackberry devices, however I lack of information regarding this devices and google seems not to be helping.

Have anyone create website optimize for blackberry before? or know any kind of post or information that could help?

I don't know if media queries could help since those devices seems to open screen standard resolutions.

Upvotes: 0

Views: 4136

Answers (1)

Jared Farrish
Jared Farrish

Reputation: 49188

From Optimizing A Web Site For BlackBerry Devices:

If you thought targeting Web sites to work with several different browsers was difficult enough, try throwing BlackBerry support in the mix. Designing a Web site to work with BlackBerry handheld devices can be frustrating because the BlackBerry Web browser has fewer capabilities than a standard Web browser. This lack of features greatly affects design strategy because slower download speeds and limited screen size must now be factored in.

The first thing you should do when optimizing a site to support BlackBerry devices is download and install the official BlackBerry Device Simulator and BlackBerry Email and MDS Services Simulator Package. The device simulator and simulator package emulate the functionality of actual BlackBerry products and allow you to access and test a Web site in a virtual environment.

When you first open a site in emulation, you'll probably notice the BlackBerry's CSS support is limited and your site may not look so great. Since most front-end developers are trained to be reactive, your initial solution maybe to attach another stylesheet, target the handheld medium and adjust the classes and ids in that stylesheet accordingly. Unfortunately, the BlackBerry disregards both screen and handheld media style declarations. In fact, many of the useful style declarations that could create a loophole for the lack of media support—including display:none and visiblility:hidden—won't work on a BlackBerry. For a complete list of supported CSS declarations, refer to the BlackBerry Content Developer Guide.

So what's the solution? The real trick to optimizing a Web site for BlackBerry devices (without any hacks or work-arounds) is using well-formed XHTML in conjunction with CSS and omitting unnecessary layout elements using the screen medium. This focus on semantically correct XHTML to drive your layout may not look pretty on the BlackBerry, but it's advantageous for several reasons. For starters, since you're dealing with a limited amount of screen space and relying on what equates to dial-up connection speeds you want to keep the majority of your display content for the BlackBerry as text-based. Secondly, the well-formed code will result in better overall search engine optimization because you're using code standards that are friendlier to the search engine indexing process. Finally, the focus on semantics will make the site scalable and rid you of any worries associated with the consequences of adding text, modifying links or changing the appearance of an element in your stylesheet.

With full-featured browsers integrated into the latest generation of handhelds (Safari on the iPhone, IE in Windows Mobile devices) aesthetics support on mobile devices is vastly improving. Either way, good coding standards promote graceful degradation and a provide a certain level of future proofing that ensures users can view a Web site no matter how outdated or cutting-edge their device is.

Upvotes: 6

Related Questions