asp.net for mobile and tablet development damian edwards senior program manager microsoft...
TRANSCRIPT
![Page 1: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/1.jpg)
ASP.NET for Mobile and Tablet Development
Damian EdwardsSenior Program ManagerMicrosoft Corporation
![Page 2: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/2.jpg)
![Page 3: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/3.jpg)
mobile is huge
![Page 4: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/4.jpg)
1 billion active mobile broadband
subscriptions
Source: International Telecom Union (http://www.itu.int/ITU-D/ict/statistics/at_glance/KeyTelecom.html)
![Page 5: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/5.jpg)
that‘s one for every 7 people on earth
Source: basic math
![Page 6: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/6.jpg)
mobile is fast becoming the primary way
people browse the web
![Page 7: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/7.jpg)
mobile only web users
US/UK China India Egypt0%
10%
20%
30%
40%
50%
60%
70%
80%
25%30%
59%70%
Mobile only web users
![Page 8: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/8.jpg)
what do we do?
![Page 9: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/9.jpg)
Do nothing
![Page 10: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/10.jpg)
Change the client to adapt to mobile
![Page 11: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/11.jpg)
Change the server and target mobile
![Page 12: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/12.jpg)
demo
do nothing
![Page 13: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/13.jpg)
![Page 14: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/14.jpg)
if you do absolutely nothingat least add a viewport meta tag!
<meta name="viewport" content="width=device-width" />
![Page 15: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/15.jpg)
if you do absolutely nothingat least add a viewport meta tag!
<meta name="viewport" content="width=device-width" />
![Page 16: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/16.jpg)
![Page 17: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/17.jpg)
Fix it on the client
• custom css• media css• responsive design
![Page 18: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/18.jpg)
demo
responsive design
![Page 19: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/19.jpg)
Good Design
![Page 20: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/20.jpg)
Fix it on the client
Pros• optimized for the current device• less duplication of efforts
Cons• glosses over the differences between
mobile and desktop• inefficient bandwidth usage
![Page 21: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/21.jpg)
Fix it on the server
• custom mobile views using display modes
• jQuery Mobile
![Page 22: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/22.jpg)
demo
display modes + jQuery Mobile
![Page 23: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/23.jpg)
Fix it on the server
Pros• maximum flexibility• less duplication of efforts
Cons• can be repetitive• device detection is not trivial
![Page 24: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/24.jpg)
how do we dial up mobile support?
![Page 25: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/25.jpg)
Web Sites vs. Web Applications
![Page 26: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/26.jpg)
the approach you choose depends on the type of app you build
![Page 27: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/27.jpg)
HTML5 is a collection of technologies
• canvas• video• geolocation• local storage• offline• web forms• microdata• history
![Page 28: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/28.jpg)
demo
html5 mobile web application
![Page 29: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/29.jpg)
Conclusion
Why is supporting mobile devices important? It’s becoming the primary way folks access the internet.
What is one tip you can use today to improve your existing mobile websites?
Adaptive rendering using viewport and media CSS
What is at least one thing ASP.NET MVC 4 is doing to make mobile web development better easier?
Display modes, default project template, view switcher.
![Page 30: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/30.jpg)
Resources
Connect. Share. Discuss.
http://northamerica.msteched.com
Learning
Microsoft Certification & Training Resources
www.microsoft.com/learning
TechNet
Resources for IT Professionals
http://microsoft.com/technet
Resources for Developers
http://microsoft.com/msdn
![Page 31: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/31.jpg)
Complete an evaluation on CommNet and enter to win!
![Page 32: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/32.jpg)
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to
be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS
PRESENTATION.
![Page 33: ASP.NET for Mobile and Tablet Development Damian Edwards Senior Program Manager Microsoft Corporation](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649ee75503460f94bf8c7f/html5/thumbnails/33.jpg)