Why is this so important?

By some measures, mobile internet usage overtook desktop usage 2013. Google search on mobile devices exceeded those on desktop for the first time and Google now gives additional prominence to responsive sites.

Some areas of the world already have in excess of 35% mobile usage and India for example has over 50%.

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 usable on all devices, from mobiles to large screen desktops. If you haven't started making your websites mobile-friendly, you're already losing users and customers.

How? A 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 'Responsive 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 .

You can also detect using Classic ASP or ASP.Net. Lightweight Device Detection in ASP

For a more robust solution (although I've had no issues with the method above) see the 51Degress.mobi Foundation project

'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.

Example: Here's 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 (formerly on the Expression Gallery) which you download here.

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

CSS Frameworks and layout tools

As noted above there are numerous CSS Frameworks that are built using 'responsive design'. I was initially skeptical 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?

Skeleton is what it says on the tin, an outline template that you can build on. It has minimal styling other than the layout. If you want something 'full fat', with built-in styling options for font's, forms etc, then take a look at Bootstrap and Foundation. There are also now sites offering open-source themes and templates build on Bootstrap and Foundation. See Bootstrapzero and Themplio.

The number of CSS templates grows continually. Here's a listing of some of them but note that they aren't all 'mobile first', see below.

Additionally, there are a number of on-line responsive layout creation tools. Three I've recently found are:

GridPak - allows you to visually create a layout by selecting the number of columns, padding, gutters and maximum width and then gives you a downloadable package for the required files. (Uses the LESS CSS framework)

Tiny Fluid Grid - similar to the above though not a visual layout. Creates layout with between 12 and 24 columns, with selectable gutters and maximum width. 

Initializr is a layout generator for the HTML5 Boilerplate template that creates 'Mobile-First Responsive' layouts (see below). It has selectable options for the type of template you want, minified jQuery etc.

'Mobile First' design

One of the key concepts of 'responsive web design' is to work 'mobile first'. This has two significant advantages.

One, it's usually far easier to get a layout working properly on mobile screen sizes and then to use the media queries to alter the styles for larger screen sizes, rather than the other way round.

Two, and most importantly, mobile devices will only load the page assets (images etc) that apply to them and won't be downloading larger files that they don't use. As an example, you may have a small header background image for mobile screens and a much larger one for desktop view. If you put desktop styles first, the mobile will download this large file it doesn't use, wasting time and bandwidth.

For good explanation on this with video and downloadable pdf see Mobile First by Luke Wroblewski

And also mobile-first responsive web design by Brad Frost

Hint: Because EW's design surface doesn't support CSS3 Media Queries it will always use the 'mobile-first' CSS to display a page. This means you'll need to preview in a browser (or EW's SnapShot) to see the 'desktop' view.

Mobile Navigation

Creating a navigation menu that works on both the desktop and on mobile devices can be a challenge. A single level menu is relatively easy, as shown in my mobile example . Here the menu simply changes from the left hand vertical format into the horizontal bars which are usable on a mobile device.

Multi-level menus are more complex and I have two examples of how these can work. Both are based on the popular 'Project 7 Express Menu', which works as normal on desktop or tablet screen sizes. Then, in the first example, the menu is converted to a drop-down 'select' list. Try it on a mobile to see how it works. In the second example the menu is converted into an 'accordion' menu, which works well on a mobile.

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, resolutions and importantly, pixel densities, it's important to specify font sizes in relative units, em, rather than pixel sizes. Specify this for the body to enable easy scaling when required for other elements.

Note: CSS3 introduced 'rem' (Root em) which allows you to specify font sizes relative to the root element (<html> tag) and this makes consistent font sizing very easy to achieve. See 'Font Sizing With REM' . Unfortunately EW's Design View doesn't support rem and makes using them awkward, although the fall-back suggested in this article allows them to be used with care.

You will also needs to set a specific style to prevent iOS and Windows Phone 7 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 .

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.

Select United Kingdom United States of America Ireland Isle of Man Afghanistan Albania Algeria American Samoa Andorra Angola Anguilla Antigua & Barbuda Argentina Armenia Aruba Australia Austria Azerbaijan Bahamas Bahrain Bangladesh Barbados Belarus Belgium Belize Benin Bermuda Bhutan Bolivia Bonaire Bosnia & Herzegovina Botswana Brazil British Indian Ocean Ter Brunei Bulgaria Burkina Faso Burundi Cambodia Cameroon Canada Canary Islands Cape Verde Cayman Islands Central African Republic Chad Channel Islands Chile China Christmas Island Cocos Island Colombia Comoros Congo Cook Islands Costa Rica Cote D'Ivoire Croatia Cuba Curacao Cyprus Czech Republic Denmark Djibouti Dominica Dominican Republic East Timor Ecuador Egypt El Salvador Equatorial Guinea Eritrea Estonia Ethiopia Falkland Islands Faroe Islands Fiji Finland France French Guiana French Polynesia French Southern Ter Gabon Gambia Georgia Germany Ghana Gibraltar Great Britain Greece Greenland Grenada Guadeloupe Guam Guatemala Guinea Guyana Haiti Hawaii Honduras Hong Kong Hungary Iceland India Indonesia Iran Iraq Israel Italy Jamaica Japan Jordan Kazakhstan Kenya Kiribati Korea North Korea South Kuwait Kyrgyzstan Laos Latvia Lebanon Lesotho Liberia Libya Liechtenstein Lithuania Luxembourg Macau Macedonia Madagascar Malaysia Malawi Maldives Mali Malta Marshall Islands Martinique Mauritania Mauritius Mayotte Mexico Midway Islands Moldova Monaco Mongolia Montserrat Morocco Mozambique Myanmar Nambia Nauru Nepal Netherland Antilles Netherlands (Holland, Europe) Nevis New Caledonia New Zealand Nicaragua Niger Nigeria Niue Norfolk Island Norway Oman Pakistan Palau Island Palestine Panama Papua New Guinea Paraguay Peru Philippines Pitcairn Island Poland Portugal Puerto Rico Qatar Republic of Montenegro Republic of Serbia Reunion Romania Russia Rwanda St Barthelemy St Eustatius St Helena St Kitts-Nevis St Lucia St Maarten St Pierre & Miquelon St Vincent & Grenadines Saipan Samoa Samoa American San Marino Sao Tome & Principe Saudi Arabia Senegal Seychelles Sierra Leone Singapore Slovakia Slovenia Solomon Islands Somalia South Africa Spain Sri Lanka Sudan Suriname Swaziland Sweden Switzerland Syria Tahiti Taiwan Tajikistan Tanzania Thailand Togo Tokelau Tonga Trinidad & Tobago Tunisia Turkey Turkmenistan Turks & Caicos Is Tuvalu Uganda Ukraine United Arab Emirates Uruguay Uzbekistan Vanuatu Vatican City State Venezuela Vietnam Virgin Islands (Brit) Virgin Islands (USA) Wake Island Wallis & Futana Is Yemen Zaire Zambia Zimbabwe

