SlideShare a Scribd company logo
How to create web sites for mobile clients using . NET 4.0 Woody Pewitt Product Manager MindTouch woodyp@mindtouch.com woody@pewitt.org
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 1996GSM 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/
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/
Content Adaption Strategies Do nothing Strip images and styling Handheld stylesheets 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
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
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

Mobile web
Mobile webMobile web
Mobile web
Sharina Aziz
 
Henry mader project4_week4
Henry mader project4_week4Henry mader project4_week4
Henry mader project4_week4
Henry Mader
 
Mobile Web Design - Why a Mobile Website?
Mobile Web Design - Why a Mobile Website?Mobile Web Design - Why a Mobile Website?
Mobile Web Design - Why a Mobile Website?
10X Media Limited
 
Ethical & Effective Use of Smartphones and Tablets
Ethical & Effective Use of Smartphones and TabletsEthical & Effective Use of Smartphones and Tablets
Ethical & Effective Use of Smartphones and Tablets
Simeon Adedokun
 
Tech Tools Handout
Tech Tools HandoutTech Tools Handout
Wingate ryan project4_fwd
Wingate ryan project4_fwdWingate ryan project4_fwd
Wingate ryan project4_fwd
ryanwingate
 
Firefox Mobile
Firefox MobileFirefox Mobile
Firefox Mobile
Toni Hermoso Pulido
 
FlyScreen
FlyScreenFlyScreen
FlyScreen
cellogic
 

What's hot (8)

Mobile web
Mobile webMobile web
Mobile web
 
Henry mader project4_week4
Henry mader project4_week4Henry mader project4_week4
Henry mader project4_week4
 
Mobile Web Design - Why a Mobile Website?
Mobile Web Design - Why a Mobile Website?Mobile Web Design - Why a Mobile Website?
Mobile Web Design - Why a Mobile Website?
 
Ethical & Effective Use of Smartphones and Tablets
Ethical & Effective Use of Smartphones and TabletsEthical & Effective Use of Smartphones and Tablets
Ethical & Effective Use of Smartphones and Tablets
 
Tech Tools Handout
Tech Tools HandoutTech Tools Handout
Tech Tools Handout
 
Wingate ryan project4_fwd
Wingate ryan project4_fwdWingate ryan project4_fwd
Wingate ryan project4_fwd
 
Firefox Mobile
Firefox MobileFirefox Mobile
Firefox Mobile
 
FlyScreen
FlyScreenFlyScreen
FlyScreen
 

Viewers also liked

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
 
Heraldica Medieval
Heraldica MedievalHeraldica Medieval
Heraldica Medieval
SirManfred
 
Is your C# optimized
Is your C# optimizedIs your C# optimized
Is your C# optimized
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
 
Technical debt
Technical debtTechnical debt
Technical debt
Woody Pewitt
 
Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best Practices
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
 

Viewers also liked (7)

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
 
Heraldica Medieval
Heraldica MedievalHeraldica Medieval
Heraldica Medieval
 
Is your C# optimized
Is your C# optimizedIs your C# optimized
Is your C# optimized
 
Using html5 to build offline applications
Using html5 to build offline applicationsUsing html5 to build offline applications
Using html5 to build offline applications
 
Technical debt
Technical debtTechnical debt
Technical debt
 
Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best Practices
 
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
 

Similar to How To Create Web Sites For Mobile Clients

Public Sector Talk by Yeliz Yesilada
Public Sector Talk by Yeliz YesiladaPublic Sector Talk by Yeliz Yesilada
Public Sector Talk by Yeliz Yesilada
Yeliz Yesilada
 
Mobile Internet in India - Opportunities & Possibilities
Mobile Internet in India - Opportunities & PossibilitiesMobile Internet in India - Opportunities & Possibilities
Mobile Internet in India - Opportunities & Possibilities
Vikas Tandon
 
How To Be an HTML5 Mobile Cloud Champion
How To Be an HTML5 Mobile Cloud ChampionHow To Be an HTML5 Mobile Cloud Champion
How To Be an HTML5 Mobile Cloud Champion
Chris Love
 
Speed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device WebsitesSpeed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device Websites
Doug Gapinski
 
Speed and simplicity
Speed and simplicitySpeed and simplicity
Speed and simplicity
mStoner, Inc.
 
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
Greg SHIN
 
Designing for mobile devices
Designing for mobile devicesDesigning for mobile devices
Designing for mobile devices
Fahd Alhazmi
 
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 browsers.pptx
mobile browsers.pptxmobile browsers.pptx
mobile browsers.pptx
Mohitjoshi305593
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
Doug Gapinski
 
Design of mobile browsers
Design of mobile browsersDesign of mobile browsers
Design of mobile browsers
Arpan Baishya
 
