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

67 %
33 %
Information about “Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
Technology

Published on July 26, 2009

Author: rvillares

Source: slideshare.net

Description

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

MoMo Chicago BUILDING MOBILE OPTIMIZED WEBSITES

SPEAKERS Nick Bourgeois, Ray Villares Acquity Group is a leading Digital Services firm headquartered here in Chicago, IL. www.acquitygroup.com

Nick Bourgeois, Ray Villares

Acquity 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

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

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

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

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

Functionality

Solutions

Case Studies

Newsfeed

Offices

Content Architecture

Leveraged existing content in CMS

Best-In-Class Samples

Menu

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

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 Build flagship template Cut up remaining image assets Code remaining Django views Code HTML for remaining templates Code CSS for remaining templates Optimize front- and back-end performance Perform user acceptance testing on a mobile device Apply appropriate user agent detection & redirects

Build flagship template

Cut up remaining image assets

Code remaining Django views

Code HTML for remaining templates

Code CSS for remaining templates

Optimize front- and back-end performance

Perform user acceptance testing on a mobile device

Apply appropriate user agent detection & redirects

APPROACH Build flagship template Cut up remaining image assets Code remaining Django views Code HTML for remaining templates Code CSS for remaining templates Optimize front- and back-end performance Perform user acceptance testing on a mobile device Apply appropriate user agent detection & redirects

Build flagship template

Cut up remaining image assets

Code remaining Django views

Code HTML for remaining templates

Code CSS for remaining templates

Optimize front- and back-end performance

Perform user acceptance testing on a mobile device

Apply appropriate user agent detection & redirects

APPROACH Build flagship template Cut up remaining image assets Code remaining Django views Code HTML for remaining templates Code CSS for remaining templates Optimize front- and back-end performance Perform user acceptance testing on a mobile device Apply appropriate user agent detection & redirects

Build flagship template

Cut up remaining image assets

Code remaining Django views

Code HTML for remaining templates

Code CSS for remaining templates

Optimize front- and back-end performance

Perform user acceptance testing on a mobile device

Apply appropriate user agent detection & redirects

APPROACH Build flagship template Cut up remaining image assets Code remaining Django views Code HTML for remaining templates Code CSS for remaining templates Optimize front- and back-end performance Perform user acceptance testing on a mobile device Apply appropriate user agent detection & redirects

Build flagship template

Cut up remaining image assets

Code remaining Django views

Code HTML for remaining templates

Code CSS for remaining templates

Optimize front- and back-end performance

Perform user acceptance testing on a mobile device

Apply appropriate user agent detection & redirects

APPROACH Build flagship template Cut up remaining image assets Code remaining Django views Code HTML for remaining templates Code CSS for remaining templates Optimize front- and back-end performance Perform user acceptance testing on a mobile device Apply appropriate user agent detection & redirects

Build flagship template

Cut up remaining image assets

Code remaining Django views

Code HTML for remaining templates

Code CSS for remaining templates

Optimize front- and back-end performance

Perform user acceptance testing on a mobile device

Apply appropriate user agent detection & redirects

APPROACH Build flagship template Cut up remaining image assets Code remaining Django views Code HTML for remaining templates Code CSS for remaining templates Optimize front- and back-end performance Perform user acceptance testing on a mobile device Apply appropriate user agent detection & redirects

Build flagship template

Cut up remaining image assets

Code remaining Django views

Code HTML for remaining templates

Code CSS for remaining templates

Optimize front- and back-end performance

Perform user acceptance testing on a mobile device

Apply appropriate user agent detection & redirects

APPROACH Build flagship template Cut up remaining image assets Code remaining Django views Code HTML for remaining templates Code CSS for remaining templates Optimize front- and back-end performance Perform user acceptance testing on a mobile device Apply appropriate user agent detection & redirects

Build flagship template

Cut up remaining image assets

Code remaining Django views

Code HTML for remaining templates

Code CSS for remaining templates

Optimize front- and back-end performance

Perform user acceptance testing on a mobile device

Apply appropriate user agent detection & redirects

APPROACH Build flagship template Cut up remaining image assets Code remaining Django views Code HTML for remaining templates Code CSS for remaining templates Optimize front- and back-end performance Perform user acceptance testing on a mobile device Apply appropriate user agent detection & redirects

Build flagship template

Cut up remaining image assets

Code remaining Django views

Code HTML for remaining templates

Code CSS for remaining templates

Optimize front- and back-end performance

Perform user acceptance testing on a mobile device

Apply appropriate user agent detection & redirects

APPROACH Build flagship template Cut up remaining image assets Code remaining Django views Code HTML for remaining templates Code CSS for remaining templates Optimize front- and back-end performance Perform user acceptance testing on a mobile device Apply appropriate user agent detection & redirects

Build flagship template

Cut up remaining image assets

Code remaining Django views

Code HTML for remaining templates

Code CSS for remaining templates

Optimize front- and back-end performance

Perform user acceptance testing on a mobile device

Apply appropriate user agent detection & redirects

Development: Basics

BASICS Hide URL bar on page load setTimeout(function() { window.scrollTo(0, 1); }, 0); Enable home screen icon <meta name=&quot;apple-mobile-web-app-capable&quot; content=&quot;yes&quot; /> <link rel=&quot;apple-touch-icon&quot; href=&quot;img/apple-touch-icon.png&quot; /> Use percentage-based CSS design <meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=yes&quot; />

Hide URL bar on page load

setTimeout(function() {

window.scrollTo(0, 1);

}, 0);

Enable home screen icon

<meta name=&quot;apple-mobile-web-app-capable&quot; content=&quot;yes&quot; />

<link rel=&quot;apple-touch-icon&quot; href=&quot;img/apple-touch-icon.png&quot; />

Use percentage-based CSS design

<meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=yes&quot; />

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

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

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

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

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Building Mobile Optimized Websites - Documents

1. MoMo Chicago BUILDING MOBILE OPTIMIZED WEBSITES. 2. SPEAKERS . Nick Bourgeois, Ray Villares . Acquity Group is a leading Digital Services firm ...
Read more

Caroline Bourgeois | Facebook

Caroline Bourgeois (Pole ... Suzy Photography, Carolane Villar Photography, Pole Theatre ... Belldandy, Fisac Pole Sport, Nick Bateman, Miss Danza ...
Read more

Cochrane District municipal elections, 2010 - Wikipedia ...

Cochrane District municipal elections, 2010 ... Ray Brisson: 619: ... Incumbent mayor Laurier Bourgeois was acclaimed back into office in Val Rita-Harty.
Read more

Villares - Documents

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

Mobile Optimized Websites | LinkedIn

Mobile Optimized Websites. Articles, experts, jobs, and more: get all the professional insights you need on LinkedIn. Sign up Get more personalized results ...
Read more

Reframing the Costs of Mobile IT - Doug Bourgeois (VMware ...

... Doug Bourgeois (VMware) Embed size(px) start on. Link. Report Description Lowering the Costs of Government with IT Reframing the Costs of ...
Read more

Optimized Websites | LinkedIn

Optimized Websites Articles, experts, jobs, and more: get all the professional insights you need on LinkedIn
Read more

What we do? WE BUILD, MARKET, AND MAINTAIN MOBILE FRIENDLY ...

what we do? we build, market, and maintain mobile friendly, keyword optimized, visitor optimized, content generating, authoritative, cms, ecommerce websites.
Read more