Proiect Programarea Clientului de Web: Web Mobile

Oana-Daniela Chelariu
Facultatea de Automatica si Calculatoare Iasi, Specializarea TI Grupa 1406A e-mail:[email protected]

Abstract. The purpose of this paper is to provide some guidance on what web mobile is. I have based this material on the topics i nd in some articles on the internet. The paper is broadly divided into a brief discussion of the current mobile landscape, where we see things evolving to, how to approach it, the technologies used to implement the web on the mobile devices, the mobile browsers that are currently on the market and nally a discussion of some techniques around designing and implementing a mobile web strategy. Keywords: web mobile, XHTML-MP, CSS-Mobile, Mobile Access, Web Mobile Browsers

Introduction

The Mobile Web refers to access the world wide web, i.e. the use of browserbased Internet services, from a handheld mobile device, such as a smartphone, a feature phone or a tablet computer, connected to a mobile network or other wireless network. Unlike the desktop web experience, where screen space is liberal, web access is fast and reliable, and data input is facilitated by keyboard and mouse, the mobile web experience is often a small screen, intermittent, one-handed experience. Invariably, this often leads to leaner content and a reduced feature set in comparison to desktop web content, but it also leads to opportunities unavailable in the desktop web environment: location-specic data, on-the-go messaging, and of course voice communication to name a few. Traditionally, access to the Web has been via xed-line services on largescreen laptops and desktop computers. However, the Web is becoming more accessible by portable and wireless devices. An early 2010 ITU (International Telecommunication Union) report said that with the current growth rates, web access by people on the go via laptops and smart mobile devices is likely to exceed web access from desktop computers within the next ve years. The shift to mobile Web access has been accelerating with the rise since 2007 of
Profesor coordonator: S.L. Simona Caraiman

Web Mobile

larger multitouch smartphones, and of multitouch tablet computers since 2010. Both platforms provide better Internet access, screens, and mobile browsersor application-based user Web experiences than previous generations of mobile devices have done. Web designers may work separately on such pages, or pages may be automatically converted as in Mobile Wikipedia. The distinction between mobile Web applications and native applications is anticipated to become increasingly blurred, as mobile browsers gain direct access to the hardware of mobile devices (including accelerometers and GPS chips), and the speed and abilities of browser-based applications improve. Persistent storage and access to sophisticated user interface graphics functions may further reduce the need for the development of platform-specic native applications. Mobile Web access today still suers from interoperability and usability problems. Interoperability issues stem from the platform fragmentation of mobile devices, mobile operating systems, and browsers. Usability problems are centered around the small physical size of the mobile phone form factors (limits on display resolution and user input/operating). Despite these shortcomings, many mobile developers choose to create apps using Mobile Web. A June 2011 research on mobile development found Mobile Web the third most used platform, trailing Android and iOS.

What is mobile website?

Mobile websites are specially designed for viewing mobile contents on Mobile Phones. Earlier websites were seen only on computers that contained large screens for viewing, and logical computational power and higher Internet speed. But mobile phones are smaller in screens and less powerful than a computer. The Internet connection used in mobile phones has also very slower speed. So websites for computers cannot function well on mobile phones, it needs a special structure for mobile phones and for running on mobile phone; there is the need to create special websites for mobile phones. Mobile web browsing is being very popular due to widespread proliferation of iPhones and other mobile appliances with surf-friendly interfaces. As a result mobile websites are being more important to oer a mobile-friendly alternative to current website. The mobile site can be accessed by BlackBerry, iPhone, Smart phones, WAP phones and most PDAs with various operating systems and wireless Internet connections. Nowadays web access has become very important no matter from where you are accessing the net. The ability of your customers to access your site depends upon the convenience of retrieving the site that plays a vital role in World Wide Web. Making your site user friendly as possible as you can on a computer is one thing while making sure that your site is available from a mobile platform is another. The mobile website is a new sphere of online technology that has its own rules to follow, which distinctly dier from the .com standard. Roseindia Technologies is a specialized company in designing and developing of mobile websites.

Web Mobile

