SlideShare a Scribd company logo
Mobile Web Best Practices
Woody Pewitt
Technical Evangelist
DevExpress
woodyp@devexpress.com
Welcome to a Technology
Revolution
• Rare availability
• Desired functionality
• Expensive initial cost
• Ever reducing costs and greater availability
• And it all started in…
1910
“Pocket watches provide the
closest historical parallel to
the remarkable rise of the
mobile phone.”
—Jon Agar , Constant Touch
Staggering Numbers
1996 GSM phones in 103 countries
2000 10 million i-mode users (Japan)
2002 1 billion mobile phone users worldwide
2009 3 billion mobile phone users worldwide
UK More mobile phones than humans...
Problem
Reader Poll
• ~400 Participants
• 159 Unique handsets
(Motorola RAZR, Palm Treo 650, Sony Ericsson K750i / K700i / T610, Nokia 6230...)
• 19 Manufacturers
• 44 Countries
– Cameron Moll
• Test!
– http://cameronmoll.com/mobile/mkp/
Symbian
41%
Research In
Motion
18%
Android
17%
iOS
14%
Win Mobile
5%
Linux
3%
Other OSs
2%
Q2 2010 Market Share (%)
Symbian Research In Motion
Android iOS
Microsoft Windows Mobile Linux
Other OSs
Symbian
51%
Research In
Motion
19%
Android
2%
iOS
13%
Win Mobile
9%
Linux
5%
Other OSs
1%
Q2 2009 Market Share (%)
Symbian Research In Motion
Android iOS
Microsoft Windows Mobile Linux
Other OSs
Symbian
6%
Research In
Motion
11%
Android
33%
iOS
14%
Win Mobile
-8%
Linux
-9%
Other OSs
19%
Market Growth
Symbian Research In Motion
Android iOS
Microsoft Windows Mobile Linux
Other OSs
So What Now?
• Wireless Access Protocol (WAP)
http://en.wikipedia.org/wiki/Wireless_Application_
Protocol
• Simple HTML/XHTML
• HTML 4.0 Guidelines for Mobile Access
– http://www.w3.org/TR/NOTE-html40-mobile/
• Mobile Web Best Practices 1.0
– http://www.w3.org/TR/mobile-bp/
W3c Default Delivery Context
• Usable Screen Width
– 120 pixels, minimum.
• Markup Language Support
– XHTML Basic 1.1 delivered with content type application/xhtml+xml.
• Character Encoding
– UTF-8 [UTF-8].
• Image Format Support
– JPEG.
– GIF 89a.
• Maximum Total Page Weight
– 20 kilobytes.
• Colors
– 256 Colors, minimum.
• Style Sheet Support
– CSS Level 1. In addition, CSS Level 2 @media rule together with the handheld and all media
types.
• HTTP
– HTTP/1.0 or more recent [HTTP1.1].
• Script
– No support for client side scripting.
Content Adaption Strategies
1. Do nothing
2. Strip images and styling
3. Handheld stylesheets
4. Mobile-specific site/app
Content Adaption Strategies
• One Size Fits All
– No Change
– Easy for the (lazy) Developer
– Reasonable on Advanced Phones (ie: iPhone)
– HORRIBLE for most phones.
• Minimal Adaption
– Cater to the lowest dominator
– Will Look OK on most phones
– But fails to leverage of features of more advanced
phones
Content Adaption Strategies: Redirection
• Redirection
– Server Recognizes the Browser is from a
mobile device and redirects it to a different
webpage (ie: .mobi v. .com)
– Web Fragmentation / Can’t Share Bookmarks
– dotMobi – ”this approach is probably best
considered a temporary solution. “
Content Adaption Strategies: Unification
• One Site for Everyone
– Server Recognizes the Browser is on a
mobile device and reformats the website
accordingly.
– Allows for bookmark sharing
– Hardest on Developers
– Easiest on Users
– dotMobi – ” ultimately leads to more
satisfactory user experiences and repeat
visits to your site. “
Optimize Navigation
• Provide a consistent but minimal navigation at
the top
• Use descriptive links texts, with access keys for
the most important ones
• Use an easy-to-type address for your entry page
• Don't put too many links on a page, but make
sure each page of your site is easily reachable
Keep it Small
• Minimize
– Terse, efficient markup
– Keep style sheets small
• Page Size Limit
– Be aware of memory limitations
• Scrolling
– Avoid 2D scrolling at all costs
Minimize Network
• Users have to pay!
– Most people don’t have unlimited internet
plans
• Avoid
– AutoRefresh
– Redirection
– Externally linked Resources
• Enable Caching
Guide Input
• Minimize Keystrokes & Free Text
• Provide Defaults
Users on the Go
• Clarity
– Sparse
– Short Page Title
– Clear Central Meaning
• Suitable for a Mobile Context
Recommended Approach
Recommend that a mobile web application strategy is developed in
stages in the following order:
• Start with Lowest Common Denominator: build a mobile website
using simple XHTML and web 1.0 technologies to guarantee
compatibility with most mobile browsers.
• Then build specific Web Apps for better user acceptance and user
experience on the particular device
– iPhone
– Symbian S60
– Blackberry
– Android
– Opera Mini
This approach will make the web app available to a large percentage of
mobile users and at the same time provides optimal user experience
for the particular device and mobile browser.
Your mileage may vary!
Mobile Web Checkers
• How to ‘debug’ HTML?
• Use these programs to ensure your code
is compliant
– W3C Mobile Web Best Practices checker
• http://validator.w3.org/mobile/
– Ready.mobi
• http://ready.mobi/
Resources
• Designing Web Sites for Windows Mobile Powered Devices
– http://msdn.microsoft.com/en-us/library/bb415387.aspx
• Mobile Web Design
– http://www.cameronmoll.com/archives/000398.html
• How to Design and Build a Mobile Website
– http://www.webpagefx.com/design-build-mobile-web-site.html
• A Look At Mobile Web Design – 5 Sites To Visit From Your Android Phone
– http://androidandme.com/2009/06/news/a-look-at-mobile-web-design-5-sites-to-visit-from-your-android-
phone/
• Guidance
– http://en.wikipedia.org/wiki/Mobile_Web
– http://www.w3.org/2006/07/Mobile_Web_Design.pdf
• Mobile Web Best Practices 1.0
– http://www.w3.org/TR/mobile-bp/
• Mobile Web
– http://www.w3.org/standards/webdesign/mobilweb
• ASP.NET Web Sites for Mobile Devices
– http://msdn.microsoft.com/en-us/library/ms178619(VS.100).aspx
• Mobile Web Developer’s Guide
– http://www.networksolutions.com/help/mobi-guide.pdf
• DeviceAtlas (database of mobile devices )
– http://deviceatlas.com/
• Gartner Worldwide Mobile Device Study
– http://www.gartner.com/it/page.jsp?id=1421013
Tools
• Google Mobile Proxy
– http://www.google.com/gwt/n
• mobiReady testing tool
– http://ready.mobi/
• Mobile Emulators
– http://mobiforge.com/emulators/page/mobile-
emulators

