SlideShare a Scribd company logo
1 of 28
From Desktop Web To Winning Mobile Web Experience Chris Love Tellago Inc. http://ProfessionalASPNET.com http://Twitter.com/ChrisLove
Books Coming Soon…
References Mobile Web Books Programming the Mobile Web http://amzn.to/bZMOch Mobile Web Development  http://amzn.to/9cvDoE Mobile Design and Development http://amzn.to/hh8cPd http://www.w3.org/TR/mobile-bp/ Introduction To Mobile Web http://dev.opera.com/articles/view/introduction-to-the-mobile-web/
Why Mobile Web? You Should Attend My “10 Things to Make You A Great Mobile Web Developer” session. http://tinyurl.com/10mobweb Why You Need To Build Mobile Web Sites http://tinyurl.com/whymobweb
Why Mobile Web?
User Problems
“Among U.S. mobile phone users, in May 2010 65.2 percent sent a text message to another phone, 31.9 percent used their phone’s browser, 30 percent used/downloaded applications, 22.5 percent played mobile games and 20.8 percent accessed a social networking site or blog.” 				MobileMarketer.com http://www.mobilemarketer.com/cms/news/research/7342.html
“We often see double consumption and usage on touchscreen devices versus non-touch interfaces,” he said. “The mobile Web is becoming more app-like in appearance and experience, and the likelihood is that the mobile Web and apps will continue to coexist. As the industry pushes towards the HTML 5 standard, the Web is becoming more app-like, so there’s an increasing convergence between the appearance and experience.” 				MobileMarketer.com http://www.mobilemarketer.com/cms/news/research/7342.html
“The key thing for marketers is the combination of larger screens and the touch Web really shouldn’t be underestimated,” Mr. Elkin said. “There are much higher interaction rates for the Web and apps among smartphone owners, and on a bigger canvas we expect those deltas to go even higher.” 				MobileMarketer.com http://www.mobilemarketer.com/cms/news/research/7342.html Don’t Forget TableTs
Understand the Landscape Lots of Phones Out There! Several Browsers Opera, Safari, IE, FireFox, many others you never heard of Proxy Browsers Opera Mini
One Site for Mobile & Desktop? http://mysite.com http://mysite.com/m Creates A Mesh of two client platforms in single project
Handling Redirection WURFL No Not This Guy -> Wireless Universal Resource File http://wurfl.sourceforge.net/ XML configuration file which contains information about capabilities and features of many mobile devices
51 Degrees .NET Library to Manage Redirection http://51degrees.codeplex.com/
Demo
Page Layout Navigation Context Progressive Enhancement Touch Design Patterns
Navigation Decide What Is Useful To Your User 80% Of The Desktop Is Not Useful Mobile Define Use Cases Try For 3 Click Success Try to Predict User Path
Typical Layout Header Navigation Content Footer
Use List Use Vertical Lists OL UL DL (Definition List) Consider Accordians
Demo
Context Where Is Your User? Why Are They Accessing My Site? What Are They Looking For? What Can Your Mobile Platform Offer for Success? This Is Information Architecture
Organizing The Site Back To The Code
Progressive Enhancement Basic content is accessible to all browsers. Basic functionality is accessible to all browsers. Semantic markup contains all content. Enhanced layout is provided by externally linked CSS. Enhanced behavior is provided by unobtrusive, externally linked JavaScript.
Touch Patterns Consider Hidden Areas Provide Space Feedback Touch Ref Guide http://tinyurl.com/tchref
CSS For Mobile wap-accesskey wap-marquee Form Extensions -wap-input-format -wap-input-required <input type="text" name="zip" style="-wap-input-format: '5N'; -wap-input-required: true" />
8. AJAX jQuery & Other Frameworks Work w/Limitations jQuery Mobile - jQueryMobile.com Do Not Assume It Is Available
jQuery Mobile Provide Common Framework Across Devices Browser Capability Rating
JS Mobile Extensions Messaging Address book management Geolocation Gallery Camera Calendar Device status information Native menus
Images Limit to Logo, Product or Map Do NOT use for Backgrounds Buttons Icons Compress The mandatory attributes for an img tag are src, width, height, and alt

