Optimizing Content for the BlackBerry Browser by kebopink

VIEWS: 42 PAGES: 13

More Info
									Optimizing Content for the
BlackBerry Browser




© 2006 Research In Motion Limited. All Rights Reserved.   www.blackberry.com
Optimizing Content for the BlackBerry Browser




Contents
Executive summary .............................................................................................................................................3
Mobile application design..................................................................................................................................3
   User analysis....................................................................................................................................................3
   Mobile device use versus desktop computer use.......................................................................................3
   Mobile user data requirements.....................................................................................................................3
   Mobile environment analysis ........................................................................................................................4
   Screen size considerations ............................................................................................................................4
   Mobile device and desktop computer considerations ..............................................................................5
Web site planning................................................................................................................................................5
   Title....................................................................................................................................................................6
   Navigation........................................................................................................................................................6
   Search functions..............................................................................................................................................6
   Content .............................................................................................................................................................6
   Mobile access...................................................................................................................................................6
Optimization for mobile browsers ....................................................................................................................7
   Default settings...............................................................................................................................................7
   Content .............................................................................................................................................................8
   Images...............................................................................................................................................................8
   Tables ................................................................................................................................................................10
   Style sheets ......................................................................................................................................................11
   JavaScript use ..................................................................................................................................................11
Related resources................................................................................................................................................12




© 2006 Research In Motion Limited. All Rights Reserved.                                 www.blackberry.com
Optimizing Content for the BlackBerry Browser                                                                      3



Executive summary
The BlackBerry Enterprise Solution™ is a wireless connectivity solution from Research In Motion® (RIM®) that is
designed to provide organizations with an open platform for extending wireless communications and corporate
data applications to mobile users. For example, some companies are making mobile versions of location-based
services available to mobile users. These services enable people to find restaurants and hotels when they are
traveling. Flight information, movie listings, stock quotes, and dictionaries are available to both desktop
computer and mobile device users.
This document highlights ways in which you can optimize web page or application content for display on the
BlackBerry® device.

Mobile application design
Follow standard design principles when you design or mobilize applications for BlackBerry devices.

User analysis
Mobile users require access to corporate information and services of varying types, depending on their role and
responsibilities. When you design a mobile application, consider your users’ needs, behaviors, and expectations.
•    Consider the expectations of mobile users. A mobile user who has used a BlackBerry device for email
     expects other applications on a BlackBerry device to operate as effectively, efficiently, and seamlessly
     as email.
•    Determine who will use the application.
•    Consider the goal of mobile users as they use the application.
•    Identify the tasks that users need to complete.
•    Map out the most efficient ways to complete the tasks. In your mapping, identify the task sequence and the
     core set of features that an optimized application must contain.
•    Identify the additional application features that are desirable but not central to most users’ needs.

Mobile device use versus desktop computer use
In your design, remember that mobile device users and desktop computer users often have different use models
and different requirements. For example, typical desktop computer users might log in to a computer and work for
eight hours at their desk. They have a big screen, a full-size keyboard, and a mouse. Because of the memory,
processing, and storage capability of a desktop computer, users can work with several applications
simultaneously. Users can open an application in the morning and keep it open all day, but they might use it only
once or twice during that period.
In contrast, transactions on a mobile device are generally short. Mobile users have a targeted need, such as
reading an email message or consulting a customer relationship management (CRM) database. From start to
finish, device use is only a few minutes, but users might repeat the activity between 30 and 40 times during the
day. When mobile users access the Internet or a corporate intranet, they are rarely browsing casually. Instead,
they are trying to locate specific information that they require to complete their current task.
When you build a mobile application, remember that the mobile user uses the application for a brief time and
then closes it.

Mobile user data requirements
Data requirements for mobile users are often specific to the immediate task. Mobile users expect to find
information quickly. For example, a CRM system can provide massive amounts of information. A user requires a
small amount of that information at one time. When you design a mobile application, look for ways to streamline
data selection and presentation so that mobile employees can efficiently retrieve the information they require.
Effective, streamlined mobile applications can encourage acceptance and use.




© 2006 Research In Motion Limited. All Rights Reserved.   www.blackberry.com
4                                                                        Optimizing Content for the BlackBerry Browser



Mobile environment analysis
The following differences exist between the mobile environment and the desktop environment:
•    display size: Use the BlackBerry device screen effectively. Depending on the BlackBerry device type and the
     font size you select, the BlackBerry Browser can display 12 to 18 lines of text with 28 to 35 characters on
     each line.
•    processor speed: Plan and code your applications so that rendering is not processor-intensive. The
     processor speed of desktop computers can be from 5 to 60 times faster than the processor speed of
     BlackBerry devices.
