© Mobile Monday Chicago MoMo Chicago BUILDING MOBILE OPTIMIZED WEBSITES
Nov 29, 2014
© 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
© Mobile Monday Chicago
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
© Mobile Monday Chicago
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
© Mobile Monday Chicago
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
© Mobile Monday Chicago
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
© Mobile Monday Chicago
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
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
26
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
27
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
28
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
29
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
30
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
31
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
32
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
© Mobile Monday Chicago
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" />
© Mobile Monday Chicago
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
© Mobile Monday Chicago
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