A Developer's Perspective on Mobile Websites, Part 1

September 9, 2011
Mobile Website Development

Andrew posted an article on Mobile Website Design this week. In it, he talks about a designer's perspective on the mobile audience. From a development perspective, mobile website development is a breath of fresh air. As I began writing, I realized I touched on a topic of interest to me, and I hope you. I'm planning to break this up with a different piece of this mobile topic each week for several weeks.

Here is my plan for the direction of these blog posts over the next couple of weeks:

  • Usability and what kind of site you are creating
  • HTML/CSS slicing can finally use modern code
  • Which platforms/devices do you target
  • Special mobile considerations for site design/development

So, here we go. First up, let's talk about usability and how to determine what kind of mobile site you need.

Usability

When designing a mobile site, it is vital that you consider if you are creating a task-based/mobile app or a "mobilized" version of the website. They will take the design in two different directions.

Task-based site

If my audience will most likely use the mobile site to perform a few tasks, then a task-based approach works well. In this scenario, we provide a simple interface to quickly get the visitor to the task they desire: look up a location nearby, complete a form, scan your latest headlines, etc.

simple-navigation_1.png

Mobilized site

If the mobile site I want provides information about my product or service, but users don't need to perform a task, a mobilized site might be the answer. In this scenario I have two choices: I can simply ensure the site is mobile-friendly, or I can provide a scaled-back design that provides access to most of my site content.

mobile-design_0.png

Mobile-friendly site

The most economical approach is to depend on the user interacting with my site using the smartphone's zoom features. I can let the user double-tap to zoom into the content of the page. With this approach, I simply ensure I'm using compatible technologies. I need to:

  • Eliminate my use of Flash (not supported by iPhone/iPad)
  • Ensure my code is well-organized, clean and modern
  • Provide clear navigation and follow UI/UX best practices

Scaled-back design

The idea here is to allow access to all or most of the content of your site. Create a design that is complementary to your main site, but simplify navigation, search and content presentation. This solution is especially helpful for news or blog sites.

Next time, let's talk about  special considerations when designing/development for mobile.

Related Articles