•    network: Plan and code applications for wireless networks. Standard LANs have faster data transfer rates
     than wireless networks. The network gateway can also limit content size and type.
•    memory: Design for the available memory on BlackBerry devices.
•    battery life: Remember that realtime software that maintains a network connection significantly limits
     battery life.

Screen size considerations
Design your content for a small screen in general, but not for a specific pixel size. The following examples
illustrate the same web page displayed on screens of different sizes.




                                          Design web sites for different small screen sizes




© 2006 Research In Motion Limited. All Rights Reserved.           www.blackberry.com
Optimizing Content for the BlackBerry Browser                                                                      5


Mobile device and desktop computer considerations
You can approach web page design in three different ways to make sure that users can browse your web pages
from either a desktop computer or a mobile browser.
•    Create separate versions for each browser type; however, this is a costly and inefficient solution for both
     initial development and maintenance.
•    Design for the desktop computer, but remember the mobile platform. View your desktop computer pages on
     a mobile device. Check that users can access your main content easily, verify that users can navigate your
     site easily, and make sure that tables and other elements work well on the small screen. When you improve
     navigation for mobile users, desktop computer users benefit as well.
•    Use cascading style sheets. When you use style sheets, your site can format and display information for all
     users, regardless of how they connect to your page. Cascading style sheets can simplify web page updates;
     however, mobile device users can disable style sheets.

Web site planning
Corporate web sites tend to have a consistent format that users understand and are able to navigate. The
BlackBerry Enterprise Solution web site, www.blackberry.com, resembles many corporate web sites, but it is
optimized for viewing on a BlackBerry device.




     Title


     Breadcrumbs

     Navigation




     Content




                                                          Typical web site format




© 2006 Research In Motion Limited. All Rights Reserved.              www.blackberry.com
6                                                                    Optimizing Content for the BlackBerry Browser



Title
The title section of a corporate web page brands the site. It usually includes a title with a logo that links to the
site’s Home page, navigation links for browsing, and a search field.

Navigation
The left side of a typical corporate web page often includes a navigation area with links that help users navigate
within a site. To optimize navigation for mobile browsing, use a site map page with a selection list or menu that
displays the links to the major content in your site. A menu helps to preserve screen real estate.
Breadcrumbs
Web sites usually include breadcrumbs at the top of a page. These navigational links help to orient users in the
web site and enable them to return quickly to previous pages.
Look for ways to replace breadcrumb links when you plan for mobile browsing. On a small screen, these links can
take up too much screen real estate.

Search functions
Good search capability helps to improve the user experience with a web site, particularly if the site is a large one.

Content
To optimize wireless browsing on BlackBerry devices, use simple page layouts that do not use frames, minimize
the use of scripts and embedded objects, such as applets, and avoid reliance on images and colors. Structure the
web page so that a user does not have to scroll from left to right to view the main content.
Lay out your page content with your audience in mind. Anticipate users’ needs, and keep the pages focused on
the tasks that users need to accomplish.

Mobile access
The following example shows a version of a web page from www.blackberry.com before the page was fully
optimized for viewing on a mobile device.




                        Web page text and graphics might display incorrectly on a mobile device screen



© 2006 Research In Motion Limited. All Rights Reserved.       www.blackberry.com
Optimizing Content for the BlackBerry Browser                                                                     7


As the following example shows, the same web page, optimized for mobile viewing, enables users to access
content and other pages more easily. Users can immediately use the Search feature to navigate to the content
they require.




                                 Optimized web pages can help users locate information quickly


Optimization for mobile browsers
Minor page modifications can improve browsing on a mobile device. These page changes mean that it is not
necessary to maintain two sets of code (for mobile devices and for desktop computers) for the same page. For
web pages that are created dynamically, the page itself can serve up the content according to the browser type.
The browser type is identified from the header in the HTTP request, as in the following example.
           if ( request.getHeader( “USER-AGENT” ) .indexOf( “BlackBerry” ) !=-1 ) {…}


Default settings
In the default configuration for the BlackBerry Browser, style sheets, HTML tables, and JavaScript™ are turned off
because they often slow page load times. If they are not turned on, users who want to use these features must
turn them on.




© 2006 Research In Motion Limited. All Rights Reserved.        www.blackberry.com
8                                                                       Optimizing Content for the BlackBerry Browser



Content
Design the content so that users can quickly find the information they require. If a topic is lengthy or detailed,
separate the content into logical sections, and provide navigation links.




                                                          Focus on content

