With smartphone subscriptions projected to climb above 50% of the market by the end of 2011, designing for mobile browsers and touch devices is now reaching critical mass. The days of only designing for desktop and laptop displays are long gone.

Mobile devices, from phones to tablets, are taking over the market place and are growing in popularity. In 2011, tablet sales are projected to overtake PC sales and smartphones sales will crush feature phones sales. In addition, users still largely prefer using the mobile browser on their devices more than native apps that have to be downloaded and/or purchased.

What does this mean? Its a great time to be a web designer… as long as you can keep up with the mobile browser trends.

I’ve compiled a little top ten list of design concepts and examples that we should all be considering as we start to design websites in the mobile space. Screen shots provided by the truly awesome, MobileAwesomeness.com.

1 – Use Semantic Markup

We all know that we should separate content from presentation, but in mobile web design we should consider going deeper. Semantic markup should be used to properly convey meaning to the markup without any extra presentation components like CSS or JS. Semantic markup creates a better division of style vs content, provides better accessibility, less code (smaller file sizes) and also allows any device to interpret your website’s information better.

Plus, if a device’s browser turns off images, javascript or external style sheets, the meaning of your website will still be clearly presented to the user.

Here’s a couple of tips to get you started:

• Remove unnecessary images from your HTML code. Images reinforce meaning, but are not themselves meaningful. Present images using the CSS background properties or other methods.
• Use tags that represent the meaning of the content, only use tags that apply to the content itself. Examples: Use <em> for extra emphasis and <abbr> to define an abbreviation. See http://www.webdesignfromscratch.com/html-css/list-of-html-tags-with-semantic-usage/ for a complete list of tags and use cases.
• Only use <div> to define large portions of content that are directly related to each other. In other words, don’t be DIV happy! Use <ul> for a list and use <span> for a smaller portion of content.
• Remember, semantic web is about meaning, not style.

2 – Clearly Define Your Message

Focus your mobile website on fewer tasks, tasks that directly reinforce the main goals of your site. Since you have 80% less room, this means you have 80% less space for performing tasks. Mobile users will not physically be able to access or perform a lot of tasks from one page.

For example, on a large display it may be easy for your users to view your latest products, check their shopping cart, fill out a simple contact form, check the latest RSS entries and view your last six tweets. But on a small mobile display they will not be able to do all of this unless you shrink everything down so small they will need to pull out their reading glasses just to view your site. Limited screen size doesn’t mean you have to remove features, but you’ll need to simplify what features and how many features you can contain on one view.

Instead of thinking about your mobile website in ‘pages’, think of it in terms of ‘views’ where each view may only contain one to three tasks, goals or elements. Simplifying the users’ view will not only allow you to create a better mobile experience, but it may also help you to define or realize the important goals of your website in general, and that ain’t a bad thing.

3 – No Fluff

Don’t use fluff to fill the extra spaces, there is no extra space on a mobile device. Mobile devices have varying bandwidths and speeds, so be cautious of the size of your site. Extra images, text, code and extra junk not only clutter the display but they also increase load times.

Load time is critical to mobile devices because users are generally not sitting in front of their computers when viewing your mobile version. Here’s a quick (and pretty lame) illustration; A user of a bank’s mobile site may be waiting in line at Target and need to transfer money from saving to checking in order to cover their purchase. They’re not gonna want to wait very long for the banks’ pretty branch images to pop up.

• Don’t use unnecessary images and optimize the ones you will use.
• Get rid of those long filler marketing paragraphs and bullet lists.
• Reduce code bloat by using semantic markup and minimize style sheets and attachments.

4 – Remember, No Hover State

Mobile touch devices don’t have hover states, so don’t try to use them. Design becomes more critical on mobile devices because you don’t have a mouse to wave around exploring the page hunting for hover states to indicate actions. You’ll need to be more creative, you’ll need to visually indicate to the user that a particular element can be pushed or pulled or manipulated in some way.

• Use buttons to indicate links, not underlined text.
• Arrows on buttons and list items indicate a more details view.
• Create textures such as gradient and/or beveled lines or dot grids to indicate pulls or other gestures.
• Use CLEAR and FAMILIAR icons. Don’t make up new icons for standard actions like ‘add’, ‘edit’, or ‘back’.

Some sites have tried to re-create a hover state where the user rests their finger on an element or even touches it once. But when you design for mobile, lose the hover crutch altogether. Don’t design work arounds, just design your site to clearly indicate that something should be clicked or swiped or pushed or moved… with so many gestures, don’t hack an old browser method for use in a new technology.

5 – Large, Simple, Clear Typography

If you don’t want your users to squint and get headaches when they use your site, use larger type. Your ‘standard’ or comfortable paragraph type on a large display is around 14px, but on a mobile phone the comfortable reading type for users is twice that. But large type on a small screen means less room for information (which is always better for the user).

