Expression Web Resource by Data Insite

Mobile website development

Contents

1) Why is this so important?

2) Single site or a separate mobile site?

3) Design Needs and Options

4) Testing

5) Tips, tricks, tools and resources

6) Mobile Snippets for Expression Web V4

 

Why is this so important?

Depending on which survey you read, mobile internet usage is set to overtake desktop usage somewhere between 2013 and 2015. Some areas of the world already (Dec 2011) have in excess of 25% mobile usage and India for example has over 40%.

Whist this may not be urgent for corporate sites, any site that has a consumer focus needs to be easily viewable on a SmartPhone to cater for the many users who already use their mobiles as their prime (and sometimes only) internet viewing platform.

A survey in 2009 found that 52% of consumers are unlikely to return to a website they had trouble accessing from their phone.

Most obviously, if you have a site that is consumer facing, you should ensure it can be used on mobile devices. Typical examples would be sites for real estate, shops, restaurants, on-line stores, schools, childcare etc.

The message is clear. It's not a case of 'if' but 'when' we make at least some of our websites mobile friendly.

 

Single site or separate mobile site?

From ease of maintenance if nothing else, a single site is preferable but there are applications where two versions of a site are warranted, a desktop/tablet version and mobile version, particularly where they can be driven from the same content.

If you already have a large site that would take a huge amount of effort to redesign, a separate mobile site may be an interim or even permanent solution. However, in most instances with small to medium complexity sites, a single site version is the solution.

A year or so ago creating this single site would have been difficult. Fortunately two related things have made this very much easier. The first is the support for extended media queries in CSS3 and the second is that modern mobile browsers support both HTML5 and CSS3. Mobile devices can therefore be catered for using 'responsive design'. (See below).

Without doubt it's easier to create a mobile friendly site from scratch than it is to modify an existing site, unless it's a very small one. It may also be easier to start with a CSS framework that is mobile friendly than re-invent the wheel yourself, particularly if your time or CSS skills are limited. See the Design section below.

If you do want to have specific mobile pages you'll need to detect when a mobile browser is using the site. This is done by looking at the browser UserAgent string but isn't 100% reliable. See this article Detecting Smartphones Using JavaScript

 

Design Needs and Options

'Responsive Design'

As noted above the key to a single site for mobile and desktop use is 'Responsive Design'.  Using the CSS3 media queries we are able to set different properties for a style depending on the browser width. In this way we can alter the size, relative position and background image of a page section or element, etc in 'response' to the screen size it's being viewed on.

Here's a a simple example based on a flexible design and media queries. Resize your browser window by dragging the right hand side to the left. You'll see how the layout alters when you reach mobile-portrait size.

It's constructed using several of the HTML5 and Mobile snippets in the Expression Gallery

For some real life examples of mobile-friendly sites built using responsive design see www.mediaqueri.es

As noted above there are numerous CSS Frameworks that are built using 'responsive design'. I was initially sceptical about these but needing to create a site very rapidly recently, decided to try one and used the 'Skeleton' framework. My reservations were unnecessary and it was very easy to use and modify. So why bother re-inventing the wheel?

'Mobile First' design

One of the key concepts of 'responsive web design' is to start 'mobile first'. In other words get the layout and content working properly on mobile screen sizes and then use the media queries to alter the style for larger screen sizes. It's far easier this way round that designing for the large screen and then trying to fit it on smaller screens.

Authoring

To be able to use the @media queries for a responsive layout you need to use CSS3. We also need to use HTML5 for it's new form input types. (See below).  Set these as your authoring defaults in Expression Web.

Having used CSS3 you may then need to use some JavaScript 'shims' (aka 'polyfills') to render features like rounded corners and shadows in older browsers.

Older Mobile Browsers

Older mobile browser versions may not support @media queries used for responsive layouts. The 'respond.js' shim allows them to do so. It doesn't load if appropriate @media support is detected.

https://github.com/scottjehl/Respond/

Resource Sizes

With users often paying for mobile web access by the megabyte (or 10Mb) it's essential you minimise the size of all the resources on the site. The techniques we had to use 10 years ago for dial-up connections are once again important.

  • Place script and CSS into separate files rather than have them on the page, so that they'll be cached and not repeatedly downloaded.
  • Minify JavaScript files and use minified versions of jQuery assets. Compress CSS files and HTML pages to remove excessive white space.
  • Compress images

Hint: The Chrome Developer Tools 'page speed' option has the useful feature of generating minified js, css and html files which can be copied and saved.

Font Sizing

Because mobile devices have varying screen sizes and resolutions, it's important to specify font sizes in relative units, % or em, rather than pixel sizes. Specify this for the body to enable easy scaling when required for other elements.

You will also needs to set a specific style to prevent iOS devices re-scaling the text when moving from portrait to landscape mode.

html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

Note: this and several other useful snippets are included in a mobile snippets collection on the Expression Gallery.

Forms

When creating forms for mobile use, make sure you use the new HTML5 input types, number, email, date etc. Some mobile browsers use these to present the correct text entry keyboard.

Be aware that iOS devices capitalise the first word in form fields (except passwords and urls). They may also 'suggest' words for those that aren't recognised. To avoid these two issues they can be disabled using the 'autocapitalize="off" ' and 'autocorrect="off"' attributes on form fields. You can also turn them off for the whole form by adding them to the <form> tag itself. Note that neither of these are recognised by xWeb's Intellisense and will be underlined as errors.

Where you have drop down lists, of Countries, States etc., make sure you put the most likely options at the top of the list, as in the example below. This stops mobile users having to scroll down huge lists. Use 'optgroup' too, to break up lists into readable chunks.

Tabular Data