More Related Content

What's hot

Nick Grant - Roam Solutions
Nick Grant - Roam SolutionsNick Grant - Roam Solutions
Nick Grant - Roam Solutions
LSmiro
 
Mobile website --- Web is in pocket....
Mobile website --- Web is in pocket....Mobile website --- Web is in pocket....
Mobile website --- Web is in pocket....
Naga Harish M
 
Mobile Internet
Mobile InternetMobile Internet
Mobile Internet
Michaël Uyttersprot
 
Why mobile is important
Why mobile is importantWhy mobile is important
Why mobile is important
Adam Lee
 
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...
Compuware APM
 
The Mobile Web - Fronteers 2009
The Mobile Web - Fronteers 2009The Mobile Web - Fronteers 2009
The Mobile Web - Fronteers 2009
Peter-Paul Koch
 
Indusblue Mobile Apps
Indusblue Mobile AppsIndusblue Mobile Apps
Indusblue Mobile Apps
Darren Pereira
 
panorama web mobile
panorama web mobilepanorama web mobile
panorama web mobile
Paolo Maioli
 
Capitalizing on the Mobile Web
Capitalizing on the Mobile WebCapitalizing on the Mobile Web
Capitalizing on the Mobile Web
Brandon Eley
 
Mobile operating systems
Mobile operating systemsMobile operating systems
Mobile operating systems
Veronica Alejandro
 
