Website design for mobile devices


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Website design for mobile devices

  1. 1. ©2011 by EliNext GroupWebsite Design for Mobile DevicesIn this paper I am going to touch upon thepeculiarities of the development of websites formobile phones (smartphones, iPhone / iPod Touch,PPC), which occupy a significant percent of themobile web use.Mobile web use is constantly rising – more and more peopleuse their mobile devices to get to the web. It is unlikely thatthis trend will cease in the future for mobile devices areconstantly getting better. Additionally, new kinds of portabledevices appear – tablet PCs, eBooks, etc. – and internetbecomes more and more mobile-friendly.A successful mobile website development requires twocomponents: comfortable usability and proper layout.USABILITYIt all starts with the mobile website design. A good designeris not the one who has nothing to add to the website, butthe one who has nothing to take away from the website.Mobile websites themselves are oriented towards a specific
  2. 2. ©2011 by EliNext Groupgroup of users – those who want to get informationinstantly. When you create a mobile version of a website,you attract to the website large numbers of mobile deviceowners, who can browse internet while driving a car, inclassrooms, in public transport, etc.A website development optimized for mobile devices has itspeculiarities. As most of mobile devices have small screens,first thing you have to do is to adapt website to screenresolution, which in turn involves adaptation of content. Inmost cases, a mobile version of a website must contain themost up-to-date information. For example, a restaurant’spricing policy, a theatre’s repertoire, movie theatre’s times,what weather is today, etc. Certainly, what is required iscontact information – phone numbers, emails, postaladdresses, so that users could quickly and easily get in touchwith you.As for the archives, precious stockpiles of documentation,multi-volume research papers i.e., everything that requirescareful examination is of no use here – nobody will wastetheir time on this. Of course, information must be ofmaximum relevance to visitors and their instant needs, thecontent must be of good quality and, what is even moreimportant, it must be convenient to comprehend. It is worth
  3. 3. ©2011 by EliNext Groupremembering that the website is created for a significantlysmaller screen than that of a conventional computer.The main page should be designed without scrolling,publishing only the most important links that will allow usersto get to the relevant content. Just remember that we aredealing here with fingers and for this reason all the links,buttons and icons on the page must be rather large. Userswould not like when instead of the “About us” webpage,they would get to Contacts, which is a waste of timeresulting in low opinion of the website. Due to the limitationsin free space and browser functionality, it is notrecommended to make nesting level below second, becauseafter the third click it is easy to get confused what page youcome from and users would have to get back to the mainpage, which is strongly undesirable.Mobile device screens cannot provide the same quality ofimages similar to the monitors of desktop and laptop PC’s; amobile website designer should make sure that the colors offonts and backgrounds were rather rich in contrast.Keep in mind that the mobile version of a website is but asmall part of the full version of the website that gets usersfamiliar with the most basic website functions.
  4. 4. ©2011 by EliNext GroupLAYOUTA solid foundation for every mobile (and not only mobile)website is in a clear and concise semantic markup. What canbe regarded unimportant for a regular website can causeissues with the use of its mobile version at the same time.An accurate and valid markup in accordance to the W3Cstandards can warrant proper website visual display by 99%of web browsers, which can contribute to the positiveimpressions among website visitors.Rule of thumb in contemporary globalized world is to encodewebsites, including their mobile versions, in UTF-8. This is anecessary condition to display characters of many worldlanguages and special symbols properly.First thing to do is to find out what designer wants, spendseveral hours with him or her discussing how to displayinformation and clear out complex and non-standard aspectsof your design. Even when you will have all the drawn andapproved pages in front of you, it does not mean that youcan cut it and send to your developers.First, the project needs to be structured to include such part
  5. 5. ©2011 by EliNext Groupas the header, the content and the footer. The page you getthis way will be a template for the whole project. It is notdesired to change any key design features during pagesetup. 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 structuralelements should be divided by layers. It is crucial to avoiddeep layer nesting. The simpler is the layout you design, theeasier it will be for a mobile browser to process and load it.Main work should be done through CSS, while leaving mobilepage code as light as possible.For example:<html xmlns=""><head><title>Mobile Device</title><link rel="stylesheet" href="stls-iPhone.css" type="text/css" /></head><body><div class="header"></div><div class="logotype"></div><div class="back_forward"></div><div class="article_name"></div><div class="article_content"></div><div class="footer"></div></body></html>
  6. 6. ©2011 by EliNext GroupMobile websites created this way will be dynamic, light andeasy to update and, in essence, perfect.ELINEXT GROUPWebsite: http://www.elinext.comEmail: info@elinext.comBlog: http://software-topics.comFacebook: officeMarina House, Adelphi QuayWaterford, Republic of IrelandPhone: +353 (51) 347 477Belarus Development Center155b Bogdanovich St.220040 Minsk, BelarusPhone: +375 (17) 237 53 65Vietnam Development Center37A Phan Xich Long St.Ward 3, Phu Nhuan DistrictHo Chi Minh City, VietnamPhone: +84 (8) 3995 6849Suggested citation: EliNext Group.2011. “Website Design for MobileDevices” <>