building mobile web applications using asp.net mvc
TRANSCRIPT
![Page 1: Building Mobile Web Applications using ASP.NET MVC](https://reader034.vdocuments.us/reader034/viewer/2022052505/5561e6e4d8b42a9d068b4f04/html5/thumbnails/1.jpg)
Welcome toMVP Lunch Time Talk Series
![Page 2: Building Mobile Web Applications using ASP.NET MVC](https://reader034.vdocuments.us/reader034/viewer/2022052505/5561e6e4d8b42a9d068b4f04/html5/thumbnails/2.jpg)
Building Mobile Web Applications using ASP.NET MVCShravan Kumar KasagoniThomson ReutersMicrosoft MVP – ASP.NET@techieshravan
![Page 3: Building Mobile Web Applications using ASP.NET MVC](https://reader034.vdocuments.us/reader034/viewer/2022052505/5561e6e4d8b42a9d068b4f04/html5/thumbnails/3.jpg)
AgendaBuilding Mobile optimized web applications
![Page 4: Building Mobile Web Applications using ASP.NET MVC](https://reader034.vdocuments.us/reader034/viewer/2022052505/5561e6e4d8b42a9d068b4f04/html5/thumbnails/4.jpg)
mobile is huge
![Page 5: Building Mobile Web Applications using ASP.NET MVC](https://reader034.vdocuments.us/reader034/viewer/2022052505/5561e6e4d8b42a9d068b4f04/html5/thumbnails/5.jpg)
1 billion active mobile broadband
subscriptions
Source: International Telecom Union (http://www.itu.int/ITU-D/ict/statistics/at_glance/KeyTelecom.html)
![Page 6: Building Mobile Web Applications using ASP.NET MVC](https://reader034.vdocuments.us/reader034/viewer/2022052505/5561e6e4d8b42a9d068b4f04/html5/thumbnails/6.jpg)
that‘s one for every 7 people on earth
Source: basic math
![Page 7: Building Mobile Web Applications using ASP.NET MVC](https://reader034.vdocuments.us/reader034/viewer/2022052505/5561e6e4d8b42a9d068b4f04/html5/thumbnails/7.jpg)
mobile is fast becoming the primary way
people browse the web
![Page 8: Building Mobile Web Applications using ASP.NET MVC](https://reader034.vdocuments.us/reader034/viewer/2022052505/5561e6e4d8b42a9d068b4f04/html5/thumbnails/8.jpg)
mobile only web users
1 2 3 40%
10%
20%
30%
40%
50%
60%
70%
80%
25%30%
59%70%
Series1
![Page 9: Building Mobile Web Applications using ASP.NET MVC](https://reader034.vdocuments.us/reader034/viewer/2022052505/5561e6e4d8b42a9d068b4f04/html5/thumbnails/9.jpg)
What do we do?• Do nothing
• Change the client to adapt to mobile
• Change the server and target mobile
![Page 10: Building Mobile Web Applications using ASP.NET MVC](https://reader034.vdocuments.us/reader034/viewer/2022052505/5561e6e4d8b42a9d068b4f04/html5/thumbnails/10.jpg)
Demo: do nothing
![Page 11: Building Mobile Web Applications using ASP.NET MVC](https://reader034.vdocuments.us/reader034/viewer/2022052505/5561e6e4d8b42a9d068b4f04/html5/thumbnails/11.jpg)
Meta Viewport
<meta name="viewport" content="width=device-width" />
![Page 12: Building Mobile Web Applications using ASP.NET MVC](https://reader034.vdocuments.us/reader034/viewer/2022052505/5561e6e4d8b42a9d068b4f04/html5/thumbnails/12.jpg)
Fix it on the client• Responsive design using CSS Media
Queries@media only screen and
(max-width: 1024px) and (max-height: 768px) {
….}
![Page 13: Building Mobile Web Applications using ASP.NET MVC](https://reader034.vdocuments.us/reader034/viewer/2022052505/5561e6e4d8b42a9d068b4f04/html5/thumbnails/13.jpg)
Fix it on the clientPros• optimized for the current device• less duplication of efforts
Cons• Doesn’t consider the differences between
mobile and desktop• inefficient bandwidth usage
![Page 14: Building Mobile Web Applications using ASP.NET MVC](https://reader034.vdocuments.us/reader034/viewer/2022052505/5561e6e4d8b42a9d068b4f04/html5/thumbnails/14.jpg)
Fix it on the server• custom mobile views using display modes• jQuery Mobile or Sencha touch or any
mobile web framework
![Page 15: Building Mobile Web Applications using ASP.NET MVC](https://reader034.vdocuments.us/reader034/viewer/2022052505/5561e6e4d8b42a9d068b4f04/html5/thumbnails/15.jpg)
Fix it on the serverPros• maximum flexibility• less duplication of efforts
Cons• can be repetitive• device detection is not trivial
![Page 16: Building Mobile Web Applications using ASP.NET MVC](https://reader034.vdocuments.us/reader034/viewer/2022052505/5561e6e4d8b42a9d068b4f04/html5/thumbnails/16.jpg)
Demo time
![Page 17: Building Mobile Web Applications using ASP.NET MVC](https://reader034.vdocuments.us/reader034/viewer/2022052505/5561e6e4d8b42a9d068b4f04/html5/thumbnails/17.jpg)
Consider HTML5 for mobile web development• Canvas• audio• video• geolocation• local storage• offline• web forms
![Page 18: Building Mobile Web Applications using ASP.NET MVC](https://reader034.vdocuments.us/reader034/viewer/2022052505/5561e6e4d8b42a9d068b4f04/html5/thumbnails/18.jpg)
Thank you