building mobile optimized websites
DESCRIPTION
TRANSCRIPT
![Page 1: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/1.jpg)
© Mobile Monday Chicago
MoMo ChicagoBUILDING MOBILE OPTIMIZED WEBSITES
![Page 2: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/2.jpg)
2
SPEAKERS
Nick Bourgeois, Ray VillaresAcquity Group is a leading Digital Services firm headquartered here in Chicago, IL.
www.acquitygroup.com
![Page 3: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/3.jpg)
3
DISCUSSION OUTLINE
ACQUITY GROUP MOBILE CASE STUDY
• Strategy
• Process
• Design
• Development
![Page 4: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/4.jpg)
© Mobile Monday Chicago
Strategy
![Page 5: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/5.jpg)
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
![Page 6: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/6.jpg)
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
![Page 7: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/7.jpg)
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
![Page 8: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/8.jpg)
© Mobile Monday Chicago
Process
![Page 9: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/9.jpg)
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
![Page 10: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/10.jpg)
© Mobile Monday Chicago
Design
![Page 11: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/11.jpg)
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
![Page 12: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/12.jpg)
12
Functional / Content Design
• Functionality– Solutions
– Case Studies
– Newsfeed
– Offices
• Content Architecture– Leveraged existing content in CMS
![Page 13: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/13.jpg)
13
Best-In-Class Samples
![Page 14: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/14.jpg)
14
Menu
![Page 15: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/15.jpg)
15
Solutions
![Page 16: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/16.jpg)
16
Solution Detail
![Page 17: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/17.jpg)
17
Case Studies
![Page 18: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/18.jpg)
18
Newsfeeds
![Page 19: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/19.jpg)
19
News Detail
![Page 20: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/20.jpg)
20
Offices
![Page 21: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/21.jpg)
© Mobile Monday Chicago
Development: Overview
![Page 22: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/22.jpg)
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
![Page 23: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/23.jpg)
© Mobile Monday Chicago
Development: Approach
![Page 24: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/24.jpg)
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
![Page 25: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/25.jpg)
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
![Page 26: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/26.jpg)
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
![Page 27: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/27.jpg)
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
![Page 28: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/28.jpg)
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
![Page 29: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/29.jpg)
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
![Page 30: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/30.jpg)
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
![Page 31: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/31.jpg)
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
![Page 32: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/32.jpg)
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
![Page 33: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/33.jpg)
© Mobile Monday Chicago
Development: Basics
![Page 34: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/34.jpg)
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" />
![Page 35: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/35.jpg)
© Mobile Monday Chicago
Development: Lessons Learned
![Page 36: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/36.jpg)
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
![Page 37: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/37.jpg)
© Mobile Monday Chicago
Development: Tools
![Page 38: Building Mobile Optimized Websites](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496ee36b479592d738b4672/html5/thumbnails/38.jpg)
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