More Related Content

What's hot

SMX@adtech: Mobile Local and Video Search — Cindy Krum
SMX@adtech: Mobile Local and Video Search — Cindy KrumSMX@adtech: Mobile Local and Video Search — Cindy Krum
SMX@adtech: Mobile Local and Video Search — Cindy Krumadtech_fan
 
Chrome OS presentation
Chrome OS presentationChrome OS presentation
Chrome OS presentationmelodyhe121
 
The Progressive Web and its New Challenges - Confoo Montréal 2017
The Progressive Web and its New Challenges - Confoo Montréal 2017The Progressive Web and its New Challenges - Confoo Montréal 2017
The Progressive Web and its New Challenges - Confoo Montréal 2017Christian Heilmann
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Clarissa Peterson
 
Recreating mobile controls in mobile web apps
Recreating mobile controls in mobile web appsRecreating mobile controls in mobile web apps
Recreating mobile controls in mobile web appsChris Love
 
HTML5@电子商务.com
HTML5@电子商务.comHTML5@电子商务.com
HTML5@电子商务.comkaven yan
 
Joomla wireframing Template - Joomladay Netherlands 2014 #jd14nl
Joomla wireframing Template - Joomladay Netherlands 2014 #jd14nlJoomla wireframing Template - Joomladay Netherlands 2014 #jd14nl
Joomla wireframing Template - Joomladay Netherlands 2014 #jd14nlPhilip Locke
 
Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017Christian Heilmann
 
A New Hope – the web strikes back
A New Hope – the web strikes backA New Hope – the web strikes back
A New Hope – the web strikes backChristian Heilmann
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeCaridy Patino
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web appsTimmy Kokke
 
The State of the Web - Helsinki meetup
The State of the Web - Helsinki meetupThe State of the Web - Helsinki meetup
The State of the Web - Helsinki meetupChristian Heilmann
 
CLAS Mobile View and Recording Interface
CLAS Mobile View and Recording InterfaceCLAS Mobile View and Recording Interface
CLAS Mobile View and Recording InterfaceThomas Dang
 
Content Strategy for Responsive Websites
Content Strategy for Responsive WebsitesContent Strategy for Responsive Websites
Content Strategy for Responsive WebsitesClarissa Peterson
 
2021 Chrome Dev Summit: Web Performance 101
2021 Chrome Dev Summit: Web Performance 1012021 Chrome Dev Summit: Web Performance 101
2021 Chrome Dev Summit: Web Performance 101Tammy Everts
 
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13Walter Ebert
 
The image problem of the web and how to solve it…
The image problem of the web and how to solve it…The image problem of the web and how to solve it…
The image problem of the web and how to solve it…Christian Heilmann
 
Responsive Design
Responsive DesignResponsive Design
Responsive DesignSara Cannon
 

What's hot (19)

SMX@adtech: Mobile Local and Video Search — Cindy Krum
SMX@adtech: Mobile Local and Video Search — Cindy KrumSMX@adtech: Mobile Local and Video Search — Cindy Krum
SMX@adtech: Mobile Local and Video Search — Cindy Krum
 
Chrome OS presentation
Chrome OS presentationChrome OS presentation
Chrome OS presentation
 
The Progressive Web and its New Challenges - Confoo Montréal 2017
The Progressive Web and its New Challenges - Confoo Montréal 2017The Progressive Web and its New Challenges - Confoo Montréal 2017
The Progressive Web and its New Challenges - Confoo Montréal 2017
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
 
Recreating mobile controls in mobile web apps
Recreating mobile controls in mobile web appsRecreating mobile controls in mobile web apps
Recreating mobile controls in mobile web apps
 
HTML5@电子商务.com
HTML5@电子商务.comHTML5@电子商务.com
HTML5@电子商务.com
 
Joomla wireframing Template - Joomladay Netherlands 2014 #jd14nl
Joomla wireframing Template - Joomladay Netherlands 2014 #jd14nlJoomla wireframing Template - Joomladay Netherlands 2014 #jd14nl
Joomla wireframing Template - Joomladay Netherlands 2014 #jd14nl
 
Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017
 