Introduction to Smartphone Apps
Introduction to Smartphone AppsIntroduction to Smartphone Apps
Introduction to Smartphone Apps
GoLocalApps
 
Introduction to Smartphone Apps
Introduction to Smartphone AppsIntroduction to Smartphone Apps
Introduction to Smartphone Apps
1776Productions
 
Metzgar Jason Mobile Presentation
Metzgar Jason Mobile PresentationMetzgar Jason Mobile Presentation
Metzgar Jason Mobile Presentation
8atman
 
Mobile First Approach - The key to cross platform interface design
Mobile First Approach - The key to cross platform interface designMobile First Approach - The key to cross platform interface design
Mobile First Approach - The key to cross platform interface design
Vivek Parihar
 
Embracing the mobile frontier and reaching the digital natives
Embracing the mobile frontier and reaching the digital nativesEmbracing the mobile frontier and reaching the digital natives
Embracing the mobile frontier and reaching the digital natives
Ektron
 
Mobile websites by clear idea | social media marketing
Mobile websites by clear idea | social media marketingMobile websites by clear idea | social media marketing
Mobile websites by clear idea | social media marketing
Lisa Moore
 
Getting Started with Mobile Websites if You Don't Know Code
Getting Started with Mobile Websites if You Don't Know CodeGetting Started with Mobile Websites if You Don't Know Code
Getting Started with Mobile Websites if You Don't Know Code
Carli Spina
 
TERMINALFOUR t44u 2011- Make it mobile, an introduction
TERMINALFOUR t44u 2011- Make it mobile, an introductionTERMINALFOUR t44u 2011- Make it mobile, an introduction
TERMINALFOUR t44u 2011- Make it mobile, an introduction
Terminalfour
 
Native, HTML5 or Hybrid Mobile Apps - Cost vs benefits
 Native, HTML5 or Hybrid Mobile Apps - Cost vs benefits Native, HTML5 or Hybrid Mobile Apps - Cost vs benefits
Native, HTML5 or Hybrid Mobile Apps - Cost vs benefits
Ranosys Technologies
 
Mobile Presentation
Mobile PresentationMobile Presentation
Mobile Presentation
ShanMawji
 

What's hot (20)

Nick Grant - Roam Solutions
Nick Grant - Roam SolutionsNick Grant - Roam Solutions
Nick Grant - Roam Solutions
 
Mobile website --- Web is in pocket....
Mobile website --- Web is in pocket....Mobile website --- Web is in pocket....
Mobile website --- Web is in pocket....
 
Mobile Internet
Mobile InternetMobile Internet
Mobile Internet
 
Why mobile is important
Why mobile is importantWhy mobile is important
Why mobile is important
 
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...
 
The Mobile Web - Fronteers 2009
The Mobile Web - Fronteers 2009The Mobile Web - Fronteers 2009
The Mobile Web - Fronteers 2009
 
Indusblue Mobile Apps
Indusblue Mobile AppsIndusblue Mobile Apps
Indusblue Mobile Apps
 
panorama web mobile
panorama web mobilepanorama web mobile
panorama web mobile
 
Capitalizing on the Mobile Web
Capitalizing on the Mobile WebCapitalizing on the Mobile Web
Capitalizing on the Mobile Web
 
Mobile operating systems
Mobile operating systemsMobile operating systems
Mobile operating systems
 
