Developing mobile websites is common these days. Devices like the iPhone allow us to have an almost desktop-like experience and devices like the Motorola Razor allow us to get basic information on the go.

In developing these sites, we must be mindful of what we are trying to accomplish with the site, but more importantly, what the user is trying to accomplish with our site in a mobile setting. These 5 tips are helpful reminders and methods to keep your mobile sites user-friendly and task-oriented.

1. The Lowest Common Denominator

Deciding which devices your site will run on is hard. As far back as last year, research showed the iPhone claiming nearly .1% of all internet traffic (including desktop browsers). Even more research showed it claiming almost 28% of the smartphone marketshare in February.

My recommendation? Develop for smart devices first (iPhone, Windows Mobile, etc.) and then, depending on your audience, support lesser browsers with a gracefully degrading presentation of your site. This keeps your advanced users happy and coming back, as well as keeping basic info available for casual mobile users.

2. Don’t Try To Do It All

You know what tasks users perform on your site. You know the pages they visit and the functionality that they need. For your mobile experience, start with the most used features of the site and leave the rest for the desktop.

The most common aspects of mobile sites that I see unused are commenting, ratings, and profiles. This could be due to users logging in to get more personalized information, but when it comes to interaction, if they’re on the go, they’re most likely not interested in contributing to the site at that moment. Keep this in mind when deciding which aspects of your site to take mobile. It can save you unnecessary effort and time.

3. The Environment

The most important aspect to keep in mind when developing a mobile experience is the environment of the user. Where are they? What do they intend to accomplish in that setting? If you’re walking downtown and trying to use a mobile site, the last thing you want is confusing navigation, lengthy pages, or to have to login for some basic information. Many sites forget this when developing their sites though, they imagine someone sitting in a cafe with nothing but time on their hands so that they can navigate a site and (maybe) get what they’re looking for.

This point pulls back in the idea of not trying to do it all on your mobile site. Having a task-oriented mobile site will ensure your users are kept first priority in the experience and it also ensures that they won’t have a hard time finding what they need. If you find that they do need more features, consider what platform they are mainly using and think about creating a native application (Windows .NET, Java, or Cocoa)

4. Mobile Advertising

Do it well or don’t do it at all. Mobile advertising is getting a bigger push as content becomes more and more mobile-centric. Google has announced more solutions for mobile adsense and more advertisers are seeing its use to get someone’s attention on the go. Ok, so mobile ads make money, but do they make sense? Not always…

I believe that in order to have effective mobile ads, the page that clicking on the ad takes you to must support the mobile experience too. I have seen many mobile ads that take you to a normal homepage that is not enhanced for a mobile experience, talk about inefficient. The ad must also act as an incentive for the user, like a coupon for a place they might be close to. To get users wanting to click on ads, we have to offer them something for doing so, not just take them somewhere pushing something new to them. It has to make them want to act.

5. Address The Address

Getting to the mobile version of a site can sometimes be a pain. Is it m.site.com? or www.site.com/m? or www.site.mobi? If you’re only catering to one address, ask yourself why. Ensuring that the user gets to where they want to go is essential and making it that much easier for them to get there is what your philosophy should be.

If your site is running PHP, you can catch the user and re-direct them based on their browser in the htaccess file. Javascripts also can lend this feature to other types of sites. Though as standard, when you set up a mobile site, set up m.site.com, www.site.com/m, and buy a .mobi address for it. It will make sure that however your user is used to getting around mobile sites, they won’t have a problem finding yours! (This also applies to iPhone sites, make it easy for them, set up iphone.site.com and www.site.com/iphone)

Quick + Easy = Great Mobile

Some of these tips may seem obvious, but the point that I’m trying to make is that a lot of times we get overloaded with feature requests for mobile sites and end up trying to do too much with them. People that are on the go need information quickly and remembering that is important and often times forgotten. Making your mobile experiences quick and painless will lead to happier users and help solidify your mobile presence.

Wireframes are an essential part of the project process that many developers tend to leave out. Wireframes can speed up project development times, create more meaningful user testing, and get programmers and designers on the same page. They create a great balance of initial function design and graphic design that gives both design and programming teams something to go off of. If you’re not using wireframes yet, my hope is that after reading this, you will!