If you are displaying tabular data on a page, perhaps from a database, you may have issues fitting it all on a mobile portrait view page. Two ways around this that I've used are to either hide some columns or hide the entire table, with a message telling the user to use landscape view.

Hiding either columns or the entire table is easily done by setting a style appropriately with 'display:none' and calling this in the media querie for the mobile portrait size.

Mobile Frameworks

For mobile-only sites there are a number of JavaScript mobile frameworks . The best known is jQuery Mobile and another is jQTouch, (although this is limited to Webkit based mobile browsers).  

Although I've done little more than look at jQueryMobile I am beginning to realise that it can be used on 'single' site solutions and bring some additional features to the desktop site. There do however seem to be issues using jQueryMobile with ASP.Net MasterPages.

 

Testing

Test, test and test again

Testing normal sites across a range of browsers is critically important. Testing mobile sites is even more so, if that's possible.

Mobile browsers are far less tolerant of misplaced or missing HTML tags.  Make sure you note and correct any errors Expression Web highlights. Validate you pages to ensure everything is correct.

The ultimate and best way to test mobile compatibility is to test on the target device itself. Obviously this isn't always possible unless you have deep pockets or have friends or colleagues who can help. However, the Apple iPod Touch gives a cost effective way of testing on the iOS platform and the latest version of Opera Mini can be installed on older Windows Mobile PDAs and phones.

The next best thing is to use emulators which can give identical results to the real thing in most cases. The Windows Phone 7 emulator is particularly good.

If you don't have or can't install emulators then simple resizing of your browser window to the appropriate size gives a reasonable indication of correct presentation, although it can't react to mobile specific 'viewport' meta tag and other mobile settings.

A number of tools exist to help browser sizing.

http://quirktools.com/screenfly/

http://resizemybrowser.com Gives pre-set sizes for common mobile devices, plus a dynamic display of browser size.

http://mattkersley.com/responsive/  Uses iframes to show three different sizes at once

iPhone Tester Iframe based (so not an emulator) with iPhone skin. (Best viewed in Safari).

http://iphonetester.com/

http://iPhone4simulator.com is another desktop browser based tool that gives a very realistic iPhone 4 skin

If you have a Mac but not an iOS mobile device, you can get slightly closer with iPhoney.

http://www.marketcircle.com/iphoney/

The Opera 'Resize Me ' add-in allows you to launch browser windows in typical, predefined mobile sizes

Chrome mobile browser simulator extension

 

Emulators

Windows Phone Emulator (used locally)

The emulator is part of the Windows Phone SDK which must be installed in order to use it. It's a large download and includes 'Visual Studio Express for Windows Phone' which will be installed if you don't have Visual Studio Professional or higher. You may never want to use VS but the emulator is worth the download!

Hint: Using the emulator's on-screen keyboard is somewhat tedious. To use the physical keyboard rather than the on-screen keyboard, press the Page Up key after clicking the browser address bar in the emulator.

Details about the WP7 emulator and SDK

Opera

There are several options for testing Opera Mini (feature phones + iOS and Windows Mobile) and Opera Mobile (Android and Symbian smartphones)

Opera Mini 6.5 Simulator (iOS, Windows Mobile) -  A Java based simulator available on-line or for local use.

http://www.opera.com/mobile/demo/

Opera Mini 4.2 Simulator (feature phones)

http://www.opera.com/developer/tools/mini/

Opera Mobile Emulator - used locally

This has numerous options to open the emulator in pre-set sizes for phone and slate types from the major manufacturers, the input type, pixel density etc. It also stores url's you use between uses and sets them as bookmarked panels.

http://www.opera.com/developer/tools/mobile/

Opera Dragonfly Developer Tools, launched via the 'Tools - Advanced' menu (or Ctrl- Shift - I) are more extensive than the IE Developer Tools and very useful in tandem with the mobile emulator.

RIM Ripple Emulator

Originally available as a Chrome extension, the Ripple Emulator is now a stand-alone tool with what may eventually be useful capabilities.

It emulates a variety of device types other than Blackberries, including HTC, Samsung and Apple. Unfortunately in the 0.9.1 Beta version it's rendering of some HTML elements isn't accurate.

  https://bdsc.webapps.blackberry.com/html5/download/ripple

Blackberry Simulators

A number of individual simulators for different Blackberry devices and the Playbook.

Blackberry Simulators

FireFox Mobile Emulator

Firefox is available for Android and is starting to get a following. The 'Fennec' emulator can be installed on Windows and gives (supposedly) an accurate emulation of the mobile version. It's a slightly clumsy implementation at the moment and doesn't present the mobile keyboard(s) as you might expect.

http://www.mozilla.org/en-US/mobile/  - See the Developer Tools link.

Tips, tricks, tools and resources

QR Barcodes

These are appearing everywhere now, in newspapers and magazines, trade catalogues, adverts on public transport, flyers etc.

They are easy to create on-line and can be added to any printed publication you or your customer produces. They can link to the main site or specific pages giving details of products or offers. Here's one tool that can create them: http://www.qrstuff.com/  there are several others.

Make sure your pages are mobile friendly before using them though!

Links

Responsive Web Design   'Web Design Shock' article. More than an article in fact, a huge resource on the topic with links to examples, tools, frameworks and templates. If you read nothing else, read this.

 Responsive Web Design 'MSDN' article on the subject

Respond to Different Devices with CSS3 Media Queries an article on ScriptJunkie{}, a great MS resource for 'serious web development'.

Mobile-Friendly: The Opera guide to mobile web optimization

 How to validate and test your mobile site  'SitePoint' article

How to add mobile pages to your ASP.Net application Useful background information including browser and mobile detection.

There are a number of CSS frameworks which are designed to work from small screen upwards. The 'Web Design Shock' above article has a comprehensive list.