Small Business Owner Jumps from 1st Story Window, Frustrated While Desiging a Mobile Website

If only the business owner had read this article first.  Mobile Website design is a completley different mind set then a desktop site.  Desktop is content, content, and more content.  And Google likes that.  However, a Mobile Website is all about content, content and more content on a diet.  This is an excellent article on 10 Key Considerations for Your Mobile Web Design Strategy.

 

What follows is a synopsis of an excellent piece written by Brian Casel 

The full article can be found HERE

Mobile Web Site Examples

New Rules for Creativity on a Mobile Website

There’s no turning back now. The web has gone mobile. More users are accessing the web from more places on more devices than ever before. What does this mean for web designers and site owners? It means that in every project we do, we must address a mobile strategy.

Your strategy will differ depending on what type of project you’re working on, but make no mistake, you do need some kind of strategy for how your website (or your client’s website) functions in the mobile space. Whether you’re designing a site that is mostly static (is anything on the web really static anymore?), a content-driven news site, or an interactive web application, it’s best to pursue a well-rounded approach — one that includes a thoughtful look at your mobile website user experience.

In this article, I aim to highlight 10 crucial items that you, as the web designer, developer or site owner, need to consider at the outset of your mobile site design project. These ideas touch on all aspects of a process, from strategy to design and implementation. But it’s important to be accountable for these points up front to ensure the successful launch of your mobile site.

1. Define Your Need for a Mobile Site

Usually a mobile website design project comes about through one of the following circumstances:

  • It’s a brand new website in need of both a desktop and mobile strategy.
  • It’s a redesign of an existing website, which will include a new mobile site.
  • It’s an addition of a mobile site to an existing desktop site, which won’t be changing.

Each of these circumstances brings a different set of requirements, which will help you determine the best way forward as you consider the items discussed below.

2. Consider the Business Objectives

In most cases, you, as the designer/developer are being hired by a client to design a mobile site for their business. What are the business objectives as they relate to the website, specifically the mobile site? As with any design, you’ll need to prioritize these objectives, then communicate that hierarchy in your design. When translating your design to mobile, you’ll need to take this a step further and focus on just a couple of top priority objectives for the business.

3. Study the Data of the Past Before Moving Forward

If this project is a redesign (most web design projects are these days), or an addition of a mobile site to an existing website, hopefully the site has been tracking traffic with Google Analytics (or another metrics tracking software). It is wise to study the data before diving into design and development.

Analyze things like which devices and browsers your users are accessing the site from. While you want to be sure the site is built with device support in mind, you can target these browsers as high priorities when you go from design, through development, testing and launch.

4. Practice Responsive Web Design

With so many new mobile devices being released every year, the days of checking your site in a few web browsers and launching are over. You’ll need to optimize your site for a vast landscape of desktop and mobile browsers, each bringing a different screen resolution, supported technologies, and user-base. As recommended in the well-known article Responsive Web Design, you can craft the desktop and mobile site experiences simultaneously.

5. Simplicity Is Golden, But …

As a general rule of thumb when converting a desktop site design to mobile format, you want to simplify things wherever possible. There are several reasons for this. Keeping file size and load times down is always a good idea for a mobile site. Wireless connections — while faster than years past — are still relatively slow, so the faster your mobile site loads, the better.

Usability considerations on the mobile web also call for a simplified approach to design, layout, and navigation. With less screen real estate at your disposal, you need to choose your placement of elements wisely. In short: Less is more.

6. Single-Column Layouts Usually Work Best

As you think about layout, a single-column structure tends to work best. Not only does this help with managing limited space on the smaller screen, it also helps you easily scale between different device resolutions and flipping between portrait and landscape mode.

7. Vertical Hierarchy: Think in Collapsible Terms

Does your site have a lot of information that needs to be presented on the mobile site? A good way to organize things in a simple and digestible way is to set up a collapsible navigation. Taking your single-column structure a step further, you can stack chunks of large content in folding modules that allow the user to tap open the content that they’re interested in and hide the rest.

8. Go From “Clickable” to “Tappable”

On the mobile web, interaction is done via finger taps rather than mouse clicks. This creates a very different dynamic in terms of usability.

When converting from a desktop to mobile site design, you have to revisit your “clickable” elements — links, buttons, menus, etc. — and make them “tappable.” While the desktop web lends itself well to links with small and precise active (clickable) areas, the mobile web requires larger, chunkier buttons that can be easily pressed with a thumb.

9. Provide Interaction Feedback

Speaking of interaction, you’ll need to make sure you provide obvious feedback for any actions that occur on the front-end of your mobile site.

For example, when the user taps a link or button, it’s good practice to have that button visually change states to indicate it has been tapped and the action has been initiated. It’s common to see a white-colored link turn fully blue on the iPhone when tapped. This visual feedback is familiar to most users and you’d be wise to take advantage of it.

10. Test Your Mobile Website

As with any project, you’ll need to test your mobile website on as many devices as possible. Without owning all these devices, it can be somewhat tricky to find ways to accurately test for each.

This article provides a thorough breakdown of how to test a mobile website across the most popular platforms.

Off you go!

Visit Marketing Re Imagined and Digital Air Media for some other guidelines and other mobile web examples.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s