ELEKTROTEHNIŠKI VESTNIK 79(5): 225-230, 2012 ENGLISH EDITION Mobile Web Jaka Sodnik, Andrej Kos University of Ljubljana, Faculty of Electrical Engineering, Tržaška 25, 1000 Ljubljana, Slovenia E-mail: jaka.sodnik@fe.uni-lj.si Abstract. The number of mobile web clients is increasing constantly and has already exceeded the number of their desktop predecessors. The following paper offers a survey of the current trends in the field of smart mobile devices, particularly with regard to the wide spectrum of the available hardware and software equipment and the corresponding operating systems. The main focus is on the advantages and limitations of such devices, especially when used as web clients. Modern mobile devices offer many new functionalities, such as location and orientation awareness, unlimited web access, intuitive touch-screen user interfaces, etc. This enables the development of new intelligent and adaptable solutions that completely change the way of communication and interaction with the web. The paper also mentions specific methods of using the devices in mobile environments that require robust and custom-made user interfaces. Special attention is given to the so-called responsive web enabling a unified design of contents for a broad range of devices with various levels of performance and screen resolutions. Also included is a short presentation of the current and future standards in the field of web and web technologies. Keywords: mobile devices, smart phones, applications, internet, web 1 INTRODUCTION Mobile phones and other mobile devices have become an indispensable part of our everyday life, both in the professional and private sphere. Modern smart phones represent a means for communication and fun, and can also be used as an office-on-the-go. The sale of smart phones has been increasing rapidly in the last few years; in 2010, more than 100 million smart phones were sold, which means that they surpassed the number of all desktop and portable computers sold in the same year [1]. Among many other things, smart phones also enable fast and reliable access to online services and the web. The number of users who access their favorite web pages primarily or solely with their smart phone is growing rapidly. An important historical and technological turning point in the field of smart phones was the launch of the Apple’s smart phone iPhone in 2007. Its integrated web browser made surfing the net with a mobile phone a very pleasant experience [2]. In 2010, the amount of data traffic resulting from the ever- growing number of mobile web users increased six fold. According to a recent survey, the number of mobile web clients will soon exceed the number of all desktop and portable computer users. The iPhone and its extremely intuitive user interface presented a revolution in the field of smart phones; however, it was soon followed by strong competitors in the form of smart phones based on the platforms Android and Windows Phone 7 (WP7). These three platforms nowadays represent approximately 70% of the smartphone market. The key driving forces behind the smartphone sales are the numerous applications, the number of which is still increasing rapidly, that are changing the phones into multifunction devices. Each of the afore-mentioned platforms represents a specific operating system with its custom set of applications. What is more, every operating system requires its own development environment with a corresponding programming language: Objective-C for IOS (operating system of the iPhone smart phones), Java for Android and C# or Silverlight for WP7. Every application that is supposed to function on all three systems must therefore be developed for each system specifically. This actually means three times the work and costs, all in order to win a satisfactory share of the market. In addition, every platform also prescribes specific development licenses and other costs and has its own rules and limitations that have to be followed by the developers. Apple, for example, charges every developer a yearly development license of 99 USD and a further 30% provision on every application sold through their Apple Store. Despite the substantial differences in the cores of the afore-mentioned operating systems, they all include a web browser in their standard set of applications. Each web browser follows and implements web standards and protocols. The browser thus represents a common environment enabling the operation of unified applications on all three platforms. In this perspective Received October 23, 2012 Accepted January 8, 2013 226 SODNIK, KOS web applications turn out to be the ideal choice for developers and companies, as they represent a completely new business environment based on a unified development platform for mobile applications and consequently also much lower costs. 2 LIMITATIONS OF MOBILE DEVICES Due to the variety of mobile devices and user interfaces, the mobile web introduces certain problems and limitations that require some adaptation. As regards mobility, the devices need to be as small and easy as possible as we carry them with us at all times. This consequently means a significant reduction in the screen size and user interface as well [2]. Web developers and designers are used to working with the screen at least the size of 1024x768 pixels or more, which is, however, in most cases inappropriate for small portable devices. In order to display such a large picture on small screens, a lot of zooming and panning are required from the user, which can be very frustrating, especially if the user is trying to find a specific piece of content. The majority of the modern mobile phones have a resolution of 320x480 pixels, which is approximately 20% of the available screen size of a typical desktop client. Although drastic, this reduction in the size is not necessarily just negative. Quite the contrary – the small size forces the designers and developers of web pages to abandon most of the unimportant elements of the pages and focus merely on the vital content of each window which is then displayed on mobile devices. The unnecessary data can either be moved to separate sub windows or removed entirely. The other important limitations of the mobile web clients are the hardware capability of the device itself and its network connectivity [3]. Despite the constant increase in the speed of mobile data transfer, the latter still remains slower and more expensive than the competitive wire networks, which is why it remains inappropriate for transferring large amounts of data from the web. The speed of data transfer also strongly affects the upload time of a specific web page, resulting in corresponding user experience and satisfaction. Table 1 shows the 'patience' of web users, or, to be more precise, how long they are willing to wait for a specific page to be correctly displayed in their browser [4]. Table 1: Web page load time and user patience Time of upload Percentage of users that give up waiting Less than 1 second 3 % 1 – 5 seconds 18 % 6 – 10 seconds 48 % 11 – 15 seconds 64 % 16 – 20 seconds 80 % More than 20 seconds 99 % The table shows that more than half of the users give up waiting after 10 seconds if the page is not properly displayed on their device by that time. This issue needs to be addressed especially in the field of the mobile web where we are dealing with lower and at the same time also changeable speeds of data transfer, unpredictable delays and lower processing power of mobile devices. The most important measure is the reduction in the number of interactions and transfers between the server and the client by combining external sources in web pages (the external CSS and JavaScript files). It is also recommended to download the multimedia content to the client only when it is actually displayed on the screen. If possible, such content should be stored locally on the client and reused when reloading and refreshing a specific page. The size of the pictures needs to be reduced to a still satisfactory minimum or replaced with the use of advanced CSS techniques (in the case where pictures are used as stylistic elements of web pages, such as borders, color transitions, shadows, etc.). An additional peculiarity of mobile devices and consequently also their web browsers is the way in which they are used. The desktop and portable computers are mostly used in offices, where the users sit still and are focused on their work, whereas the mobile devices can be used almost anywhere, at any time and in any way (e.g. while waiting in line, commuting, working, watching TV, etc.). In all of the afore- mentioned cases, the user does not focus solely on the mobile device or a current application. Instead his or her attention is shared among several tasks. The manner of using a mobile device is also somewhat specific, as most users hold it in one hand and interact with it with the help of their thumb and a simplified version of the keyboard. Figure 1: Comparison between the time of use of a personal computer (dashed line) and iPhone (solid line) during the day [5] The time when the desktop and mobile devices are used throughout the day also differs significantly. Fig. 1 shows the time of use of a mobile phone iPhone compared to the time of use of a traditional desktop computer. The ordinate represents the number of articles downloaded from the web and stored to a specific device. The time of use of a desktop computer more or MOBILE WEB 227 less constitutes a typical eight hour workday (from 8am to 4pm) in addition to a three-hour period before going to bed (from 7pm to 10pm), while the time of use of a mobile device is evenly distributed throughout the whole day in the form of short and intensive intervals. Based on when and how a specific device has been used, we can, to some extent, predict the behavior of users when browsing the web and checking the web content. In the case of a desktop computer, the user spends all his or her concentration and a lot of time searching for and consequently checking the content which is often thematically much more diverse. In this case, the user displays a lot of patience, spending more time on each web site and disregarding potential inappropriate web designs and organization of the web pages. In the case of mobile devices the user often needs just a quick reminder about specific data or a piece of information connected to a certain timeframe and location. That is why the time of use is very short and the users give up much faster if they are unable to find specific content on the expected page. The latter is evident from the sharp edges in Fig. 1. 3 FUNCTIONALITIES OF MOBILE DEVICES Chapter 2 focused on the most important limitations of mobile web clients that strongly affect the user experience and force the web page designers and developers to suitably adapt and change their pages. On the other hand, the modern mobile devices offer various new functionalities based on hardware improvements and upgrades. Smart phones are, for example, capable of determining their location, direction of movement and orientation. They are also equipped with a high- definition camera and microphone and in some cases also with a NFC (Near Field Communication) technology. The use and co-use of these technologies enables new ways of interaction between the user and the device, leading to a completely new and attractive user experience. The exact location of the device can be determined using the GPS module, mobile network base stations, and wireless network, or, in the worst case, based on the IP address of the device [2]. The location-information accuracy depends on the technology used and varies from a few meters (when using a GPS module) or a few kilometers (when using base stations) to merely establishing the country in which the device is located (when using the IP address). The location information can be used in various applications or the so-called location services which offer the user specific information about buildings, objects and people in his or her vicinity. Popular cases of localization services are, for example, the daily menu of a nearby restaurant, the running shows in theatres and cinemas close by and directions how to get there, the location of nearby bus or subway stations, etc. The navigation to a chosen location is then based on the use of an interactive map showing the current location of the user and the desired destination as well as the optimum way between the two. One of the ever-growing possibilities is also the use of augmented reality, in which the virtual marks of the desired objects are added to the actual picture of the surroundings captured by the camera of the phone or other mobile device. Fig. 2 shows an example of a city guide based on augmented reality and the web service Layar [6]. Figure 2: Layar AR browser [6] uses the camera and location and orientation information of the device to display the nearby cinemas and theatres The information on the current orientation and movement can be detected by in-built accelerometers, gyroscopes and digital compasses. This is especially significant as regards web applications and browsers, as these functionalities enable the device to determine its orientation (horizontal or vertical) and adapt the final shape and positions of the displayed web page elements. The turning and shaking of the device can also serve as important input data which can be used for numerous applications and services. One of the most important features of the modern mobile devices is the touch screen, as it enables a completely new way of interaction with a specific application or web page through direct manipulation of different objects and elements on the screen. Touch screens also enable the recognition of gestures performed with one or more fingers. Due to the fact that such gestures are being used on all types of the touchscreen devices, they have become standardized and unified on all platforms. One of such standardized gestures is the so-called drag (placing a finger on the screen and moving it in the desired direction), which is mostly used for moving objects between different parts of the application or for scrolling between different pages or windows. The most common two-finger gesture are the so-called pinching (placing two fingers on the screen and moving them together) and spreading (placing two fingers on the screen and moving them apart), which are used for zooming in or out an object (i.e. a picture) on the screen. 228 SODNIK, KOS The most important features of every mobile phone are a camera and a microphone, which enable the capturing of the video and audio content in the vicinity of the user. In combination with the NFC technology or vicinity sensor, they also enable the interaction with real-life objects in the surroundings, such as, for example, the articles in a shop, menus in the restaurant, billboards on the street, etc. 4 USER INTERFACES When designing web pages, the most important feature of a page is its organization, especially as regards the navigation layout [2]. The golden rule of the web page design is to place most stress on the content; however, special attention should be given to the complexity, location and design of navigation. Mobile web clients are mostly used when the user requires a specific piece of information in a short period of time. While searching and checking the data, the user is often distracted by other simultaneous tasks and disturbing elements, requiring that a web page should be simple, clear and concise. Due to the extreme importance of the time component, the content the user looks for should be available quickly and with as little navigation as possible. A simplified navigation also prevents numerous unwanted mistakes, such as, for example, the user pressing or choosing the wrong option in a menu, which results in a prolonged search of the desired information. In addition to the size of the navigation elements on the page, their location is also very important. Most mobile devices are held in one hand and operated with the thumb. When used in this way, it is easiest to reach the lower part of the device (or, in the case of smart phones, the lower part of the screen). As a consequence, most smartphone applications are developed in such way that the navigation or the active part of the user interface is located in the lower part of the device. A similar trend can be noticed also in the mobile web applications. However, placing the menus and user controls at the bottom of the device or screen can in some cases be somewhat problematic, especially in the case of devices with additional hardware controls at the bottom of the device. In such cases, the user can accidentally press the hardware control instead of the virtual control on the web page. This is why the navigation controls in the mobile web pages should be placed at the top part of the screen. The size of the virtual controls on the web pages is also an important factor and should be taken into consideration when designing the mobile web pages. The finger size and consequently also the accuracy differs from one user to another and cannot be compared to the accuracy of a mouse pointer. All user controls displayed on a touch screen must therefore be large enough for the user to be able to press them also on the go. Different mobile device manufacturers give various recommendations as to the size of user controls. The average prescribed size of a touch area representing a control or button is 10-14mm [2]. Individual touch areas should be at least 2mm apart. Smaller dimensions or distances between the controls can cause the user to accidentally press the wrong control, which can be somewhat frustrating for the user and can actually deter the user from using a specific application or web page. A few years ago, mobile devices were primarily used for reading and viewing the web content and only rarely for filling out forms or entering the user content. Nowadays, every user is also an active co-creator of web pages, which is why mobile devices are used also for creating the textual and multimedia content and sending it to the server. In order to log in to a web page or even change the web content, different web forms are used. Due to the screen limitations of the mobile web clients the forms have to be as concise, simple and easy to use as possible. New standards in the field of web technologies include special input elements (drop-down lists, different controls) which simplify the data input and at the same time also prevent errors. These standards also introduce new features of the existing input elements specifying the type of the content for each element (e-mail address, password, URL, number, color, etc.). Based on these features, the browsers can check the accuracy of the content and prevent many input errors. 5 PAGE LAYOUT AND RESPONSIVE WEB The part of the paper discussing the limitations of mobile devices already pointed out the problem of the screen size and resolution. Designing web pages of fixed and adapted dimensions requires the designers to often change and adapt the pages in order to be displayed properly on new devices. The new standards HTML5 [7, 8] and CSS3 [9, 12, 13] offer a solution to this problem, as they attempt to provide a unified and satisfactory user experience on most client devices. With the help of new technologies prescribed in the above-mentioned standards, the developers can obtain the information about the capabilities and limitations of mobile devices and adapt the web page accordingly. This method of designing the web pages is called responsive web and is based on three major techniques explained in the following three subchapters [3]. 5.1 Fluid layout The basic rule of fluid layout is that all element dimensions are specified relatively (and not absolutely) in relation to their parent elements. In others words, percentage is used instead of pixels and other static units. Designers and developers often make use of special grids and grid systems [10]. MOBILE WEB 229 5.2 Flexible media Fluid layout enables the main window and its content to dynamically adapt to the change in the screen or the browser size. The multimedia content, however, can present a problem as most pictures and video elements have a default size preventing them to automatically shrink below a certain size. This problem can be solved by a special CSS feature max-width (for example, max- width: 100%), which enables the resizing of the element together with its parent element in cases when the latter is reduced to a size smaller than that of the element itself. This CSS feature is already available in all modern browsers (IE 8+, Firefox 3+, Chrome and Safari). 5.3 Media queries Despite the consistent use of fluid layout and flexible media, the small size of the screen still causes several problems. When resolution and consequently the screen size are reduced drastically, sometimes the text and the letter size remain constant, making it impossible to display more than one word from the text on the web page. This drastically deteriorates the user experience, as fluid reading is practically impossible. Very large screens with resolutions of, for example, 1920 x 1080 pixels pose the opposite problem – a single line can stretch to over 1500 pixels or more. According to the expert recommendation, each text line should contain no more than 12 words if we wish to enable a positive reading experience. In the case of very large screens this number can, in fact, surpass the recommended number by several times. CSS3 media queries present a fantastic solution to this problem, as they enable the use of different element and text style and shape for different web browser sizes and resolutions. An example of a query defining the style for a typical smart phone with the resolution of 480 x 854 pixels is given below. @media only screen and (min-device-width:320px) and (max-device-width:569px) { /* Portrait and landscape screen orientation (for smartphones such as, for example, iPhone and Android) } @media only screen and (min-width:321px) and (max- device-width:569px) { /* Landscape screen orientation (for smartphones such as, for example, iPhone and Android) } The table below shows the typical resolutions for some of the most wide-spread devices used to access the web [3]. Table 2: Average screen resolutions for a few typical devices used to access the web Type of the device Maximum resolution Large desktop screen More than 1280 pixels Portable computer or desktop computer with a smaller screen 570– 1280 pixels Tablet 800 – 1280 pixels (depending on the orientation) Smart phone Less than 570 pixels It is almost impossible to specify a style for each of the possible resolutions of the devices that might be used to access our website. However, with the help of the table given above, the designers can predict the most typical resolutions of the devices used and prepare separate presentation modes for each group of devices. Besides the resolution, orientation too, can be taken into account, as already pointed out above. 6 W3C STANDARDS AND RECOMMENDATIONS We already mentioned the new standards HTML5 and CSS3. The first one defines a new version of a mark-up language for structuring and defining web pages (HTML) adding a wide range of new elements and functionalities to the existing standard [11]. The changes are meant to enrich the World Wide Web and consequently also improve the user experience. Although some of the new technologies have already been available in some browsers, the quality and accuracy of the implementation vary significantly from one browser to the other. The standard HTML5 also brings a large scope of APIs enabling the web pages to function also when the client is offline. In addition, it also enables multithreading, full-duplex connection between the client and the server, etc. In the field of the mobile web, the most important document is the draft called the Device API Requirements [14] defining different functionalities and capabilities of mobile devices. Worth mentioning is also the draft called Messaging API [15] which standardizes the method of communication between web pages and mobile devices with the purpose of sending and receiving SMS, MMS and e-mail messages. The draft Contacts API [16] states the way of accessing and managing with directories of a specific device, while the draft called HTML Media Capture API [17] defines the access of the web application to a mobile camera or video intended for capturing images. When acquiring location information of a specific device, the software of the device does not use merely one technology, but rather attempts to establish the location as precisely as possible with the aid of a large number of in-built and available technologies (GPS, Wi-Fi, RFID, triangulation 230 SODNIK, KOS based on the base stations of a mobile operator, etc.). A candidate for the standard Geolocation API [18] is attempting to standardize and unify the access to these technologies and establishing the device’s location. CSS3 is likewise a standard in the making – at the time of writing this paper; it is in the phase of a working draft. The whole specification of CSS3 is very extensive [11, 12] and has therefore been divided into several modules that are developing separately, each with its own tempo. The majority of the CSS3’s features are already supported by all modern and most popular browsers. The new standard is fully compatible with the older versions, and some new features and functionalities have been added as well [10]. W3C has also published a document giving instructions and examples of good practice for the development of mobile web pages (Mobile Web Applications Best Practices) [18, 19]. The instructions are connected with the fields of application data structure, security, privacy, economizing with the energy resources of the mobile device, etc. The document summarizes the most important engineers’ instructions and rules which are followed by most developers from the field and which enable a better user experience of the final users. 7 CONCLUSION Mobile phones and tablets have become independent and fully functional computers in the true sense of the word, as they enable constant availability and connectivity with the web, not to mention their ability to run different applications. They are used for communication, retrieving location- or time-related information or merely to pass the time. The applications that were developed for a specific mobile operating system are becoming more and more efficient, but with a major downside: they operate only on the chosen operating system and are not compatible with the devices made by other manufacturers. The problems of compatibility and interoperability are addressed by mobile web applications [21]. Their capability to access the hardware of the mobile device in fact makes them a serious and effective alternative to native applications, as they are becoming more and more like them. The most important issue connected with the development of mobile web applications is the fact that it is based on a range of widely accepted and standardized web technologies supported in all popular browsers. There are, however, certain limitations and functions that have not been fully supported and implemented, but new functionalities are being added on a weekly basis. The most important fact in favor of the mobile web applications is the enormous growth in the number of the web clients and their growing percentage compared to the tabletop web clients. These issues force the developers to adapt to new ways of web use, new functionalities and capabilities of the mobile devices, and new methods of interaction between the human and the computer. REFERENCES [1] SmartOnline, “Thougths from our Smarties”, http://www.smartonline.com/smarton-products/smarton- mobile/smartphones-pass-pc-sales-for-the-first-time-in-history/ (1.9.2012). [2] Wroblewski, L., “Mobile First”, A Book Apart, New York, 2011. [3] Gardner, S. B., “Responsive Web Design: Enriching the User Experience”, Sigma, Inside the Digital Ecosystem, 11(1), 2011. [4] KISSmetrics, “Patience of mobile web users”, http://blog.kissmetrics.com/loading-time/ (1.9.2012). [5] Read it Later, “Is Mobile Affecting When We Read?”, http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when- we-read/ (1.9.2012). [6] Layar Reality Browser, http://layar.en.softonic.com/android (1.9.2012). [7] HTML5Rocks, http://www.html5rocks.com (1.9.2012). [8] Pearce, J., “HTML5 and the dawn of rich mobile web applications”, http://slideshare.net (1.9.2012) [9] CSS3.info, http://www.css3.info/ (1.9.2012). [10] 960 Grid System, http://960.gs/ (1.9.2012). [11] Sodnik, J., Jekovec, M., Jakus, G., Tomažič, S., “The Future of Web”, 1st International Conference on Information Society Technology and Management, Kopaonik, 2011. [12] Cascading Style Sheets, Current Work, http://www.w3.org/Style/CSS/current-work (1.9.2012). [13] Jacobs, D., “CSS3: Ripe & Ready to Respond”, http://slideshare.net (1.9.2012). [14] Device APIs Requirements, W3C Working Group Note 15.10.2009, http://www.w3.org/TR/2009/NOTE-dap-api-reqs- 20091015/ (1.9.2012) [15] The Messaging API, W3C Working Draft 14.4.2011, http://www.w3.org/TR/messaging-api/ (1.9.2012). [16] Pick Contacts Intent, W3C Working Draft 12.7.2012, http://www.w3.org/TR/contacts-api/ (1.9.2012). [17] HTML Media Capture, W3C Working Draft 12.7.2012, http://www.w3.org/TR/html-media-capture/ (1.9.2012). [18] Geolocation API Specification, W3C Working Draft, 7.9.2010, http://www.w3.org/TR/geolocation-API/ (1.9.2012). [19] W3C, “Mobile Web Application Best Practices”, http://www.w3.org/TR/mwabp/#purpose (1.9.2012). [20] W3C, Mobile Web Initiative, http://www.w3.org/Mobile/ (1.9.2012). [21] Na, D. Y., “The What, Why, and How of Mobile Applications”, Sigma, Inside the Digital Ecosystem, 11(1), 2011. Jaka Sodnik is an Assistant Professor at the Faculty of Elec- trical Engineering of the University of Ljubljana. He teaches subjects entitled Word Wide Web, Web Technologies and Terminals and Applications. His research interests include different aspects of acoustics, telecommunication networks, web technologies and human-computer interaction. Andrej Kos is an Assoociate Professor at the Faculty of Electrical Engineering, University of Ljubljana. His research interests include telecommunication, multimedia and interent networks. He researches also in the area of access and backbone networks, traffic analsysis and optimization of traffic sources. He is a project leader of several R&D projects implemented in cooperation with industrial partners.