Introduction to Smartphone Apps
Introduction to Smartphone AppsIntroduction to Smartphone Apps
Introduction to Smartphone Apps
 
Introduction to Smartphone Apps
Introduction to Smartphone AppsIntroduction to Smartphone Apps
Introduction to Smartphone Apps
 
Metzgar Jason Mobile Presentation
Metzgar Jason Mobile PresentationMetzgar Jason Mobile Presentation
Metzgar Jason Mobile Presentation
 
Mobile First Approach - The key to cross platform interface design
Mobile First Approach - The key to cross platform interface designMobile First Approach - The key to cross platform interface design
Mobile First Approach - The key to cross platform interface design
 
Embracing the mobile frontier and reaching the digital natives
Embracing the mobile frontier and reaching the digital nativesEmbracing the mobile frontier and reaching the digital natives
Embracing the mobile frontier and reaching the digital natives
 
Mobile websites by clear idea | social media marketing
Mobile websites by clear idea | social media marketingMobile websites by clear idea | social media marketing
Mobile websites by clear idea | social media marketing
 
Getting Started with Mobile Websites if You Don't Know Code
Getting Started with Mobile Websites if You Don't Know CodeGetting Started with Mobile Websites if You Don't Know Code
Getting Started with Mobile Websites if You Don't Know Code
 
TERMINALFOUR t44u 2011- Make it mobile, an introduction
TERMINALFOUR t44u 2011- Make it mobile, an introductionTERMINALFOUR t44u 2011- Make it mobile, an introduction
TERMINALFOUR t44u 2011- Make it mobile, an introduction
 
Native, HTML5 or Hybrid Mobile Apps - Cost vs benefits
 Native, HTML5 or Hybrid Mobile Apps - Cost vs benefits Native, HTML5 or Hybrid Mobile Apps - Cost vs benefits
Native, HTML5 or Hybrid Mobile Apps - Cost vs benefits
 
Mobile Presentation
Mobile PresentationMobile Presentation
Mobile Presentation
 

Similar to Mobile Web Best Practices

How To Create Web Sites For Mobile Clients
How To Create Web Sites For Mobile ClientsHow To Create Web Sites For Mobile Clients
How To Create Web Sites For Mobile Clients
Woody Pewitt
 
chapter2
chapter2chapter2
chapter2
Pon Tovave
 
mobile browsers.pptx
mobile browsers.pptxmobile browsers.pptx
mobile browsers.pptx
Mohitjoshi305593
 
Universal access across devices
Universal access across devicesUniversal access across devices
Universal access across devices
Henny Swan
 
Mobile CMS - CMSExpo 2010
Mobile CMS - CMSExpo 2010Mobile CMS - CMSExpo 2010
Mobile CMS - CMSExpo 2010
Tom Deryckere
 
Make Your WordPress Site Mobile Friendly
Make Your WordPress Site Mobile FriendlyMake Your WordPress Site Mobile Friendly
Make Your WordPress Site Mobile Friendly
Dave Zille
 
Best practices for delivering quality web experiences
Best practices for delivering quality web experiencesBest practices for delivering quality web experiences
Best practices for delivering quality web experiences
Ben Mantooth
 
Simon Bates, Manifesto Digital - Mobile Application Development: Past, Presen...
Simon Bates, Manifesto Digital - Mobile Application Development: Past, Presen...Simon Bates, Manifesto Digital - Mobile Application Development: Past, Presen...
Simon Bates, Manifesto Digital - Mobile Application Development: Past, Presen...
Simon Bates
 
#1NLab14: Reshaping Behavior
#1NLab14: Reshaping Behavior#1NLab14: Reshaping Behavior
#1NLab14: Reshaping Behavior
One North
 
Chap 1 - mobile Introduction.pptx
Chap 1 - mobile Introduction.pptxChap 1 - mobile Introduction.pptx
Chap 1 - mobile Introduction.pptx
TadeseBeyene
 
