Building a Mobile Site: Planning

Before transforming a site, it is important to understand the site layout and what you want to achieve in your Moovweb experience.

This module explains how to plan your development.

Prerequisites: Project Setup

Outline


Finding Page Types

A page type refers to pages with the same HTML structure.

A great example of a page type is a typical product page. Although the product might differ between two specific pages, the HTML structure of the page will be very similar between two products. Because the structure is similar, they can be considered one “page type”.

Why are page types important?

Identifying page types is important for a couple of reasons. Firstly it allows you to segment code based on page type and ensure that code applied to one page doesn’t transform items on other pages too. We call this setting up mappings, and it’s a great way to organize your project.

Figuring out which page types you need to transform allows you to gauge workload for the project. A news site with one or two page types would be a lot quicker to transform than a complex e-commerce site with dozens of page types.

iGadget Example

On the iGadgetCommerce site, browse through the site and find some page types.

Here are a few:


Finding Flows

A flow on a site is the natural progression through the site a user will take.

For example, on a typical e-commerce site, you’d have a browse flow for the customer to find products they want to buy and then a checkout flow so they could actually complete the payment process.

Why are flows important?

Part of understanding a site is understanding what the natural flow for a customer is. This can help influence not only the page types chosen for mobilizing, but can influence the design of the site in general.

How does that work?
Well, the most prominent items on a page should help the user complete their experience flow. For example, options to view customer reviews or read in-depth descriptions should come below the button to “Add to Cart”. The aim for an e-commerce site is to allow the customer to buy an item with minimal clicks and — especially important on a mobile device — with minimal scrolling.

iGadget Example

On the iGadgetCommerce website, we can lay out a pretty standard flow for a user.

iGadget Flow

The user will start on the homepage. They might search for an item, leading to a search results page. They click on the item to give a product display page. Choosing “Add to cart”, they then go to their cart page, before checking out (the checkout flow is not enabled on iGadgetCommerce).

Using this flow, you can understand which parts of the site would be most important to a user:


Mobile Site Design Principles

There are no hard-and-fast rules for mobile design. The best practice is to find a designer with lots of mobile-specific experience to come up with a design for your site.

The best way to understand good mobile design is to visit as many mobile sites as possible and see what works and what doesn’t.

(Set the browser user agent to a mobile device if you are viewing the Sur La Table site.)

The Twitter and Amazon mobile websites are forward-thinking and have a “native” feel while still retaining the flexibility of being browser-based.

More resources:

Mobile Design:

General Design:


Mock-ups

We’re only going to touch briefly on mock-ups here. Ideally there will be a designer on the team who can provide mock-ups for you to follow.

The process of creating a mock-up should essentially be applying the mobile site design principles described above to the page types and flows you have discovered.

Useful mock-ups for making a mobile site should cover:

It’s essential to have mock-ups made by your designer as they create consistency throughout a site. They provide an invaluable reference for not just the pages created, but every other page. You can style other pages based on principles and styles found in the original mock-ups. For more information about creating styles, check out the tutorial on mobile styling.

Check out our iGadgetCommerce mock-ups:

Home iGadget Home

Category iGadget Category

Product iGadget Product