Business website cannot aord to ignore the changing technology. Having a substandard mobile face can harm business and insist potential customers to move on to a more available site. On the other hand, business and sites with interactive mobile websites can exclusively market to mobile users by optimizing content that help them in maintaining and building their brand.

Mobile access

Mobile Internet refers to access to the Internet via a cellular telephone service provider. It is wireless access that can hando to another radio tower while it is moving across the service area. It can refer an immobile device that stays connected to one tower, but this is not the meaning of mobile here. Wi-Fi and other better methods are commonly available for users not on the move. Cellular base stations are more expensive to provide than a wireless base station that connects directly to an internet service provider, rather than through the telephone system. A mobile phone, such as a smartphone, that connects to data or voice services without going through the cellular base station is not on mobile Internet. A laptop with a broadband modem and a cellular service provider subscription, that is traveling on a bus through the city is on mobile Internet. A mobile broadband modem tethers the smartphone to one or more computers or other end user devices to provide access to the Internet via the protocols that cellular telephone service providers may oer.

Fig. 1. Evolution of web-related markup languages

Web Mobile

Standards

The Mobile Web Initiative (MWI) was set up by the W3C to develop the best practices and technologies relevant to the Mobile Web.The main aim is to evolve standards of data formats from Internet providers that are tailored to the specications of particular mobile devices. The W3C has published guidelines for mobile content, and is addressing the problem of device diversity by establishing a technology to support a repository of device descriptions. mTLD, the registry for .mobi, has released a free testing tool called the MobiReady Report to analyze the mobile readiness of website. It does a free page analysis and gives a Mobi Ready score. This report tests the mobile-readiness of the site using industry best practices and standards.

Context is King

The importance of comprehending context ( circumstances and conditions that surround a place, thing, or event ) within the mobile environment cannot be overstated. The mobile web is very much a context and component specic environment. Any mobile web strategy must begin with an understanding of the target audience and what they want from a site or app, and what the contextual relevance of such a site or app is.

Developing Approach

While there are plenty of ways to develop mobile web content, summarized here are some primary methods. Following is an explanation of each method, including a look at the advantages and disadvantages of each. 6.1 CSS Mobile

CSS mobile is a prole of the cascading style sheet language that matches the need of mobile Web authors. 6.2 SVG Tiny

SVG Tiny is a prole of the Webs scalable vector graphics format well-suited to the capabilities of mobile devices. 6.3 WAP 2.0: An XHTML Environment

Wireless Application Protocol (WAP) is the protocol for enabling mobile access to internet content. Wireless Markup Language (WML) was the former language

Web Mobile

of choice for WAP 1.0. With the introduction of WAP 2.0, XHTML Mobile Prole (XHTML-MP) is generally the preferred markup language, with mandated backwards compatibility for WML. WAP 1.0 = WML, WAP 2.0 = XHTML. This is good news for the average web developer because it means were beginning to clear the hurdle of WAP 1.0 and WML that once seemed insurmountable for those who didnt specialize in mobile development. The learning curve is much smaller today than it was just a few years ago. Nearly all devices sold today are WAP 2.0 devices, and XHTML Mobile Prole, which will be familiar to anyone who has worked with XHTML Transitional or Strict, is the ocial markup language for those devices. XHTML Mobile Prole is merely a subset of XHTML, and it isnt a far cry from XHTML Transitional or Strict. Dotmobi recently released two sets of XHTML-MP templates that will aid developers new to mobile in creating mobile web content. Because XHTML-MP is a subset of XHTML, initial testing and validation can be done within most desktop browsers. Thorough, nal testing will certainly need to be conducted using actual devices.

6.4

String Images and Styling

Recognizing WAP 2.0 devices support XHTML in addition to WML, this method relies on the strength and implicit hierarchy of markup to deliver a navigable, content-rich experience. Several resources already exist that allow both the user and the developer to perform this raw rendering with minimal eort.Skweezer.net , a mobile web service pioneered by Greenlight Wireless Corporation, has been in use since 2001. Skweezers freeware web portal serves its users with sites that have been reformatted and compressed dynamically. While this quick xmethod may be attractive given its ease of implementation, it does little to address context. Further, le size may still be excessive, as markup and text-only content can still be heavyweights in their own right, often resulting in long, scrollable pages with large le sizes.