Tap Size

Another thing to be aware of is 'tap size', the active area a user has to tap on an element, which can be small on a mobile screen. This is particularly true for radio buttons and check boxes.

There are two issues here, one being the area itself and the other being the proximity to other elements, ie will the user touch the wrong radio button by mistake. These aspects are easy to overlook but can be easily solved.

For the tap area simply style the width and height for both radio buttons and checkboxes to say 40px for your mobile breakpoints.

input[type=radio], input[type=checkbox]
{
width:40px;
height:40px;
}

Then, to avoid the wrong option being selected by the user, make sure radio buttons are spaced well apart from each other, and the same for checkboxes. If you have labels associated with these elements, which you should, make sure the additional spacing includes these.

Assuming the above style is in the 'mobile first' section of your media queries, you'll need  to reset the width and height to 'auto' for other view sizes.

Numeric Text Fields

Android and Windows 8 phones recognise the HTML 5 input number type and give you a numeric keyboard but iOS devices don't do that fully. For complete compatibility you need to add a pattern:

input type="number" pattern="[0-9]"

Date and Time Pickers

Mobile browsers prior to iOS7 and Chrome 26 for Android gave date and time pickers for those types of input. The later versions do not. To get the pickers you now need use type="datetime-local"

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 query 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.

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 your 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/8 emulator is particularly good, although for Windows Phone 8 it needs to run on Windows 8

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.

Tools

A number of tools exist to help browser sizing, some of which give a 'skin' to imitates a phone.

http://responsivepx.com/  Allows you to specify the viewing window size inside your browser

The FireFox Developer Tools (see the browser toolbars page) has an option which allows you to display a series of resized images of a page in common mobile/tablet sizes.

http://quirktools.com/screenfly/  A neat tool but limited to Safari

Chrome Window Resizer App. Adds an icon to the Chrome address bar giving a simple 2 click resize.

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

There is also a JavaScript based tool you can add to your website that gives a one-click in-browser preview of the page/site. (It only seems to work in Chrome). See ProtoFluid.com . This can be useful for presentations and client demos.

Media Query Bookmarket - shows you the currently applied media queries and the current size in both pixels and em. An excellent tool.

Adobe Edge Inspect:

A great concept which allows you to work on your desktop and view a site on several mobile devices at the same time, with live update of pages you navigate to. Part of the Adobe Creative Cloud package but there is a free version which allows just one mobile device. Clients available for iOS, Android and Amazon Fire devices. Edge Inspect

On-Line Services

There are some on-line services that give screenshots of your page(s) viewed on real devices. Mobilito.net does this for iPhone, iPad, Nook and some Android devices, at a cost of $1 for 5 mobile screenshots.

Emulators and Simulators

There are several emulators and simulators which can give realistic displays of various devices. The line between emulators and simulators is blurred. In essence, simulators are browser based (or built around a browser engine) and emulators are stand-alone applications.

Windows Phone Emulator

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!

Note: The latest version of the WP Emulator, for WP8, runs on Windows 8 ONLY, but the older SDK7.1 for WP7.1 and 7.8 is still available and runs on Windows 7 and an update is available for WP8.

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 WP emulator and SDK

Downloads for all versions of the SDK (including the emulator)

Electric Plum iPhone/iPad Simulator

Electric Plum have iPhone and iPad simulators which are now included with MS Web Matrix 2.

BrowseEmAll Simulator

The BrowseEmAll simulator aims to simulate a wide variety of devices using the users' installed browsers and other browser engines it includes with the installation. It then has skins which it applies to these to simulate Android and iPhone/iPad devices, plus unskinned IE, Chrome, Firefox and Safari browsers. You can run these browsers side by side in the same window.

A useful feature is a cross-device report it generates with screen shots of every device you choose to include.

It's a good tool for general cross-browser testing and well as for checking cross-device.

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.

Blackberry 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.

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.

Important: 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. The article dates back to 2011 but is still very relevant.

If you read nothing else, read this.

Responsive Design Weekly is a free weekly email newsletter from developer Justin Avery. The back issues are online and are well worth looking at. Lots of good hints, tips and discussions.

A Measured Response - an article on the Intel Software Adrenaline site. March 2013. [Sadly seems to have been removed]

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'.

Font Sizing With REM - an article about using the CSS3 'rem' font-size unit, with fallback for old browsers

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.

Mobile Web Best Practices: a comprehensive index of resources

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.