A New Hope – the web strikes back
A New Hope – the web strikes backA New Hope – the web strikes back
A New Hope – the web strikes back
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
TPR4
TPR4TPR4
TPR4
 
The State of the Web - Helsinki meetup
The State of the Web - Helsinki meetupThe State of the Web - Helsinki meetup
The State of the Web - Helsinki meetup
 
CLAS Mobile View and Recording Interface
CLAS Mobile View and Recording InterfaceCLAS Mobile View and Recording Interface
CLAS Mobile View and Recording Interface
 
Content Strategy for Responsive Websites
Content Strategy for Responsive WebsitesContent Strategy for Responsive Websites
Content Strategy for Responsive Websites
 
2021 Chrome Dev Summit: Web Performance 101
2021 Chrome Dev Summit: Web Performance 1012021 Chrome Dev Summit: Web Performance 101
2021 Chrome Dev Summit: Web Performance 101
 
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
 
The image problem of the web and how to solve it…
The image problem of the web and how to solve it…The image problem of the web and how to solve it…
The image problem of the web and how to solve it…
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 

Similar to From desktop to mobile web

10 Things To Make You a Great Mobile Web Developer
10 Things To Make You a Great Mobile Web Developer10 Things To Make You a Great Mobile Web Developer
10 Things To Make You a Great Mobile Web DeveloperTellago
 
10 Things To Make You a Great Mobile Web Developer
10 Things To Make You a Great Mobile Web Developer10 Things To Make You a Great Mobile Web Developer
10 Things To Make You a Great Mobile Web DeveloperTellago
 
Web In Extreme Environment: Beyond Cross Browsing
Web In Extreme Environment: Beyond Cross BrowsingWeb In Extreme Environment: Beyond Cross Browsing
Web In Extreme Environment: Beyond Cross BrowsingGreg SHIN
 
Drupalcamp LA Aug 2009
Drupalcamp LA Aug 2009Drupalcamp LA Aug 2009
Drupalcamp LA Aug 2009Tom Deryckere
 
Mobile Website Design for Libraries
Mobile Website Design for LibrariesMobile Website Design for Libraries
Mobile Website Design for LibrariesSteve Butzel
 
Open Source to the Rescue of Mobile App and Mobile Web Fragmentation
Open Source to the Rescue of Mobile App and Mobile Web FragmentationOpen Source to the Rescue of Mobile App and Mobile Web Fragmentation
Open Source to the Rescue of Mobile App and Mobile Web FragmentationTom Deryckere
 
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
 
Public Sector Talk by Yeliz Yesilada
Public Sector Talk by Yeliz YesiladaPublic Sector Talk by Yeliz Yesilada
Public Sector Talk by Yeliz YesiladaYeliz Yesilada
 
Creating a Slick Web App Using jQTouch
Creating a Slick Web App Using jQTouchCreating a Slick Web App Using jQTouch
Creating a Slick Web App Using jQTouchSt. Petersburg College
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppSt. Petersburg College
 
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5Christian Heindel
 
Over view of Technologies
Over view of TechnologiesOver view of Technologies
Over view of TechnologiesChris Mitchell
 
Building mobile website with Joomla - Joomla!Days NL 2010 #jd10nl
Building mobile website with Joomla -  Joomla!Days NL 2010 #jd10nlBuilding mobile website with Joomla -  Joomla!Days NL 2010 #jd10nl
Building mobile website with Joomla - Joomla!Days NL 2010 #jd10nlJoomla!Days Netherlands
 
Mobile web application development
Mobile web application developmentMobile web application development
Mobile web application developmentVince Aggrippino
 
Evaluating Mobile Options For Libraries - CIL 2012
Evaluating Mobile Options For Libraries - CIL 2012Evaluating Mobile Options For Libraries - CIL 2012
Evaluating Mobile Options For Libraries - CIL 2012amyhannah84
 