Mobile accessibility - Valtech FrontEnders talk
Mobile accessibility - Valtech FrontEnders talkMobile accessibility - Valtech FrontEnders talk
Mobile accessibility - Valtech FrontEnders talk
Rebecca Topps
 
Postdesktop Usability
Postdesktop UsabilityPostdesktop Usability
Postdesktop Usability
Doug Gapinski
 
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High Performance
Amjad Rafique
 
Mobile Website Optimization
Mobile Website OptimizationMobile Website Optimization
Mobile Website Optimization
hebsyesh
 
Mobile web application development
Mobile web application developmentMobile web application development
Mobile web application development
Vince Aggrippino
 
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
affilinet
 
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Paul Brown
 
Rebecca Topps - Mobile Accessibility
Rebecca Topps - Mobile AccessibilityRebecca Topps - Mobile Accessibility
Rebecca Topps - Mobile Accessibility
FrontEnders
 
IBM Mobile portal experience
IBM Mobile portal experienceIBM Mobile portal experience
IBM Mobile portal experience
Vincent Perrin
 

Similar to How To Create Web Sites For Mobile Clients (20)

Public Sector Talk by Yeliz Yesilada
Public Sector Talk by Yeliz YesiladaPublic Sector Talk by Yeliz Yesilada
Public Sector Talk by Yeliz Yesilada
 
Mobile Internet in India - Opportunities & Possibilities
Mobile Internet in India - Opportunities & PossibilitiesMobile Internet in India - Opportunities & Possibilities
Mobile Internet in India - Opportunities & Possibilities
 
How To Be an HTML5 Mobile Cloud Champion
How To Be an HTML5 Mobile Cloud ChampionHow To Be an HTML5 Mobile Cloud Champion
How To Be an HTML5 Mobile Cloud Champion
 
Speed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device WebsitesSpeed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device Websites
 
Speed and simplicity
Speed and simplicitySpeed and simplicity
Speed and simplicity
 
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
 
Designing for mobile devices
Designing for mobile devicesDesigning for mobile devices
Designing for mobile devices
 
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 browsers.pptx
mobile browsers.pptxmobile browsers.pptx
mobile browsers.pptx
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
 
Design of mobile browsers
Design of mobile browsersDesign of mobile browsers
Design of mobile browsers
 
Mobile accessibility - Valtech FrontEnders talk
Mobile accessibility - Valtech FrontEnders talkMobile accessibility - Valtech FrontEnders talk
Mobile accessibility - Valtech FrontEnders talk
 
Postdesktop Usability
Postdesktop UsabilityPostdesktop Usability
Postdesktop Usability
 
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High Performance
 
Mobile Website Optimization
Mobile Website OptimizationMobile Website Optimization
Mobile Website Optimization
 
Mobile web application development
Mobile web application developmentMobile web application development
Mobile web application development
 
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
 
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
 
Rebecca Topps - Mobile Accessibility
Rebecca Topps - Mobile AccessibilityRebecca Topps - Mobile Accessibility
Rebecca Topps - Mobile Accessibility
 
IBM Mobile portal experience
IBM Mobile portal experienceIBM Mobile portal experience
IBM Mobile portal experience
 

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
 
Super quick introduction to html5
Super quick introduction to html5Super quick introduction to html5
Super quick introduction to html5
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 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 (7)

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
 
Super quick introduction to html5
Super quick introduction to html5Super quick introduction to html5
Super quick introduction to html5
 
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 Clound Computing Sep 9th
San Diego Clound Computing Sep 9thSan Diego Clound Computing Sep 9th
San Diego Clound Computing Sep 9th
 

Recently uploaded

Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
BibashShahi
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
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
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
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
 
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
 
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
Edge AI and Vision Alliance
 
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
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
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
 
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
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
saastr
 
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
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
ScyllaDB
 
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
 

Recently uploaded (20)

Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
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...
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
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
 
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
 
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
 
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
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
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...
 
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
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
 
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
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 

How To Create Web Sites For Mobile Clients

  • 1. How to create web sites for mobile clients using . NET 4.0 Woody Pewitt Product Manager MindTouch woodyp@mindtouch.com woody@pewitt.org
  • 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 1996GSM 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. 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/
  • 14. Content Adaption Strategies Do nothing Strip images and styling Handheld stylesheets Mobile-specific site/app
  • 15.
  • 16. 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
  • 17. 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. “
  • 18. 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. “
  • 19. 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
  • 20. 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
  • 21. Minimize Network Users have to pay! Most people don’t have unlimited internet plans Avoid AutoRefresh Redirection Externally linked Resources Enable Caching
  • 22. Guide Input Minimize Keystrokes & Free Text Provide Defaults
  • 23. Users on the Go Clarity Sparse Short Page Title Clear Central Meaning Suitable for a Mobile Context
  • 24. 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/
  • 25. 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
  • 26. 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