Intro to Web Design for Mobile Devices
It was only 2009 when I started researching and working on web and app design for mobile devices. My first attempt at creating a mobile site was to create a mobile style sheet for already existing HTML markup. It was a “bumpy” experience, but the site worked, previewed well on mobile device simulators and worked as expected on iPhones/iPods. After doing some research and usability testing using “personas,” I realized the site wasn’t mobile optimized and therefore was never published. Instead, I created a site that uses mobile specific HTML/CSS and features mobile friendly content.
Mobile Environment
Let’s say you are out of town and in a hurry walking from a meeting, looking for a place to eat. You are into healthy food so you have some specific search criteria. With a coffee in one hand and your mobile device in the other, you are constantly looking up to avoid obstacles, are limited to using single app at a time, and only have spotty Internet access.
In this case, mobile environment is very different from a desktop environment where you have a keyboard, mouse, generous screen real estate, a comfortable home/office, multiple browser windows and high speed Internet access. As such, simply applying different style sheets to your desktop website to make it mobile will create little value to your costumers. Not only would the site be hard to use, but it would also be painfully slow to load. When using a style sheet specific approach, you are showing and hiding content client-side, which means that all markup, images and other site resources are downloaded even if not displayed.
Instead, create a mobile strategy that begins with an understanding of the target audience, their mobile behavior, motivation to use your mobile site or app, and expected presentation and functionality based on their device.
In our example a perfect app or site would:
- Have saved preference for food type
- Monitor current location
- Use some type of a mash between a content aggregator and map service to come up with desired restaurants
- With one tap, provide the user with click-able phone numbers and direction links to near by restaurants
This doesn’t mean that we can’t have brochure style mobile sites that only use contact links or forms as a main call to action. The content should still be optimized for use in mobile environment.
Diving into web design for mobile
Whether you are designing for a desktop or mobile site, always start by following web standards and best practices.
Web standards
Standards are essentially specifications on how a language such as HTML, or CSS should work. The mobile standards are maintained by organizations such as W3C and Open Mobile Alliance (OMA). Their recommendation is to use XHTML Basic or XHTML-MP for structure and CSS Mobile Profile or Wireless CSS for presentation. Most mobile devices have a solid built in support for those standards.
To make it easier for web designers/developers those standards are derived from XHTML and CSS and therefore pretty easy to use.
To validate your documents as XHTML-MP or XHTML Basic, you must include a proper Document Type Declaration, or DOCTYPE.
XHTML Basic DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd" />
XHTML-MP DOCTYPE
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
Best practices
Best practices are techniques of applying and using web standards. W3C and OMA has put together documents with recommendations for delivering content to mobile devices. At the very least I recommend reading the section five of W3C recommendations titled “Best Practice Statements“.
This section covers:
- Overall Behavior
- Navigation and Links
- Page Layout and Content
- Page Definition
- User Input
New technology
HTML5 and CSS3 are getting more popular for a reason. HTML5 is leaner, faster, more semantic and packed with some great new features that users can benefit from. For example, local storage will ensure they don’t loose any data when offline and geolocation serves contextually/geographically relevant content to when they are on the go. If you are primeraly designing for webkit browsers, such as Safari Mobile, it’s encouraged to use HTML5.
Don’t skip a step
- Start with the content strategy for mobile devices. Make sure to base it on your business and audience needs. Define what desktop content would work best for your audience in the mobile environment without creating a too big of a disconnect from the desktop version.
- Create some layout sketches and define the basic user flow. In many cases it’s faster to test and change sketches vs. digital wireframes.
- Design the interface. Use styles for buttons, arrows, tabs and other UI elements that users are most familiar with. The goal is to make it simple and unmistakable (without thinking) for how each of the specific UI elements should work.
- Code the site following one of the mobile web standards.
- Test the site on emulators and actual devices. Often, emulators behave differently compared to the devices they emulate.
Example
Here is an example based on some assumptions for a mobile version of my blog.
Content
My mobile site audience would be fellow designers/developers that follow me on Twitter and business owners that would hire me for freelance work. Both of these groups most likely use devices such as iPhones, Droids and/or Blackberries.
To mobilize my blog I would format all content for better readability on those devices and feature “Work” and “Contact” info to showcase my portfolio and provide easy access to contact information.
Wireframe
This is a pretty simple wireframe. I only have two templates, one for article listings and one for the article. Each page has a clear defined header, navigation, content and footer. The footer features ‘about’ info and a contact form. The navigation functions as expected except the contact link takes you to the contact form in the footer.
Design
The design uses pretty standard set of styles for UI controls such as button, icons and links. The navigation, page titles and sections are clear and visible.
CSS
body {
font: 62.5%/1.2em Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
h1 {
font-size: 1.2em;
line-height: normal;
margin: 0px;
padding: 5px 0px 5px 10px;
background: #d8d5d5;
font-weight: bold;
}
a {
color: #205e8c;
text-decoration: none;
}
/* LAYOUT
-----------------------------*/
#header {
color: green;
border-bottom: 1px solid #9b9b9b;
margin: 0;
padding: 8px 7px 7px;
background: #06121B url(images/title-background.jpg) repeat-x left top;
}
.logo {
display: block;
margin: 0px auto;
height: 25px;
width: 46px;
border-style: none;
}
.contents {
background: #FBFBFB url(images/content-bg.gif) repeat-x left top;
padding: 0px;
font-size: 1.2em;
line-height: 1.6em;
margin: 0px;
clear: both;
}
#contactform , .section{
padding-left: 10px;
padding-right: 10px;
}
/* NAVIGATION
-----------------------------*/
#navigation {
background: #f94c12;
font-weight: normal;
text-transform: uppercase;
margin: 0px;
padding: 0px;
list-style: none;
overflow: auto;
}
#navigation li {
float: left;
background: #f94c12;
border-right: 1px solid #ccc;
}
#navigation a {
color: #FFF;
padding: 0px 9px;
font-size: 1.2em;
font-weight: bold;
line-height: 2.1em;
margin: 0px;
}
#navigation .noborder{
border-style: none;
}
/* LIST NAVIGATION
-----------------------------*/
.list-nav {
list-style: none;
margin: 0px;
padding: 0px;
background: #FFF;
}
.list-nav li {
border-bottom: 1px solid #CCC;
padding: 10px;
background: url(images/arrow.gif) no-repeat right center;
}
/* FOOTER
-----------------------------*/
.footer {
background: #021018;
color: #999;
border-top: solid 1px green;
margin: 10px 0 0;
padding: 10px;
}
/* FORM
-----------------------------*/
input, textarea {
display: block;
width: 90%;
border: 1px solid #D8D5D5;
padding: 2px;
}
#submit {
color: #FFF;
background: #F94C12;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
}
HTML
Latest
- Portfolio: CUNet Website
- Portfolio: BOLD Nebraska Website
- Portfolio: Lincoln Arts Council Website
- Photoshop CS4 for the web (video tutorials)
About
Contact
