A crash course in responsive design


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

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • On June 29, 2007 the first iPhone was released.
    App craze begins
  • Why doesn’t our company have an app? Do we really need one?
  • Content = Content strategy, Web API, (think Google glass)
    Web Presentation = Responsive web design
    Enhanced behavior = Progressive enhancement
    Native apps = Specific to the device, can’t be reproduced on the web
  • Until recently, we have assumed that everyone who browses the web does so using a desktop.
    Based on this assumption, we’ve created an informal standard of using 960 pixels
  • This is the real world. Web browsers are everywhere. We can’t be sure what’s next.
  • We are in a transition phase where mobile devices must adapt to the web.
    Pinch and zoom is an acceptable way to deal with the problem.
  • But what is ideal.
  • This is our focus.
  • A media query allows us to target device classes by resolution.
  • http://www.mediaqueri.es
  • http://foundation.zurb.com/prototyping.php
    List benefits, show demos.
  • A really great framework for responsive web design.
  • Navigation issues: http://bradfrostweb.com/blog/web/responsive-nav-patterns/
  • 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
    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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.