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

Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
Snow Chain-Integrated Tire for a Safe Drive on Winter Roads
Snow Chain-Integrated Tire for a Safe Drive on Winter RoadsSnow Chain-Integrated Tire for a Safe Drive on Winter Roads
Snow Chain-Integrated Tire for a Safe Drive on Winter RoadsHyundai Motor Group
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
Next-generation AAM aircraft unveiled by Supernal, S-A2
Next-generation AAM aircraft unveiled by Supernal, S-A2Next-generation AAM aircraft unveiled by Supernal, S-A2
Next-generation AAM aircraft unveiled by Supernal, S-A2Hyundai Motor Group
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 

Recently uploaded (20)

Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
Snow Chain-Integrated Tire for a Safe Drive on Winter Roads
Snow Chain-Integrated Tire for a Safe Drive on Winter RoadsSnow Chain-Integrated Tire for a Safe Drive on Winter Roads
Snow Chain-Integrated Tire for a Safe Drive on Winter Roads
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
Next-generation AAM aircraft unveiled by Supernal, S-A2
Next-generation AAM aircraft unveiled by Supernal, S-A2Next-generation AAM aircraft unveiled by Supernal, S-A2
Next-generation AAM aircraft unveiled by Supernal, S-A2
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 

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