Mobile Mantras
Mobile MantrasMobile Mantras
Mobile Mantras
hannerlib
 
Designing for Mobile Devices
Designing for Mobile DevicesDesigning for Mobile Devices
Designing for Mobile Devices
OxonDigital
 
Mobile Mantras: XD Best Practices for Mobile Development
Mobile Mantras: XD Best Practices for Mobile DevelopmentMobile Mantras: XD Best Practices for Mobile Development
Mobile Mantras: XD Best Practices for Mobile Development
Rob Fitzgibbon
 
Architecting mobile solutions
Architecting mobile solutions Architecting mobile solutions
Architecting mobile solutions
Sachin Bhosale
 
01 01 - introduction to mobile application development
01  01 - introduction to mobile application development01  01 - introduction to mobile application development
01 01 - introduction to mobile application development
Siva Kumar reddy Vasipally
 
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for LibrariesWeb Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Matt Machell
 
Creating Large-Scale Responsive Websites
Creating Large-Scale Responsive WebsitesCreating Large-Scale Responsive Websites
Creating Large-Scale Responsive Websites
Keith Doyle
 
WSO2Con Asia 2014 - Accelerating Mobile Development with Mobile Enterprise Ap...
WSO2Con Asia 2014 - Accelerating Mobile Development with Mobile Enterprise Ap...WSO2Con Asia 2014 - Accelerating Mobile Development with Mobile Enterprise Ap...
WSO2Con Asia 2014 - Accelerating Mobile Development with Mobile Enterprise Ap...
WSO2
 
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High Performance
Maximiliano Firtman
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Julia Vi
 

Similar to Mobile Web Best Practices (20)

How To Create Web Sites For Mobile Clients
How To Create Web Sites For Mobile ClientsHow To Create Web Sites For Mobile Clients
How To Create Web Sites For Mobile Clients
 
chapter2
chapter2chapter2
chapter2
 
mobile browsers.pptx
mobile browsers.pptxmobile browsers.pptx
mobile browsers.pptx
 
Universal access across devices
Universal access across devicesUniversal access across devices
Universal access across devices
 
Mobile CMS - CMSExpo 2010
Mobile CMS - CMSExpo 2010Mobile CMS - CMSExpo 2010
Mobile CMS - CMSExpo 2010
 
Make Your WordPress Site Mobile Friendly
Make Your WordPress Site Mobile FriendlyMake Your WordPress Site Mobile Friendly
Make Your WordPress Site Mobile Friendly
 
Best practices for delivering quality web experiences
Best practices for delivering quality web experiencesBest practices for delivering quality web experiences
Best practices for delivering quality web experiences
 
Simon Bates, Manifesto Digital - Mobile Application Development: Past, Presen...
Simon Bates, Manifesto Digital - Mobile Application Development: Past, Presen...Simon Bates, Manifesto Digital - Mobile Application Development: Past, Presen...
Simon Bates, Manifesto Digital - Mobile Application Development: Past, Presen...
 
#1NLab14: Reshaping Behavior
#1NLab14: Reshaping Behavior#1NLab14: Reshaping Behavior
#1NLab14: Reshaping Behavior
 
Chap 1 - mobile Introduction.pptx
Chap 1 - mobile Introduction.pptxChap 1 - mobile Introduction.pptx
Chap 1 - mobile Introduction.pptx
 
Mobile Mantras
Mobile MantrasMobile Mantras
Mobile Mantras
 
Designing for Mobile Devices
Designing for Mobile DevicesDesigning for Mobile Devices
Designing for Mobile Devices
 
Mobile Mantras: XD Best Practices for Mobile Development
Mobile Mantras: XD Best Practices for Mobile DevelopmentMobile Mantras: XD Best Practices for Mobile Development
Mobile Mantras: XD Best Practices for Mobile Development
 
Architecting mobile solutions
Architecting mobile solutions Architecting mobile solutions
Architecting mobile solutions
 