Images
BlackBerry Device Software includes standard support for images, including SVG content and animation vector
graphics. When you plan to include images on your web pages, keep the following points in mind:
•    users can specify whether images are loaded. When you use images, make sure that they are not critical to
     your content. Include meaningful alternative text for all your images.
•    the browser shrinks images to fit the width of the screen. As a result, crop images so that they are
     meaningful when they are viewed in a mobile browser.
•    Text in graphics can become illegible. Text that is embedded in graphics is reduced proportionately with
     images and can become illegible in a mobile browser.
Image size examples
Compare the following screen examples, which display the same photograph in different ways. Even without the
text, the photograph shown in the first set of illustrations is difficult to see. The rich detail loses its context when
the image is reduced to fit the mobile screen. As a result, the information that the image was meant to convey is
lost or is less meaningful than it might have been in an implementation that was designed for display on a
mobile device screen.




© 2006 Research In Motion Limited. All Rights Reserved.          www.blackberry.com
Optimizing Content for the BlackBerry Browser                                                                  9




                                     Even without the text, this photograph is difficult to see


The following examples show a cropped image in the browser. The cropped image retains the important
information and optimizes the value of the photograph. Users can see the image and understand the image
context.




            Cropped images provide meaningful information in both desktop computer and mobile computer users




© 2006 Research In Motion Limited. All Rights Reserved.          www.blackberry.com
10                                                                     Optimizing Content for the BlackBerry Browser



Tables
Use tables with care in web pages that you are designing for mobile browsing. The following example shows a
web site page that uses a table to compare mobile devices. The BlackBerry Browser displays the table, but it
wraps the rows to fit the width of the screen. Even though all the data is there, a user can have difficulty
understanding which table cells belong in which column. As a result, users can have a difficult time determining
which features go with which device in the table.




                                    Resized tables can cause confusion for mobile device users




© 2006 Research In Motion Limited. All Rights Reserved.         www.blackberry.com
Optimizing Content for the BlackBerry Browser                                                                     11


Table guidelines
Consider the following guidelines when you are building tables to display data on a mobile device:
•    Use line breaks or vertical lines to separate data columns instead of using tables.
•    Explicitly control table width so that rows do not split across multiple lines.
•    Do not use tables to lay out a page visually.
•    Use horizontal rule <hr> tags to separate sections of content.
•    Replace wide tables with small, displayable tables and a <select> list to choose the columns.
Tables for the mobile device screen
The following mobile device screen examples show how you can optimize a web page to display tables at the
same width as the screen. The table requires only two columns. When a user makes a selection from the drop-
down list, the displayed device and the description in the table change. It is easy for a user to switch between the
choices and compare items.




                                         Drop-down lists can help users filter information

Style sheets
When a page is rendered using style sheets, the BlackBerry device downloads the style sheet and parses it to
display the contents of the page. Before you publish a web page, remove old or unused styles from your style
sheet. A style sheet with redundant or obsolete styles can increase the time that the browser takes to render the
web page.

JavaScript use
When you develop a web page, keep in mind that the BlackBerry Browser is designed to support JavaScript, but
some browsers do not support it. As well, some users choose to not allow JavaScript on their devices because of




© 2006 Research In Motion Limited. All Rights Reserved.          www.blackberry.com
12                                                                       Optimizing Content for the BlackBerry Browser



the additional time that the browser can require to download, process, and render a page with JavaScript. As a
result, when you create web pages, make sure that they still function without JavaScript.
Consult the BlackBerry Application Developer Guide (Volume 1: Fundamentals) for information and examples to
help you write efficient code.



Related resources
 Resource                                        Information

 BlackBerry Application Developer                •    creating custom BlackBerry device applications
 Guide                                           •    integrating enterprise applications
 BlackBerry Enterprise Server                    •    BlackBerry Enterprise Server™ features
 Feature and Technical Overview
 BlackBerry Enterprise Server System             •    deploying and managing applications
 Administration Guide
 BlackBerry Enterprise Server IT                 •    IT security policies
 Policy Reference Guide
                                                 •    IT commands

 BlackBerry Handheld Browser                     •    BlackBerry Browser, WAP, and Internet Browser gateway
 Feature and Technical Overview                       configurations
                                                 •    browser content and feature support
                                                 •    browser security
                                                 •    deploying applications
                                                 •    troubleshooting
 BlackBerry MDS Studio Getting                   •    making web services available on BlackBerry devices
 Started Guide

 BlackBerry Wireless Handheld                    •    browser interface and features
 Browser Content Developer Guide                 •    designing mobile web content
                                                 •    creating and testing web pages
                                                 •    creating browser push applications
 www.blackberry.com/go/docs                      •    BlackBerry technical documentation




