Embed Size (px)
DESCRIPTION
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.
Citation preview
Building Mobile
Websites with
ASP.NET MVC 3 & 4
Damian Brady
http://www.damianbrady.com.au
Twitter: @damovisa | #vicnet
Delivering Awesome Web Applications
Agenda
Why Target Mobile Devices?
Zero to MVP in ASP.NET MVC
Targeting Mobile Devices
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 smartphones3
1. AIMIA - http://www.aimia.com.au/home/news/member-news/aimia-releases-sixth-annual-australian-mobile-phone-lifestyle-index
2. PEW Internet - http://www.pewinternet.org/Reports/2011/Smartphones.aspx
3. Phil Haack @ Build - http://channel9.msdn.com/Events/BUILD/BUILD2011/TOOL-803T
Commbank.com
Australia.gov.au
Msdn.com
Asp.net
Apple.com
Sound Familiar?
“It only works on a desktop browser”
is the new
“It only works in IE”
Why?
It doesn’t matter
It’s too hard
Why it Matters
Tablets and mobiles
Bad experience = lost customer
What about Intranet?
Remember IE6?
Too Hard?
No.
MVC is perfect for multiple devices
Understand what’s happening and you’ll be fine
Our MVP
Basic survey site
5 questions for each survey
Looks nice on mobile
You have 51 minutes
Targeting Mobile Sites
Viewport Metatags
CSS Media Queries
User-Agent Sniffing
Layout Viewport
Visual Viewport
Viewport Metatags
Least effort
Less than perfect results
Same content sent
CSS Media Queries
Supported by most mobile
devices
Adaptive layouts
Needs a good structure
Some content can break it
Same content sent + more
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])
User-Agent Sniffing
Best Results
Targeted (less) content
Most effort
Needs maintenance
Zero to Everywhere
Mobile is important
EF + MVC = MVP
Target Mobile Devices:
Viewport metatag
Adaptive CSS
User-agent sniffing
Top Tips
If starting from scratch:
1. Think about your structure and CSS
2. Never use flash or mouseover
events
3. Don’t redirect or change the URL
If modifying for mobile:
1. Start with general changes and get
more specific
2. Make use of tools and nuget
packages
Delivering Awesome Web Applications
Thank You!
Sydney | Melbourne | Brisbane | Adelaide
www.ssw.com.au
![02 - [ASP.NET Core] ASP.NET Core MVC](https://img.pdfslide.net/doc/110x75/58ab940f1a28abe3188b5603/02-aspnet-core-aspnet-core-mvc.jpg)
