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