Make Your Web Sites BlackBerry Friendly





Make Your Web Sites BlackBerry Friendly

Use these guidelines to make changes to your site to make it look great on a BlackBerry.

There are many web sites that will look surprisingly good on your BlackBerry without any modification at all. Others may require a tweak or two to make the content available to mobile devices. The good news is that you can make your site look good on a BlackBerry without sacrificing the user experience of your desktop browser–only visitors. There are certain guidelines that you can easily incorporate into your web development so that when you design sites, they'll look great for any device.

Don't Use Frames

Frames and mobile browsers just don't get along very well. It's easy to understand why: frames are made for very large screens. Because of this fact, the BlackBerry Browser doesn't even attempt to render frames—it forces users to choose which frame they'd like to view, one at a time. This is the bottom of the barrel when it comes to usability. Frames are often used as navigation on sites to display links to general areas on the site. As you can see from Figure, BlackBerry users will have little or no clue about which frame to use. The site displayed uses a left and a right frame.

Leaving BlackBerry usability aside, the sites that use frames well and make them usable even for desktop browsers are few and far between (Bloglines [Hack #39] is one; http://www.bloglines.com). Just try bookmarking a set of frames—it's not possible. Everything that frames are meant to accomplish can be done using other techniques in a better and more usable way. Couple this with the fact that they are almost impossible to use on a mobile browser, and frames are simply not a good design tool.

Frames in the BlackBerry Browser


Limit Your Use of JavaScript

One of the limitations that the BlackBerry Browser has traditionally had is its lack of JavaScript support. Many sites are unusable on the BlackBerry because they require the client to support JavaScript and to have it enabled. This is not always the case even for desktop browsers. Requiring a browser to use JavaScript to simply navigate your links is bad design. The browser included with BlackBerry Handheld Version 4.0 does include some support for basic JavaScript—but this doesn't mean you should design your site requiring the use of every JavaScript method in the specification. The JavaScript implementation in 4.0 supports a subset of the methods being forced upon browsers by JavaScript-happy sites. Make sure JavaScript is optional or make a version of your site where it's optional and make it easy for your visitors to get to.

Use Images Wisely

Be very careful with the images you place on your web site. A common practice is to create an image with words on it and then use it as a link for navigation on your site. This was done in the early days of the Web so that web designers could be sure a site looked consistent across platforms and browsers without worrying about which fonts were installed or how a browser would display certain markup.

Many BlackBerry users choose to turn off images entirely [Hack #11], significantly speeding up their mobile web experience. These users won't even see the words on your images. Requiring the use of images for your site almost guarantees a slower experience for mobile users. While the time it takes to load images in a desktop browser is almost negligible in these current times of broadband access, your BlackBerry visitors will notice a huge lag.

If you must include images, be sure they are narrow enough to fit on a BlackBerry screen in a usable way. If you place wide images on the top of your page, your users will have to scroll down just to view the start of the actual content of your site. How rude!

Be sure and include alt text in your images as well. The alt text shows up on image placeholders in the BlackBerry Browser when users don't choose to display the full image (see Figure). Of course, I'm sure that all who read this have always followed the HTML specification and have never forgotten to include useful alternate text for every image on their sites.

BlackBerry.com with images turned off


The most usable sites for mobile users and desktop users include no images in the HTML, but only in the Cascading Style Sheet (CSS). This allows your desktop and mobile browsers to view appropriate versions of the content without redirection or other tomfoolery.

Don't Use Tables for Layout

Using tables as a placement method is so early 2000s. It's time to join the revolt against this antiquated and expensive method of design and use only CSS for the layout of your site. Like frames, using tables for layout is almost always targeted at the desktop browser and shows neglect for the mobile browser. Move to a CSS-based layout, and you'll have almost automatic support for mobile browsers.

Test It Out

You don't need one of every BlackBerry made to test out your mobile site. In fact you don't need any. The BlackBerry Simulator [Hack #93] will do nicely.

Make BlackBerry-Friendly Sites from Scratch

We've discussed ways to modify an existing site to allow access from BlackBerry devices, but what guidelines should you go by to design a new site from scratch? Modern desktop web browsers like Firefox and Internet Explorer 6 are ushering in a new era of web design that promises a "code once, view anywhere" approach that allows a web site to be viewed unaltered on any web browser—including handheld browsers.

XHTML and CSS.

The XHTML document type is garnering widespread support among major handheld browsers. While the format does have stricter requirements (all tags must be closed, all <img> tags must have alt attributes, etc.), you'll become a better web designer simply by using the format. Using XHTML for your documents' structure along with Cascading Style Sheets for the presentation will result in a more usable web site that looks more consistent across desktop browsers, and they'll look great on mobile browsers.

Use tags properly.

In the past, we've been encouraged to write poorly designed HTML because the WYSIWYG web editing tools actually enforced bad design! Web developers were encouraged to use <font> tags to style text and use paragraph tags without closing them. And the browsers of old simply went along with it.

When you design your next site, step back and use the XHTML tag set properly. Plan your headings ahead of time. What headings should be between <h1> or <h2> tags? Why? If you plan your document structure ahead of time instead of simply typing away in your WYSIWYG editor, you'll save yourself a lot of CSS code later. Proper use of tags will make your document look great on handheld browsers without any styling at all.

Avoid deeply nested tables like the plague.

From the beginning, plan your site's structure to have maximum flexibility in its presentation. CSS should be used for the entire layout—try to avoid table-based layout. If you insist on using tables for presentation, use them lightly. Don't use nested tables for layout purposes. The benefits of using a CSS layout are immense. If you use CSS for your layout, the next time you go through a redesign of your site, you won't have to change one element of your markup—just simply link to a new CSS file that contains your new design. Spend a few minutes at the CSS Zen Garden (http://www.csszengarden.com) to discover the power of this approach.

Make your pages small.

The data networks on which the BlackBerry and other mobile devices operate, while improving, are still very slow compared to broadband. You should make your pages as light as possible so they'll load quickly on handheld browsers as well as desktop browsers. Separate the presentation from your XHTML code by placing the CSS in a separate file and then point to it with a <link> tag. This will reduce your page size (and bandwidth costs!) by large percentages. In addition, your CSS file will be cached in clients' browsers when they first visit your site so it won't have to be redownloaded for each page visited. Do the same with any JavaScript on your site.

See Also


     Python   SQL   Java   php   Perl 
     game development   web development   internet   *nix   graphics   hardware 
     telecommunications   C++ 
     Flash   Active Directory   Windows