6.5

Handheld stylesheet

Handheld stylesheets have typically been regarded as the poster child of a more mobile-friendly web. Because they are inherent in CSS, this method requires the addition of as little as one additional stylesheet to a properly coded site, and only one web address is needed. Theres certainly no shortage of resources for handheld stylesheet development. Handheld stylesheet support on mobile devices is currently hit or miss, more often miss than hit. More importantly, handheld stylesheets deal primarily with aesthetics, rather than context, often giving little attention to whether the content is even relevant to mobile browsing.

Web Mobile

6.6

Mobile-optimized Site

Methods that rework only the aesthetics of a site merely to t it on a small screen likely fail to address the context-, content-, and component-specic needs of mobile users and their devices. Little Springs Design refers to this issue as miniaturizing vs. mobilizing. Miniaturizing treats the mobile environment and technology as a subset of the desktop environment.It fails to consider the strengths and weaknesses of mobile devices. Mobilizing, on the other hand, precisely targets mobile user needs, making [the] best possible use of technology.Contextual user tasks not the existing website determine the architecture of the mobilized site.

What is Device Independence?

At its inception, virtually the only way to access the Web was through a personal computer or workstation. While there were lots of variations, accessing the Web almost always involved using a modern computer with a reasonably large color display. Computers may still be the primary means of accessing the Web, but in recent years the number of dierent kinds of devices accessing the Web has grown by leaps and bounds. Mobile phones, personal digital assistants, eBook readers, television systems, voice response systems, music players, kiosks, digital picture frames, in-car navigation systems and even domestic appliances are all starting to access the Web more and more. Device Independence refers to the goal of having a single Web that is accessible from any of these devices.

What is Content Adaptation Used For?

Content Adaptation is a process that based on factors such as the capabilities of the displaying device or network, or the users preferences, adapts the content that has been requested to provide an optimized user experience. This adaptation can occur in a number of places in the content delivery chain: the author may make choices when writing the content, or intermediary automated content transformation proxies could adapt the content based on heuristics and knowledge of the user, or the adaptation could occur within the browser itself.

Examples

Content that is adapted to the users device is commonplace on the mobile Web. Two dierent mobile devices may have radically dierent display capabilities, for instance one may have a black and white display that is very low resolution, while another mobile device may have a full color 480x320 resolution display. Yet sites that use content adaptation techniques can provide both devices access

Web Mobile

to the same information. For example, the content author may wish to use one set of colors when displaying their content on the color display, but may nd the results illegible when displayed in black and white. The author could use the following HTML to style the page in full color only when a color display has been detected: <link rel="stylesheet" media="screen and color" href="color.css"/>
(This code would cause the browser to evaluate what type of display the content is being rendered on, and determine whether or not to use the style information included in the color.css style-sheet.)

10

Mobile First, Desktop Later

Mobile rstis the process of designing, creating and delivering content with mobile device compatibility in mind. Using mobile devices has changed the way users behave, and has placed experience at the heart of how they interact with brands and that makes any brand with a poor user experience extremely vulnerable. This is such a key topic at the moment that it has made it onto the agenda of a number of digital media and marketing events. From a content delivery perspective, the mobile rst approach is a question of workow: businesses want to meet the needs of smartphone, tablet and desktop users but they dont want to overburden their editors, designers and web developers. Taking mobile as a starting point for content creation is an eective means of making sure your web content is compatible with all dierent screen sizes. At the same time, it makes it possible for content to be created in a single location and used across multiple devices streamlining workow and reducing the gap between creating an idea and publishing it across all your channels.

11

Building for Mobile

