SlideShare ist ein Scribd-Unternehmen logo
1 von 23
Mobile Compatibility A front-end developer perspective
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
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
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
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
Mobile Compatible
Mobile Compatible
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
Hybrid Mobile Friendly smartphone desktop http://stephencaver.com/
Hybrid Mobile Friendly smartphone desktop http://sasquatchfestival.com/
Hybrid Mobile Friendly smartphone desktop netbook tablet http://interim.it/
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
Mobile Version
6 Considerations
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
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
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
Device Support
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
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
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
Interesting Links Design: mediaqueri.es cssiphone.com Best Practices: mobiThinking Best Practices General Resources: dotMobi mobileThinking Stats Corner 22
Thanks!Questions?

Weitere ähnliche Inhalte

Was ist angesagt?

Mobile application development Confronts and Chances
Mobile application development   Confronts and ChancesMobile application development   Confronts and Chances
Mobile application development Confronts and ChancesEffOne_Technologies
 
ShopLocal Native Mobile Applications Overview - PART ONE (1)
ShopLocal Native Mobile Applications Overview - PART ONE (1)ShopLocal Native Mobile Applications Overview - PART ONE (1)
ShopLocal Native Mobile Applications Overview - PART ONE (1)Patrick Flanagan
 
Mobile application
Mobile applicationMobile application
Mobile applicationPriyaJanak1
 
Mobile application
Mobile applicationMobile application
Mobile applicationPriyaJanak1
 
Marketing in a Mobile World
Marketing in a Mobile WorldMarketing in a Mobile World
Marketing in a Mobile WorldAndrea Hoffman
 
Types of mobile apps mobile app development
Types of mobile apps  mobile app developmentTypes of mobile apps  mobile app development
Types of mobile apps mobile app developmentWebwing Technologies
 
Responsive design mobile_apps
Responsive design mobile_appsResponsive design mobile_apps
Responsive design mobile_appsGorilla Group
 
Best features for mobile development
Best features for mobile developmentBest features for mobile development
Best features for mobile developmentmobileapplicationonl
 
Factors affecting cost to build a mobile app
Factors affecting cost to build a mobile appFactors affecting cost to build a mobile app
Factors affecting cost to build a mobile appDay1 Technologies
 
Mobile app development converted
Mobile app development convertedMobile app development converted
Mobile app development convertedSandy Gupta
 
Different types of mobile apps
Different types of mobile appsDifferent types of mobile apps
Different types of mobile appsEric Melchor
 
Mobile apps vs mobile websites
Mobile apps vs mobile websitesMobile apps vs mobile websites
Mobile apps vs mobile websitesAbhishek Verma
 
Maximize Your M-Commerce Strategy
Maximize Your M-Commerce StrategyMaximize Your M-Commerce Strategy
Maximize Your M-Commerce StrategyCompuware APM
 
Mobile is your friend, not enemy.
Mobile is your friend, not enemy. Mobile is your friend, not enemy.
Mobile is your friend, not enemy. Edith Yeung
 
Breaking Bad? How Mobile Operators can make Good & Monetize the App Economy
Breaking Bad? How Mobile Operators can make Good & Monetize the App EconomyBreaking Bad? How Mobile Operators can make Good & Monetize the App Economy
Breaking Bad? How Mobile Operators can make Good & Monetize the App EconomyColin JG Miles
 

Was ist angesagt? (20)

Mobile application development Confronts and Chances
Mobile application development   Confronts and ChancesMobile application development   Confronts and Chances
Mobile application development Confronts and Chances
 
ShopLocal Native Mobile Applications Overview - PART ONE (1)
ShopLocal Native Mobile Applications Overview - PART ONE (1)ShopLocal Native Mobile Applications Overview - PART ONE (1)
ShopLocal Native Mobile Applications Overview - PART ONE (1)
 
Mobile application
Mobile applicationMobile application
Mobile application
 
Mobile application
Mobile applicationMobile application
Mobile application
 
Marketing in a Mobile World
Marketing in a Mobile WorldMarketing in a Mobile World
Marketing in a Mobile World
 
Types of mobile apps mobile app development
Types of mobile apps  mobile app developmentTypes of mobile apps  mobile app development
Types of mobile apps mobile app development
 
Responsive design mobile_apps
Responsive design mobile_appsResponsive design mobile_apps
Responsive design mobile_apps
 