ttconnect: Delivering Government e-Services With IBM Mobile Portal Accelerator
ttconnect: Delivering Government e-Services With IBM Mobile Portal Acceleratorttconnect: Delivering Government e-Services With IBM Mobile Portal Accelerator
ttconnect: Delivering Government e-Services With IBM Mobile Portal AcceleratorTracy Hackshaw
 
Taking Your Library Website Mobile
Taking Your Library Website MobileTaking Your Library Website Mobile
Taking Your Library Website Mobilebaldwind1976
 
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...Lee Roberson
 

Similar to From desktop to mobile web (20)

10 Things To Make You a Great Mobile Web Developer
10 Things To Make You a Great Mobile Web Developer10 Things To Make You a Great Mobile Web Developer
10 Things To Make You a Great Mobile Web Developer
 
10 Things To Make You a Great Mobile Web Developer
10 Things To Make You a Great Mobile Web Developer10 Things To Make You a Great Mobile Web Developer
10 Things To Make You a Great Mobile Web Developer
 
Web In Extreme Environment: Beyond Cross Browsing
Web In Extreme Environment: Beyond Cross BrowsingWeb In Extreme Environment: Beyond Cross Browsing
Web In Extreme Environment: Beyond Cross Browsing
 
Drupalcamp LA Aug 2009
Drupalcamp LA Aug 2009Drupalcamp LA Aug 2009
Drupalcamp LA Aug 2009
 
Mobile Website Design for Libraries
Mobile Website Design for LibrariesMobile Website Design for Libraries
Mobile Website Design for Libraries
 
Flourish2011
Flourish2011Flourish2011
Flourish2011
 
Open Source to the Rescue of Mobile App and Mobile Web Fragmentation
Open Source to the Rescue of Mobile App and Mobile Web FragmentationOpen Source to the Rescue of Mobile App and Mobile Web Fragmentation
Open Source to the Rescue of Mobile App and Mobile Web Fragmentation
 
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
 
Public Sector Talk by Yeliz Yesilada
Public Sector Talk by Yeliz YesiladaPublic Sector Talk by Yeliz Yesilada
Public Sector Talk by Yeliz Yesilada
 
Creating a Slick Web App Using jQTouch
Creating a Slick Web App Using jQTouchCreating a Slick Web App Using jQTouch
Creating a Slick Web App Using jQTouch
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
 
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
 
Over view of Technologies
Over view of TechnologiesOver view of Technologies
Over view of Technologies
 
Firefox Mobile
Firefox MobileFirefox Mobile
Firefox Mobile
 
Building mobile website with Joomla - Joomla!Days NL 2010 #jd10nl
Building mobile website with Joomla -  Joomla!Days NL 2010 #jd10nlBuilding mobile website with Joomla -  Joomla!Days NL 2010 #jd10nl
Building mobile website with Joomla - Joomla!Days NL 2010 #jd10nl
 
Mobile web application development
Mobile web application developmentMobile web application development
Mobile web application development
 
Evaluating Mobile Options For Libraries - CIL 2012
Evaluating Mobile Options For Libraries - CIL 2012Evaluating Mobile Options For Libraries - CIL 2012
Evaluating Mobile Options For Libraries - CIL 2012
 
ttconnect: Delivering Government e-Services With IBM Mobile Portal Accelerator
ttconnect: Delivering Government e-Services With IBM Mobile Portal Acceleratorttconnect: Delivering Government e-Services With IBM Mobile Portal Accelerator
ttconnect: Delivering Government e-Services With IBM Mobile Portal Accelerator
 
Taking Your Library Website Mobile
Taking Your Library Website MobileTaking Your Library Website Mobile
Taking Your Library Website Mobile
 
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
 

More from Chris Love

Quick Fetch API Introduction
Quick Fetch API IntroductionQuick Fetch API Introduction
Quick Fetch API IntroductionChris Love
 
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsChris Love
 
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsChris Love
 
Lazy load Website Assets
Lazy load Website AssetsLazy load Website Assets
Lazy load Website AssetsChris Love
 
Progressive Web Apps for Education
Progressive Web Apps for EducationProgressive Web Apps for Education
Progressive Web Apps for EducationChris Love
 
