This document provides best practices for developing web apps for Nokia Series 40 phones. It discusses architectural approaches using a proxy server, supported platform services, developer kits and tools, supported web technologies, user experience guidelines, and techniques for image caching, screen orientation, navigation controls, scrolling, task focus, element alignment, icons, SMS and telephone URI schemes, and remote device access.

1. Web Apps Development
Best Practices
Mohamad Iqbal
Nokia Developer Certified Trainer
http://about.me/ciebal
http://nice.or.id/ciebal

2. Architecture
Nokia Browser for
Series 40 Proxy
Server
Nokia Browser for
WWW Series 40 Client
HTML, CSS, Optimised
content (HTML,
(Phone)
Javascript,
Images, XML, CSS,
JSON, etc compressed
images)

3. Platform Services
• Messaging
• Location
• Telephone

4. Developer Kit
• Nokia Web Tools 1.0
• Nokia Web Tools 1.5
• Nokia Web Tools 2.0 (beta)

5. Comparison Nokia Web Tools
Feature Version 1.0 Version 1.5 Version 2.0
Symbian Applications Supported
Efficient proxy based web apps Supported Supported Supported
MWL support Supported Supported Supported
Modern UI with floating icons Supported Supported
Geolocation API support Supported Supported
Web app image caching Supported Supported
SMS URI support Supported Supported
Full Touch Simulator Supported

6. Web Technologies
• HTML 4.0
• CSS 2.1
• Javascript 1.8
• DOM Level 1 and 2

7. Series 40 Web App UX
Guidelines

8. Screen Orientation
320x240 pixels
240x320 pixels

9. Screen Orientation
Full Touch
240x400 pixels

10. Navigation Controls
The app logo should Paging controls should The icon in the top right
always be in the top bar be displayed directly of the header can be
below the app header. contextual.

11. Scrolling

12. Focus on discrete tasks
Start the task Choose a category Choose a sub- Browse the results
category

13. Align elements

14. Use a common set of icons

15. Accommodating Screen
Orientation
if (screen.width > 240) {
document.write('<link rel="stylesheet"
href="../../basicLandscape.css" type="text/css" />');
}
else {
document.write('<link rel="stylesheet"
href="../../basicPortrait.css" type="text/css"/>');
}

16. SMS URI Scheme
<a href="sms:+62812345678">One
number, no body text</a>
<a
href="sms:+62812345678?body=hell
o%20world">One number with body
text</a>

17. SMS URI Scheme

18. Telp URI Scheme
<a href="tel:+62812345678">Call
Me</a>

19. Image Caching
• All static images used in a web app are
included in its .wgt file
• There are no unused images in a web app’s
.wgt file
• All images in a .wgt file are scaled to the size
used by the web app

20. Remote Device Access

21. Thank You!
