Wrong confirmation ID

Email
Favorite
Favorited ×
Download
Embed
Private Content
Copy and paste this code into your blog or website Copy Customize… Close
We have emailed the verification/download link to "".
Login to your email and click the link to download the file directly.

To request the link at a different email address, update it here. Close
Validation messages. Success message. Fail message.

Check your bulk/spam folders if you can't find our mail.

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

+ Follow

Mobile Web Development Tips and Tricks

by J Schwan on Feb 26, 2010

8,475 views

A quick list of context, performance, design and security tips for building mobile web applications, brought to you by Solstice Consulting, a pioneer in enterprise mobile web development.

More…

A quick list of context, performance, design and security tips for building mobile web applications, brought to you by Solstice Consulting, a pioneer in enterprise mobile web development.

Less

14 Embeds 695

http://nundefined.tistory.com	252
http://www.slideshare.net	163
http://blogs.solstice-consulting.com	137
http://blog.nundefined.com	60
http://paper.li	34
http://rixtech.cube.lv	17
http://kods.cube.lv	14
http://feeds2.feedburner.com	7
http://rix.cube.lv	4
http://us-w1.rockmelt.com	3
http://twitter.com	1
http://www.plaxo.com	1
http://www.tumblr.com	1
https://twimg0-a.akamaihd.net	1

More...

Statistics

Favorites: 32
Downloads: 0
Comments: 3
Embed Views: 695
Views on SlideShare: 7,780
Total Views: 8,475

1–3 of 3 previous next Post a comment

Ashish Balmiki Thanks for sharing this information and resources its really help full for me with the help of this we can improve our designs and development.
Web Design Company India 8 months ago Reply
Are you sure you want to Yes No
Ahmed Macaulay , Head, Product Enhancement and Maintenance at price and networks limited This is an awesome work. precise and concise. But why is it not downloadable? 11 months ago Reply
Are you sure you want to Yes No
ductung1979 Can I download this file 2 years ago Reply
Are you sure you want to Yes No

