Mobile design considerations and techniques

 Mobile design considerations and techniques

 

we explained that it’s important to research the level of adoption of mobile devices such as smartphones and tablets. I css For many site types such as social networks and news sites, the proportion of mobile users has been well above 50 per cent for several years.

At the time of writing this edition, many retail sites now see more than half of their traffic from mobile and this will naturally increase. So designing websites such that they are effective across desktop and mobile devices is now a key consideration for all businesses.

 The challenge of the many options for mobile site design has been nicely summarised by ex-eBay designer Luke Wroblewski, as shown in Digital marketing.

We will now review five common options for mobile site development identified by Thurner and Chaffey (2013):

A Simple mobile site (different content).

B Screen-scrape (same content).

C Responsive Design (same content, different mobile styling).

D HTML5 site (same content, different mobile styling).

E Adaptive design (potentially different content, different styling on different mobile devices).

These are not mutually exclusive so an HTML5 site can typically offer adaptive and responsive design too

Mobile site design option A.

Simple mobile siteThe quickest method of creating a mobile site is to create a completely separate mobile site on a domain http://m.company.com which has a different design, build, hosting and content.

This option may be appropriate for very small businesses looking for a simple mobile site which they don’t update frequently, but we would advise this not a viable long-term option for most companies for these reasons:

● Updates to content have to be duplicated across each site.

● Different tools and resources often needed to manage each site.

● Future updates to styling have to be duplicated too.

● May not give a consistent brand experience for users.

Mobile site design option B. 

Screen-scrape Although it’s not an option we can recommend as best practice, it’s worth noting that a number of high-profile retail brands like ASOS and John Lewis opted for a temporary ‘screen-scrape’ approach, which involves dropping existing web content into a basic mobile.

Site template without opting for back-end integration. The advantage of the screen-scrape approach is that it presents a quick route to market, and avoids potential conflict between PC web and mobile web developers.

Think through the widespread disadvantages of screen-scraping when compared with the fully integrated approach, which provides the better long-term solution.

● The screen-scrape option incurs additional time and cost to manage the site, as changes to the back-end CMS will need to be updated manually on the mobile site, rather than benefiting from automatic updates.

● A review of ‘screen-scrape’ sites reveals an alarming degree of standardisation across the sites, which lack the differentiation brands demand across their PC websites.

Mobile site design option C. 

Responsive design Today’s multiple-device-using consumers need content in the right format in real time, which presents challenges as the form factor and operating system varies across most of their devices.

Enter Responsive Design, which automates the overlay of contextually relevant content matching the profiles of mobile users allowing you to access social media feeds, loyalty offers and other data feeds triggered by your preferences to maximise engagement and to optimise sales conversion.

First introduced as a concept in 2010, Responsive Design is the principle web developers deploy to design website styling that changes the display layout to suit users of a range of mobile devices using modern web development methods like CSS3 and image scaling.

Blocks of content are moved and rescaled based on screen resolution

Responsive Design is an increasingly popular approach to building mobile sites since it enables a single version of the site and content to be maintained which adapts for different resolutions. 

Mobile site design option D. HTML5

HTML5 blurs the line between sites and apps, and challenges the prominence and cash flow of the appstore hosts. Companies operating in the main sectors who were enthusiastic adopters of mobile, such as retail, packaged goods, travel, financial services, publishing, are turning to HTML5 ‘web apps’ in order to build once and target all mobile platforms at once.

This is more cost-effective and less labour-intensive than building different native apps for iOS, Android, Windows Phone and BlackBerry.

HTML5 web apps allow developers and publishers to circumnavigate the 30 per cent commission charged by Apple and Google on app download costs and a further 30 per cent on products and subscriptions sold in app.

Both costs can be eliminated with HTML5-based sites. From the technical perspective, HTML5 apps have some problems that native apps do not.

HTML5 apps are typically slower than native apps and it is more costly to support a range of apps. FT.com still uses native apps for Android and Windows platforms.

Of course, the other big benefit for publishers, not mentioned here, is that they can take a bigger share of subscription revenues.

The app was launched in June 2011 in response to Apple’s introduction of new rules governing subscription-based iOS apps Apple is looking for a 30 per cent cut of subscription revenues for people signing up from its native app and keeping access to those subscribers.