01 01 - introduction to mobile application development
01  01 - introduction to mobile application development01  01 - introduction to mobile application development
01 01 - introduction to mobile application development
 
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for LibrariesWeb Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
 
Creating Large-Scale Responsive Websites
Creating Large-Scale Responsive WebsitesCreating Large-Scale Responsive Websites
Creating Large-Scale Responsive Websites
 
WSO2Con Asia 2014 - Accelerating Mobile Development with Mobile Enterprise Ap...
WSO2Con Asia 2014 - Accelerating Mobile Development with Mobile Enterprise Ap...WSO2Con Asia 2014 - Accelerating Mobile Development with Mobile Enterprise Ap...
WSO2Con Asia 2014 - Accelerating Mobile Development with Mobile Enterprise Ap...
 
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High Performance
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 

More from Woody Pewitt

Developing serverless applications with .NET on AWS
Developing serverless applications with .NET on AWSDeveloping serverless applications with .NET on AWS
Developing serverless applications with .NET on AWS
Woody Pewitt
 
Qcon sf - html5 cross-platform mobile solutions
Qcon sf - html5 cross-platform mobile solutionsQcon sf - html5 cross-platform mobile solutions
Qcon sf - html5 cross-platform mobile solutions
Woody Pewitt
 
Using html5 to build offline applications
Using html5 to build offline applicationsUsing html5 to build offline applications
Using html5 to build offline applications
Woody Pewitt
 
Super quick introduction to html5
Super quick introduction to html5Super quick introduction to html5
Super quick introduction to html5
Woody Pewitt
 
Is your C# optimized
Is your C# optimizedIs your C# optimized
Is your C# optimized
Woody Pewitt
 
Technical debt
Technical debtTechnical debt
Technical debt
Woody Pewitt
 
From port 80 to applications
From port 80 to applicationsFrom port 80 to applications
From port 80 to applications
Woody Pewitt
 
Technical Debt
Technical DebtTechnical Debt
Technical Debt
Woody Pewitt
 
Internet protocalls & WCF/DReAM
Internet protocalls & WCF/DReAMInternet protocalls & WCF/DReAM
Internet protocalls & WCF/DReAM
Woody Pewitt
 
.Net Garbage Collector 101
.Net Garbage Collector 101.Net Garbage Collector 101
.Net Garbage Collector 101
Woody Pewitt
 
San Diego ASP.NET Meeting Oct 21st
San  Diego  ASP.NET Meeting Oct 21stSan  Diego  ASP.NET Meeting Oct 21st
San Diego ASP.NET Meeting Oct 21st
Woody Pewitt
 
San Diego Clound Computing Sep 9th
San Diego Clound Computing Sep 9thSan Diego Clound Computing Sep 9th
San Diego Clound Computing Sep 9th
Woody Pewitt
 

More from Woody Pewitt (12)

Developing serverless applications with .NET on AWS
Developing serverless applications with .NET on AWSDeveloping serverless applications with .NET on AWS
Developing serverless applications with .NET on AWS
 
Qcon sf - html5 cross-platform mobile solutions
Qcon sf - html5 cross-platform mobile solutionsQcon sf - html5 cross-platform mobile solutions
Qcon sf - html5 cross-platform mobile solutions
 
Using html5 to build offline applications
Using html5 to build offline applicationsUsing html5 to build offline applications
Using html5 to build offline applications
 
Super quick introduction to html5
Super quick introduction to html5Super quick introduction to html5
Super quick introduction to html5
 
Is your C# optimized
Is your C# optimizedIs your C# optimized
Is your C# optimized
 
Technical debt
Technical debtTechnical debt
Technical debt
 
From port 80 to applications
From port 80 to applicationsFrom port 80 to applications
From port 80 to applications
 
Technical Debt
Technical DebtTechnical Debt
Technical Debt
 
Internet protocalls & WCF/DReAM
Internet protocalls & WCF/DReAMInternet protocalls & WCF/DReAM
Internet protocalls & WCF/DReAM
 
