Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,638 views

Published on

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

Published in: Technology, Business
  • Be the first to comment

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

×