Applying Domain Driven Design on Asp.net MVC – Part 1: Asp.net MVC
Building Mobile Websites with ASP.NET MVC 3 & 4
-
Upload
damovisa -
Category
Technology
-
view
8.581 -
download
0
description
Transcript of Building Mobile Websites with ASP.NET MVC 3 & 4
![Page 1: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/1.jpg)
Building Mobile
Websites with
ASP.NET MVC 3 & 4
Damian Brady
http://www.damianbrady.com.au
Twitter: @damovisa | #vicnet
Delivering Awesome Web Applications
![Page 2: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/2.jpg)
Agenda
Why Target Mobile Devices?
Zero to MVP in ASP.NET MVC
Targeting Mobile Devices
![Page 3: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/3.jpg)
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
![Page 4: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/4.jpg)
Commbank.com
![Page 5: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/5.jpg)
Australia.gov.au
![Page 6: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/6.jpg)
Msdn.com
![Page 7: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/7.jpg)
Asp.net
![Page 8: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/8.jpg)
Apple.com
![Page 9: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/9.jpg)
Sound Familiar?
“It only works on a desktop browser”
is the new
“It only works in IE”
![Page 10: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/10.jpg)
Why?
It doesn’t matter
It’s too hard
![Page 11: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/11.jpg)
Why it Matters
Tablets and mobiles
Bad experience = lost customer
What about Intranet?
Remember IE6?
![Page 12: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/12.jpg)
Too Hard?
No.
MVC is perfect for multiple devices
Understand what’s happening and you’ll be fine
![Page 13: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/13.jpg)
Our MVP
Basic survey site
5 questions for each survey
Looks nice on mobile
You have 51 minutes
![Page 14: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/14.jpg)
![Page 15: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/15.jpg)
Targeting Mobile Sites
Viewport Metatags
CSS Media Queries
User-Agent Sniffing
![Page 16: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/16.jpg)
Layout Viewport
Visual Viewport
![Page 17: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/17.jpg)
![Page 18: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/18.jpg)
Viewport Metatags
Least effort
Less than perfect results
Same content sent
![Page 19: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/19.jpg)
![Page 20: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/20.jpg)
CSS Media Queries
Supported by most mobile
devices
Adaptive layouts
Needs a good structure
Some content can break it
Same content sent + more
![Page 21: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/21.jpg)
![Page 22: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/22.jpg)
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])
![Page 23: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/23.jpg)
User-Agent Sniffing
Best Results
Targeted (less) content
Most effort
Needs maintenance
![Page 24: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/24.jpg)
Zero to Everywhere
Mobile is important
EF + MVC = MVP
Target Mobile Devices:
Viewport metatag
Adaptive CSS
User-agent sniffing
![Page 25: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/25.jpg)
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
![Page 27: Building Mobile Websites with ASP.NET MVC 3 & 4](https://reader034.fdocuments.in/reader034/viewer/2022042713/547b1de8b4af9f9b158b4e42/html5/thumbnails/27.jpg)
Delivering Awesome Web Applications
Thank You!
Sydney | Melbourne | Brisbane | Adelaide
www.ssw.com.au