Web Technologies
4 developers.google.com/webmasters/smartphone-sites
Mobile Sites & Web Technologies 120
lows: ‘There is rampant technology fragmentation across mobile browsers, so developers do not know which part of HTML5 they can use. HTML5 is promoted as a single standard, but it comes in different versions for every mobile device. Issues such as hardware acceleration and digital rights management are implemented inconsistently. That makes it hard for developers to write software that works on many different phone platforms and to reach a wide audience.’
Most recently LinkedIn traded its mobile-web based apps in for a new set of native applications. Kiran Prasad, LinkedIn's senior director for mobile engineering decided to build both a HTML5 site and rich native apps. His reasoning is that HTML5 is ready and important for the business, but not supported by the ecosystem as it should be. 'There are tools, but they are at the
beginning. People are just figuring out the basics.'5
For more info on browser compatibility, check out the
HTML5Test online6. The site provides both an overview and in-
depth analysis of which HTML5 features are supported by which
browser. Facebook has also launched ringmark7 which tests web
browsers for 3 rings, or levels, of support for HTML5 features which helps developers to quickly check the level of support of various mobile (and desktop) web browsers.
To wrap it up: Almost everyone in the mobile business agrees that HTML5 will succeed in the long run. ABI research estimates that mobile devices with HTML-compatible browsers
will total 1.4 billion worldwide by the end of 2013.8. Operating
systems will gradually increase support for HTML5 features and browsers to increase overall adoption and speed. Open-source
5 venturebeat.com/2013/04/17/linkedin-mobile-web-breakup
6 html5test.com/results/mobile.html 7 rng.io
8 www.abiresearch.com/press/14-billion-html5-capable-mobile-devices-in-
Mobile Sites & Web Technologies 121
platforms such as the Firefox OS, Sailfish, Tizen and Ubuntu should also help to speed up adoption. Furthermore, the World- wide Web Consortium (W3C) has finally declared HTML5 feature complete and envisions that HTML5 will become an official web
standard in 20149. The Developer Economics 2014 research10
already ranks HTML5 as the third most popular mobile app platform (after Android and iOS of course) with 52% mindshare.
Fragmentation Needs Adaptation
The biggest challenge of mobile site development is fragmenta- tion. In theory all internet-enabled devices can access any mobile site via a browser. The reality however is that develop- ers need to adapt and optimize mobile site content to cater to the ever increasing number of browsers and devices with varying levels of software and hardware capabilities.
Broadly speaking there are two approaches to optimizing content for mobile devices: Client-Side and Server-Side Adapta- tion.
— Client-Side Adaptation makes use of a combination of CSS
and JavaScript running on the device to deliver a mobile- friendly experience.
— Server-Side Adaptation makes use of the server to execute
logic before content is passed on to the client.
The following section provides an overview of client-side and server-side techniques used to make mobile sites accessible for the majority of current and future Internet-enabled devices.
9 www.w3.org
Mobile Sites & Web Technologies 122
Client Side Adaptation Responsive Web Design
Responsive Web Design has been a buzzword amongst market- ers and web developers alike. In its simplest form responsive design consists of a flexible grid, flexible images and CSS media queries to cater to a number of screen resolutions or types of devices.
On its own this results in a device-sensitive experience for a limited range of devices and lacks sophisticated content adaptation. The same content is served to all devices. It is not advisable as a technique to deliver complex desktop and mobile sites.
Pro
— Pure client side adaptation ensures no impact on the
existing infrastructure
— Automatic adjustment of content and layout possible
Con
— The same content available on the website will also be
available on the mobile version (whether visible or not).
— The page weight of the site can have a significant impact
in terms of performance on mobile devices
— It is a general approach instead of actual mobile-friendly
device optimization (e.g. Top 5) Progressive Enhancement
Progressive Enhancement has the capability to cater to the full spectrum of mobile devices. A single HTML page is sent to ev- ery device. JavaScript code is then used to progressively build
Mobile Sites & Web Technologies 123
up functionality to an optimal level for the particular device. As a mobile only solution the main drawback is performance. The progressive build-up takes time to execute and varies according to the device and network. As a desktop and mobile solution its main drawback is that a single HTML document is sent to all devices. A well-known framework that makes use of progressive
enhancement is jQuery Mobile11.
Pro
— Pure client side adaptation ensures no impact on the
existing infrastructure
— Progressive adjustment of content, function and layout
possible
Con
— A loss of control, since detection is handled by the browser
— Browser detection is still far from perfect
— Detection done on the client-side impacts overall perfor-
mance of the site
— The same HTML page is served to all devices
Server-Side Adaptation Device Databases
Device databases detect each device accessing the website and return a list of device capabilities to the server. This information is then used to serve a mobile site that caters to the device’s capabilities. Server-side adaptation is one of the oldest and most reliable solutions. Popular device databases
Mobile Sites & Web Technologies 124
include WURFL12 and DeviceAtlas13. The main drawback of
device databases is that the majority is only available as part of a commercial license.
Pro
— Most commonly used solution (Google, Facebook, Amazon
and alike)
— Maximum control
— Device optimization possible (for example to iPhone,
Samsung Galaxy and alike) Con
— Device Description Repositories are hardware focused
— Besides the data, a detection mechanism is needed (a
simple ‘User-Agent’ matching does not work) Hybrid Adaptation
Truly the best of both worlds, the combination of client and server-side adaptation ensures high performance thanks to server-side adaptation and means that the capabilities sourced can be used to enrich the mobile experience on subsequent visits.
Hybrid adaptation solutions are available commercially
from companies such as Sevenval14 and Netbiscuits15, and as
community-backed cloud solutions, for example FITML16.
12 wurfl.sourceforge.net
13 deviceatlas.com 14 sevenval.com
15 netbiscuits.com 16 fitml.com
125 Mobile Sites & Web Technologies
Better Data Input
With small, often on-screen, keyboards entering text can be cumbersome and time-consuming, particularly if the user has to enter numbers, email addresses or similar text. Thankfully developers can easily specify the expected type of input and smartphones will then display the most appropriate on-screen keyboard. mobileinputtypes.com provides various clear and concise examples.
Better Performance
Mobile users expect sites to load within 2-5 seconds. This is a currently a challenging task, especially for complex mobile sites. The following sections provides tips to reduce transfer size, content and HTTP requests to minimize load time and improve performance.
Reduce Transfer Size
Make use of image resizing and adjust the image quality according to network quality.
Reduce Content
Both site and asset loading becomes more and more important. Minifying assets such as JavaScript and CSS files can help to reduce overall asset load times. Multiple files of the same type are compressed into one and all whitespace is removed. Code becomes shorter, but still behaves in the same way. All
this can result in a lower number of requests and ultimately a faster loading time.
At the same time it is important that the user understands what is going on. Accordingly, if content is loading its impor- tant that the user is aware of this and is not presented with a blank box or page. A smooth experience is paramount to any mobile experience and this includes the journey from site to content loading in the site and any animation surrounding it. Reduce HTTP Requests
Inline images, scripts and styles, and add JavaScript pipe and Application Caching. Key benefits are that scripts are delivered in a single request per page, HTTP round-trips are minimized and core scripts are stored in the application cache. The implementation will not affect reload and scripts are still cacheable publicly (CDN).
For more detailed tips around mobile web performance
check out Roland Guelle's presentation for DWX17.