• Remove non-relevant information and text from your mobile site.
• Clearly define text, use simple terms and phrases.
• Avoid a lot of line breaks in a sentence or small paragraph, reword you sentence if needed.
• Consider using a ‘More Info’ button that take the user to a new view that only contains more information.

6 – Content Can Be Navigation

One of the coolest things about touch devices is that content is navigation. The user can directly interact with the screen, they don’t need any other tools but their fingers. Anything on the screen can be touched, pushed or moved, there is no need to use scroll bars to indicate vertical or horizontal movement because the screen already provides it. A simple list view can be used to convey information as well as link to another view on your site. Think of your mobile site as a giant (yet small) content gallery and be creative about how the user moves through that gallery.

7 – Tame Your Palette

Mobile phone displays are smaller and brighter than desktop or laptop displays and people are usually closer to their mobile displays when viewing them. In order not thoroughly annoy your user, lower the color intensity.

• Avoid ultra bright neon colors (unless used sparingly as accents).
• Avoid excessive use of intense colors or color schemes.
• Select a color scheme that is more pleasant to the eye.
• Don’t forget contrast. Color contrast looks great on mobile displays as long as its not overwhelming.

8 – Always Use Clear Form Labels

Always, always, always use clear and consistent form labels. Don’t use obscure labeling conventions for inputs. Use the standard verbiage we all know and love, like User Name and Password, don’t use cutesy made up labels like Nickname and Secret Code, unless you’re some ultra hip web community where these are common terms already.

Another thing to consider using is pre-filled input elements where the label is located inside the input itself. This does three great things for you mobile web site; it clearly defines the form element, dynamically indicates whether the field has been completed or not, and reduces space on the screen.

9 – Provide Feedback

Mobile browsers aren’t static browsers. Remember to provide dynamic feedback to your user. Mobile device browsers can run javascript just like web browsers so why not provide your users with some instant gratification. When a page is loading, show then it is loading with a pretty animated swirly thing or a hansom progress bar. While a user is filling our a form, let them know if they miss a required entry. After they submit a form, pop a dialog box that says thanks and let them know what’s gonna happen next.

• When a user touches something, change its visual state to indicate an action.
• Use JS animation libraries like Jquery or Scriptaclulous to create dynamic feedback.
• Show load animations on images that are still being processed. Don’t just have blank spaces where images are waiting to be loaded.

10 – WHITE SPACE

Most mobile devices are touch screens and fingers are bigger than mice, so leave some space. Mobile devices do not have pixel perfect interfaces so design your site with plenty of white space. Make sure your ‘touchable’ elements have plenty of room around them to be clicked my a large finger, you don’t want you user aiming for one link and hitting another.

• Use buttons, badges or icons for links instead of text links.
• Add plenty of padding between content blocks to create clearly defined areas.
• Larger line heights make text easier to read on smaller displays.

More Information

For more information on the best practices for implementing mobile style sheets or using mobile domain re-directs, check out these awesome articles:

Return of the Mobile Stylesheet – A List Apart

Mobile Specific – David B Calhoun

How to Build a Mobile Website – Smashing Magazine

10 Mobile WordPress Plugins – Daily Blog Tips

References:

Device Classes and Responsive Design – Luke W

Mobile Awesomeness

Smartphones projected to overtake feature phones next year

How to Design and Build a Mobile Website

Mobile Web Design: Tips and Best Practices

Some time ago I had to create a web app that would look pretty on both, the iPhone and some Windows Mobile based device by HTC! In the end it came out to be simpler just to create another page for the WM device.

Here is a code snippet that I inserted in the header of the index page of the web app:

<script type="text/javascript"> 

 function browser(){
  var browser = navigator.userAgent;
  //alert(browser);

  //Windows Mobile
  if (browser.match("MDA_compact")|| browser.match("MSIE")) {
    window.location.href = "mda/index.html";
  }
 //iPhone & Rest
  else{
   document.write('<meta name="apple-mobile-web-app-capable" content="yes" />'
   +'<link rel="apple-touch-icon" href="webapplogo.gif"/>'    
   +'<meta name="apple-mobile-web-app-status-bar-style" content="black" />'
   +'<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />'
   +'<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />'
   +'<link href="style.css" rel="stylesheet" type="text/css" />'
   +'<link href="pie.css" rel="stylesheet" type="text/css" />'
   +'<link href="chart.css" rel="stylesheet" type="text/css" />'
   +'<link href="messages.css" rel="stylesheet" type="text/css" />'
   +'<link href="news.css" rel="stylesheet" type="text/css" />'
   +'<link rel="stylesheet" href="stylesheets/glider.css" type="text/css" media="screen" charset="utf-8">');   
   }
  }

 browser();

</script>

You might want to figure out first, how the target device/browser is called. Uncomment the alert(browser) line and get the name. Adapt the browser.match(“Target_browser”) and define what you want to do in that case, e.g. redirect to another page.