© 2006 Research In Motion Limited. All Rights Reserved.          www.blackberry.com
Part number: SWD_X_RIM(EN)-018.000
© 2006 Research In Motion Limited. All Rights Reserved. The BlackBerry and RIM families of related marks, images, and
symbols are the exclusive properties of Research In Motion Limited. RIM, Research In Motion, BlackBerry, “Always On, Always
Connected” and the “envelope in motion” symbol are registered with the U.S. Patent and Trademark Office and may be
pending or registered in other countries.
Java and JavaScript are either registered trademarks or trademarks of Sun Microsystems, Inc. in the United States or other
countries. All other brands, product names, company names, trademarks and service marks are the properties of their
respective All other brands, product names, company names, trademarks and service marks are the properties of their
respective owners.
The BlackBerry device and/or associated software are protected by copyright, international treaties, and various patents,
including one or more of the following U.S. patents: 6,278,442; 6,271,605; 6,219,694; 6,075,470; 6,073,318; D445,428;
D433,460; D416,256. Other patents are registered or pending in various countries around the world. Visit
www.rim.com/patents.shtml for a current list of RIM (as hereinafter defined) patents.
This document is provided “as is” and Research In Motion Limited and its affiliated companies (“RIM”) assume no
responsibility for any typographical, technical, or other inaccuracies in this document. In order to protect RIM proprietary and
confidential information and/or trade secrets, this document may describe some aspects of RIM technology in generalized
terms. RIM reserves the right to periodically change information that is contained in this document; however, RIM makes no
commitment to provide any such changes, updates, enhancements, or other additions to this document to you in a timely
manner or at all. RIM MAKES NO REPRESENTATIONS, WARRANTIES, CONDITIONS OR COVENANTS, EITHER EXPRESS OR
IMPLIED (INCLUDING WITHOUT LIMITATION, ANY EXPRESS OR IMPLIED WARRANTIES OR CONDITIONS OF FITNESS FOR
A PARTICULAR PURPOSE, NON-INFRINGEMENT, MERCHANTABILITY, DURABILITY, TITLE, OR RELATED TO THE
PERFORMANCE OR NON-PERFORMANCE OF ANY SOFTWARE REFERENCED HEREIN OR PERFORMANCE OF ANY
SERVICES REFERENCED HEREIN). IN CONNECTION WITH YOUR USE OF THIS DOCUMENTATION, NEITHER RIM NOR
THEIR RESPECTIVE DIRECTORS, OFFICERS, EMPLOYEES, OR CONSULTANTS SHALL BE LIABLE TO YOU FOR ANY
DAMAGES WHATSOEVER BE THEY DIRECT, ECONOMIC, COMMERCIAL, SPECIAL, CONSEQUENTIAL, INCIDENTAL,
EXEMPLARY, OR INDIRECT DAMAGES, EVEN IF RIM HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES,
INCLUDING WITHOUT LIMITATION, LOSS OF BUSINESS REVENUE OR EARNINGS, LOST DATA, DAMAGES CAUSED BY
DELAYS, LOST PROFITS, OR A FAILURE TO REALIZE EXPECTED SAVINGS.
This document might contain references to third-party sources of information, hardware or software, products or services
and/or third-party web sites (collectively the “Third-Party Information”). RIM does not control, and is not responsible for, any
Third-Party Information, including, without limitation the content, accuracy, copyright compliance, compatibility,
performance, trustworthiness, legality, decency, links, or any other aspect of Third-Party Information. The inclusion of Third-
Party Information in this document does not imply endorsement by RIM of the Third-Party Information or the third party in
any way. Installation and use of Third-Party Information with RIM’s products and services may require one or more patent,
trademark, or copyright licenses in order to avoid infringement of the intellectual property rights of others. Any dealings with
Third-Party Information, including, without limitation, compliance with applicable licenses and terms and conditions, are
solely between you and the third party. You are solely responsible for determining whether such third-party licenses are
required and are responsible for acquiring any such licenses relating to Third-Party Information. To the extent that such
intellectual property licenses may be required, RIM expressly recommends that you do not install or use Third-Party
Information until all such applicable licenses have been acquired by you or on your behalf. Your use of Third-Party
Information shall be governed by and subject to you agreeing to the terms of the Third-Party Information licenses. Any Third-
Party Information that is provided with RIM’s products and services is provided “as is.” RIM makes no representation,
warranty, or guarantee whatsoever in relation to the Third-Party Information and RIM assumes no liability whatsoever in
relation to the Third-Party Information even if RIM has been advised of the possibility of such damages or can anticipate such
damages.




www.blackberry.com

								
To top