Building Mobile Optimized Websites

© Mobile Monday Chicago

MoMo ChicagoBUILDING MOBILE OPTIMIZED WEBSITES

2

SPEAKERS

Nick Bourgeois, Ray VillaresAcquity Group is a leading Digital Services firm headquartered here in Chicago, IL.

www.acquitygroup.com

3

DISCUSSION OUTLINE

ACQUITY GROUP MOBILE CASE STUDY

• Strategy

• Process

• Design

• Development


Strategy

5

Native or Web Application?

• Native App Benefits– Rich interactions

– Availability to use built-in apps (motion detection, GPS, camera…)

– Offline access to content

– Revenue based on sales (if paid app)

– Brand visibility and press

• Native App Drawbacks– Longer time-to-market

– Generally higher costs (premium fees, more hours, marketing)

– Risk of being rejected

– No cross-device (WebKit) portability

6

Native or Web Application?

• Web App Benefits– Leverages existing in-house skills or resources including ad-server or analytics

platform– Short time-to-market– Cross-device (WebKit) portability– Less emphasis on marketing– Brand visibility and press– Search engine visibility– Generally lower costs to build and maintain

• Web App Drawbacks– Interactions are less elegant– Connectivity to the web required– No use of device native apps and utilities

77

Acquity Group: iPhone Optimized Site

A website optimized for viewing on the iPhone. Provides an app-like user experience while displaying only key, actionable areas of site content:

» Solution Areas» Case Studies» Locations» Newsfeeds


Process

9

Define Design Develop Distribute

Stakeholder Interviews

Focus Groups

Customer Research

Competitive Analysis

Experience Mapping

Behavioral Study

Content Matrix

Web Analytics Review

Feature Filtering

Conceptual Mock-ups

Visual Design Templates

Validate with Team

CSS/XHTML

JavaScript

Test Front-End

Validate with Team

Integrate

Full System QA

Agent Detection

GENERAL APPROACH

Domains, Sub-Domains

Press Releases

Mobile Features

Mobile Services Page


Design

11

Design Ideation Approach

• Research– Check for Press Release & Mobile Services landing pages

– Build a design pattern library

– Best-In-Class: Walmart, Disney, VW, Nike, American Express, Bank of America, ESPN, Scion

• Wireframes / Sketches– Use Visio and OmniGraffle stencils available free on the web

• Interface Design– Use Illustrator and Photoshop master templates available free on the web

• Validation

12

Functional / Content Design

• Functionality– Solutions

– Case Studies

– Newsfeed

– Offices

• Content Architecture– Leveraged existing content in CMS

13

Best-In-Class Samples

14

Menu

15

Solutions

16

Solution Detail

17

Case Studies

18

Newsfeeds

19

News Detail

20

Offices


Development: Overview

22

OVERVIEW

• Stack: Django, Oracle DB, XHTML, CSS (WebKit), JavaScript (jQuery)

• Developed in under 40 hours

• Uses existing website content

• Can be done entirely by a trained UI team


Development: Approach

24

APPROACH

1. Build flagship template

2. Cut up remaining image assets

3. Code remaining Django views

4. Code HTML for remaining templates

5. Code CSS for remaining templates

6. Optimize front- and back-end performance

7. Perform user acceptance testing on a mobile device

8. Apply appropriate user agent detection & redirects

25

APPROACH









26

APPROACH









27

APPROACH









28

APPROACH









29

APPROACH









30

APPROACH









31

APPROACH









32

APPROACH










Development: Basics

34

BASICS

• Hide URL bar on page loadsetTimeout(function() {

window.scrollTo(0, 1);

}, 0);

• Enable home screen icon<meta name="apple-mobile-web-app-capable" content="yes" />

<link rel="apple-touch-icon" href="img/apple-touch-icon.png" />

• Use percentage-based CSS design<meta name="viewport" content="width=device-width, user-scalable=yes" />


Development: Lessons Learned

36

LESSONS LEARNED

• CSS3 is going to be a lot of fun– Child selectors (:first-child, :last-child)– Rounded corners (border-radius)– Drop shadows (text-shadow)

• In general, CSS animations aren’t worth the effort– Most of the time, JavaScript animations are good enough

• Native “maps” protocol isn’t very useful– Use direct URL from Google Maps instead


Development: Tools

38

TOOLS

• UI Libraries– iUI: http://code.google.com/p/iui/– Magic Framework: http://www.jeffmcfadden.com/projects/Magic%20Framework/– jPint: http://www.journyx.com/jpint/– iWebkit: http://iwebkit.net/

• JavaScript Frameworks– XUI: http://github.com/brianleroux/xui/tree/master– baseJS: http://paularmstrongdesigns.com/projects/basejs/docs/

• jQuery Plugins– jQTouch: http://www.jqtouch.com/– jQuery Touch: http://plugins.jquery.com/project/touch– jQuery Flick: http://plugins.jquery.com/project/flick

Documents

Building Mobile Optimized Websites