S60 Platform: Designing XHTML Mobile Profile platform Content Version 1.4 May 24, 2005 S60 S60 Platform: Designing XHTML Mobile Profile Content 2 Legal Notice Copyright © 2005 Nokia Corporation. All rights reserved. Nokia and Nokia Connecting People are registered trademarks of Nokia Corporation. Java and all Java-based marks are trademarks or registered trademarks of Sun Microsystems, Inc. Other product and company names mentioned herein may be trademarks or trade names of their respective owners. Disclaimer The information in this document is provided “as is,” with no warranties whatsoever, including any warranty of merchantability, fitness for any particular purpose, or any warranty otherwise arising out of any proposal, specification, or sample. Furthermore, information provided in this document is preliminary, and may be changed substantially prior to final release. This document is provided for informational purposes only. Nokia Corporation disclaims all liability, including liability for infringement of any proprietary rights, relating to implementation of information presented in this document. Nokia Corporation does not warrant or represent that such use will not infringe such rights. Nokia Corporation retains the right to make changes to this specification at any time, without notice. License A license is hereby granted to download and print a copy of this specification for personal use only. No other license to any other intellectual property rights is granted herein. Version 1.4 | May 24, 2005 S60 Platform: Designing XHTML Mobile Profile Content 3 Contents 1. Introduction ......................................................................................................... 7 1.1 S60 mobile browser ........................................................................................................7 1.2 Chapter topics .................................................................................................................7 2. Top guidelines for optimizing mobile XHTML services................................... 8 2.1 Make applications for mobile use....................................................................................8 2.2 Keep user task flow fluent and be reasonable with image use.......................................8 2.3 Make structure easy for novices but don’t forget power users .......................................8 2.4 Provide sufficient information on a page.........................................................................9 2.5 Provide informative feedback for user actions................................................................9 2.6 Minimize amount and size of images..............................................................................9 2.7 Specify image height and width attributes ....................................................................10 2.8 Use tables carefully.......................................................................................................10 2.9 Consider options for adding style definitions ................................................................10 2.10 Remove unnecessary white space and comments inside code ...................................10 2.11 Enable caching of pages using HTTP header directives ..............................................11 2.12 Use Unicode 2.0 character sets for XHTML content ....................................................11 2.13 Use correct MIME types and validated XHTML code ...................................................11 2.14 Use descriptive page titles and element labels.............................................................12 2.15 Perform a usability test..................................................................................................12 3. Tools for developing browsing applications .................................................. 13 3.1 SDKs and IDEs .............................................................................................................13 3.2 Image tools....................................................................................................................13 3.3 W3C tools......................................................................................................................13 3.3.1 HTML/XHTML Validation Tool..............................................................................13 3.3.2 HTML Tidy ............................................................................................................13 3.3.3 CSS Validator .......................................................................................................13 4. Introduction to the user interface .................................................................... 14 4.1 User interface hardware – keys and display.................................................................14 4.1.1 Keys in S60 devices .............................................................................................14 4.1.2 Display areas........................................................................................................15 4.1.3 Layout and basic principles of the display rotation...............................................15 4.2 Scalable UI....................................................................................................................16 5. Basic structure of an XHTML application ....................................................... 17 5.1 XHTML prologue ...........................................................................................................17 5.2 Mandatory XHTML elements ........................................................................................17 5.2.1 Root element, <html> ...........................................................................................17 5.2.2 Head element, <head>.........................................................................................17 Version 1.4 | May 24, 2005 S60 Platform: Designing XHTML Mobile Profile Content 4 5.2.3 Title element, <title> .............................................................................................17 5.2.4 Body element, <body>..........................................................................................17 6. XHTML MP elements ......................................................................................... 19 6.1 Text formatting ..............................................................................................................19 6.1.1 Zooming................................................................................................................20 6.1.2 Paragraph and content alignment ........................................................................20 6.1.3 Line break.............................................................................................................21 6.1.4 Pre element ..........................................................................................................21 6.2 Tables............................................................................................................................21 6.3 Links..............................................................................................................................23 6.4 Access keys ..................................................................................................................24 6.5 XHTML MP input processing ........................................................................................25 6.5.1 Input elements ......................................................................................................25 6.5.2 Select element......................................................................................................27 7. WAP CSS............................................................................................................ 29 7.1 Applying style sheets ....................................................................................................29 7.1.1 External style sheets ............................................................................................29 7.1.2 Style element in document head ..........................................................................29 7.1.3 Inline styles...........................................................................................................29 7.1.4 Cascading rules for style elements ......................................................................29 7.1.5 Global selectors, class attribute ...........................................................................30 7.2 Borders..........................................................................................................................30 7.2.1 Border style ..........................................................................................................30 7.2.2 Border width .........................................................................................................30 7.2.3 Float......................................................................................................................30 7.3 Margin ...........................................................................................................................31 7.4 Padding .........................................................................................................................31 7.5 List style ........................................................................................................................32 7.5.1 List style