Since the smart phones have come on the scene the mobile market has seen a tremendous change. With millions of users who can’t imagine a life without their iphone or android the websites have started to adapt to their needs and this has presented a new challenge for the web designers.

Creating a user friendly website for desktops is entirely different to creating one for the mobiles. The constant increase in demand means that the websites are required to be updated and tweaked in a manner that the layout and content is displayed properly on a mobile device as well. Here are a few suggestions for designing mobile web interfaces.

Simplicity is the key


If your website has too many flashy graphics, videos and unfitted contents then mark my words mobile users will lose interest in it instantly. The sole mission behind the arrival of a visitor to a website is  gaining information and as a designer it is your job to make it easy for him or her to accomplish this mission. Again designing for mobile devices is different than designing for desktop, while on desktop you have enough space for all kinds of stuff and still you can keep it simple, in mobile environment the space is limited and so are your options.

So the rule is a straight one just keep it simple.  Only put that elements into the page that you feel are entirely necessary for your website like the branding, navigation and the content and get rid of all the other stuff that is not so important.

Mobile Style Sheets

CSS gives you the power to apply styles to one file and roll over newer properties in a later file. This creates an environment of detailed customization and the liberty of applying edits and new formatting to any template.

Designing new style sheets for mobile devices is not that difficult at all. It requires a lot less attention than the formatting of your HTML. There can be two approaches for designing CSS for the mobile websites, either you can opt for the security in backwards compatibility or you can decide to target the larger mobile audience by defining specific CSS files for unique occasions.

Never Forget to Offer a Normal Mode

Let’s face the truth the users will always get agitated by a template after some time and they will look for something even more simple and no matter how great your design is this will happen. So we recommend that you do what all the biggest mobile websites are doing, put a link to the default site layout. Take a look at the facebook they have a link to their default layout right at the bottom of the page where it is convenient enough for the users to access.

There is another approach that can be used for the purpose of providing a fresh look to the users and that is directing them to a sub domain with an alternative layout. This is a technique that is used by most of the major web 2.0 apps and it has its benefits like you can store configuration files in separate directories.

The era of mobile web interfaces has just begun and the consumer numbers are already fast increasing. Thousands of iphones and Androids are being sold each week and as it appears this trend is not showing any signs of stopping.

These tips will help you in creating a balanced and user friendly interface for your mobile websites but these are nothing more than a beginner’s guide. There are plenty of other tools that you can explore. The trends will change as the market will fluctuate but the core values of users will stay the same. It’s your job as a designer to learn these trends and create a interface that fits your consumer base.

Here are a few good examples of mobile websites.

Travel Tex


Nissan UK

Racinel Black Label

Stockholm Media Geek

Georgia Aquarium

Empresas Armas

Cat Rental Store