Building Mobile Websites with ASP.NET MVC 3 & 4

•

Feb. 02, 2012

• •

Building Mobile
Websites with
ASP.NET MVC 3 & 4
Damian Brady
http://www.damianbrady.com.au
Twitter: @damovisa | #vicnet

...

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
...

Next SlideShares

Upcoming SlideShare

The mobile browser world

The mobile browser world

Loading in …3

×

Building Mobile Websites with ASP.NET MVC 3 & 4

Feb. 02, 2012

• •

Download to read offline

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.

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.

More Related Content

Bezonomics: How Amazon Is Changing Our Lives and What the World's Best Companies Are Learning from It Brian Dumaine

No Filter: The Inside Story of Instagram Sarah Frier

Autonomy: The Quest to Build the Driverless Car—And How It Will Reshape Our World Lawrence D. Burns

Talk to Me: How Voice Computing Will Transform the Way We Live, Work, and Think James Vlahos

From Gutenberg to Google: The History of Our Future Tom Wheeler

SAM: One Robot, a Dozen Engineers, and the Race to Revolutionize the Way We Build Jonathan Waldman

The Future Is Faster Than You Think: How Converging Technologies Are Transforming Business, Industries, and Our Lives Peter H. Diamandis

So You Want to Start a Podcast: Finding Your Voice, Telling Your Story, and Building a Community That Will Listen Kristen Meinzer

Everybody Lies: Big Data, New Data, and What the Internet Can Tell Us About Who We Really Are Seth Stephens-Davidowitz

Life After Google: The Fall of Big Data and the Rise of the Blockchain Economy George Gilder

Future Presence: How Virtual Reality Is Changing Human Connection, Intimacy, and the Limits of Ordinary Life Peter Rubin

Live Work Work Work Die: A Journey into the Savage Heart of Silicon Valley Corey Pein

Ninety Percent of Everything: Inside Shipping, the Invisible Industry That Puts Clothes on Your Back, Gas in Your Car, and Food on Your Plate Rose George

Carrying the Fire: 50th Anniversary Edition Michael Collins

Island of the Lost: An Extraordinary Story of Survival at the Edge of the World Joan Druett

The Basics of Bitcoins and Blockchains: An Introduction to Cryptocurrencies and the Technology that Powers Them (Cryptography, Derivatives Investments, Futures Trading, Digital Assets, NFT) Antony Lewis

Einstein's Fridge: How the Difference Between Hot and Cold Explains the Universe Paul Sen

After Steve: How Apple Became a Trillion-Dollar Company and Lost its Soul Tripp Mickle

The Quiet Zone: Unraveling the Mystery of a Town Suspended in Silence Stephen Kurczy

The Wires of War: Technology and the Global Struggle for Power Jacob Helberg

System Error: Where Big Tech Went Wrong and How We Can Reboot Rob Reich

If Then: How the Simulmatics Corporation Invented the Future Jill Lepore

Liftoff: Elon Musk and the Desperate Early Days That Launched SpaceX Eric Berger

The Science of Time Travel: The Secrets Behind Time Machines, Time Loops, Alternate Realities, and More! Elizabeth Howell

A Brief History of Motion: From the Wheel, to the Car, to What Comes Next Tom Standage

An Ugly Truth: Inside Facebook’s Battle for Domination Sheera Frenkel

Bitcoin Billionaires: A True Story of Genius, Betrayal, and Redemption Ben Mezrich

The Players Ball: A Genius, a Con Man, and the Secret History of the Internet's Rise David Kushner

User Friendly: How the Hidden Rules of Design Are Changing the Way We Live, Work, and Play Cliff Kuang

Lean Out: The Truth About Women, Power, and the Workplace Marissa Orr

Blockchain: The Next Everything Stephen P. Williams

Uncanny Valley: A Memoir Anna Wiener

Building Mobile Websites with ASP.NET MVC 3 & 4

1. Building Mobile Websites with ASP.NET MVC 3 & 4 Damian Brady http://www.damianbrady.com.au Twitter: @damovisa | #vicnet Delivering Awesome Web Applications
2. Agenda Why Target Mobile Devices? Zero to MVP in ASP.NET MVC Targeting Mobile Devices
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 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
4. Commbank.com
5. Australia.gov.au
6. Msdn.com
7. Asp.net
8. Apple.com
9. Sound Familiar? “It only works on a desktop browser” is the new “It only works in IE”
10. Why?  It doesn’t matter  It’s too hard
11. Why it Matters  Tablets and mobiles  Bad experience = lost customer What about Intranet?  Remember IE6?
12. Too Hard?  No.  MVC is perfect for multiple devices  Understand what’s happening and you’ll be fine
13. Our MVP Basic survey site 5 questions for each survey Looks nice on mobile You have 51 minutes
14. Targeting Mobile Sites  Viewport Metatags  CSS Media Queries  User-Agent Sniffing
15. Visual Viewport Layout Viewport
16. Viewport Metatags  Least effort  Less than perfect results  Same content sent
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. 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. User-Agent Sniffing  Best Results  Targeted (less) content  Most effort  Needs maintenance
20. Zero to Everywhere Mobile is important EF + MVC = MVP Target Mobile Devices: Viewport metatag Adaptive CSS User-agent sniffing
21. 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
22. 3 things…  DamianBrady@ssw.com.au  http://www.damianbrady.com.au  @damovisa
23. Thank You! Sydney | Melbourne | Brisbane | Adelaide info@ssw.com.au www.ssw.com.au Delivering Awesome Web Applications