Best features for mobile development
Best features for mobile developmentBest features for mobile development
Best features for mobile development
 
Firefox OS Intro
Firefox OS IntroFirefox OS Intro
Firefox OS Intro
 
Factors affecting cost to build a mobile app
Factors affecting cost to build a mobile appFactors affecting cost to build a mobile app
Factors affecting cost to build a mobile app
 
Mobile or Bust
Mobile or BustMobile or Bust
Mobile or Bust
 
Mobile app development converted
Mobile app development convertedMobile app development converted
Mobile app development converted
 
Different types of mobile apps
Different types of mobile appsDifferent types of mobile apps
Different types of mobile apps
 
Mobile apps vs mobile websites
Mobile apps vs mobile websitesMobile apps vs mobile websites
Mobile apps vs mobile websites
 
Which Is Better – An App or A Mobile Website?
Which Is Better –  An App or A  Mobile Website?Which Is Better –  An App or A  Mobile Website?
Which Is Better – An App or A Mobile Website?
 
Maximize Your M-Commerce Strategy
Maximize Your M-Commerce StrategyMaximize Your M-Commerce Strategy
Maximize Your M-Commerce Strategy
 
Mobile is your friend, not enemy.
Mobile is your friend, not enemy. Mobile is your friend, not enemy.
Mobile is your friend, not enemy.
 
Mobile commerce
Mobile commerceMobile commerce
Mobile commerce
 
Breaking Bad? How Mobile Operators can make Good & Monetize the App Economy
Breaking Bad? How Mobile Operators can make Good & Monetize the App EconomyBreaking Bad? How Mobile Operators can make Good & Monetize the App Economy
Breaking Bad? How Mobile Operators can make Good & Monetize the App Economy
 
United Airlines: Chicago AMA Evening With Experts: Developing A Customer Cent...
United Airlines: Chicago AMA Evening With Experts: Developing A Customer Cent...United Airlines: Chicago AMA Evening With Experts: Developing A Customer Cent...
United Airlines: Chicago AMA Evening With Experts: Developing A Customer Cent...
 

Andere mochten auch

Good brands report 2010
Good brands report 2010Good brands report 2010
Good brands report 2010Pierre Foucart
 
White paper your guide to successful product launches on facebook
White paper   your guide to successful product launches on facebookWhite paper   your guide to successful product launches on facebook
White paper your guide to successful product launches on facebookPierre Foucart
 
Writing for non writers handout
Writing for non writers handoutWriting for non writers handout
Writing for non writers handoutPierre Foucart
 
Cossette Mobindex - Mars 2011
Cossette Mobindex - Mars 2011Cossette Mobindex - Mars 2011
Cossette Mobindex - Mars 2011Pierre Foucart
 
Good Brands Report 2010
Good Brands Report 2010Good Brands Report 2010
Good Brands Report 2010Ishraq Dhaly
 

Andere mochten auch (7)

Good brands report 2010
Good brands report 2010Good brands report 2010
Good brands report 2010
 
Bicycle tire belts
Bicycle tire beltsBicycle tire belts
Bicycle tire belts
 
White paper your guide to successful product launches on facebook
White paper   your guide to successful product launches on facebookWhite paper   your guide to successful product launches on facebook
White paper your guide to successful product launches on facebook
 
Writing for non writers handout
Writing for non writers handoutWriting for non writers handout
Writing for non writers handout
 
Cossette Mobindex - Mars 2011
Cossette Mobindex - Mars 2011Cossette Mobindex - Mars 2011
Cossette Mobindex - Mars 2011
 
Glo-bars
Glo-barsGlo-bars
Glo-bars
 
Good Brands Report 2010
Good Brands Report 2010Good Brands Report 2010
Good Brands Report 2010
 

Ähnlich wie Mobile compatibility a front end perspective

Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | Oxiem
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | OxiemGet Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | Oxiem
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | OxiemLessing-Flynn
 
Developing for Mobility
Developing for MobilityDeveloping for Mobility
Developing for MobilityScotty Logan
 
Mobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIPMobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIPRZasadzinski
 
QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10Almog Koren
 
Mobile Analytics
Mobile AnalyticsMobile Analytics
Mobile Analyticstchenard
 
Introduction to mobile site
Introduction to mobile siteIntroduction to mobile site
Introduction to mobile siteDigital Shende
 