From the perspective of content asset owners, the focus is on making sure that users can access the information they need when they need it and on their preferred device. And that means moving away from a content model that starts with a desktop site and strips it down, towards one that begins with the smallest device and works upwards. News site Metro.co.uk is a great example of this approach they gave up smartphone and tablet apps altogether to develop a website where, in the words of their Head of Content Martin Ashplant, anything that doesnt work on mobile doesnt get published.This meant completely changing the priorities of the site to take into account user behavior, mobile device page load speeds and the way image use and advertising aects the user experience.

Web Mobile

12

Beyond Design

Making mobile the starting point for your digital strategy might seem like a radical move if you arent a news provider but it makes sound business sense. Of course, making the mobile rstapproach work means taking it beyond the design phase and into the entire content lifecycle process. It means setting clear guidelines and parameters for the type of content that can make it on your site image sizes, use of Flash, content length and monitoring to ensure incompatible elements either dont make it through, or are eliminated as soon as possible. And in the same way that companies embracing the mobile rstapproach are looking to streamline workow, they will be seeking to make this monitoring process as automated as possible, for maximum results.

13
13.1

Web Mobile Limitations

Fig. 2. Web mobile limitations - No hover state

On smartphones theres no hover state (not yet anyways). This can be a challenge for pages with a lot of content or features as the interface quickly gets bloated with links and buttons that would normally only be shown on hover. On mobile, any information or feature must be accessed in either of two ways: Visible - the content or feature is accessible from visual means. It may be nested in sub-sections or child pages, but the content is nonetheless accessed from visible navigational elements such as buttons or links.

Web Mobile

Convention - by relying on mobile design conventions you may hide content and only display it when the user employ certain gestures such as swipe or shake, or when the user drags content around such as pull-to-refresh. The last approach, convention, can help simplify the interface but also runs the risk of obscurity. Essentially you rely on the user to a) know the convention and b) try it out on your site to see if you support it. But if either of those fall at the user will essentially have no idea that the feature exist, thus such features should either be explained at rst visit or be non-essential to the experience of the site.

13.2

Slow and error-prone typing

Fig. 3. Web mobile limitations - Slow/error-phone typing

Typing on a touch keyboard is a slow and error-prone exercise so make sure to keep your form elds to an absolute minimum and pre-select clever defaults. Furthermore, you need to consider how you deal with errors in data. While youll certainly need to deal with erroneous data in desktop designs too, there will be even more errors in forms lled out on touch devices due to the touch keyboard and smaller screen size (providing less context and overview). Review pages may be a good idea for longer forms if the user cant edit the data after its been submitted. You may also consider auto-complete functionality, the use of geo-data, inline validation, address validators, and other methods for suggesting and correcting user inputs as they are typed.

10

Web Mobile

13.3

Less context

The smaller screens on touch devices results in reduced context. This tend to make it more dicult for the user to get an overview of the page, compare various options, and remember prior content. Consider a long form. As the user scrolls down, the title of the form disappears along with previously entered data. Without this context it gets signicantly more dicult to interpret the meaning of the currently visible form elds. It also makes it dicult to spot errors retrospectively. In this instance a review or summary screen can help avoid erroneous data while a header xed to the top of the screen can help maintain context. (A xed header will of course lower the screen real estate for unique content so if the context of nearby elds is more important then this approach would actually reduce the context.)

Fig. 4. Web Mobile Limitations - Less context

13.4

Inaccurate clicks

On touch devices people use their ngers to click links and buttons on the screen, which signicantly decrease the accuracy of clicks. This is also known as the fat nger problem .

Web Mobile

11

Fig. 5. Mobile limitations - Inaccurate clicks

In practice, this means you must consider the size and proximity of all clickable elements, making sure theyre large enough to reliably touch with a human nger and far enough apart that users won t accidentally touch the wrong element. Navigation and control bars are of particular importance as they include numerous click-able elements (making accidental clicks more likely) that all have signicant consequences to the page (making accidental clicks more critical). During our mobile e-commerce usability study we observed a multitude of sub-problems caused by accidental click, some even leading to abandonments. One way to deal with accidental clicks is to ask the user to conrm their action but that quickly gets annoying. A much less intrusive (and typically better) approach is having an Undo feature that allows the user to revert accidental behavior when it happens as opposed to constantly interrupt the users intentional acts. 13.5 Poor connectivity

