My web site has a different mobile version that's suited for iPhone/Android devices. The problem, however, seems to be in the site's performance. It's really slow and heavy, even though I'm not loading any images.
On the other hand, when I use Gmail's or YouTube's mobile version, they're so fast they almost perform like a native mobile application.
How do they do that?
Your help is much appreciated :)
See my comment. Also, if the slowness you perceive is when interacting with the site it could be that it lacks the ability to accept touch events. On mobile web, if you have not wired up the UI for js touch events the experience will seem slower because the device browser has to fall back to standard click and other mouseevents which are not optimal. Frameworks such as mootools and jquerymobile/jqtouch have these events baked in. Take a look at the mootools solution which has quite a good write up: http://davidwalsh.name/mootools-touch
They probably making use of local storage http://dev.w3.org/html5/webstorage/
Are your pages too large? Try to use gzip and/or reduce output
Your server's connection speed may also be responsible of slowness
Well, You don't need to include any javascript framework to make it fast clickable.
By implementing some JavaScript you can achieve that. Google has released a solution for that
https://developers.google.com/mobile/articles/fast_buttons
This will allow visitor to interact with application native way. From Android 4 (as far as I remember) version by setting viewport meta tag the browser will automatically apply the fast click functionality.
For the animation issue always use Hardware accelerated animation with a fall back for older mobile browser. Using hardware accelerated animation it will make your application smooth as silk.
Follow this guideline and you can make your application as fast as gmail / youtube mobile version.
http://www.html5rocks.com/en/tutorials/speed/html5/
Best of luck.
Your webapp is consuming too much RAM. Don't use so many libraries and don't attach so many event handlers.
Related
We are going to redevelop one website we developed as an ASP.NET website to be a mobile one.
So, I'm wondering how does the development of a mobile website differ from a normal one?
Also, what is the best approach to do this taken in consideration that this mobile website will be browsed mainly from iPhone?
There are a number of differences between a mobile device and a standard computer.
The screens are much smaller (fewer pixels to display your page). You should put fewer elements on each page.
They are typically viewed in portrait mode (narrow display - narrow page). You should plan on using the full width of the screen instead of setting a fixed page width like most people do on standard web pages.
People use finger gestures to manipulate the page instead of a mouse (buttons/links should be larger)
They can include additional features such as geo-location, telephone, etc. that you can incorporate into your app to be easier to use. There are some libraries available to help you use these, such as jQuery Mobile.
Users are concerned about battery life plus the CPU tends to be slower. Make sure you keep animations and client side processing to a minimum.
Users are concerned about data usage. Keep ajax calls to a minimum (don't ask the server for data every few seconds!) and use graphics sparingly (it's better to use html/CSS to make the page attractive).
Flash isn't supported on iPhone and is not well supported on other devices. However, most mobile devices have decent support for HTML5, so you can typically use that instead.
Users on smartphones are used a different experience.
In addition to Brian's answer I'd add:
Screens are not resized but scrolled, however sides scrolling is not generally a good experience
Screens orientations can change, but the same scrolling rules apply
Consumers are used App like behaviour and as such less information with backwards and forwards between pages is common and between sites
Consumers generally have data concerns so data traffic needs to be minimised
Controls/buttons/selections/data entry need to optimised for hand gestures - for example think of what happens with the keyboard pops up to allow data entry, how much screen is available - can the see all their input easily if they need to?
I suggest that for developing a mobile website is to use the target smartphone for a few weeks to understand how the device is used in the real world.
I'm afraid you cannot use current asp-View to mobile especially for iPhone. There's special control set for iphone development - componentone.
If you web application is based on MVC or MVP patterns then moving will be not difficult.
Recently we have developed a site for iphone users, we are using asp.net/sql for normal site.
But when you look at mobile sites, mobile normally have small screens and some time optimization problem.
We use jqtouch for mobile development. A JQuery plugin for mobile web development on the iPhone,Android, iPod Touch, and other forward-thinking devices.
Learning Video
Getting started
Establish the context for the mobile site: is there subset of information that is more relevant to your mobile users? Maybe your regular site has apps that are irrelevant on mobile devices? Either way, you should create your mobile site separately in a mobile folder! You can then use a sub-domain to reach it: for example, http://m.mysite.com
You can use a combination of CSS Media Queries and 51degrees.Mobi to detect browser features and render the correct size layout depending on which type of device the user has.
http://html5boilerplate.com/
http://www.modernizr.com/ (this is included in HTM5 Boilerplate)
http://51degrees.codeplex.com/
Do not make the stupid mistake of following current fads like "Responsive Web Design" which attempts to squeeze a desktop version of a website into a mobile screen. Above links should get you started.
I've been developing a web app using JQM to target iOS and Android devices. For much of the start of the development, I have developed and tested using Chrome (currently v13) on the desktop. As we get closer to our production release deadline, I have increased testing on physical iOS and Android hardware; the difference in performance between the desktop and mobile browsing experience is enormous.
The client/server interaction is very simple. The client requests a set of views, which the server returns. The client can then request the set of nodes associated with a particular view, which the server will return in a single payload. The client then generates the DOM for each node from the corresponding XML.
I have begun testing with XML payloads at or greater than 400kb. On the desktop, in Chrome, this is no issue. On mobile, in Mobile Safari, my DOM load times alone can be close to 12 seconds. Interactions with the DOM (which trigger updates to the XML, cached in localStorage) can take up to 5 seconds per click.
While I can think of half a dozen different ways to optimize my client/server communication--I can't figure out how to measure the expense of my individual method calls from the mobile client. I know that a 400k payload is too much for the iOS Mobile Safari, but I don't know whether the performance cost I'm incurring comes from traversing the DOM or manipulating the XML.
How can I perform metric analysis of my mobile web app from the perspective of the mobile client? Performance tuning to the desktop isn't getting me anywhere, and I don't have an equivalent developer console/FireBug on the mobile side.
How do other mobile developers solve this problem?
I've decided to add a simple start/stop logging button, which calls a logging function which stores method timing data in sessionStorage. On stop logging, I ship this to a web service for analysis through a desktop browser.
Edit: I did try JsLitmus per this SO post, but I concluded that the only performance test that really matters on mobile is the time to execute any particular function. Once I had this information exported out of the client, performance tuning was trivial.
I don't know what sort of XML parsing JQM uses, but if it's using a DOM style parser, performance will suffer for sure. Mobile clients deal better with pull style parsers (they're less memory intensive). DOM style parsing of XML is really slow in native clients, I bet it will be even slower inside a browser.
A 400 KB XML sure sounds like quite a big chunk of data. Do you really need all that at the same time?
Heavy DOM manipulation has never been cheap, I expect performance will be pretty affected in a mobile device.
I guess this doesn't really answer your question, but it was pretty long to just place inside a comment.
What is the biggest limitation of making/using webapps?
I'm thinking that when you use localstorage, offline-browsing and geo-abilities thaht you get from html5 the differences are quite small (except for games).
The great benefit from using webapps is that they are cross-platfrom compatible!
One of the biggest limitation is access to hardware. You can't access USB ports, specialized hardware you might have (printers, bardcode readers), and other stuff, and of course, you don't have access to some very important APIs that you need today to run games (DirectX, OpenGL).
But I agree: every day they are fewer reasons to not go with a WebApp instead of a Native APP.
For iOS: When using geolocation for webapp, the user will get prompt about giving location access every time, which could be annoying for the user. Native app, only the first time.
The UI performance is also not as smooth as native. Scrolling in webview has a "slower" acceleration compared to native view scrolling.
Performance is one major difference. I see from around 20X to over 200X speed improvements when converting from Javascript to compiled C/Objective C code. One can also do real-time audio and video processing in native code, as well as low-level networking, etc.
One interesting limitation (HTML5-wise) I see is from a point of intellectual property. Since a lot of code (raw JavaScript + HTML) is exposed to the user, you have to carefully decide which components will be "open" to end users. Not aware of any standard way to lock or hide your IP once it leaves your server.
Webapps are great for reaching multiple hardware devices, you can update your app a lot faster, thus feedback is quicker. However, your users will require an always-on internet connection to use your webapp, that's probably the biggest negative about them in comparison to a native (offline) app.
iPhone OS 3.0 is being announced and previewed next week (March 17).
We all know the feature set users want. Copy/paste, MMS, Flash on iPhone, etc.
We'll see about those.
What I'm interested in what does the development community feel the SDK is missing, in need of, to make programming for the platform easier and more productive.
A more complete Interface Builder with support for custom palettes and all sorts of goodies like that.
Better control over the keyboard.
Better unit testing support. (Unit testing can be done, but only on the simulator, and it's very awkward to set up.)
Push notifications. Please.
A more accurate simulator, i.e. one with a more accurate set of frameworks.
The ability to easily build views like the Mail compose window.
For that matter, an in-application compose window.
A better way for apps to share data locally than by invoking URLs.
Access to the calendar, notes, mail (possibly read-only), and bookmarks (again, read-only) databases. Maybe even limited access to the iPod database—even just the ability to read song metadata and access and change the playing song would be helpful.
Some sort of middle ground between UILabel and UIWebView that allows for formatted text without a huge hassle.
More built-in toolbar icons.
The return of the "glass" button style that was in the beta SDK.
A few useful internal views, like UIProgressHUD, exposed.
And last but not least...
A pony.
An easy Javascript bookmarklet installation method for Mobile Safari. (OpenRadar: 1, 2)
UIWebView needs more of UIScrollView's properties and methods, such as contentOffset.
More configurability on some of the built-in behaviors and views, e.g. the button text on UITableViewCell's "Delete" button, or the styles and text of UIAlertSheet/UIAlertView buttons. (Some of these can be done today with undocumented calls, but I'd rather not rely on those.)
More flexibility from UINavigationController, such as the ability to push/pop views that selectively don't display the navigation bar but using the same animations and stack, or more customizability over the navigation bar button labels and behaviors.
The ability to restrict interface orientation per UIViewController, not just accept/reject changes via shouldAutorotate. E.g. I want my main content view to be autorotatable, but I want my navigation hierarchy and settings screens to always display in portrait, even if the content view was rotated to landscape.
libxml and its handy DOM XML parser instead of the SAX-based NSXMLParser.
libcurl w/SSL, or more options and functionality for NSURLConnection.
Ability to check whether a URL scheme is registered. This could be used for apps to detect whether other specific apps are installed, and enable functionality selectively, e.g. when Instapaper detects Tweetie is installed, it can offer a "Post with Tweetie" button. (Disclaimer: That was a plug. I make Instapaper.)
I'm sure I'll think of more, but overall, I'm very happy developing for the iPhone. I'm amazed at the quality and sophistication of the iPhone OS, the SDK, and the development tools given how incredibly young they all are.
I'm surprised no one has mentioned garbage collection yet. Objective-C 2.0 on the Mac supports optional garbage collection. I don't really see any reason it wouldn't work just fine on the iPhone as well and it would eliminate much of the tedium of having to explicitly release objects all over the place.
What I'm hoping most for is to allow iPhones to talk to each other either via Bluetooth or some other means. Granted, they can talk via Bonjour if they are on the same Wi-Fi network, but that's just not convenient enough in 2009. If I'm out with a friend and want to play a multi-player game we first have to find a Starbucks or whatever the heck to get on the same Wi-Fi network. Also, think of the ridiculous amount of social apps you could have if iPhones could talk to each other without needing Wi-Fi. Exchange business cards, flirt with the cute girl over there, etc.
Form a PURE programmers perspective, make XCode as helpful of an IDE as Eclipse or IntelliJ are in the Java world. There's so much time I waste on stupid stuff that the IDE could have found for me as I typed it.
I also don't understand why I can't color buttons without having to use images.
Better multitasking is absolutely key at this point. Android's got it, Palm's WebOS has it - both, it seems, in largely unrestricted and well-implemented fashion. Possibilities:
Push notifications with a good UI (message stack in addition to badging/sound/whatever - if they have to have an extra approval step so apps can't be obnoxious, so be it)
Multiple full processes (not possible with current OS, I realize, but then I've never seen a good explanation why the iPhone doesn't support virtual memory)
Smaller "background" versions of apps that can run in the background - no GUI and a significantly tighter memory constraint
A good mapping API. Let us access the Google Maps abstraction that the Maps application uses !
More Interface Builder goodness
Better simulator
Smart inbox. Incoming messages are routed to installed handlers based on type.
Synchronisation framework that simplifies syncing with desktop & Mobile Me.
Decent landscape support, without the multitude of bugs, especially for the camera picker. Better support for rotation and more control of it.
Access to EXIF data on images from the picker, so we can tell their location
Deeper access to the camera API, so that we are not rail-roaded into the standard photo taker / picker
Push notifications that can launch an application. (In lieu of full multi-tasking, which I don't think we'll get and which could be problematic.)
Better, more intuitive keyboard controls.
API for inter-application messaging.
Access to data from Calendar, iTunes, Mail, Notes and more (with user's permission)
A more accurate simulator, with, for example, ways to limit bandwidth, and use the Mac's camera to actually take a photo.
Phone-phone bluetooth for data exchange
Access to more of the views used by iPhone apps, e.g. the progress HUD, email "blobbing" mechanism for email addresses, thumbnail scrollers, HUD brought up in Photos app, and more.
Less sandboxing. It won't likely happen, but it would always be appreciated for an app to have slightly more power than they currently do (actual filesystem access, for example. even if it was read-only access, it would still allow for more interesting applications to exist).
EDIT: Also, access to the copy/paste API. But I hope that one is obvious to Apple.
My list:
More full-featured IB support as the Mac has
Inter-app Data transfer mechanism (could be C&P, but does not have to be)
Greatly improved camera API with deeper level of control and more flexibility
SDK access to bluetooth and more support for protocols
Real ObjectiveC framework around the address book like the Mac has today.
Warnings similar to the location warning when an app tries to access address book data.
I'm sure whatever they actually have prepared, there will be a few interesting twists.
Ability to send SMS messages without having to have launch the SMS client and have the user type the message.
Access to the raw camera data so that things can be done without having to take a picture and wait for it to save (like you can do with Android)
push notification so that you can launch tasks... would need to be user controllable.
A camera that can focus (I know... have to wait for the next iPhone for that... if they decide to put it in...)
A UIKit level drawing api.
We all know the feature set people want. Copy/Paste, MMS, Flash on iPhone, etc.
I would have thought those specific items were down the SO wish list (although it seems I'm wrong looking at the votes on this comment :-).
MMS is a pretty pointless app when you have eMail. Flash is not an OS issue - Flash could be delivered today.
I don't even want push notifications - they're just a patch, I want background apps. I also want fixes for all the broken APIs like Camera, video and landscape support. Support for CoreImage filters would be nice too but probably too much to wish for.
[[ABAddressBook sharedAddressBook] me] for being able to use the owner's Zip code, phone number, or whatever.
Ability to download files to local storage and sync them back to iTunes or your hard drive
Get EXIF data from photos
Pull all photos at once
Pull all contacts at once
Control screen brightness
Access to music in iPod section
Read access to email and text messages
Access to Safari cookies (so maybe I could make some kind of keep-me-logged-in app.)
fix table view in landscape mode
new camera API with direct access to the camera
distribution code signing automatically when uploading to the app store (instead of code signing in xcode)
ability to request more memory so users don't have to reboot their phones to get rid of background apps
A non-Mac based development envionment.
Which of the new features are you looking forward to the most in iPhone SDK 3.0?
Is it one of the main advertised six new things, or something smaller? Something in the "1,000 new APIs", perhaps?
Phone to phone communication via bluetooth seems like it will terribly useful for some apps I am writing. No longer do you have to input all the data you want to store yourself, you can share some of it with other iPhone users.
not really a feature, but the best thing about developing the iPhone SDK further is the great frameworks that arise. there are some really, really great frameworks out there already (like the Three20 project) which will become even better with the new 3.0 SDK.
my real excitement will take over once they let us run background processes. maybe in 4.0?
Video! The ability to write decent tools for mobile video uploads is a big draw.
MapKit by far will bring the biggest change sweeping across the app space.
My personal favorite is that we can finally easily track upload progress of large files (like images).
I really, really want to see fixes in the camera API so that it isn't either broken (2.2.1) or forcing a switch to portrait (3.0).
Apart from that, the most useful features to me are:
push notifications. Great for making an app more sticky - you can let the user know that something of interest to them has happened.
CoreData - I've been using a third-party SQL layer, but it's a little buggy and no longer supported.
Peer-peer bluetooth, as the poster above said, is also useful for local data exchange.
And the least useful? Cut and paste. I actually want to disable it in my app (to discourage people from copying content) - and it doesn't look as though you can (yet).
Bluetooth phone-to-phone communication with GameKit will enable a host of currently impossible applications. Multiplayer games with no WiFi network needed and data exchange between two phones are obvious use-cases.
I'd also like to see - not currently included in the betas - a decent camera API that allowed us to customize the appearance of the capture screen, and as another poster said, have it work properly in landscape and portrait mode.