The server is dead going serverless to create a highly scalable application y...
The server is dead going serverless to create a highly scalable application y...The server is dead going serverless to create a highly scalable application y...
The server is dead going serverless to create a highly scalable application y...Chris Love
 
A Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page ApplicationsA Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page ApplicationsChris Love
 
Real World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker CachingReal World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker CachingChris Love
 
Disrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applicationsDisrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applicationsChris Love
 
Service workers your applications never felt so good
Service workers   your applications never felt so goodService workers   your applications never felt so good
Service workers your applications never felt so goodChris Love
 
Develop a vanilla.js spa you and your customers will love
Develop a vanilla.js spa you and your customers will loveDevelop a vanilla.js spa you and your customers will love
Develop a vanilla.js spa you and your customers will loveChris Love
 
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizationsChris Love
 
Advanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms toolsAdvanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms toolsChris Love
 
Html5 Fit: Get Rid of Love Handles
Html5 Fit:  Get Rid of Love HandlesHtml5 Fit:  Get Rid of Love Handles
Html5 Fit: Get Rid of Love HandlesChris Love
 
Using Responsive Web Design To Make Your Web Work Everywhere - Updated
Using Responsive Web Design To Make Your Web Work Everywhere - UpdatedUsing Responsive Web Design To Make Your Web Work Everywhere - Updated
Using Responsive Web Design To Make Your Web Work Everywhere - UpdatedChris Love
 
Implementing a Responsive Image Strategy
Implementing a Responsive Image StrategyImplementing a Responsive Image Strategy
Implementing a Responsive Image StrategyChris Love
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereChris Love
 
10 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 201610 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 2016Chris Love
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tipsChris Love
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Chris Love
 

More from Chris Love (20)

Quick Fetch API Introduction
Quick Fetch API IntroductionQuick Fetch API Introduction
Quick Fetch API Introduction
 
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web Applications
 
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web Applications
 
Lazy load Website Assets
Lazy load Website AssetsLazy load Website Assets
Lazy load Website Assets
 
Progressive Web Apps for Education
Progressive Web Apps for EducationProgressive Web Apps for Education
Progressive Web Apps for Education
 
The server is dead going serverless to create a highly scalable application y...
The server is dead going serverless to create a highly scalable application y...The server is dead going serverless to create a highly scalable application y...
The server is dead going serverless to create a highly scalable application y...
 
A Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page ApplicationsA Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page Applications
 
Real World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker CachingReal World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker Caching
 
Disrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applicationsDisrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applications
 
Service workers your applications never felt so good
Service workers   your applications never felt so goodService workers   your applications never felt so good
Service workers your applications never felt so good
 
Develop a vanilla.js spa you and your customers will love
Develop a vanilla.js spa you and your customers will loveDevelop a vanilla.js spa you and your customers will love
Develop a vanilla.js spa you and your customers will love
 
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizations
 
Advanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms toolsAdvanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms tools
 
Html5 Fit: Get Rid of Love Handles
Html5 Fit:  Get Rid of Love HandlesHtml5 Fit:  Get Rid of Love Handles
Html5 Fit: Get Rid of Love Handles
 
Using Responsive Web Design To Make Your Web Work Everywhere - Updated
Using Responsive Web Design To Make Your Web Work Everywhere - UpdatedUsing Responsive Web Design To Make Your Web Work Everywhere - Updated
Using Responsive Web Design To Make Your Web Work Everywhere - Updated
 
Implementing a Responsive Image Strategy
Implementing a Responsive Image StrategyImplementing a Responsive Image Strategy
Implementing a Responsive Image Strategy
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
 
10 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 201610 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 2016
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tips
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
 

Recently uploaded

The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
Google AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAGGoogle AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAGSujit Pal
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 

Recently uploaded (20)

The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Google AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAGGoogle AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAG
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 

