Less is more and usually more effective
—Steve jobs
In a nutshell, mobile means that you app or mobile website are available anytime anywhere. But is also means smaller screen and slower connectivity. That being said, you have to make sure that users are presented with the information and features that they really need, given the possibilities and the limitations of the mobile devices. Simplify does not mean eliminate. It means prioritizing and focusing on the most important things first and giving alternative ways to access the rest of the app. Keep in mind that your users are accessing your application on the go, seating in a restaurant, or in circumstances where they want information very quickly —keep things simple.
As you can imagine smaller applications will download and execute more quickly and more reliably than larger ones. Every byte of data matters. Consider serving an alternative version of your code that should be minified, without comments, and consolidating some of your files when possible. This is particularly important since the action of loading files introduce additional latency. In other words, loading 10 files of 100 kb each, will take longer that a single resource of 1 Mb.
The sprite technique will benefit your app from the performance perspective, and also from the asset organization viewpoint. In short, the Sprite technique consists in aggregating two or more images into a single file and use CSS to assign the aggregated image as the background of an HTML element, and displace it to show only one of the images at the time. If you are not familiar with the use of CSS Sprite you can read this article http://css-tricks.com/css-sprites/.
I am sure you have seen site where the text and images are displayed first and after a few seconds the background of the page suddenly shows up. This may or may not happen to your application, however, a good way to avoid this is to convert the background image into a base64 string and include it in the stylesheet itself.
Nowadays smartphones and tablets are really powerful. However, you should expect that you app will not always run from the newest devices. Keeping the DOM size reasonable will assure that the memory usage will stay low and your visitors will get the best user experience possible.
With such a large variety of screen sizes you have to make sure that your mobile app will render appropriately in any screen. One thing that you should avoid is to assign a fixed width to the text paragraphs. This will assure the best user experience and your users will not have to scroll every line left and right.
When users visit your website from a mobile device, it is a common practice to redirect the visitor to a different URL within your website that will serve the mobile version of your website (e.g. m.yoursite.com). The redirection of requests (using HTTP 3xx status) is typically used to exchange information between servers (e.g. account authentication). Be aware that this technique introduce delays that are much higher over mobile networks and so the number of redirects should be kept to a minimum.
Create, customize, and publish mobile web applications using the Appcropolis Mobile Builder.
Get Started
We offer 1,000's of mobile templates that are fully designed, coded, and ready to use. Learn more.
Download Free Templates
Not registered? Create an Account.
Lost your password? Click here to recover.