A Crash Course in Responsive Design: Asp.Net MVC

With the increasing variety of web enabled devices entering the market, the next generation of the web will need to be more flexible than ever before. In this session we will explore how Responsive Design can help build "A Foundation for the Web" and ensure maximum compatibly on any device now or in the future. We’ll also take a glimpse at how using solutions like Zurb’s Foundation and ASP.Net MVC can jump start development, and produce effective results fast.

Transcript

1. Ed Charbeneau Code PaLOUsa 2012
2. Thank you Code PaLOUsa Sponsors Ed Charbeneau Code PaLOUsa 2012
3. Ed Charbeneau • Corporate web developer for Sypris Solutions • Code PaLOUsa Executive committee & web master • Twitter: @EdCharbeneau Ed Charbeneau Code PaLOUsa 2012
4. What I do Build web applications & LOB web apps Build websites Ed Charbeneau Code PaLOUsa 2012
5. The Challenge Customers’ expectations have changed –Websites –Mobile web –Apps We need to know when and how to fulfill these expectations Ed Charbeneau Code PaLOUsa 2012
6. Strategy • A wide range, DRY approach to any website or web based UI • Deploy content in a progressive manner focused on the needs of the user –Start broad –Add features based on the requirements • How do we tackle this? Ed Charbeneau Code PaLOUsa 2012
7. A foundation for the web Ed Charbeneau Code PaLOUsa 2012
8. Ed Charbeneau Code PaLOUsa 2012
9. The perceived world Current websites are built for the desktop. 1600 x 1200 1280 x 1024 1024 x 768 960 px Ed Charbeneau Code PaLOUsa 2012
10. The real world Phones Tablet Netbook Laptop Car Fridge What’s next? Ed Charbeneau Code PaLOUsa 2012
11. This is a real problem We no longer browse only from our desktops ”With current growth rates, web access by people on the move — via laptops and smart mobile devices – is likely to exceed web access from desktop computers within the next five years.” -International Telecommunication Union 2006 Ed Charbeneau Code PaLOUsa 2012
12. What is acceptable? Ed Charbeneau Code PaLOUsa 2012
13. What is ideal? • Responsive websites • Enhanced behaviors and experiences • Device native applications • What does this strategy look like? Ed Charbeneau Code PaLOUsa 2012
14. A foundation for the web Ed Charbeneau Code PaLOUsa 2012
15. What is Responsive Design • Flexible Layout (grid) • Flexible Content (images & videos) • Media Queries Ed Charbeneau Code PaLOUsa 2012
16. Media queries A media query allows us to target device classes For example: Ed Charbeneau Code PaLOUsa 2012 /* For small screens < 768px do not float columns */ @media only screen and (max-width: 767px) { .column { float: none; } }
17. Responsive Example Ed Charbeneau Code PaLOUsa 2012 mobile tablet desktop desktop desktop mobile
18. Zurb Foundation • Platform independent • An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device. • Boilerplate (CSS, HTML, JS) • MIT license • foundation.zurb.com/ Ed Charbeneau Code PaLOUsa 2012
19. Foundation for MVC • nuget.org/packages/Zurb_Foundation_MVC3 • Nuget.org (search: prototyping) • Minimal setup (less than 30 seconds to get started) • Replaces existing MVC template • Demo site available • Uses upcoming Microsoft.Web.Optimization bundling and minification Ed Charbeneau Code PaLOUsa 2012
20. Demo time <!-- begin demos --> <demos> Ed Charbeneau Code PaLOUsa 2012
21. Foundation demo <!– semantic css example --> <!– a row with two six column wide blocks of content --> <div class=“row”> <div class=“six columns”></div> <div class=“six columns”></div> </div> Ed Charbeneau Code PaLOUsa 2012
22. Mobile.CSS demo /* what makes this tick */ @media only screen and (max-width: 767px) { .row { width: 100%; /* max the width */ } .columns { width: auto !important; /* fill the width */ float: none; /* stack the columns */ } } Ed Charbeneau Code PaLOUsa 2012
23. Prototyping demo @* Html helpers example *@ @* Lorem Ipsum on the fly *@ @Html.Ipsum() @* a random length paragraph *@ @Html.Ipsum().h1() @* an h1 tag filled with ipsum*@ @Html.Ipsum().h1().p().ul() @* Fluent Ipsum*@ Ed Charbeneau Code PaLOUsa 2012
24. Questions? <!-- end demos --> </demos> Ed Charbeneau Code PaLOUsa 2012
25. Credits & Info • Foundation.Zurb.com (download, git hub, etc.) • Nuget.org for MVC (search prototyping) • Follow me: @EdCharbeneau • Follow foundation: @FoundationZurb • RD Examples: Mediaqueri.es • Reading: future-friendly web, resource list • Listening: Boagworld pod cast [S02E07] Ed Charbeneau Code PaLOUsa 2012