SlideShare a Scribd company logo
1 of 27
Download to read offline
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
Visual Viewport




                  Layout 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
Thank You!
Sydney | Melbourne | Brisbane | Adelaide



info@ssw.com.au

www.ssw.com.au




                                           Delivering Awesome Web Applications

More Related Content

More from damovisa

DevOps for Any Language - CTTDNUG
DevOps for Any Language - CTTDNUGDevOps for Any Language - CTTDNUG
DevOps for Any Language - CTTDNUGdamovisa
 
Deploying Straight to Production: A Guide to the Holy Grail - PrDC
Deploying Straight to Production: A Guide to the Holy Grail - PrDCDeploying Straight to Production: A Guide to the Holy Grail - PrDC
Deploying Straight to Production: A Guide to the Holy Grail - PrDCdamovisa
 
The Power of a Great API
The Power of a Great APIThe Power of a Great API
The Power of a Great APIdamovisa
 
Octopus Deploy and how to stop deploying like an idiot
Octopus Deploy and how to stop deploying like an idiotOctopus Deploy and how to stop deploying like an idiot
Octopus Deploy and how to stop deploying like an idiotdamovisa
 
Hack your process
Hack your processHack your process
Hack your processdamovisa
 
How to be a good TFS Master
How to be a good TFS MasterHow to be a good TFS Master
How to be a good TFS Masterdamovisa
 

More from damovisa (6)

DevOps for Any Language - CTTDNUG
DevOps for Any Language - CTTDNUGDevOps for Any Language - CTTDNUG
DevOps for Any Language - CTTDNUG
 
Deploying Straight to Production: A Guide to the Holy Grail - PrDC
Deploying Straight to Production: A Guide to the Holy Grail - PrDCDeploying Straight to Production: A Guide to the Holy Grail - PrDC
Deploying Straight to Production: A Guide to the Holy Grail - PrDC
 
The Power of a Great API
The Power of a Great APIThe Power of a Great API
The Power of a Great API
 
Octopus Deploy and how to stop deploying like an idiot
Octopus Deploy and how to stop deploying like an idiotOctopus Deploy and how to stop deploying like an idiot
Octopus Deploy and how to stop deploying like an idiot
 
Hack your process
Hack your processHack your process
Hack your process
 
How to be a good TFS Master
How to be a good TFS MasterHow to be a good TFS Master
How to be a good TFS Master
 

Recently uploaded

Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentMahmoud Rabie
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesThousandEyes
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...amber724300
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
Français Patch Tuesday - Avril
Français Patch Tuesday - AvrilFrançais Patch Tuesday - Avril
Français Patch Tuesday - AvrilIvanti
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfROWELL MARQUINA
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 

Recently uploaded (20)

Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career Development
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
Français Patch Tuesday - Avril
Français Patch Tuesday - AvrilFrançais Patch Tuesday - Avril
Français Patch Tuesday - Avril
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdf
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 

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
  • 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.
  • 15. Targeting Mobile Sites  Viewport Metatags  CSS Media Queries  User-Agent Sniffing
  • 16. Visual Viewport Layout Viewport
  • 17.
  • 18. Viewport Metatags  Least effort  Less than perfect results  Same content sent
  • 19.
  • 20. CSS Media Queries  Supported by most mobile devices  Adaptive layouts  Needs a good structure  Some content can break it  Same content sent + more
  • 21.
  • 22. 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])
  • 23. User-Agent Sniffing  Best Results  Targeted (less) content  Most effort  Needs maintenance
  • 24. Zero to Everywhere Mobile is important EF + MVC = MVP Target Mobile Devices: Viewport metatag Adaptive CSS User-agent sniffing
  • 25. 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
  • 26. 3 things…  DamianBrady@ssw.com.au  http://www.damianbrady.com.au  @damovisa
  • 27. Thank You! Sydney | Melbourne | Brisbane | Adelaide info@ssw.com.au www.ssw.com.au Delivering Awesome Web Applications