building mobile websites with asp.net mvc 3 & 4

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

3 things…

DamianBrady@ssw.com.au

http://www.damianbrady.com.au

@damovisa

Delivering Awesome Web Applications

Thank You!

Sydney | Melbourne | Brisbane | Adelaide

info@ssw.com.au

www.ssw.com.au