From desktop to mobile web

  • 1. From Desktop Web To Winning Mobile Web Experience Chris Love Tellago Inc. http://ProfessionalASPNET.com http://Twitter.com/ChrisLove
  • 3. References Mobile Web Books Programming the Mobile Web http://amzn.to/bZMOch Mobile Web Development http://amzn.to/9cvDoE Mobile Design and Development http://amzn.to/hh8cPd http://www.w3.org/TR/mobile-bp/ Introduction To Mobile Web http://dev.opera.com/articles/view/introduction-to-the-mobile-web/
  • 4. Why Mobile Web? You Should Attend My “10 Things to Make You A Great Mobile Web Developer” session. http://tinyurl.com/10mobweb Why You Need To Build Mobile Web Sites http://tinyurl.com/whymobweb
  • 7. “Among U.S. mobile phone users, in May 2010 65.2 percent sent a text message to another phone, 31.9 percent used their phone’s browser, 30 percent used/downloaded applications, 22.5 percent played mobile games and 20.8 percent accessed a social networking site or blog.” MobileMarketer.com http://www.mobilemarketer.com/cms/news/research/7342.html
  • 8. “We often see double consumption and usage on touchscreen devices versus non-touch interfaces,” he said. “The mobile Web is becoming more app-like in appearance and experience, and the likelihood is that the mobile Web and apps will continue to coexist. As the industry pushes towards the HTML 5 standard, the Web is becoming more app-like, so there’s an increasing convergence between the appearance and experience.” MobileMarketer.com http://www.mobilemarketer.com/cms/news/research/7342.html
  • 9. “The key thing for marketers is the combination of larger screens and the touch Web really shouldn’t be underestimated,” Mr. Elkin said. “There are much higher interaction rates for the Web and apps among smartphone owners, and on a bigger canvas we expect those deltas to go even higher.” MobileMarketer.com http://www.mobilemarketer.com/cms/news/research/7342.html Don’t Forget TableTs
  • 10. Understand the Landscape Lots of Phones Out There! Several Browsers Opera, Safari, IE, FireFox, many others you never heard of Proxy Browsers Opera Mini
  • 11. One Site for Mobile & Desktop? http://mysite.com http://mysite.com/m Creates A Mesh of two client platforms in single project
  • 12. Handling Redirection WURFL No Not This Guy -> Wireless Universal Resource File http://wurfl.sourceforge.net/ XML configuration file which contains information about capabilities and features of many mobile devices
  • 13. 51 Degrees .NET Library to Manage Redirection http://51degrees.codeplex.com/
  • 14. Demo
  • 15. Page Layout Navigation Context Progressive Enhancement Touch Design Patterns
  • 16. Navigation Decide What Is Useful To Your User 80% Of The Desktop Is Not Useful Mobile Define Use Cases Try For 3 Click Success Try to Predict User Path
  • 17. Typical Layout Header Navigation Content Footer
  • 18. Use List Use Vertical Lists OL UL DL (Definition List) Consider Accordians
  • 19. Demo
  • 20. Context Where Is Your User? Why Are They Accessing My Site? What Are They Looking For? What Can Your Mobile Platform Offer for Success? This Is Information Architecture
  • 21. Organizing The Site Back To The Code
  • 22. Progressive Enhancement Basic content is accessible to all browsers. Basic functionality is accessible to all browsers. Semantic markup contains all content. Enhanced layout is provided by externally linked CSS. Enhanced behavior is provided by unobtrusive, externally linked JavaScript.
  • 23. Touch Patterns Consider Hidden Areas Provide Space Feedback Touch Ref Guide http://tinyurl.com/tchref
  • 24. CSS For Mobile wap-accesskey wap-marquee Form Extensions -wap-input-format -wap-input-required <input type="text" name="zip" style="-wap-input-format: '5N'; -wap-input-required: true" />
  • 25. 8. AJAX jQuery & Other Frameworks Work w/Limitations jQuery Mobile - jQueryMobile.com Do Not Assume It Is Available
  • 26. jQuery Mobile Provide Common Framework Across Devices Browser Capability Rating
  • 27. JS Mobile Extensions Messaging Address book management Geolocation Gallery Camera Calendar Device status information Native menus
  • 28. Images Limit to Logo, Product or Map Do NOT use for Backgrounds Buttons Icons Compress The mandatory attributes for an img tag are src, width, height, and alt