Mobile Web Development


Published on

considerations for mobile web development

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

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Mobile Web Development

  1. 1. Making your Site Mobile? February 2011
  2. 2. In 2010, the computer went mobile…
  3. 3. <ul><li>Mobile enabled devices started to emerge in new forms </li></ul><ul><ul><li>iPad and other tablets </li></ul></ul><ul><ul><li>Gaming devices </li></ul></ul><ul><ul><li>TV’s, DVD players, etc., become WiFi enabled </li></ul></ul><ul><ul><li>It’s still morphing…into cars, home appliances and (insert what you see in the crystal ball here) </li></ul></ul><ul><li>81 Million smartphones were sold worldwide in the third quarter of 2010 (source: Gartner) </li></ul><ul><ul><li>nearly twice as many as in 2009 </li></ul></ul><ul><li>Dumbphones supercharge! </li></ul>
  4. 4. Demographic Info 25 - 34 25% 18 - 24 17% 35 - 44 24% 45 - 54 17% +55 9% -17 8%
  5. 5. What are people doing online… 23.2% play games 15.7% listen to music 68% use SMS 36.4 % browse the internet 34.4% download & use apps 23.7% access social media Source: ComScore MobiLens December 2010
  6. 6. New Opportunities – But Market Place is Fragmented <ul><li>Multiple platforms: </li></ul><ul><ul><li>RIM (31.5%) </li></ul></ul><ul><ul><li>Google (28.7%) </li></ul></ul><ul><ul><li>Apple (25%) </li></ul></ul><ul><ul><li>Microsoft (8.4%) </li></ul></ul><ul><ul><li>Palm (4.2%) </li></ul></ul><ul><li>Fragmentation with platforms </li></ul><ul><ul><li>Multiple OS versions in use </li></ul></ul>Source: ComScore MobiLens December 2010
  7. 7. Degree of Mobile Implementation <ul><li>Mobile accessible web site </li></ul><ul><li>Mobile optimized web site </li></ul><ul><li>Dedicated application (app) </li></ul>
  8. 8. Mobile Accessible Site <ul><li>Web site can be accessed via mobile device </li></ul><ul><li>Uses the same: </li></ul><ul><ul><li>Layout </li></ul></ul><ul><ul><li>Graphics </li></ul></ul><ul><ul><li>Text </li></ul></ul><ul><ul><li>Information architecture </li></ul></ul><ul><li>Poor user experience </li></ul><ul><ul><li>Image are big </li></ul></ul><ul><ul><li>Text is small </li></ul></ul><ul><ul><li>Does not present critical information to the user </li></ul></ul>
  9. 9. Mobile Optimized Site <ul><li>Web site is designed to be accessed via mobile device </li></ul><ul><li>Custom: </li></ul><ul><ul><li>Layout </li></ul></ul><ul><ul><li>Graphics </li></ul></ul><ul><ul><li>Text </li></ul></ul><ul><ul><li>Information architecture </li></ul></ul><ul><li>Optimized user experience </li></ul><ul><ul><li>Images are “lighter” </li></ul></ul><ul><ul><li>Designed to fit a smaller screen layout </li></ul></ul><ul><ul><li>Provides the user easy access to critical information </li></ul></ul>
  10. 10. Native application (app) <ul><li>Designed to be run on a specific device type </li></ul><ul><li>Uses native technology </li></ul><ul><li>Optimized user experience </li></ul><ul><ul><ul><li>Experience is more aligned with the device experience </li></ul></ul></ul><ul><ul><ul><li>Best used for repetitive quick tasks </li></ul></ul></ul>
  11. 11. The New Reality! Customer Engagement Brand Awareness/Exposure Improved Customer Service New Partnerships Response to Calls to Action CONTENT Website Mobile Web Social Networks Offline
  12. 12. US Retailers Leverage Mobile Solutions (2010) Fully functional mobile site 51.9% Showcase a select group of products 33.3% Store locator 25.9% Coupons 11.1% QR 3.7% Source: Fit for Commerce, Navigating Your Roadmap – October 16, 2010 ( 11.1% Location (Foursquare, shopkick, gowalla, stickybits, etc)
  13. 13. <ul><li>What can be tactically supported via mobile to better serve our business goals </li></ul><ul><li>What do we need </li></ul><ul><ul><li>Member exclusive or open to all </li></ul></ul><ul><ul><li>Customer service channel, content generation. elearning, market research, marketing, partner development, product research and development </li></ul></ul>What about you? Ask a few questions…
  14. 14. What about you? Ask a few questions… <ul><li>Competitive Analysis </li></ul><ul><ul><li>What are our competitors doing and is it working </li></ul></ul><ul><li>Audience Research </li></ul><ul><ul><li>Who are we developing for/communicating with </li></ul></ul><ul><ul><li>Where are they now </li></ul></ul><ul><ul><li>What incentives might increase participation (esteem, access, information, app) </li></ul></ul>
  15. 15. <ul><li>What will success look like </li></ul><ul><ul><li>What measures are we looking for </li></ul></ul><ul><ul><ul><li>Increased sales </li></ul></ul></ul><ul><ul><ul><li>Leads </li></ul></ul></ul><ul><ul><ul><li>Ease of use </li></ul></ul></ul><ul><ul><ul><li>Accessible content/functions </li></ul></ul></ul><ul><ul><li>How will we track it </li></ul></ul><ul><ul><ul><li>Traffic </li></ul></ul></ul><ul><ul><ul><li>Business measures (affects on purchase, R&D, etc.) </li></ul></ul></ul>
  16. 16. Implementation <ul><li>What are the business objectives? </li></ul><ul><ul><ul><li>Have a mobile presence? </li></ul></ul></ul><ul><ul><ul><li>Provide information? </li></ul></ul></ul><ul><ul><ul><li>Repeatable actions? </li></ul></ul></ul><ul><li>Which level of mobile implementation meets the identified needs? </li></ul><ul><ul><ul><li>A web site? </li></ul></ul></ul><ul><ul><ul><li>An application? </li></ul></ul></ul>
  17. 17. Native or Web <ul><li>Native App </li></ul><ul><ul><li>Generally better usability & performance </li></ul></ul><ul><ul><li>Exist in device “eco-system” </li></ul></ul><ul><ul><li>Reduce market reach </li></ul></ul><ul><ul><li>Complete access to device API </li></ul></ul><ul><ul><li>Get an icon on the device home page </li></ul></ul>
  18. 18. Native or Web <ul><li>Mobile web </li></ul><ul><ul><li>Only need to support one “platform” </li></ul></ul><ul><ul><li>More freedom </li></ul></ul><ul><ul><li>No revenue split </li></ul></ul><ul><ul><li>Unlimited market reach </li></ul></ul><ul><ul><li>Easier to find experienced developers </li></ul></ul><ul><ul><li>Generally less cost </li></ul></ul>
  19. 19. Native or Web <ul><li>Which to choose? </li></ul><ul><ul><li>Web: Information is the focus </li></ul></ul><ul><ul><li>Native app: Repeatable functions are the focus </li></ul></ul><ul><li>Question still very much unresolved at this time… </li></ul>
  20. 20. Mobile Development Discovery <ul><li>What is the information that mobile users will require? </li></ul><ul><ul><ul><li>Address </li></ul></ul></ul><ul><ul><ul><li>Contact information </li></ul></ul></ul><ul><ul><ul><li>Event details </li></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul><ul><li>What are the top 10 tasks for mobile users? </li></ul><ul><li>What information is required? </li></ul><ul><ul><li>How much information is required? </li></ul></ul><ul><li>Mobile site is often stripped down, but more advanced technology is supported </li></ul>
  21. 21. Location Based Mobile Services <ul><li>Increased use of ‘Check-in’ style </li></ul><ul><li>Allows users to register their location with various services </li></ul><ul><ul><ul><li>Foursquare </li></ul></ul></ul><ul><ul><ul><li>Google Latitude </li></ul></ul></ul><ul><ul><ul><li>Facebook places </li></ul></ul></ul>
  22. 22. Social Media and the Open API <ul><li>Increased free stylin’ using Open API </li></ul><ul><ul><ul><li>Leverages connectivity to people pockets </li></ul></ul></ul><ul><ul><ul><li>Leverages community of developers </li></ul></ul></ul>
  23. 23. Native Application <ul><li>Which platforms to target? </li></ul><ul><ul><ul><li>Is a web based application possible </li></ul></ul></ul><ul><li>Which actions need to available? </li></ul><ul><ul><ul><li>What are the top tasks? </li></ul></ul></ul><ul><ul><ul><li>Forms </li></ul></ul></ul><ul><ul><ul><li>Work flow </li></ul></ul></ul><ul><li>What native technology can you take advantage of? </li></ul><ul><ul><ul><li>Will you be able to take advantage of cross-platform development? </li></ul></ul></ul>
  24. 24. Mobile Web Site <ul><li>Mobile accessible? </li></ul><ul><ul><ul><li>Test in various devices </li></ul></ul></ul><ul><ul><ul><li>Mobile devices are getting better and better at rendering sites </li></ul></ul></ul><ul><ul><ul><li>Will likely find that the experience is “good enough” </li></ul></ul></ul><ul><li>Mobile optimized? </li></ul><ul><ul><ul><li>A separate web development project… </li></ul></ul></ul>
  25. 25. Mobile Web Development Design <ul><li>Which screen sizes & aspect ratio to target? </li></ul><ul><ul><ul><ul><li>Portrait or landscape </li></ul></ul></ul></ul><ul><ul><ul><ul><li>BB with keyboard? </li></ul></ul></ul></ul><ul><ul><ul><ul><li>iPhone? </li></ul></ul></ul></ul><ul><ul><ul><ul><li>iPad? </li></ul></ul></ul></ul><ul><ul><li>What appears above the fold? Below? </li></ul></ul><ul><ul><li>Does the device support zooming? </li></ul></ul><ul><li>Hardware input (scroll wheel, mouse touch)? </li></ul><ul><ul><ul><li>No mouseovers </li></ul></ul></ul>
  26. 26. Mobile Web Development Design <ul><li>How to handle transition between mobile and desktop users </li></ul><ul><ul><ul><li>Auto detect? </li></ul></ul></ul><ul><ul><ul><li>A specific domain? </li></ul></ul></ul><ul><ul><ul><li>How do users get back and forth? </li></ul></ul></ul><ul><li>What type of bandwidth will users have access to? </li></ul><ul><li>What content to display? </li></ul><ul><li>How much content to display? </li></ul><ul><li>Text size? </li></ul>
  27. 27. Mobile Web Development Design <ul><li>Keep images small </li></ul><ul><li>Large buttons </li></ul><ul><li>Reduce scrolling (especially horizontal) </li></ul><ul><li>Reduce the amount of text </li></ul><ul><ul><ul><li>Or, give users choices and hints </li></ul></ul></ul><ul><li>Degrade gracefully </li></ul><ul><ul><ul><li>Indicate when plugins will not function </li></ul></ul></ul>
  28. 28. <ul><li>Technology can be confusing…we get that. </li></ul><ul><li>At Redengine, we’re here to help. We combine strategic thinking and creative ideas with a technology solution that works for you!” </li></ul>We`re here to help!