Building Mobile Websites with ASP.NET MVC 3 & 4

8,380 views
8,228 views

Published on

Presentation given at Vic.Net User Group in January 2012
---
Mobile devices like tablets and phones are quickly becoming the primary way people access the web. So why do so many websites still provide a horrible mobile experience?

With ASP.NET MVC, it's easier than ever to literally put your site in the palm of everyone's hand. MVC 3 has many features that allow you to target mobile devices with different layouts and even content. The recent developer preview of MVC 4 makes things even easier and shows that Microsoft is really thinking about web-enabled devices.

In this demo-heavy session, I'll look at the particular challenges with writing sites for mobile devices, and I’ll show some different techniques and third-party libraries that make targeting mobile devices easy, both in MVC3 and in the Developer Preview of MVC4.

If you saw my talk at DDD Brisbane, rest assured I’ll be delving much deeper into the best way to target mobile sites and I’ll focus more on what MVC 4 will bring to the table.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,380
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
42
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Building Mobile Websites with ASP.NET MVC 3 & 4

  1. 1. Building MobileWebsites withASP.NET MVC 3 & 4Damian Bradyhttp://www.damianbrady.com.auTwitter: @damovisa | #vicnet Delivering Awesome Web Applications
  2. 2. AgendaWhy Target Mobile Devices?Zero to MVP in ASP.NET MVCTargeting Mobile Devices
  3. 3. Why Target Mobile Devices?  ?  More than ⅓ of Australians access the Internet on their mobile1  In the US, 87% of smartphone owners use it to access the Internet2  In Egypt, 70% of people access the Internet exclusively on smartphones31. AIMIA - http://www.aimia.com.au/home/news/member-news/aimia-releases-sixth-annual-australian-mobile-phone-lifestyle-index2. PEW Internet - http://www.pewinternet.org/Reports/2011/Smartphones.aspx3. Phil Haack @ Build - http://channel9.msdn.com/Events/BUILD/BUILD2011/TOOL-803T
  4. 4. Commbank.com
  5. 5. Australia.gov.au
  6. 6. Msdn.com
  7. 7. Asp.net
  8. 8. Apple.com
  9. 9. Sound Familiar? “It only works on a desktop browser” is the new “It only works in IE”
  10. 10. Why? It doesn’t matter It’s too hard
  11. 11. Why it Matters Tablets and mobiles Bad experience = lost customerWhat about Intranet? Remember IE6?
  12. 12. Too Hard? No. MVC is perfect for multiple devices Understand what’s happening and you’ll be fine
  13. 13. Our MVPBasic survey site5 questions for each surveyLooks nice on mobileYou have 51 minutes
  14. 14. Targeting Mobile Sites Viewport Metatags CSS Media Queries User-Agent Sniffing
  15. 15. Visual Viewport Layout Viewport
  16. 16. Viewport Metatags Least effort Less than perfect results Same content sent
  17. 17. CSS Media Queries Supported by most mobile devices Adaptive layouts Needs a good structure Some content can break it Same content sent + more
  18. 18. User-Agent Sniffing iPhone 4: Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7 HTC Desire: Mozilla/5.0 (Linux; U; Android 2.3.7; en-au; HTC Desire Build/GRI40) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 Windows Mobile: Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; <manufacturer>; <model> [;<operator])
  19. 19. User-Agent Sniffing Best Results Targeted (less) content Most effort Needs maintenance
  20. 20. Zero to EverywhereMobile is importantEF + MVC = MVPTarget Mobile Devices: Viewport metatag Adaptive CSS User-agent sniffing
  21. 21. Top TipsIf starting from scratch:1. Think about your structure and CSS2. Never use flash or mouseover events3. Don’t redirect or change the URLIf modifying for mobile:1. Start with general changes and get more specific2. Make use of tools and nuget packages
  22. 22. 3 things… DamianBrady@ssw.com.au http://www.damianbrady.com.au @damovisa
  23. 23. Thank You!Sydney | Melbourne | Brisbane | Adelaideinfo@ssw.com.auwww.ssw.com.au Delivering Awesome Web Applications

×