MoMo Chicago BUILDING MOBILE OPTIMIZED WEBSITES
SPEAKERS <ul><li>Nick Bourgeois, Ray Villares </li></ul><ul><ul><li>Acquity Group is a leading Digital Services firm headq...
DISCUSSION OUTLINE <ul><li>ACQUITY GROUP MOBILE CASE STUDY </li></ul><ul><li>Strategy </li></ul><ul><li>Process </li></ul>...
Strategy
Native or Web Application? <ul><li>Native App Benefits </li></ul><ul><ul><li>Rich interactions </li></ul></ul><ul><ul><li>...
Native or Web Application? <ul><li>Web App Benefits </li></ul><ul><ul><li>Leverages existing in-house skills or resources ...
Acquity Group: iPhone Optimized Site <ul><li>A website optimized for viewing on the iPhone. Provides an app-like user expe...
Process
Define Design Develop Distribute Stakeholder Interviews Focus Groups Customer Research Competitive Analysis Experience Map...
Design
Design Ideation Approach <ul><li>Research </li></ul><ul><ul><li>Check for Press Release & Mobile Services landing pages </...
Functional / Content Design <ul><li>Functionality </li></ul><ul><ul><li>Solutions </li></ul></ul><ul><ul><li>Case Studies ...
Best-In-Class Samples
Menu
Solutions
Solution Detail
Case Studies
Newsfeeds
News Detail
Offices
Development: Overview
OVERVIEW <ul><li>Stack: Django, Oracle DB, XHTML, CSS (WebKit), JavaScript (jQuery) </li></ul><ul><li>Developed in under 4...
Development: Approach
APPROACH <ul><li>Build flagship template </li></ul><ul><li>Cut up remaining image assets </li></ul><ul><li>Code remaining ...
APPROACH <ul><li>Build flagship template </li></ul><ul><li>Cut up remaining image assets </li></ul><ul><li>Code remaining ...
APPROACH <ul><li>Build flagship template </li></ul><ul><li>Cut up remaining image assets </li></ul><ul><li>Code remaining ...
APPROACH <ul><li>Build flagship template </li></ul><ul><li>Cut up remaining image assets </li></ul><ul><li>Code remaining ...
APPROACH <ul><li>Build flagship template </li></ul><ul><li>Cut up remaining image assets </li></ul><ul><li>Code remaining ...
APPROACH <ul><li>Build flagship template </li></ul><ul><li>Cut up remaining image assets </li></ul><ul><li>Code remaining ...
APPROACH <ul><li>Build flagship template </li></ul><ul><li>Cut up remaining image assets </li></ul><ul><li>Code remaining ...
APPROACH <ul><li>Build flagship template </li></ul><ul><li>Cut up remaining image assets </li></ul><ul><li>Code remaining ...
APPROACH <ul><li>Build flagship template </li></ul><ul><li>Cut up remaining image assets </li></ul><ul><li>Code remaining ...
Development: Basics
BASICS <ul><li>Hide URL bar on page load </li></ul><ul><li>setTimeout(function() { </li></ul><ul><li>window.scrollTo(0, 1)...
Development: Lessons Learned
LESSONS LEARNED <ul><li>CSS3 is going to be a lot of fun </li></ul><ul><ul><li>Child selectors  ( :first-child ,  :last-ch...
Development: Tools
TOOLS <ul><li>UI Libraries </li></ul><ul><ul><li>iUI: http://code.google.com/p/iui/ </li></ul></ul><ul><ul><li>Magic Frame...
Upcoming SlideShare
Loading in …5
×

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

1,530 views
1,481 views

Published on

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

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,530
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
49
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. MoMo Chicago BUILDING MOBILE OPTIMIZED WEBSITES
  2. 2. SPEAKERS <ul><li>Nick Bourgeois, Ray Villares </li></ul><ul><ul><li>Acquity Group is a leading Digital Services firm headquartered here in Chicago, IL. </li></ul></ul><ul><ul><li>www.acquitygroup.com </li></ul></ul>
  3. 3. DISCUSSION OUTLINE <ul><li>ACQUITY GROUP MOBILE CASE STUDY </li></ul><ul><li>Strategy </li></ul><ul><li>Process </li></ul><ul><li>Design </li></ul><ul><li>Development </li></ul>
  4. 4. Strategy
  5. 5. Native or Web Application? <ul><li>Native App Benefits </li></ul><ul><ul><li>Rich interactions </li></ul></ul><ul><ul><li>Availability to use built-in apps (motion detection, GPS, camera…) </li></ul></ul><ul><ul><li>Offline access to content </li></ul></ul><ul><ul><li>Revenue based on sales (if paid app) </li></ul></ul><ul><ul><li>Brand visibility and press </li></ul></ul><ul><li>Native App Drawbacks </li></ul><ul><ul><li>Longer time-to-market </li></ul></ul><ul><ul><li>Generally higher costs (premium fees, more hours, marketing) </li></ul></ul><ul><ul><li>Risk of being rejected </li></ul></ul><ul><ul><li>No cross-device (WebKit) portability </li></ul></ul>
  6. 6. Native or Web Application? <ul><li>Web App Benefits </li></ul><ul><ul><li>Leverages existing in-house skills or resources including ad-server or analytics platform </li></ul></ul><ul><ul><li>Short time-to-market </li></ul></ul><ul><ul><li>Cross-device (WebKit) portability </li></ul></ul><ul><ul><li>Less emphasis on marketing </li></ul></ul><ul><ul><li>Brand visibility and press </li></ul></ul><ul><ul><li>Search engine visibility </li></ul></ul><ul><ul><li>Generally lower costs to build and maintain </li></ul></ul><ul><li>Web App Drawbacks </li></ul><ul><ul><li>Interactions are less elegant </li></ul></ul><ul><ul><li>Connectivity to the web required </li></ul></ul><ul><ul><li>No use of device native apps and utilities </li></ul></ul>
  7. 7. Acquity Group: iPhone Optimized Site <ul><li>A website optimized for viewing on the iPhone. Provides an app-like user experience while displaying only key, actionable areas of site content: </li></ul><ul><li>Solution Areas </li></ul><ul><li>Case Studies </li></ul><ul><li>Locations </li></ul><ul><li>Newsfeeds </li></ul>
  8. 8. Process
  9. 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
  10. 10. Design
  11. 11. Design Ideation Approach <ul><li>Research </li></ul><ul><ul><li>Check for Press Release & Mobile Services landing pages </li></ul></ul><ul><ul><li>Build a design pattern library </li></ul></ul><ul><ul><li>Best-In-Class: Walmart, Disney, VW, Nike, American Express, Bank of America, ESPN, Scion </li></ul></ul><ul><li>Wireframes / Sketches </li></ul><ul><ul><li>Use Visio and OmniGraffle stencils available free on the web </li></ul></ul><ul><li>Interface Design </li></ul><ul><ul><li>Use Illustrator and Photoshop master templates available free on the web </li></ul></ul><ul><li>Validation </li></ul>
  12. 12. Functional / Content Design <ul><li>Functionality </li></ul><ul><ul><li>Solutions </li></ul></ul><ul><ul><li>Case Studies </li></ul></ul><ul><ul><li>Newsfeed </li></ul></ul><ul><ul><li>Offices </li></ul></ul><ul><li>Content Architecture </li></ul><ul><ul><li>Leveraged existing content in CMS </li></ul></ul>
  13. 13. Best-In-Class Samples
  14. 14. Menu
  15. 15. Solutions
  16. 16. Solution Detail
  17. 17. Case Studies
  18. 18. Newsfeeds
  19. 19. News Detail
  20. 20. Offices
  21. 21. Development: Overview
  22. 22. OVERVIEW <ul><li>Stack: Django, Oracle DB, XHTML, CSS (WebKit), JavaScript (jQuery) </li></ul><ul><li>Developed in under 40 hours </li></ul><ul><li>Uses existing website content </li></ul><ul><li>Can be done entirely by a trained UI team </li></ul>
  23. 23. Development: Approach
  24. 24. APPROACH <ul><li>Build flagship template </li></ul><ul><li>Cut up remaining image assets </li></ul><ul><li>Code remaining Django views </li></ul><ul><li>Code HTML for remaining templates </li></ul><ul><li>Code CSS for remaining templates </li></ul><ul><li>Optimize front- and back-end performance </li></ul><ul><li>Perform user acceptance testing on a mobile device </li></ul><ul><li>Apply appropriate user agent detection & redirects </li></ul>
  25. 25. APPROACH <ul><li>Build flagship template </li></ul><ul><li>Cut up remaining image assets </li></ul><ul><li>Code remaining Django views </li></ul><ul><li>Code HTML for remaining templates </li></ul><ul><li>Code CSS for remaining templates </li></ul><ul><li>Optimize front- and back-end performance </li></ul><ul><li>Perform user acceptance testing on a mobile device </li></ul><ul><li>Apply appropriate user agent detection & redirects </li></ul>
  26. 26. APPROACH <ul><li>Build flagship template </li></ul><ul><li>Cut up remaining image assets </li></ul><ul><li>Code remaining Django views </li></ul><ul><li>Code HTML for remaining templates </li></ul><ul><li>Code CSS for remaining templates </li></ul><ul><li>Optimize front- and back-end performance </li></ul><ul><li>Perform user acceptance testing on a mobile device </li></ul><ul><li>Apply appropriate user agent detection & redirects </li></ul>
  27. 27. APPROACH <ul><li>Build flagship template </li></ul><ul><li>Cut up remaining image assets </li></ul><ul><li>Code remaining Django views </li></ul><ul><li>Code HTML for remaining templates </li></ul><ul><li>Code CSS for remaining templates </li></ul><ul><li>Optimize front- and back-end performance </li></ul><ul><li>Perform user acceptance testing on a mobile device </li></ul><ul><li>Apply appropriate user agent detection & redirects </li></ul>
  28. 28. APPROACH <ul><li>Build flagship template </li></ul><ul><li>Cut up remaining image assets </li></ul><ul><li>Code remaining Django views </li></ul><ul><li>Code HTML for remaining templates </li></ul><ul><li>Code CSS for remaining templates </li></ul><ul><li>Optimize front- and back-end performance </li></ul><ul><li>Perform user acceptance testing on a mobile device </li></ul><ul><li>Apply appropriate user agent detection & redirects </li></ul>
  29. 29. APPROACH <ul><li>Build flagship template </li></ul><ul><li>Cut up remaining image assets </li></ul><ul><li>Code remaining Django views </li></ul><ul><li>Code HTML for remaining templates </li></ul><ul><li>Code CSS for remaining templates </li></ul><ul><li>Optimize front- and back-end performance </li></ul><ul><li>Perform user acceptance testing on a mobile device </li></ul><ul><li>Apply appropriate user agent detection & redirects </li></ul>
  30. 30. APPROACH <ul><li>Build flagship template </li></ul><ul><li>Cut up remaining image assets </li></ul><ul><li>Code remaining Django views </li></ul><ul><li>Code HTML for remaining templates </li></ul><ul><li>Code CSS for remaining templates </li></ul><ul><li>Optimize front- and back-end performance </li></ul><ul><li>Perform user acceptance testing on a mobile device </li></ul><ul><li>Apply appropriate user agent detection & redirects </li></ul>
  31. 31. APPROACH <ul><li>Build flagship template </li></ul><ul><li>Cut up remaining image assets </li></ul><ul><li>Code remaining Django views </li></ul><ul><li>Code HTML for remaining templates </li></ul><ul><li>Code CSS for remaining templates </li></ul><ul><li>Optimize front- and back-end performance </li></ul><ul><li>Perform user acceptance testing on a mobile device </li></ul><ul><li>Apply appropriate user agent detection & redirects </li></ul>
  32. 32. APPROACH <ul><li>Build flagship template </li></ul><ul><li>Cut up remaining image assets </li></ul><ul><li>Code remaining Django views </li></ul><ul><li>Code HTML for remaining templates </li></ul><ul><li>Code CSS for remaining templates </li></ul><ul><li>Optimize front- and back-end performance </li></ul><ul><li>Perform user acceptance testing on a mobile device </li></ul><ul><li>Apply appropriate user agent detection & redirects </li></ul>
  33. 33. Development: Basics
  34. 34. BASICS <ul><li>Hide URL bar on page load </li></ul><ul><li>setTimeout(function() { </li></ul><ul><li>window.scrollTo(0, 1); </li></ul><ul><li>}, 0); </li></ul><ul><li>Enable home screen icon </li></ul><ul><li><meta name=&quot;apple-mobile-web-app-capable&quot; content=&quot;yes&quot; /> </li></ul><ul><li><link rel=&quot;apple-touch-icon&quot; href=&quot;img/apple-touch-icon.png&quot; /> </li></ul><ul><li>Use percentage-based CSS design </li></ul><ul><li><meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=yes&quot; /> </li></ul>
  35. 35. Development: Lessons Learned
  36. 36. LESSONS LEARNED <ul><li>CSS3 is going to be a lot of fun </li></ul><ul><ul><li>Child selectors ( :first-child , :last-child ) </li></ul></ul><ul><ul><li>Rounded corners ( border-radius ) </li></ul></ul><ul><ul><li>Drop shadows ( text-shadow ) </li></ul></ul><ul><li>In general, CSS animations aren’t worth the effort </li></ul><ul><ul><li>Most of the time, JavaScript animations are good enough </li></ul></ul><ul><li>Native “maps” protocol isn’t very useful </li></ul><ul><ul><li>Use direct URL from Google Maps instead </li></ul></ul>
  37. 37. Development: Tools
  38. 38. TOOLS <ul><li>UI Libraries </li></ul><ul><ul><li>iUI: http://code.google.com/p/iui/ </li></ul></ul><ul><ul><li>Magic Framework: http://www.jeffmcfadden.com/projects/Magic%20Framework/ </li></ul></ul><ul><ul><li>jPint: http://www.journyx.com/jpint/ </li></ul></ul><ul><ul><li>iWebkit: http://iwebkit.net/ </li></ul></ul><ul><li>JavaScript Frameworks </li></ul><ul><ul><li>XUI: http://github.com/brianleroux/xui/tree/master </li></ul></ul><ul><ul><li>baseJS: http://paularmstrongdesigns.com/projects/basejs/docs/ </li></ul></ul><ul><li>jQuery Plugins </li></ul><ul><ul><li>jQTouch: http://www.jqtouch.com/ </li></ul></ul><ul><ul><li>jQuery Touch: http://plugins.jquery.com/project/touch </li></ul></ul><ul><ul><li>jQuery Flick: http://plugins.jquery.com/project/flick </li></ul></ul>

×