SEE 2009: Improving Mobile Web Developer Experience
-
Upload
tasneem-sayeed -
Category
Technology
-
view
1.286 -
download
3
description
Transcript of SEE 2009: Improving Mobile Web Developer Experience
![Page 1: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/1.jpg)
SEE 2009
Improving Mobile Web Developer Experience
Tasneem Sayeed
Technical Lead, Web Tools Platforms
October 27, 2009
![Page 2: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/2.jpg)
Outline
Copyright © 2009 Symbian Foundation. 2
Definition of Mobile Web
Mobile Device Constraints
Mobile Development Challenges
SEE 2009 Widget Demo Walkthrough
Sending AJAX Requests and Retrieving Data
Performance Rules & Mobile Web Development Strategies
Bridging the Mobile Web Tools Gap
Conclusion
![Page 3: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/3.jpg)
Definition of the Mobile Web
Copyright © 2009 Symbian Foundation. 3
“Mobile Web”
W3C pushing the idea of “One Web”
Making the same information and services available
to users irrespective of the device they are using
Does not mean exactly the same information is
available in exactly the same representation across
all devices
The context of mobile use, device capability variations,
bandwidth issues and mobile network capabilities all
affect the representation
Some services and information better suited for and
targeted at particular user contexts
Source: W3C Mobile best practices „One Web‟ page
![Page 4: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/4.jpg)
Mobile Device Constraints
Copyright © 2009 Symbian Foundation. 4
• Screen Size/Resolution
• Keep Layout as simple and fluid as possible
• Keep your page contents all in a single column stacked on top of each other so regardless of screen size/resolution, information simply wraps
• Test with and without CSS and JavaScript
![Page 5: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/5.jpg)
Mobile Device Constraints
Copyright © 2009 Symbian Foundation. 5
• Limited Memory• Limits amount of
processing that can be handled
• Limited battery power• Limits implementations of
JavaScript, Flash and other technologies
• Drains battery• Creates a slower user
experience• Increases the bandwidth
(i.e. can be more costly to download web content)
![Page 6: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/6.jpg)
Mobile Web Development Challenges
Copyright © 2009 Symbian Foundation. 6
![Page 7: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/7.jpg)
Mobile Web Development Challenges
Copyright © 2009 Symbian Foundation. 7
• “Code once, run anywhere” is a foreign concept
• Many browser and device types to accommodate
• Unresolved connectivity and caching issues to contend
• On our 5th Generation of HTML with WML, XHTML, and
cHTML still alive
• Constellation of mobile platforms
• Symbian (Symbian OS-based)
• Java ME
• BREW
• Windows Mobile
• Blackberry
• iPhone (Objective-C based)
• Linux-based Android
• Palm Web OS
• and more on the way!
![Page 8: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/8.jpg)
Web Technologies for Symbian
Copyright © 2009 Symbian Foundation. 8
![Page 9: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/9.jpg)
Web Technologies
Copyright © 2009 Symbian Foundation. 9
• Web Runtime (WRT) for S60 devices
• A set of components based on the WebKit architecture
that enables you to apply your skills at creating web
content – to create full mobile web applications that are
simple, powerful and optimized for mobile devices
• Widget development is simplified with plug-ins for Aptana
Studio, Adobe Dreamweaver, and Microsoft Visual Studio
• The plug-ins enable developers to create, edit, test, package
and deploy widgets all from within their web development
tool of their choice
For more information::
http://www.forum.nokia.com/Technology_Topics/Web_Technologies/Web_Runtime/ /
See Mobile 2.0 Developer Talk on “Developing Web Runtime Widgets with Aptana”
![Page 10: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/10.jpg)
SEE 2009 Demo Walkthrough
Copyright © 2009 Symbian Foundation. 10
Demo source code based on SEE 2009 Widget developed by Ivan Litovski, Symbian Foundation
![Page 11: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/11.jpg)
SEE 2009 Widget Demo – index.html
Copyright © 2009 Symbian Foundation. 11
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
<script type="text/javascript“
src="WRTKit/WRTKit.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript"
src="autoupdate.js"></script>
<script type="text/javascript" src="session.js"></script>
<script type="text/javascript" src="schedule.js"></script>
<script type="text/javascript" src="twitter.js"></script>
<link rel="stylesheet" href="WRTKit/Resources/UI.css“
id="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body onload="javascript:init();"
onShow="javascript:SetViewMode();“
onResize="javascript:SetViewMode();" >
<div id="main" style="margin: 0px 0px; padding: 0px 0px;
border: none; overflow: hidden;"></div>
<div id="mini" style="margin: 0px 0px; padding: 0px 0px;
border: none; overflow: hidden;"></div>
</body>
![Page 12: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/12.jpg)
SEE 2009 Widget Demo – main.js
Copyright © 2009 Symbian Foundation. 12
function init() {
if (window.widget) {
widget.setNavigationEnabled(false);
menu.showSoftkeys();
var updateMenuItem = new MenuItem("Check for updates", 0);
updateMenuItem.onSelect = CheckForUpdates;
menu.append(updateMenuItem);
// wrt bug fix
setInterval("if ( IsHSViewMode() ) UpdateMiniView();", 30000);
}
// create UI manager
uiManager = new UIManager(document.getElementById("main"));
:
:
twitterView = new ListView(null,
"<img style='margin: 0px 0px; padding: 0px 0px; border: none‘ src='home.png'>");
schedule = new Schedule();
schedule.Init(scheduleFile, function(event){
ShowMainView();
});
if ( !window.widget ) {
// for firefox / firebug testing
CheckForUpdates();
}
}
![Page 13: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/13.jpg)
SEE 2009 Widget Demo – main.js
Copyright © 2009 Symbian Foundation. 13
// Called when the data is loaded
function ShowMainView(){
if (mainView == null) {
UpdateMiniView();
mainView = new ListView(null, header);
var currentSessions = schedule.GetCurrentSessions();
if (currentSessions != null) {
// todo
}
:
:
twitterView.previousView = mainView;
var twitterTitle = new NavigationButton(null, "tweetz-icon.png",
"<img src='tweetz.png' border=0>");
twitterTitle.addEventListener("ActionPerformed", function(event){
if ( twitter == null ) {
twitter = new Twitter(twitterView);
}
twitter.Update(10);
twitterView.show();
});
mainView.addControl(twitterTitle);
//twitter = new Twitter(mainView);
//twitter.Update(10);
mainView.previousView = null;
}
mainView.show();
}
![Page 14: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/14.jpg)
Sending AJAX Requests and
Retrieving Data using Nokia WRT
Copyright © 2009 Symbian Foundation. 14
![Page 15: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/15.jpg)
Update Twitter Status using WRT
Copyright © 2009 Symbian Foundation. 15
Twitter.prototype.Update = function(numToShow){
this.numToShow = numToShow;
if ( this.buttons == null ) {
// add the separator
var separator = new NavigationButton(null, "tweetz-icon.png",
"<img src='tweetz.png' border=0>");
separator.setEnabled(false);
this.parentView.addControl(separator);
// create buttons
this.buttons = new Array();
for( var i = 0 ; i < this.numToShow; i++ ) {
var button = new NavigationButton("twitter_button_"+i,
null , "");
this.parentView.addControl(button);
this.buttons.push(button);
}
this.buttons[0].setText("Loading twitter feed...");
}
![Page 16: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/16.jpg)
Sending AJAX Requests using Twitter API
Copyright © 2009 Symbian Foundation. 16
// Twitter API for getting a user’s RSS feed
var twitterurl =
"http://twitter.com/statuses/user_timeline/TwitMyMobile.rss";
// Get the rss feed
// Prepare for asynchronous download
this.http = new Ajax();
// true means asynchronous request
this.http.open("GET", twitterurl , true);
// When the AJAX request is done, it will call self.DoUpdate()
this.http.onreadystatechange = function()
{ self.DoUpdate(); };
// send the AJAX request
this.http.send(null);
![Page 17: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/17.jpg)
Parsing the RSS Data: DoUpdate()
Copyright © 2009 Symbian Foundation. 17
Twitter.prototype.DoUpdate = function(){
if (this.http.readyState == 4) {
try {
// Get parsed Doc
var xmlDoc = this.http.responseXML;
if (xmlDoc == null) {
// if the content type is not set correctly,
// we get the response as text
var xmlparser = new DOMParser();
xmlDoc =
xmlparser.parseFromString(this.http.responseText,
"text/xml");
}
var itemElements =
xmlDoc.getElementsByTagName("item");
var loopEnd = Math.min(this.numToShow,
itemElements.length);
// traverse elements and create buttons
for (var i = 0; i < loopEnd; i++) {
// iterate through child nodes of this item
// and gather tweets
var title = null;
var date = null;
![Page 18: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/18.jpg)
Parsing the RSS Data: DoUpdate()
Copyright © 2009 Symbian Foundation. 18
node = itemElements[i].firstChild;
while (node != null) {
if (node.nodeType == Node.ELEMENT_NODE){
if (node.nodeName == "title") {
// item title
title = getTextOfNode(node);
}
else if (node.nodeName == "pubDate" ||
node.nodeName == "dc:date") {
// item publishing date
date = getTextOfNode(node);
}
} end while
node = node.nextSibling;
} // end for
this.buttons[i].setText("<font size=0.6em><i>" +
date + "</i> " + title + "</font>");
this.buttons[i].setImage("tweet.png");
} // end if (xmldoc == null)
} // end try
![Page 19: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/19.jpg)
Parsing the RSS Data: DoUpdate()
Copyright © 2009 Symbian Foundation. 19
catch (x) {
this.buttons[0].setText(
"<font size=0.6em>Uh-Oh! Tweetz not tweeting
right now.</font>");
for (var i = 0; i < this.numToShow; i++) {
this.buttons[i].setText("");
this.buttons[i].setImage(null);
} // end for
} // end catch
} // if (this.http.readyState == 4) {
}
![Page 20: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/20.jpg)
Parsing the data: getTextofNode()
Copyright © 2009 Symbian Foundation. 20
// Returns the text of a node.
function getTextOfNode(node) {
var buf = "";
// iterate through all child elements and
// collect all text to the buffer
var child = node.firstChild;
while (child != null) {
if (child.nodeType == Node.TEXT_NODE ||
child.nodeType == Node.CDATA_SECTION_NODE)
{
// append text to buffer
if (buf != "") {
buf += " ";
}
buf += child.nodeValue;
}
child = child.nextSibling;
}
// make link if there is a url
var ind = buf.indexOf("http://");
var endind = buf.indexOf(" ", ind);
if ( ind != -1 ) {
var tmp = buf.substring(0,ind);
var url = "";
![Page 21: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/21.jpg)
Parsing the data: getTextofNode()
Copyright © 2009 Symbian Foundation. 21
if ( endind == -1 ) {
url = buf.substring(ind);
} else {
url = buf.substring(ind, endind);
}
tmp += "<div class=\"FeedItemLink\">";
tmp += "<a href=\"JavaScript:void(0)\"
onclick=\"openURL('" + url + "');
return false;\">";
tmp += url + "</a></div>";
if ( endind != -1 ) {
tmp += buf.substring(endind);
}
buf = tmp;
}
return buf;
}
![Page 22: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/22.jpg)
Performance Rules
Copyright © 2009 Symbian Foundation. 22
![Page 23: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/23.jpg)
14 Performance Rules (Yahoo)
Copyright © 2009 Symbian Foundation. 23
1. Make Fewer HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires Header (or Cache-control)
4. GZip Components
5. Put CSS (Stylesheets) at the Top
6. Move Scripts to the Bottom (inline too)
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. Minify JavaScript and CSS (inline too) CSS
11. Avoid Redirects
12. Remove Duplicate Scripts
13. Configure ETags
14. Make AJAX Cacheable
Source: http://developer.yahoo.com/performance/rules.html
server
server
server
CSS
CSS
javascript
Javascript
content
Javascript
content
Javascript
sserver
content
content
CSS
![Page 24: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/24.jpg)
Performance Rules: Make Fewer HTTP Requests
Copyright © 2009 Symbian Foundation. 24
• Less components = fast page
• HTTP Request overhead
• Combine scripts
• Combine CSS stylesheets
• Combine images into CSS sprites
![Page 25: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/25.jpg)
Performance Rules: GZip Components
Copyright © 2009 Symbian Foundation. 25
• When you send zipped content over the internet, the browser unpacks it
• Modern browsers understand compressed content
• Request headerAccept-Encoding:gzip,deflate
• Response headerContent-Encoding: gzip
• All text components should be sent gzipped: html (php), js, css, xml, txt…
![Page 26: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/26.jpg)
Performance Rules: Put CSS at the Top
Copyright © 2009 Symbian Foundation. 26
• Firefox and IE will not render anything until the last piece of CSS reaches the wire
• Place stylesheets as early as possible in the document<head>
<title>Your page here</title>
<link href=“styles.css” …>
</head>
<body>
<!– content -->
</body>
![Page 27: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/27.jpg)
Performance Rules: Move Scripts to the Bottom
(inline too)
Copyright © 2009 Symbian Foundation. 27
• Scripts block downloads• Since the script can do
location.href or document.write at any time, browser blocks rather than downloading possibly useless components
• Inline scripts too<body>
<!– content -->
<script src=“script.js” …/>
</body>
</html>
![Page 28: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/28.jpg)
Performance Rules: Avoid CSS Expressions
Copyright © 2009 Symbian Foundation. 28
CSS expression
#content {
position: absolute;
left: expression(document.body.offsetWidth + „px‟);
}
• In IE, this is the only way to have Javascript in CSS
• CSS expressions tend to get executed more often than was intended, think about onmousemove
• Smart expressions overwrite themselves
![Page 29: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/29.jpg)
Performance Rules:
Make Javascript and CSS External
Copyright © 2009 Symbian Foundation. 29
• Helps with caching, “never expire” policy
• Share with other pages
• However, this is two more HTTP requests
• May want to consider inlining for homepages
![Page 30: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/30.jpg)
Performance Rules: Minify JavaScript and CSS (inline
too)
Copyright © 2009 Symbian Foundation. 30
• Minify, but still Gzip• JSMin (Written in Javascript, but has a PHP port)• YUI compressor – minifies CSS too• Inline styles and scripts should also be minified
• Minification
• Removes unnecessary characters from code to reduce its size, thus improving load times
• When JS/CSS code is minified, all comments are usually removed as well as unnecessary “white space” characters like <space>, <newline>, and <tab>
• With respect to JavaScript, this improves load time performance because the size of the file downloaded is often significantly reduced
• Two Popular Tools for Minifying JavaScript code are:
• JSMin
• YUI Compressor
To learn more on Minification tools, see MinifyJS.com and MinifyCSS.com
![Page 31: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/31.jpg)
Performance Rules
Copyright © 2009 Symbian Foundation. 31
• Avoid Redirects
• A wasted HTTP Request
• Causes a Restart
• Remove Duplicate Scripts
• IE may decide to download them again
![Page 32: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/32.jpg)
Performance Rules: Make AJAX Cacheable
Copyright © 2009 Symbian Foundation. 32
• Content returned from XMLHttpRequestis like any other component
• Returned content must be Gzipped
• Could be cached• Cache-control: max-age=?
![Page 33: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/33.jpg)
Newer Performance Rules
Copyright © 2009 Symbian Foundation. 33
![Page 34: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/34.jpg)
20 New Performance Rules for Faster Web Pages (Yahoo)
Copyright © 2009 Symbian Foundation. 34
1. Flush the buffer early2. Use GET for AJAX requests3. Post-load components4. Preload components5. Reduce the number of DOM elements6. Split components across domains7. Minimize the number of iframes8. No 404s9. Reduce cookie size10. Use cookie-free domains for components11. Minimize DOM access12. Develop smart event handlers13. Choose <link> over @import14. Avoid filters 15. Optimize images16. Optimize CSS sprites17. Don‟t scale images in HTML18. Make favicon.ico small and cacheable19. Keep components under 25K20. Pack components into a multipart document
Source: http://developer.yahoo.com/performance/rules.html
![Page 35: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/35.jpg)
Performance Rules:Use GET for AJAX Requests
Copyright © 2009 Symbian Foundation. 35
• GET is for retrieving data• POST is a two-step process (send headers, send data)• GET request is one TCP packet, except in the case you
have a lot of cookies• Max URL length is 2K (because of IE)• POST without actually posting data is the same as GET
Source: http://developer.yahoo.com/performance/rules.html
Yahoo!Mail Research)
![Page 36: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/36.jpg)
Performance Rules: Post-Load Components
Copyright © 2009 Symbian Foundation. 36
• Determine the components absolutely required initially to render the page.
• Rest of the components (i.e. drag and drop, animations, hidden content, images below the fold) can all wait
• JavaScript is ideal candidate for splitting
Source: http://developer.yahoo.com/performance/rules.htmlYUI Image LoaderYUI Get Utility
![Page 37: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/37.jpg)
Performance Rules: Minimize DOM Access
Copyright © 2009 Symbian Foundation. 37
• DOM access is the slowest
• Cache
• Update nodes “offline” and then add them to the tree
• Avoid fixing layout with JavaScript
Source: http://developer.yahoo.com/performance/rules.html
![Page 38: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/38.jpg)
Performance Rules:Optimize Images
Copyright © 2009 Symbian Foundation. 38
• GIF – don‟t use a bigger palette than you will need
• Use PNGs instead of GIFs
• Use pngcrush tool (or optipng or pngoptimizer)
• Remove gamma chunks which helps with cross-browser colors
• Strip comments
• jpegtran – lossless JPEG operations can be used to
optimize and remove comments
![Page 39: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/39.jpg)
Performance Rules: Do not scale images in HTML
Copyright © 2009 Symbian Foundation. 39
• Scaling images in HTML downloads unnecessary bytes
• If you need
<img width=“200” height=“200” src=“myPic.jpg” />
• Better to just have myPic.jpg 200x200 not 1000x1000
![Page 40: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/40.jpg)
Performance Rules: Keep components under 25K
Copyright © 2009 Symbian Foundation. 40
• Because mobile phones may generally not cache them
• Uncompressed size under 25K
• Minify HTML in addition to JavaScript and CSS
![Page 41: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/41.jpg)
Performance Rules:
Pack components into a multipart document
Copyright © 2009 Symbian Foundation. 41
• For UAs that support it
• For example,
• Email with attachments
• MMS
![Page 42: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/42.jpg)
Bridging the Mobile Web Tools Gap
Copyright © 2009 Symbian Foundation. 42
• Develop an Eclipse Plug-in for Web Development on
Symbian to support Web Runtimes
• Open Source Eclipse Plug-in Alpha with the below
features to enable tool developer collaboration by
December 2009
• Based on JSDT (part of Eclipse Web Tools Project)
• Incremental Project Builder
• Creates built state based on project contents,
and keeps it synchronized to project changes
• Integrated Debugger with basic debugging capabilities
![Page 43: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/43.jpg)
Join the Symbian Community
Copyright © 2009 Symbian Foundation. 43
Silicon Valley Symbian Programming SIG
http://www.meetup.com/Silicon-Valley-Symbian-Developers-Meetup/
Symbian SIG Mailing List
Symbian Developer Group
http://developer.symbian.org
Symbian Exchange & Exposition (SEE 2009) (Oct 27-28), London, UK
http://www.see2009.org/
![Page 44: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/44.jpg)
Summary
Copyright © 2009 Symbian Foundation. 44
• Make the experience feel like a native application
• Take advantage of the enhanced features
• Don‟t simply release a hybrid version of the mobile web site
• Optimize performance
• Collaborate with the developer community to further enhance the mobile Web development experience!
![Page 45: SEE 2009: Improving Mobile Web Developer Experience](https://reader033.fdocuments.in/reader033/viewer/2022052820/549a3c13b479596f4d8b5886/html5/thumbnails/45.jpg)
More Information
Copyright © 2009 Symbian Foundation.
My Blog
http://mymobilecorner.blogspot.com
Follow me on Twitter
http://www.twitter.com/twitmymobile
Symbian Developer Group
http://developer.symbian.org