Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

A crash course in responsive design

65,866 views

Published on

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.

Published in: Design, Technology
  • Be the first to comment

A crash course in responsive design

  1. 1. Ed Charbeneau Developer Advocate: Telerik Author: Telerik, Simple-Talk Podcast: Eat Sleep Code the official Telerik podcast ResponsiveMVC.net Twitter: @EdCharbeneau
  2. 2. What I do Build web applications & LOB web apps Build websites Ed Charbeneau
  3. 3. The Challenge Customers’ expectations have changed –Websites –Mobile web –Apps We need to know when and how to fulfill these expectations Ed Charbeneau
  4. 4. 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
  5. 5. A foundation for the web Ed Charbeneau Simple-Talk.com http://tinyurl.com/foundweb CONTENT WEB PRESENTATION (RESPONSIVE) ENHANCED BEHAVIOR NATIVE APPS
  6. 6. Ed Charbeneau
  7. 7. The perceived world Current websites are built for the desktop. 1600 x 1200 1280 x 1024 1024 x 768 960 px Ed Charbeneau
  8. 8. 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 TODAY Ed Charbeneau
  9. 9. The real world Phones Tablet Watch Laptop Car Fridge What’s next? Ed Charbeneau
  10. 10. What is acceptable? Ed Charbeneau
  11. 11. What is ideal? • Responsive websites • Enhanced behaviors and experiences • Device native applications • What does this strategy look like? Ed Charbeneau
  12. 12. Available Anywhere Ed Charbeneau CONTENT WEB PRESENTATION (RESPONSIVE) ENHANCED BEHAVIOR NATIVE APPS
  13. 13. What is Responsive Design Flexible Layout (grid) Flexible Content (images & videos) Media Queries Ed Charbeneau
  14. 14. Media queries A media query allows us to target device classes For example: Ed Charbeneau /* For small screens < 768px do not float columns */ @media only screen and (max-width: 767px) { .column { float: none; } }
  15. 15. Responsive Example Ed Charbeneau mobile tablet desktopdesktopdesktopmobile
  16. 16. Foundation Rapid prototyping and responsive design framework
  17. 17. 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
  18. 18. Foundation for MVC • ResponsiveMVC.Net/Foundation • Nuget.org (search: prototyping) • Minimal setup (less than 30 seconds to get started) • Replaces existing MVC template Ed Charbeneau
  19. 19. Bootstrap
  20. 20. Bootstrap 3 • Default template since VS2013 • Developer friendly • Widely used • http://getbootstrap.com/ Ed Charbeneau
  21. 21. RadPageLayout
  22. 22. Demo time <!-- begin demos --> <demos> Ed Charbeneau
  23. 23. Foundation demo <!– css example --> <!– a row with two six column wide blocks of content --> <div class=“row”> <div class=“large-6 columns”></div> <div class=“large-6 columns”></div> </div> Ed Charbeneau
  24. 24. Foundation.CSS demo /* what makes this tick */ .columns { width:100%; } @media only screen and (min-width: 768px) { .large-6 { width: 50%; /* half the width */ } } Ed Charbeneau
  25. 25. Bootstrap demo <!– css example --> <!– a row with two six column wide blocks of content --> <div class=“container”> <div class=“row”> <div class=“col-lg-6”></div> <div class=“col-lg-6”></div> </div> </div> Ed Charbeneau
  26. 26. Questions? <!-- end demos --> </demos> Ed Charbeneau
  27. 27. Want to know more? Ed Charbeneau • Ping me on twitter @edcharbeneau • Visit Developer.Telerik.com • Get the Free whitepaper
  28. 28. Ed Charbeneau

×