Your SlideShare is downloading. ×
Mobile compatibility a front end perspective
Mobile compatibility a front end perspective
Mobile compatibility a front end perspective
Mobile compatibility a front end perspective
Mobile compatibility a front end perspective
Mobile compatibility a front end perspective
Mobile compatibility a front end perspective
Mobile compatibility a front end perspective
Mobile compatibility a front end perspective
Mobile compatibility a front end perspective
Mobile compatibility a front end perspective
Mobile compatibility a front end perspective
Mobile compatibility a front end perspective
Mobile compatibility a front end perspective
Mobile compatibility a front end perspective
Mobile compatibility a front end perspective
Mobile compatibility a front end perspective
Mobile compatibility a front end perspective
Mobile compatibility a front end perspective
Mobile compatibility a front end perspective
Mobile compatibility a front end perspective
Mobile compatibility a front end perspective
Mobile compatibility a front end perspective
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile compatibility a front end perspective

725

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
725
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Mobile Compatibility
    A front-end developer
    perspective
  • 2. Fun facts
    There are currently 5.3 billion mobile subscribers world wide
    85%of new handsets sold today have access to mobile web
    Half a billionpeople accessed mobile internet worldwide in 2009. Usage is expected to double by 2014as mobile overtakes the PC as the most popular way to get on the web
    More than 200 million active userscurrently access Facebook through their mobile devices via mobile web and mobile apps
  • 3. Fun facts
    ABI Research (May 2010) predicts that app stores will peak in 2013 then slowly decline as subscribers migrate from downloadable apps to mobile web sites
    ABI Research (Feb 2010) predicts Mobile Commerce will reach US$119 billion by 2015, about 8 percent of the total e-commerce global market
  • 4. Three Degrees - Website Friendliness
    Mobile Compatible (minimal effort)
    Traditional desktop websites
    Twist Image default on all new projects!
    Hybrid Mobile Friendly
    Hybrid desktop websites with mobile optimized CSS
    Mobile Version
    Dedicated mobile websites
  • 5. TI Minimum: Mobile Compatible
    A mobile compatible site is a traditional website targeting desktop browsing (screen resolutions, keyboard and mouse input) that maintains the full experience when viewed on a mobile device
    Key points:
    Experience should be preserved on mobile
    Non-compatible elements should be replaced with fall-backs
  • 6. Mobile Compatible
  • 7. Mobile Compatible
  • 8. Hybrid Mobile Friendly
    A mobile friendly site is a hybrid mobile/desktop site that uses a single implementation of html code but adjusts itself to screen size/resolutions based on the device it is viewed on.
    Key points:
    Same HTML code and sitemap structure across devices
    UX, design and integration considerations for each layout
    Layouts can include smart phone, tablet, netbook and desktop
    8
  • 9. Hybrid Mobile Friendly
    smartphone
    desktop
    http://stephencaver.com/
  • 10. Hybrid Mobile Friendly
    smartphone
    desktop
    http://sasquatchfestival.com/
  • 11. Hybrid Mobile Friendly
    smartphone
    desktop
    netbook
    tablet
    http://interim.it/
  • 12. Mobile Version
    A mobile version is a separate website from the desktop site, with unique HTML, CSS and JavaScript
    Key points:
    Specifically optimized for smart phones
    Separate set of wireframes, functional specifications and design are required
  • 13. Mobile Version
  • 14. 6 Considerations
  • 15. Mobile Compatibility Limitations: Flash
    Full Flash Websites
    Alternate full html version
    Landing page with relevant content
    Non-Interactive Flash Components
    Animated GIFs & Static Images
    Interactive Flash Components/Tools
    HTML5 version of the tool
    “Sorry you need flash” warning
    15
  • 16. Mobile Compatibility Limitations: Hover/Mouse-Over
    There is no hover/mouse-over behavior on a mobile device so special consideration needs to be made for:
    Navigation & drop-down menus
    Tooltip elements
    Links
    should have visually distinctive characteristics (colors, underlines)
    16
  • 17. Mobile Compatibility Limitations
    Embedding Video
    HTML5 vs. Custom Flash Video Players
    Fixed Position Elements
    Utility Components (DFC Websites)
    Fixed Headers/Footers
    JavaScript Animations (graceful degradation)
    Pop-ins & DIV Scrolling Elements
    17
  • 18. Device Support
  • 19. Default Devices We Support
    Apple iOS v3+
    iPhone, iPod Touch, iPad
    Android v2.2+
    Smart phones & tablets
    Blackberry OS6+
    Touch screen (Torch Slider 9800)
    Keyboard & trackpad (Bold 9700, Curve 3G, Style 9670)
    Windows Mobile 7
    WebKit Based Browsers
    Full support for HTML5 & CSS3
    19
  • 20. Support With Additional Cost
    Blackberry Legacy
    v4.6, v4.7, v5.0
    Android Legacy
    v1 devices
    Non-WebKit Mobile Browsers
    3rd Party Browsers
    Opera Mobile, Firefox for Android
    20
  • 21. Development & QA Testing
    Apple iOS
    iPhone, iPod Touch, iPad devices in-house
    iOS Simulator on OSX (provided with SDK)
    Android
    On device & Software Simulators
    Blackberry OS6
    On device
    Windows Mobile 7
    On device
    21
  • 22. Interesting Links
    Design:
    mediaqueri.es
    cssiphone.com
    Best Practices:
    mobiThinking Best Practices
    General Resources:
    dotMobi
    mobileThinking Stats Corner
    22
  • 23. Thanks!Questions?

×