Benefits!

By creating wireframes first, you outline the functionality (what has pagination, what happens when you click “this”, etc.) and basic layouts for pages (what goes where). You can easily move elements around and ensure that you’re creating a very usable product, while keeping everyone on the project informed. Let’s look some more at how wireframes can help.

• Users are emotional. Wireframes and prototypes are generally gray or monochromatic in color. This lends itself well to initial user testing. They/You can focus more on actual functionality than users’ reactions to colors, pictures, text, etc. User testing can be hard because people have biased and emotional responses to certain things, this helps alleviate those situations. Wireframes also help you test earlier on in the process. You can see what’s working and what needs some revising before the design is set in stone.
• Designers can make it pretty. This will give your designers a place to start, even if you both decide to move things around, it’s at least a non-blank canvas. Graphic designers typically don’t want to design forms, am I correct? This lets them do what they do best without wondering what needs to happen on the page.
• Programmers can program. Knowing what functionality needs to exist upfront will make your programmers happy and make teamwork easier for them. This allows them to breakdown what/where/when action happens and how to account for it, as well as how best to delegate the work among themselves.

Tools & Resources.

Hopefully you’re thinking, “this is great, how do I start?” Well, the good news and bad news is that there isn’t really a standard for how to draw wireframes. There are however, many people with good ideas and resources to go off of. Let’s start with the programs:

• OmniGraffle Professional - Link. This is by far my favorite. It’s very easy to get up and going with and offers many features that can save you time (manual guides, presentation mode, multi-page HTML export). Another plus is that it’s very easy to get some basic user testing done with it. There is one caveat though, it’s Mac only.
• Microsoft Visio - Link. I’ve used Visio extensively and it’s a great tool as well. It’s been the defacto standard for diagrams for a long time on the PC and a lot of people have continued to carry on with it for wireframing. You won’t get the same presentation modes that OmniGraffle offers, but you will find more stencils and templates available on the web. It’s a toss up, but Visio is PC only.
• Adobe Dreamweaver - Link. Although Dreamweaver isn’t really suited for wireframing, some people use it to easily mockup HTML and get the process going. It’s a good tool, but I think if you are serious about wireframing, you’ll have better luck with one of the two programs listed above. Dreamweaver is available for both PC and Mac.

So now that you have your tool picked out, how about some stencils and templates to get you going…

• Graffletopia is a great site with stencil kits of shapes you can use in OmniGraffle.
• Garrett Dimon has some great templates that you can start working off of, available for OmniGraffle and Visio.
• Yahoo! has an entire stencil set of their UI shapes that you can download. The nice thing about their package is that you can not only get it for OmniGraffle and Visio, but they also offer PNG and SVG versions. Great to hand off to your designers to get everyone on the same page.
• Urlgreyhot also has great stencil kits for Visio and Omnigraffle.

The thing to keep in mind is that not one stencil kit will have all the elements you’re looking for, but a combination of them will get you where you need to be. Anything else you need can be easily drawn.

A Better Start.

Since I’ve started using wireframes to start out projects, there’s been no looking back. They help to get ideas across to other team members, as well as ensure that everyone is on the same page. I’m sure you’ll find that as you move forward using wireframes, projects will get easier to get everyone moving on. There’s no waiting on comps or writing code that may not get used.

Let me know what your experience has been and if you have any tips to pass along!

We’re on break and drinking frappuccinos and red bull. We just got done with Rob Jones talking about web analytics. He brought up some great ideas and furthered my opinion of how important usability testing is. Even if it’s small scale and cheap. He pointed out a book that I’ll be reading when I get home: Paradox of Choice by Barry Schwartz. It talks about how less is more and the psychology behind it.

Before him, we listened to Garrett Dimon talk about the development of UI and keys things to keep in mind and how to open your mind to new things while developing interfaces. He paid great attention to subtle changes of color, bolding, typography, etc. to make impact on the interface without pulling attention away from important aspects of the layout.

He also helped me find exactly what I was wanting for my sketch book. I bought a plain page book and find it still not what I like, but he spoke about the Dot Grid Book. It’s basically a glorified sketch book with a grid of dots to help form lines and boundaries for designing UI ideas. Fantastic. I ordered one.

Next is mobile design.