7/28/2019 asp sample

1/27

Building Mobile

Websites withASP.NET MVC 3 & 4

Damian Brady

http://www.damianbrady.com.au

Twitter: @damovisa | #vicnet

Delivering Awesome Web Applications

http://www.damianbrady.com.au/http://www.damianbrady.com.au/

7/28/2019 asp sample

2/27

Agenda

Why Target Mobile Devices?

Zero to MVP in ASP.NET MVC

Targeting Mobile Devices

7/28/2019 asp sample

3/27

Why Target Mobile Devices?

?

More than of Australiansaccess 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

http://www.aimia.com.au/home/news/member-news/aimia-releases-sixth-annual-australian-mobile-phone-lifestyle-indexhttp://www.pewinternet.org/Reports/2011/Smartphones.aspxhttp://channel9.msdn.com/Events/BUILD/BUILD2011/TOOL-803Thttp://channel9.msdn.com/Events/BUILD/BUILD2011/TOOL-803Thttp://channel9.msdn.com/Events/BUILD/BUILD2011/TOOL-803Thttp://channel9.msdn.com/Events/BUILD/BUILD2011/TOOL-803Thttp://www.pewinternet.org/Reports/2011/Smartphones.aspxhttp://www.pewinternet.org/Reports/2011/Smartphones.aspxhttp://www.aimia.com.au/home/news/member-news/aimia-releases-sixth-annual-australian-mobile-phone-lifestyle-indexhttp://www.aimia.com.au/home/news/member-news/aimia-releases-sixth-annual-australian-mobile-phone-lifestyle-indexhttp://www.aimia.com.au/home/news/member-news/aimia-releases-sixth-annual-australian-mobile-phone-lifestyle-indexhttp://www.aimia.com.au/home/news/member-news/aimia-releases-sixth-annual-australian-mobile-phone-lifestyle-indexhttp://www.aimia.com.au/home/news/member-news/aimia-releases-sixth-annual-australian-mobile-phone-lifestyle-indexhttp://www.aimia.com.au/home/news/member-news/aimia-releases-sixth-annual-australian-mobile-phone-lifestyle-indexhttp://www.aimia.com.au/home/news/member-news/aimia-releases-sixth-annual-australian-mobile-phone-lifestyle-indexhttp://www.aimia.com.au/home/news/member-news/aimia-releases-sixth-annual-australian-mobile-phone-lifestyle-indexhttp://www.aimia.com.au/home/news/member-news/aimia-releases-sixth-annual-australian-mobile-phone-lifestyle-indexhttp://www.aimia.com.au/home/news/member-news/aimia-releases-sixth-annual-australian-mobile-phone-lifestyle-indexhttp://www.aimia.com.au/home/news/member-news/aimia-releases-sixth-annual-australian-mobile-phone-lifestyle-indexhttp://www.aimia.com.au/home/news/member-news/aimia-releases-sixth-annual-australian-mobile-phone-lifestyle-indexhttp://www.aimia.com.au/home/news/member-news/aimia-releases-sixth-annual-australian-mobile-phone-lifestyle-indexhttp://www.aimia.com.au/home/news/member-news/aimia-releases-sixth-annual-australian-mobile-phone-lifestyle-indexhttp://www.aimia.com.au/home/news/member-news/aimia-releases-sixth-annual-australian-mobile-phone-lifestyle-indexhttp://www.aimia.com.au/home/news/member-news/aimia-releases-sixth-annual-australian-mobile-phone-lifestyle-indexhttp://www.aimia.com.au/home/news/member-news/aimia-releases-sixth-annual-australian-mobile-phone-lifestyle-indexhttp://www.aimia.com.au/home/news/member-news/aimia-releases-sixth-annual-australian-mobile-phone-lifestyle-indexhttp://www.aimia.com.au/home/news/member-news/aimia-releases-sixth-annual-australian-mobile-phone-lifestyle-indexhttp://www.aimia.com.au/home/news/member-news/aimia-releases-sixth-annual-australian-mobile-phone-lifestyle-index

7/28/2019 asp sample

4/27

Commbank.com

7/28/2019 asp sample

5/27

Australia.gov.au

7/28/2019 asp sample

6/27

Msdn.com

7/28/2019 asp sample

7/27

Asp.net

7/28/2019 asp sample

8/27

Apple.com

7/28/2019 asp sample

9/27

Sound Familiar?

It only works on a desktop browser

is the new

It only works in IE

7/28/2019 asp sample

10/27

Why?

It doesnt matter

Its too hard

7/28/2019 asp sample

11/27

Why it Matters

Tablets and mobiles

Bad experience = lost customer

What about Intranet?

Remember IE6?

7/28/2019 asp sample

12/27

Too Hard?

No.

MVC is perfect for multiple devices

Understand whats happening and youll be fine

7/28/2019 asp sample

13/27

Our MVP

Basic survey site

5 questions for each survey

Looks nice on mobile

You have 51 minutes

7/28/2019 asp sample

14/27

7/28/2019 asp sample

15/27

Targeting Mobile Sites

Viewport Metatags

CSS Media Queries

User-Agent Sniffing

7/28/2019 asp sample

16/27

Layout Viewport

Visual Viewport

7/28/2019 asp sample

17/27

7/28/2019 asp sample

18/27

Viewport Metatags

Least effort

Less than perfect results

Same content sent

7/28/2019 asp sample

19/27

7/28/2019 asp sample

20/27

CSS Media Queries

Supported by most mobile

devices

Adaptive layouts

Needs a good structure

Some content can break it Same content sent + more

7/28/2019 asp sample

21/27

7/28/2019 asp sample

22/27

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/8A293Safari/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; ; [;

7/28/2019 asp sample

23/27

User-Agent Sniffing

Best Results

Targeted (less) content

Most effort

Needs maintenance

7/28/2019 asp sample

24/27

Zero to Everywhere

Mobile is important

EF + MVC = MVP

Target Mobile Devices:

Viewport metatag

Adaptive CSS

User-agent sniffing

7/28/2019 asp sample

25/27

Top Tips

If starting from scratch:

1. Think about your structure and CSS

2. Never use flash or mouseover

events

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

7/28/2019 asp sample

26/27

3 things

DamianBrady@ssw.com.au

http://www.damianbrady.com.au

@damovisa

http://www.damianbrady.com.au/http://www.damianbrady.com.au/

7/28/2019 asp sample

27/27

Delivering Awesome Web Applications

Thank You!

Sydney | Melbourne | Brisbane | Adelaide

info@ssw.com.au

www.ssw.com.au