.Net Garbage Collector 101
.Net Garbage Collector 101.Net Garbage Collector 101
.Net Garbage Collector 101
 
San Diego ASP.NET Meeting Oct 21st
San  Diego  ASP.NET Meeting Oct 21stSan  Diego  ASP.NET Meeting Oct 21st
San Diego ASP.NET Meeting Oct 21st
 
San Diego Clound Computing Sep 9th
San Diego Clound Computing Sep 9thSan Diego Clound Computing Sep 9th
San Diego Clound Computing Sep 9th
 

Recently uploaded

Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
saastr
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
Ivo Velitchkov
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Alpen-Adria-Universität
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
Pablo Gómez Abajo
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Precisely
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Pitangent Analytics & Technology Solutions Pvt. Ltd
 

Recently uploaded (20)

Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
 

Mobile Web Best Practices

  • 1. Mobile Web Best Practices Woody Pewitt Technical Evangelist DevExpress woodyp@devexpress.com
  • 2. Welcome to a Technology Revolution
  • 3. • Rare availability • Desired functionality • Expensive initial cost • Ever reducing costs and greater availability • And it all started in… 1910
  • 4.
  • 5. “Pocket watches provide the closest historical parallel to the remarkable rise of the mobile phone.” —Jon Agar , Constant Touch
  • 6.
  • 7.
  • 8. Staggering Numbers 1996 GSM phones in 103 countries 2000 10 million i-mode users (Japan) 2002 1 billion mobile phone users worldwide 2009 3 billion mobile phone users worldwide
  • 9. UK More mobile phones than humans...
  • 11. Reader Poll • ~400 Participants • 159 Unique handsets (Motorola RAZR, Palm Treo 650, Sony Ericsson K750i / K700i / T610, Nokia 6230...) • 19 Manufacturers • 44 Countries – Cameron Moll • Test! – http://cameronmoll.com/mobile/mkp/
  • 12.
  • 13. Symbian 41% Research In Motion 18% Android 17% iOS 14% Win Mobile 5% Linux 3% Other OSs 2% Q2 2010 Market Share (%) Symbian Research In Motion Android iOS Microsoft Windows Mobile Linux Other OSs Symbian 51% Research In Motion 19% Android 2% iOS 13% Win Mobile 9% Linux 5% Other OSs 1% Q2 2009 Market Share (%) Symbian Research In Motion Android iOS Microsoft Windows Mobile Linux Other OSs
  • 14. Symbian 6% Research In Motion 11% Android 33% iOS 14% Win Mobile -8% Linux -9% Other OSs 19% Market Growth Symbian Research In Motion Android iOS Microsoft Windows Mobile Linux Other OSs
  • 15. So What Now? • Wireless Access Protocol (WAP) http://en.wikipedia.org/wiki/Wireless_Application_ Protocol • Simple HTML/XHTML • HTML 4.0 Guidelines for Mobile Access – http://www.w3.org/TR/NOTE-html40-mobile/ • Mobile Web Best Practices 1.0 – http://www.w3.org/TR/mobile-bp/
  • 16. W3c Default Delivery Context • Usable Screen Width – 120 pixels, minimum. • Markup Language Support – XHTML Basic 1.1 delivered with content type application/xhtml+xml. • Character Encoding – UTF-8 [UTF-8]. • Image Format Support – JPEG. – GIF 89a. • Maximum Total Page Weight – 20 kilobytes. • Colors – 256 Colors, minimum. • Style Sheet Support – CSS Level 1. In addition, CSS Level 2 @media rule together with the handheld and all media types. • HTTP – HTTP/1.0 or more recent [HTTP1.1]. • Script – No support for client side scripting.
  • 17. Content Adaption Strategies 1. Do nothing 2. Strip images and styling 3. Handheld stylesheets 4. Mobile-specific site/app
  • 18.
  • 19. Content Adaption Strategies • One Size Fits All – No Change – Easy for the (lazy) Developer – Reasonable on Advanced Phones (ie: iPhone) – HORRIBLE for most phones. • Minimal Adaption – Cater to the lowest dominator – Will Look OK on most phones – But fails to leverage of features of more advanced phones
  • 20. Content Adaption Strategies: Redirection • Redirection – Server Recognizes the Browser is from a mobile device and redirects it to a different webpage (ie: .mobi v. .com) – Web Fragmentation / Can’t Share Bookmarks – dotMobi – ”this approach is probably best considered a temporary solution. “
  • 21. Content Adaption Strategies: Unification • One Site for Everyone – Server Recognizes the Browser is on a mobile device and reformats the website accordingly. – Allows for bookmark sharing – Hardest on Developers – Easiest on Users – dotMobi – ” ultimately leads to more satisfactory user experiences and repeat visits to your site. “
  • 22. Optimize Navigation • Provide a consistent but minimal navigation at the top • Use descriptive links texts, with access keys for the most important ones • Use an easy-to-type address for your entry page • Don't put too many links on a page, but make sure each page of your site is easily reachable
  • 23. Keep it Small • Minimize – Terse, efficient markup – Keep style sheets small • Page Size Limit – Be aware of memory limitations • Scrolling – Avoid 2D scrolling at all costs
  • 24. Minimize Network • Users have to pay! – Most people don’t have unlimited internet plans • Avoid – AutoRefresh – Redirection – Externally linked Resources • Enable Caching
  • 25. Guide Input • Minimize Keystrokes & Free Text • Provide Defaults
  • 26. Users on the Go • Clarity – Sparse – Short Page Title – Clear Central Meaning • Suitable for a Mobile Context
  • 27. Recommended Approach Recommend that a mobile web application strategy is developed in stages in the following order: • Start with Lowest Common Denominator: build a mobile website using simple XHTML and web 1.0 technologies to guarantee compatibility with most mobile browsers. • Then build specific Web Apps for better user acceptance and user experience on the particular device – iPhone – Symbian S60 – Blackberry – Android – Opera Mini This approach will make the web app available to a large percentage of mobile users and at the same time provides optimal user experience for the particular device and mobile browser. Your mileage may vary!
  • 28. Mobile Web Checkers • How to ‘debug’ HTML? • Use these programs to ensure your code is compliant – W3C Mobile Web Best Practices checker • http://validator.w3.org/mobile/ – Ready.mobi • http://ready.mobi/
  • 29. Resources • Designing Web Sites for Windows Mobile Powered Devices – http://msdn.microsoft.com/en-us/library/bb415387.aspx • Mobile Web Design – http://www.cameronmoll.com/archives/000398.html • How to Design and Build a Mobile Website – http://www.webpagefx.com/design-build-mobile-web-site.html • A Look At Mobile Web Design – 5 Sites To Visit From Your Android Phone – http://androidandme.com/2009/06/news/a-look-at-mobile-web-design-5-sites-to-visit-from-your-android- phone/ • Guidance – http://en.wikipedia.org/wiki/Mobile_Web – http://www.w3.org/2006/07/Mobile_Web_Design.pdf • Mobile Web Best Practices 1.0 – http://www.w3.org/TR/mobile-bp/ • Mobile Web – http://www.w3.org/standards/webdesign/mobilweb • ASP.NET Web Sites for Mobile Devices – http://msdn.microsoft.com/en-us/library/ms178619(VS.100).aspx • Mobile Web Developer’s Guide – http://www.networksolutions.com/help/mobi-guide.pdf • DeviceAtlas (database of mobile devices ) – http://deviceatlas.com/ • Gartner Worldwide Mobile Device Study – http://www.gartner.com/it/page.jsp?id=1421013
  • 30. Tools • Google Mobile Proxy – http://www.google.com/gwt/n • mobiReady testing tool – http://ready.mobi/ • Mobile Emulators – http://mobiforge.com/emulators/page/mobile- emulators