Website Design for Mobile Devices

2011-07-26 by Marina Astapchik

In this paper I am going to touch upon the peculiarities of the development of websites for mobile phones (smartphones, iPhone / iPod Touch, PPC), which occupy a significant percent of the mobile web use. Mobile web use is constantly rising — more and more people use their mobile devices to get to the web. It is unlikely that this trend will cease in the future for mobile devices are constantly getting better. Additionally, new kinds of portable devices appear — tablet PCs, eBooks, etc. — and internet becomes more and more mobile-friendly.

A successful mobile website development requires two components: comfortable usability and proper layout.

USABILITY

It all starts with the mobile website design. A good designer is not the one who has nothing to add to the website, but the one who has nothing to take away from the website. Mobile websites themselves are oriented towards a specific group of users — those who want to get information instantly. When you create a mobile version of a website, you attract to the website large numbers of mobile device owners, who can browse internet while driving a car, in classrooms, in public transport, etc.

A website development optimized for mobile devices has its peculiarities. As most of mobile devices have small screens, first thing you have to do is to adapt website to screen resolution, which in turn involves adaptation of content. In most cases, a mobile version of a website must contain the most up-to-date information. For example, a restaurant's pricing policy, a theatre's repertoire, movie theatre's times, what weather is today, etc. Certainly, what is required is contact information — phone numbers, emails, postal addresses, so that users could quickly and easily get in touch with you.

As for the archives, precious stockpiles of documentation, multi-volume research papers i.e., everything that requires careful examination is of no use here — nobody will waste their time on this. Of course, information must be of maximum relevance to visitors and their instant needs, the content must be of good quality and, what is even more important, it must be convenient to comprehend. It is worth remembering that the website is created for a significantly smaller screen than that of a conventional computer.

The main page should be designed without scrolling, publishing only the most important links that will allow users to get to the relevant content. Just remember that we are dealing here with fingers and for this reason all the links, buttons and icons on the page must be rather large. Users would not like when instead of the "About us" webpage, they would get to Contacts, which is a waste of time resulting in low opinion of the website. Due to the limitations in free space and browser functionality, it is not recommended to make nesting level below second, because after the third click it is easy to get confused what page you come from and users would have to get back to the main page, which is strongly undesirable.

Mobile device screens cannot provide the same quality of images similar to the monitors of desktop and laptop PC's; a mobile website designer should make sure that the colors of fonts and backgrounds were rather rich in contrast.

Keep in mind that the mobile version of a website is but a small part of the full version of the website that gets users familiar with the most basic website functions.

LAYOUT

A solid foundation for every mobile (and not only mobile) website is in a clear and concise semantic markup. What can be regarded unimportant for a regular website can cause issues with the use of its mobile version at the same time. An accurate and valid markup in accordance to the W3C standards can warrant proper website visual display by 99% of web browsers, which can contribute to the positive impressions among website visitors.

Rule of thumb in contemporary globalized world is to encode websites, including their mobile versions, in UTF-8. This is a necessary condition to display characters of many world languages and special symbols properly.

First thing to do is to find out what designer wants, spend several hours with him or her discussing how to display information and clear out complex and non-standard aspects of your design. Even when you will have all the drawn and approved pages in front of you, it does not mean that you can cut it and send to your developers.

First, the project needs to be structured to include such part as the header, the content and the footer. The page you get this way will be a template for the whole project. It is not desired to change any key design features during page setup. This may result in a swarm of issues and resigns, which can be avoided thanks to the previous work.

Try to cut as simple and rational as you can. The structural elements should be divided by layers. It is crucial to avoid deep layer nesting. The simpler is the layout you design, the easier it will be for a mobile browser to process and load it. Main work should be done through CSS, while leaving mobile page code as light as possible.

Mobile websites created this way will be dynamic, light and easy to update and, in essence, perfect.

RELATED ARTICLES

Top Questions and Answers about CRM

Growing businesses are looking for a better way to manage customer relations. Understanding that the idea to store their information in note cards or Google documents is a bit old-fashioned, they are wondering, what is CRM, how it works and how it can help their businesses. These questions are hardly...
READ ARTICLE
Node.js: pros and cons

Bringing Node.js into your project: pros and cons

Introduction “Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.” This is what official Node.js website tells us, and this...
READ ARTICLE
Database Migration Best Practice

How to migrate high-load tables with zero downtime using background jobs and SQL views

Sometimes database migration may become a pain. The tables are large, the load is high, HDD space is expensive and the downtime should be as short as possible. Elinext team has recently investigated the issue within one of our Ruby on Rails projects and managed to offer a flexible data…

READ ARTICLE

Best practices of Big Data implementation

Part 1. How we struggled with big data implementation. The  whole story about big data implementation started with an ongoing project. Our team was working on a project for monitoring a range of devices: switches, routers, computers and more. The main goal of this system was to provide businesses with...
READ ARTICLE
WHO WE ARE

ABOUT ELINEXT

Elinext is a custom software development and consulting company focusing on web, mobile, desktop and embedded software development, QA and testing. Since 1997, we have been bringing digital transformation to mid-sized and large enterprises in Banking and Finance, Insurance, Telecommunications, Healthcare and Retail. Our key domains include enterprise software, e-commerce, BI and Big Data, e-learning and IoT.