Building Mobile Optimized Websites

MoMo ChicagoBUILDING MOBILE OPTIMIZED WEBSITES

SPEAKERS

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

www.acquitygroup.com

DISCUSSION OUTLINE

ACQUITY GROUP MOBILE CASE STUDY

• Strategy

• Process

• Design

• Development

Strategy

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

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

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

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

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

Functional / Content Design

• Functionality– Solutions

– Case Studies

– Newsfeed

– Offices

• Content Architecture– Leveraged existing content in CMS

Best-In-Class Samples

Solutions

Solution Detail

Case Studies

Newsfeeds

News Detail

Offices

Development: Overview

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

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

APPROACH

Development: Basics

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" />

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

Development: Lessons Learned

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

• 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

Building Mobile Optimized Websites

Documents

Mobile Websites by dBroseGroup

What we do? WE BUILD, MARKET, AND MAINTAIN MOBILE FRIENDLY, KEYWORD OPTIMIZED, VISITOR OPTIMIZED, CONTENT GENERATING, AUTHORITATIVE, CMS, ECOMMERCE WEBSITES

Mobile-Optimized Websites€¦ · mobile website is optimized properly for search. Options for Constructing a Mobile Site There are many options available for building a mobile website

Responsive & mobile websites

#Emailer: Mobile Optimized Websites

Avaliação em mobile Websites

Mobile Apps or Mobile Websites?

Create a high quality mobile website that generates value ... · Mobile Optimized Websites Create a high quality mobile website that generates value, increases customer loyalty and

Apps vs Mobile Websites - Push Mobile Marketing

Introduction to mobile apps and mobile websites

WHERE MANUFACTURING MEETS DESIGNgiecdn.blob.core.windows.net/fileuploads/mediakits/... · eNewsletters, optimized websites, mobile apps, and social media platforms. We also bring

“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares

Building Mobile Websites

Optimized mobile apps

Mobile Websites

Mobile Websites Key to your Mobile Strategy

Mobile Websites vs Mobile Apps

Tablets and Hybrids Need Mobile-Optimized Websites, Too!

Why Every Business Wants Mobile Optimized Websites?

Best mobile optimized websites: What You can learn from them