Mobile Internet in India - Opportunities & Possibilities
Mobile Internet in India - Opportunities & PossibilitiesMobile Internet in India - Opportunities & Possibilities
Mobile Internet in India - Opportunities & PossibilitiesVikas Tandon
 
Native, Web App, or Hybrid: Which Should You Choose?
Native, Web App, or Hybrid: Which Should You Choose?Native, Web App, or Hybrid: Which Should You Choose?
Native, Web App, or Hybrid: Which Should You Choose?Softweb Solutions
 
10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps 10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps Fresh Digital Group
 
10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile AppsDoug Robinson
 
future of mobile web
future of mobile webfuture of mobile web
future of mobile webMihai Badita
 
Polymorphic publishing john barnes - what to build now
Polymorphic publishing   john barnes - what to build nowPolymorphic publishing   john barnes - what to build now
Polymorphic publishing john barnes - what to build nowJohn Barnes
 
The future is mobile
The future is mobileThe future is mobile
The future is mobileShannon Smith
 
What do you need to consider before taking a business onto mobile ?
What do you need to consider before taking a business onto mobile ?What do you need to consider before taking a business onto mobile ?
What do you need to consider before taking a business onto mobile ?Rapidsoft Technologies
 
Mobile Web Presentation
Mobile Web PresentationMobile Web Presentation
Mobile Web Presentationjustinyates
 
From mobile browser to mobile app
From mobile browser to mobile appFrom mobile browser to mobile app
From mobile browser to mobile appRyan Stewart
 
MOBILE-APP-DEVELOPMENT.for college students
MOBILE-APP-DEVELOPMENT.for college studentsMOBILE-APP-DEVELOPMENT.for college students
MOBILE-APP-DEVELOPMENT.for college studentsAprilJasminePacis
 

Ähnlich wie Mobile compatibility a front end perspective (20)

Mobile App Testing
Mobile App TestingMobile App Testing
Mobile App Testing
 
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | Oxiem
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | OxiemGet Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | Oxiem
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | Oxiem
 
Developing for Mobility
Developing for MobilityDeveloping for Mobility
Developing for Mobility
 
Mobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIPMobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIP
 
QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10
 
Mobile Analytics
Mobile AnalyticsMobile Analytics
Mobile Analytics
 
MobileWebAppsDesign
MobileWebAppsDesignMobileWebAppsDesign
MobileWebAppsDesign
 
Introduction to mobile site
Introduction to mobile siteIntroduction to mobile site
Introduction to mobile site
 
Mobile Internet in India - Opportunities & Possibilities
Mobile Internet in India - Opportunities & PossibilitiesMobile Internet in India - Opportunities & Possibilities
Mobile Internet in India - Opportunities & Possibilities
 
Native, Web App, or Hybrid: Which Should You Choose?
Native, Web App, or Hybrid: Which Should You Choose?Native, Web App, or Hybrid: Which Should You Choose?
Native, Web App, or Hybrid: Which Should You Choose?
 
10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps 10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps
 
10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps
 
future of mobile web
future of mobile webfuture of mobile web
future of mobile web
 
Polymorphic publishing john barnes - what to build now
Polymorphic publishing   john barnes - what to build nowPolymorphic publishing   john barnes - what to build now
Polymorphic publishing john barnes - what to build now
 
The future is mobile
The future is mobileThe future is mobile
The future is mobile
 
What do you need to consider before taking a business onto mobile ?
What do you need to consider before taking a business onto mobile ?What do you need to consider before taking a business onto mobile ?
What do you need to consider before taking a business onto mobile ?
 
Mobile Web Presentation
Mobile Web PresentationMobile Web Presentation
Mobile Web Presentation
 
From mobile browser to mobile app
From mobile browser to mobile appFrom mobile browser to mobile app
From mobile browser to mobile app
 
Top Mobile App Development Frameworks in 2023.pdf
Top Mobile App Development Frameworks in 2023.pdfTop Mobile App Development Frameworks in 2023.pdf
Top Mobile App Development Frameworks in 2023.pdf
 
MOBILE-APP-DEVELOPMENT.for college students
MOBILE-APP-DEVELOPMENT.for college studentsMOBILE-APP-DEVELOPMENT.for college students
MOBILE-APP-DEVELOPMENT.for college students
 

Kürzlich hochgeladen

Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfSeasiaInfotech2
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostZilliz
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 

Kürzlich hochgeladen (20)

Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdf
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 

Mobile compatibility a front end perspective

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