Its not uncommon with intermittent connectivity issues and slow download speeds on smartphones. Its really a two-pronged issue: No connection While users probably wont expect oine mode from your website then you should still try to handle lost connections gracefully.AJAXenabled features are particularly prone to unexpected behavior and silent failures (see http://navigator.onLine/).

12

Web Mobile

Fig. 6. Web Mobile limitations - Poor connectivity

Slow download speeds If youre on a mobile EDGEnetwork download speeds will be pretty miserable. In other words, if your site should be usable on slower connections too then be sure to make its footprint as small as possible by implementing aggressive asset caching, using CSS3 eects instead of images, etc. Of course both of these solutions will improve the experience on all types of networks. Lowering your sites download footprint will make it super speedy on faster connections. Handling network issues gracefully will of course be much appreciated by the users the few times they do experience network issues on otherwise more stable connections. 13.6 Slow hardware

While the performance of touch devices is improving rapidly, they are still slow devices compared to desktop computers. This means that page initialization can be upsettingly slow especially if you execute a lot of Javascript on page load. Another issue of slow hardware is that transitions and other animations may be laggywhich - besides being aesthetically unpleasing may wreck the users sense of virtual space (or fail at establishing it in the rst place). In both cases, good programming is paramount. Deferred Javascript execution combined with liberal use hardware accelerated CSS animations will do the trick in most cases when implemented properly. 13.7 Usage situation

Since the very nature of smartphones is mobility you have to consider the impact of real worlddistractionsa speaker announcement, walking in trac,

Web Mobile

13

Fig. 7. Web Mobile limitations - Usage situation

etc. Another and possibly larger source of distractions are the digital interruptions text messages, phone calls, push notications, two-taps-away-from-AngryBirds-syndrome, and so on. These two sources of interruptions make the returnabilityof your site increasingly important. If a user return to your site after a distraction can they immediately pick up where they left or do they lack essential context? If the page is refreshed will their data still be there despite never submitting the form (see HTML5 localStorage)? Has the session expired? 13.8 No right-click

Custom right-click menus arent that utilized on traditional websites, but you do see them in more and more web apps (e.g. Google Docs) and in most native software. Here, the right-click menu often acts as a quick context-based shortcut to commonly used features. However, mobile devices do not have a traditional right-click option. Using a tab-and-hold gestureis the closest substitute that comes to mind.

14
14.1

Web Mobile Browsers

Ith about 20 million users, this browser is perhaps the most popular mobile mini browser out there. So popular that it comes preinstalled in most modern cellphones. Some people even consider it as their native mobile browser. Superb compression, extremely fast, skinnable and able to play online video are few of the traits that makes the latest version of Opera Mini v 4.2even better than before.

14

Web Mobile

Fig. 8. Web Mobile Browsers - Opera mini

14.2

UCWEB Mobile Browser

Fig. 9. Web Mobile Browsers - UCWEB

This veteran mini browser is very popular in China but unknown to most people in Europe and the United States. The latest version is 6.3 (while Opera Mini is still 4.2), and available for free in Java and Symbian. It has all the mobile browsers features users would need and more. The most noticable is a password manager and tabbed browsing. Other features include:

Web Mobile

15

Advanced search function with support for various search engines and the ability to sort the results. Email service which supports many online email mailboxes and dierent types of attachment formats. Download function to help users download les from the phone. One thing to consider though, usually the internet data connection through your phone provider will cost a lot more than a home connection. RSS subscription support Personal data management to synchronize bookmarks between phone, web and PC.

14.3

Teashark

Fig. 10. Web Mobile Browsers- Teashark

The developer chooses to make this browser available only in one format Java MIDP 2.0 and for good reason: it will work on every modern cellphone. Just like UCWEB, one of its strong points is the ability to do tabbed browsing. Other features are: Bookmarks with tags. Smart URL Bar with integrated web search built in and access to many search engines. Tabbed browsing with thumbnail images and page zoom. Password manager, instant web ID, and the ability to clear private data. Bookmark organization with color tags.

16

Web Mobile

One thing that disturbs me about Teashark is that we always have to choose which network we want to choose to connect to the internet everytime we start the browser. It would be more convenient if we can choose one at the beginning and continue using it until we decide to change it. 14.4 Skyre

Fig. 11. Web Mobile Browsers - Skyre

One of the biggest limitations of mobile browsing is the ability to play Flash and video, but thats no problem for Skyre. The developer also claims that this browser also supports pages with Ajax, Silverlight and Quicktime. 14.5 Firefox Mobile(Fennec)

Fig. 12. Web Mobile Browsers - Fennec(Firefox mobile)

Currently, some of the features are: Bookmarks with tags.

Web Mobile

17

Smart URL Bar with integrated web search built in and access to many search engines. Tabbed browsing with thumbnail images and page zoom. Password manager, instant web ID, and the ability to clear private data. Pop-up blocker.

15

The Continuing Rapid Growth of Mobile

Mobile is the main driver for all of them. The Visual Web (Instagram, Pinterest and similar image-focused apps), the Consumer Cloud (Evernote, Dropbox, iCloud and others), social video apps (Socialcam and Viddy) and video on tablets (BuzzFeed, Flipboard and others). Each of those trends are popular in 2012 because of smartphones and/or tablets. According to StatCounter global statistics, mobile trac jumped from about 4% of all Web trac at the end of 2010 to over 10.5% now.

Fig. 13. Mobile trac growth

Mobile has rapidly grown and this fact cand be seen in the inuence that the mobile had in three of the biggest Internet Companies. 15.1 Googles Mobile Content Play

What used to be known as the Android Market was re-branded at the end of June to Google Play. Its a content store for Android apps, covering the many smartphones and tablets that run Googles open source mobile OS. As Dan Rowinski noted: Almost every announcement at the Google I/O keynote [...] tied directly to Google Play. Android Jelly Bean [the latest version of the OS] makes it easier

18

Web Mobile

for developers to upload apps to the store and for consumers to download app updates from the store. The Nexus 7 Android tablet serves as a portal to it. The Nexus Q is all about media in the home, media drawn from it. 15.2 Microsofts Mobile-Centric Windows 8

Fig. 14. Windows 8 user interface on a ipad and on a iphone

Microsoft is a giant company built from a PC operating system: Windows. But the latest version of Windows, Windows 8, is heavily inuenced by mobile and designed to integrate across devices. The Windows 8 user interface - labeled Metro - is based on the mobile paradigm. It has touchscreen functionality and a new tile-based Start screen inspired by the Windows Phone operating system. 15.3 Facebooks Mobile Statistics

Fig. 15. Facebook statistics

Web Mobile

19

According to its public statistics, Facebook had more than 680 million mobile monthly active users as of December 31, 2012.

16

Conclusion

Forecasting is a risky activity, even for analysts. However, there are a number of indisputable trends, which should inuence the plans of every business. Nobody sees any end to the rapid growth of mobile. There have been endless predictions on mobile eclipsing desktop browsing over the last couple of years. Mobile will certainly be dominant in terms of mobile representing the single most widely available access point to get online. 16.1 Where we are going

More fragmentation In essence, for as long as device manufacturers are in competition, they will dierentiate and compete using all means at their disposal. What we are seeing today is not just R & D investment as a driver of creativity, but also the increased usage of patents in litigation. More connectedness The connectedness of the individual is growing relentlessly. Browsers are becoming embedded in more and more appliances, so that increasingly an end user will have a browser at their ngertips. The corollary to this is that non-connected devices will decline. We have moved from a world in which we go online to one in which we live online. More context awareness The more connected an individual becomes, the more it is possible to know about them. The more that is known about them, the more accurately content can be selected and presented for their needs. With the emergence of device APIs, a lot more can be learned about a users location and movements, allowing inferral of their context, for example whether they are window-shopping, waiting for a bus, on a train, or in front of a television. Each of these cases translates to a dierent set of needs and interests. Native apps and mobile web will continue to grow on separate paths There is a clear growth trend for content consumption via mobile web than via native apps. This is due to a mix of factors, all of which suggest that this trend will continue. Apps provide an unassailable advantage in terms of control over the user experience, and this will remain the case even with the growth of HTML5 and other web technologies. However, native apps simply have a dierent goal than a mobile website. To paraphrase Google and others: apps are for loyalty, mobile web is for discovery. Not all businesses need both, but for many, it makes sense to focus on getting the customer rst, then on how to retain them.

20

Web Mobile

Bandwidth will continue to be a cost and a constraint In spite of increasing capacity, the rapid growth in demand for bandwidth will result in congestion. Probably always. As a result, there will always be value in optimizing content for bandwidth. Ultimately, no matter how capable the device is, it will be subject to real world bandwidth constraints, and the user experience will still be better if a page loads within two seconds. Even in urban areas network congestion, peak periods of demand and even being in tall buildings can substantially degrade connectivity speeds. Outside of major cities bandwidth continues to be a challenge, providing a very poor experience for sites with heavy payloads.

Table of Contents

Proiect Programarea Clientului pe Web: Web Mobile . . . . . . . . . . . . . . . . . . Web Mobile 1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 What is mobile website? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Mobile access . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Standards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Context is King . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Developing Approach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.1 CSS Mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.2 SVG Tiny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.3 WAP 2.0: An XHTML Environment . . . . . . . . . . . . . . . . . . . . . . . . . 6.4 String Images and Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.5 Handheld stylesheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.6 Mobile-optimized Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 What is Device Independence? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 What is Content Adaptation Used For? . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Mobile First, Desktop Later . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Building for Mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Beyond Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Web Mobile Limitations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13.1 No Hover State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13.2 Slow and error-prone typing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13.3 Less context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13.4 Inaccurate clicks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13.5 Poor connectivity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13.6 Slow hardware . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13.7 Usage situation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13.8 No right-click . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Web Mobile Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14.1 Opera Mini . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14.2 UCWEB Mobile Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14.3 Teashark . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14.4 Skyre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14.5 Firefox Mobile(Fennec) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 The Continuing Rapid Growth of Mobile . . . . . . . . . . . . . . . . . . . . . . . . . . 15.1 Googles Mobile Content Play . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15.2 Microsofts Mobile-Centric Windows 8 . . . . . . . . . . . . . . . . . . . . . . . 15.3 Facebooks Mobile Statistics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16.1 Where we are going . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1 1 2 3 4 4 4 4 4 4 5 5 6 6 6 6 7 7 8 8 8 9 10 10 11 12 12 13 13 13 14 15 16 16 17 17 18 18 19 19

22

Web Mobile

More fragmentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . More connectedness . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . More context awareness . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Native apps and mobile web will continue to grow on separate paths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Bandwidth will continue to be a cost and a constraint . . . . . . . . . . 17 References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

19 19 19 19 20 23

Web Mobile

23

17

References

References
1. Martin Clancy, Ronan Cremin, John Leonard: Future of the Mobile Web (2012) 2. What is Mobile Website? , http://www.roseindia.net/services/webdesigning/ corporatewebsitedesign/What-is-Mobile-Website.shtml 3. Google Play & Android Mobile Strategy, http://readwrite.com/2012/06/28/ google-play-is-central-to-googles-android-mobile-strategy 4. The Continuing Rapid Growth of Mobile, http://readwrite.com/2012/07/05/ top-trends-of-2012-the-continuing-rapid-growth-of-mobile 5. A Beginners Guide Mobile Web Development, http://mobiforge.com/starting/ story/a-beginners-guide-mobile-web-development 6. Mobile Web , http://www.w3.org/Mobile/ 7. The Mobile Web Design (User Interface) Limitations , http://baymard.com/blog/ mobile-design-limitations 8. Mini Browsers For the Mobile Devices(phones) , http://www.makeuseof.com/tag/ five-mini-browsers-for-your-mobile-phone/