Last year, more than 63 million people in the United States accessed the Internet from a mobile device. It’s forecast that by 2013 there will be more than 1.7 billion mobile Internet users worldwide. With those kinds of numbers, it’s imperative that web designers and developers learn optimal development and design practices for mobile devices.
1. The device.The device can be an iPod, PSP or more commonly a mobile phone. Compared to other device classes, it has some unique properties:Extremely personalAlways in your pocket.Always turned onAlways connectedIdentifiableLocatable (positioning)Content creator tool2. The userThis is about the person using the device and how the device is used.Not in front of a PC, but may be a "multi communicator" by using the mobile phone while watching TV and listening to the radioOn the run, or at least mobileUses the device in short time framesbut in return frequent usageSkeptic: "This is probably expensive"3. The technical stuffAnd last the technical stuff that glues the user, device and mobile service together.Qualities of telecom networksKnowledge about telecom services (billing, identification, positioning services, gateways etc.)General Internet knowledge.hard technical facts and limitations, such as screen size.
The type of content relevant to the desktop user may not be as applicable to the user on-the-go. Visitors on a mobile device aren't interested in browsing. Forget the notion of the "web browser" and think "web finder". Page layout, information architecture, and content syntax are the pillars of keeping a mobile website relevant and accessible for the mobile user. – KM
What is the mobile site visitor's goal? Understanding who the visitor is, why they are coming to the site, and the context in which they are arriving at the site is critical. Even the best mobile user experience fails if the content and context aren't spot on. For example, a bank cusomter accessing their bank account from a mobile device are probably not interested in learning about new product offerings. But rather, quickly locating a balance, performing a funds transfer, or paying a bill on-line. Keeping the content layout goal oriented and specific to the goals of a mobile use
Minimal navigation (preferably a top nav bar) is a best practice, so is keeping content as accessible with as few clicks as possible. Don't bury content too deep in the site. Keeping in mind that the mobile visitor has a very specific goal (i.e. an address, account information,traffic reports) put that content up front and make it easy to navigate. On the other hand, a user presented with a clear goal and intelligent ways to reach it, may tolerate latency issues and the time taken to reach the goal. This is best done by setting user expectations. Every link should use clear labels to communicate to the user what to expect on the resulting page, thereby lowering the risk of click disappointment.
Limit categories as much possible: Users become increasingly disoriented as they go deeper into a site. Prioritize links by activity or popularity: This is often referred to as “deck placement.” Sorting links in order by frequency of access ensures that the most sought-after content appears first on the list.
Keep the site entry point URIs (Universal Resource Identifier) short. Typing a long string can be cumbersome on a mobile device. And it's important to consider that entry points may be from an email or text received on the mobile device.
GeoLocation – if it’s there, use it (HTML5)11.2 You agree that Google, in its sole discretion, may use your trade names, trademarks, service marks, logos, domain names and other distinctive brand features in presentations, marketing materials, customer lists, financial reports and Web site listings (including links to your website) for the purpose of advertising or publicizing your use of the Services. Phonegap –Geolocation, sound, vibration, accelerometer, contacts
Limit user input requirements as input mechanisms on mobile devices can be small and cumbersome to use. Tabbing and creating pre-selected values are best. Where possible avoid free-text fields. Prepop with default data,
Content files that are smaller in size will transmit faster, and removing extra white space in content is a quick way to slim down the content. The more graphically rich and content intense the longer it may take to render the site (and quite possibly,the more it will cost the end-user).
Cookies are a standard method for storing identifying data on the client to personalize the user experience on a site. Cookies present a dual problem in mobile web applications, however. For one, every server request contains the cookie information and thus results in extra overhead in the traffic, reducing performance. Also, many mobile devices don't accept cookies, so you can't rely on support for them across mobile devices.DOM Storage was part of HTML 5, now it’s own specification. It is supported by Internet Explorer 8, Mozilla-based browsers (e.g., Firefox 2+, officially from 3.5)[2], Safari 4, Google Chrome 4, and Opera 10.50. One answer for this is the new HTML5 and its support for DOM storage. DOM storage offers some key advantages over cookies for mobile web applications; chief among them in terms of speed is that DOM data is not transmitted to the web server with every request. This reduces the additional traffic and increases speed. In addition, you can store much more data in DOM storage (5MB-10MB depending on the browser) than in a cookie. And unlike cookies, servers cannot access DOM storage at will; traffic flow and access in both directions is controlled by the client.
Redirects (sending a user to another server to pull in additional information) can be flat-out brutal in mobile web applications. When rendering a page, having a redirect between the client and the HTML file will cause delays in downloading the page and rendering elements until the HTML document has arrived. Some redirects may be necessary, for example, in account authentication, but other redirects can happen unintentionally and you should be vigilantly watching for these cases. Some examples to avoid:Missing Trailing Slash – Failing to have a trailing slash in a URL will cause an unintentional redirect to the directory, assuming the URL ends with a directory name. For instance, http://mywebsite.com/somedir will cause a redirect to http://mywebsite.com/somedir/. Conditional Redirects – This is redirecting a user based on certain conditions (browser used, etc.) to a different section of a website, or a different site altogether. It's easier to develop in this manner, but again, it adds overhead and time for the user to wait.
This is a general guideline to minimize network traffic by reducing round trips, and includes practices such as:Batching data requests to send in a single batchCombining static images into a single image by utilizing sprites. This is useful for images that don't often change.
CSS at the top – allows for page to load progressively, Scripts at the bottom so they don’t block parallel downloadsCache Ajax data – caching this data wherever possible will reduce the response time a user might have to otherwise endure waiting for that asynchronous data request to roundtrip over the mobile network.Use Cache Control Headers. Using cache information can reduce the need to reload resources such as images and stylesheets, thus reducing download times and costs. Caching is particularly important for mobile devices due to the high network latencies typically experienced on mobile networks.
CSS at the top – allows for page to load progressively, Scripts at the bottom so they don’t block parallel downloadsCache Ajax data – caching this data wherever possible will reduce the response time a user might have to otherwise endure waiting for that asynchronous data request to roundtrip over the mobile network.Use Cache Control Headers. Using cache information can reduce the need to reload resources such as images and stylesheets, thus reducing download times and costs. Caching is particularly important for mobile devices due to the high network latencies typically experienced on mobile networks.
Asynchronous loading for pagination. ORPreload may look like the opposite of post-load, but it actually has a different goal. By preloading components you can take advantage of the time the browser is idle and request components (like images, styles and scripts) you'll need in the future. This way when the user visits the next page, you could have most of the components already in the cache and your page will load much faster for the user. There are actually several types of preloading: Unconditional preload - as soon as onload fires, you go ahead and fetch some extra components. Check google.com for an example of how a sprite image is requested onload. This sprite image is not needed on the google.com homepage, but it is needed on the consecutive search result page.Conditional preload - based on a user action you make an educated guess where the user is headed next and preload accordingly. On search.yahoo.com you can see how some extra components are requested after you start typing in the input box.Anticipated preload - preload in advance before launching a redesign. It often happens after a redesign that you hear: "The new site is cool, but it's slower than before". Part of the problem could be that the users were visiting your old site with a full cache, but the new one is always an empty cache experience. You can mitigate this side effect by preloading some components before you even launched the redesign. Your old site can use the time the browser is idle and request images and scripts that will be used by the new site
Keep components under 25KThis restriction is related to the fact that iPhone won't cache components bigger than 25K. Note that this is the uncompressed size. This is where minification is important because gzip alone may not be sufficient.
This format is popular within the JavaScript community and is used for serialization and transmitting data over a network connection.This format is often times used as a subset of the JavaScript programming language, which is where the security concerns arise. JavaScript utilizes a built in eval() function to parse JSON formatted data. This is a common practice among many developers today, especially those that are just starting off in the world of programming.A new function, parseJSON(), has been proposed as a safer alternative to eval, as it is specifically intended to process JSON data and not JavaScript. It was to be included in the Fourth Edition of the ECMAScript standard,[7] though it is available now as a JavaScript library at http://www.JSON.org/json2.js and will be in the Fifth Edition of ECMAScript.[citation ne
’s important that your users are aware of all of the asynchronous server-side or Internet based functions that your mobile application performs whether they’re up front and in your face, or behind the scenes. This can often be symbolized by a spinning wheel in the corner of the app. And because these actions may have access to very sensitive user data, it’s important to provide the user with options to control these actions. Some of these “behind the scene” activities may have an impact on the user’s network access. This can be in the form of data charges or battery life. It’s also important to notify the user when their personal or device information is being utilized by a mobile application. This notification should appear as soon as the user enters your mobile application.
And finally, because mobile devices are ultimately handheld devices that make information available anywhere, the use of automatic sign on is strongly encouraged when developing mobile applications. As a user, if I have to provide my user credentials when utilizing your application, the last thing I want go through is having to type my credentials on a dinky little mobile device upon each visit. Having the ability to “be remembered” is a common feature within the mobile application world. However, ensuring that the credentials are encrypted or stored on a secure token is the right way to allow automatic sign on.Also blended security models, remembers me to view data, need to login to perform transactions.
The iPhone is 320 pixels wide by 480 pixels high.Many Nokia N-Series devices are 240 pixels wide by 320 pixels high.Newer devices often support a landscape mode where the width and height are spontaneously reversed.Older (yet still popular) Nokia devices have displays ranging from 176 by 208 pixels up to 352 by 416 pixels.Blackberry screen resolutions range anywhere from 160 x 160 pixels all the way up to 324 x 352 pixels.As we discovered earlier, while there may be thousands of device models, the diversity isn't as bad as it may have first appeared. In fact, it's entirely possible to group many devices with similar screen widths together and to end up with five distinct device screen width groupings:tiny: 84, 96, 101, 128, 130, 132small: 160, 176medium: 208, 220, 240large: 320, 360, 480+desktop: 800+Use MVC for different views for the different group types if you need.
For years, designers have primarily been creating visuals for large desktop devices. Screen sizes averaging 1024 x 768 pixels have become the norm and although physical display sizes vary; the overall dimensions typically result in a pixel density of about 85 ppi(pixels-per-inch). Lately however, the display landscape has begun to change;'Netbooks' such as the Asus Eee PC 900 have displays in the range of 9" diagonal with a resolutions around 1024 x 600 pixels giving them pixel densities of about 133 ppi.The Apple iPhone has a screen resolution of 320 x 480 pixels which when combined with its 3.6" diagonal display results in a pixel density of 160 ppi.The E60 from Nokia has a screen resolution of 416 x352 pixels packed into a tiny 2.2" diagonal display giving it a whopping pixel density of over 240 ppi!
“Good interaction design focuses on what people want to know, do and feel”- Stephen P. Anderson· Don't skimp on the amount of information on pages. Sure, it's a mobile device, sure it's a small screen, but if the information is relevant and in a continuous stream, scrolling is much less painful than loading a new page. · Provide a way to access the full version of the site. Mobile versions are great, and by design don't have a full feature set. Sometimes it's worth the pain of loading up a full version of a site on the move. The option should always be there.
· Use HTML validators and Ready.mobi to ensure your code and site are standards compliant
Many smartphone browsers scale Web pages to a wide viewport width, one appropriate for displaying desktop-optimized markup. These browsers allow the user to zoom in and out of scaled Web pages. For example, Opera Mobile uses a default viewport width of 850 pixels, and the iPhone uses a default width of 980 pixels. Essentially the issue was with the device scaling the page inappropriately. It’s like the same issue we had with the Palm, but it was viewing the page as magnified from the desired size.
Viewport: There is a height attribute but I don’t bother using it since we aren’t concerned about vertical scrolling as much.Mobile optimized - We have to put this in, because the default settiViewport META directiveExample ValueDescriptionwidth width=320width=device-width Logical width of the viewport, in pixels. The special device-width value indicates that the viewport height should be the screen width of the device. height height=480height=device-height Logical height of the viewport, in pixels. The special device-height value indicates that the viewport height should be the screen height of the device. user-scalable user-scalable=no Specifies whether the user can zoom in and out of the viewport, scaling the view of a Web page. Possible values are yes or no.initial-scale initial-scale=2.0 Sets the initial scaling or zoom factor (or multiplier) used for viewing a Web page. A value of 1.0displays an unscaled Web document. maximum-scale maximum-scale=2.5 Sets the user’s maximum limit for scaling or zooming a Web page. Values are numeric and can range from 0.25 to 10.0. The value of this directives is a scaling factor or multiplier applied to the viewport contents. minimum-scale minimum-scale=0.5 Sets the user’s minimum limit for scaling or zooming a Web page. Values are numeric and can range from 0.25 to 10.0. The value of this directives is a scaling factor or multiplier applied to the viewport contents.
1. Define testing scopedevice capabilities, operating system, propietary browsers, carrier network performance - it's difficult to test every aspect thoroughly. Mobile testing is about focusing your efforts. Hone in on your intended audience, do your homework on devices the majority of your end-user base will be using. Build a testing plan around your target audience's device hardware, operating system, browser, and network. Utilize alternatives to native device testing to cover other user populations (i.e. mobile test emulators, see below).2. Test functionality first on a desktopGet the functionality working first then focus on cross device, cross operating system compatibility. Dealing with all the possible issues at once - basic functionality, OS and browser specific graphic design issues - can be time consuming. Keeping your testing focused on functionality first then look and feel and navigation will avoid wasted energy.3. Utilize mobile emulatorsOnce the functionality works as expected, test the user experience on emulators. Emulators exist to test specific operating systems, browsers, and devices. If you aren't familiar, emulators run on your desktop and emulate the mobile OS and mobile browser environment. Here are a few of the most popular: AndroidPalmBlackberryWindows MobileIt's not always a slam dunk installing these so be sure to allocate time for installing all required components and configuration.The W3C also has a great resource for validating the mobile friendliness of a website. As mentioned in my previous blog - 3 C's in Moble Website Design - The World Wide Web Consortium (W3C) is founded on the principles that the web should be accessible to all and on as many devices as possible. To realize this, the W3C body of knowledge has developed technical standards and best practices for the development, design, and content authoring. Simply enter your website URL into the W3C MobileOK checker and the checker validates your site against the mobile best practices as defined by the W3C.4. Test on native devices Finally, execute testing on the native devices, operating systems, and browsers outlined in your testing plan. At this point all functionality issues should be worked out and your testing is focused on user experience and useability on specific devices.The basic principles of desktop application testing apply to the mobile web context as well. A good plan and focused execution will help reduce post-production issues and eliviate end-user frustration.to 10.0. The value of this directives is a scaling factor or multiplier applied to the viewport contents.
1. Define testing scopedevice capabilities, operating system, propietary browsers, carrier network performance - it's difficult to test every aspect thoroughly. Mobile testing is about focusing your efforts. Hone in on your intended audience, do your homework on devices the majority of your end-user base will be using. Build a testing plan around your target audience's device hardware, operating system, browser, and network. Utilize alternatives to native device testing to cover other user populations (i.e. mobile test emulators, see below).2. Test functionality first on a desktopGet the functionality working first then focus on cross device, cross operating system compatibility. Dealing with all the possible issues at once - basic functionality, OS and browser specific graphic design issues - can be time consuming. Keeping your testing focused on functionality first then look and feel and navigation will avoid wasted energy.3. Utilize mobile emulatorsOnce the functionality works as expected, test the user experience on emulators. Emulators exist to test specific operating systems, browsers, and devices. If you aren't familiar, emulators run on your desktop and emulate the mobile OS and mobile browser environment. Here are a few of the most popular: AndroidPalmBlackberryWindows MobileIt's not always a slam dunk installing these so be sure to allocate time for installing all required components and configuration.The W3C also has a great resource for validating the mobile friendliness of a website. As mentioned in my previous blog - 3 C's in Moble Website Design - The World Wide Web Consortium (W3C) is founded on the principles that the web should be accessible to all and on as many devices as possible. To realize this, the W3C body of knowledge has developed technical standards and best practices for the development, design, and content authoring. Simply enter your website URL into the W3C MobileOK checker and the checker validates your site against the mobile best practices as defined by the W3C.4. Test on native devices Finally, execute testing on the native devices, operating systems, and browsers outlined in your testing plan. At this point all functionality issues should be worked out and your testing is focused on user experience and useability on specific devices.The basic principles of desktop application testing apply to the mobile web context as well. A good plan and focused execution will help reduce post-production issues and eliviate end-user frustration.to 10.0. The value of this directives is a scaling factor or multiplier applied to the viewport contents.

32 Favorites

anylzer 2 months ago
Eric Redmond 6 months ago
vinibhat 7 months ago
Alexandr Kot at Lohika 9 months ago
Kuntal Mehta 9 months ago
Matt McLean , Business Owner at Nuikea 1 year ago
kbartrog 1 year ago
AndriusGeo Tags mobile web dev 1 year ago
clawlaw 1 year ago
Pumpa Timon , Software Developer at National Kapodistrian University of Athens 1 year ago