Home » Tutorials » Mobile Web Development » Tips For Designing Mobile Websites / Mobile Apps

Tips For Designing Mobile Websites / Mobile Apps

Tips For Designing Mobile Websites / Mobile Apps

As smartphones such as Apple’s iPhone, Blackberry, Android enabled-devices user has become increasingly growth, most of the companies are considering advertise their brands in this new mobile market, and recently, there are numerous of mobile website, mobile web application and native application has been released to the market. Therefore, going to mobile is the trend for now, and may be is in the future as well.

Tips For Mobile Developer

The design specification for mobile devices are different than desktop, there are numerous of differences between these two platform such as the screen size, connection speed, processing power, user behavior and so on. Let’s go through one by one together!

Define The Purpose Of Your Mobile Website / Mobile Apps

Most of the time, people forgot the objective or the purpose of having a mobile version of website or application. Due to the constraint of the mobile screen size, you should define the primary objective of your mobile project and draw out the priority hierarchy of your project.

In addition, please keep in minds that, why you need a mobile version of your website / apps? What is the difference between your current desktop version and mobile version? Actually, most of the smartphones have GPS, compass, camera, accelerometer, microphone and other functions as well, so you should take all these advantages when designing your mobile project.

Keep Thing Simple

As we all know that, the screen of mobile devices are far more smaller than the desktop. So we should simplify everything wherever possible. Simplify your mobile project is not only user-friendly, it also keep your file size smaller, speed up your loading time and save up your visitor’s bandwidth. Besides, onlyWebPro recommend you to use single column layout for your project. Single column layout work best in smaller screen. You can utilize the latest technologies such as HTML5, JavaScript and CSS to accomplish this.

Single column layout
Example of single column layout.


Nowadays, most of the smartphones have touch screen. These devices are operate by tapping and the movement of fingers which commonly called “gesture”. As we know that touch is imprecise tool if you compare it to your PC’s mouse. When you designing for your mobile project, please keep in mind that, you need more BIGGER tappable items and more SPACES between these tappable items which can be easily press by your user.

Standout Icon

You need to try to make your mobile project’s icon more unique and standout among others. Most of the smartphones such as iPhone and Android-enabled devices are allow user to set the website / application on their home screen for quick access purpose. So all these websites / applications have an icons appear in the home screen as a shortcut for quick access. Make your icon colorful, more memorable, descriptive and eye catch the eye of your user. Please keep in mind that, your icon should able to let your user clear about what it is.

Last But Not Least

Test, test and test. Yes! you should test your project before you release it to the market. If you are targeting on most of the smartphones, then you should try as many devices as possible, make sure there is no error occur when you are running it on the device.

Android, iOS Development Tutorials