Jan. 27, 2011, 9:03 a.m.
posted by sl
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
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.
CSS Zen Garden (http://www.csszengarden.com)
"Why Tables for Layout Is Stupid" (http://www.hotdesign.com/seybold/)