A crash course in responsive design
•Download as PPTX, PDF•
3 likes•55,651 views
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.
Recommended
Recommended
More Related Content
What's hot
What's hot (12)
Viewers also liked
Viewers also liked (15)
Similar to A crash course in responsive design
Similar to A crash course in responsive design (20)
More from Ed Charbeneau
More from Ed Charbeneau (19)
Recently uploaded
Recently uploaded (20)
A crash course in responsive design
- 1. Ed Charbeneau Developer Advocate: Telerik Author: Telerik, Simple-Talk Podcast: Eat Sleep Code the official Telerik podcast ResponsiveMVC.net Twitter: @EdCharbeneau
- 2. What I do Build web applications & LOB web apps Build websites Ed Charbeneau
- 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. 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. A foundation for the web Ed Charbeneau Simple-Talk.com http://tinyurl.com/foundweb CONTENT WEB PRESENTATION (RESPONSIVE) ENHANCED BEHAVIOR NATIVE APPS
- 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. 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. The real world Phones Tablet Watch Laptop Car Fridge What’s next? Ed Charbeneau
- 10. What is acceptable? Ed Charbeneau
- 11. What is ideal? • Responsive websites • Enhanced behaviors and experiences • Device native applications • What does this strategy look like? Ed Charbeneau
- 12. Available Anywhere Ed Charbeneau CONTENT WEB PRESENTATION (RESPONSIVE) ENHANCED BEHAVIOR NATIVE APPS
- 13. What is Responsive Design Flexible Layout (grid) Flexible Content (images & videos) Media Queries Ed Charbeneau
- 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. Responsive Example Ed Charbeneau mobile tablet desktopdesktopdesktopmobile
- 16. Foundation Rapid prototyping and responsive design framework
- 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. 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. Bootstrap
- 20. Bootstrap 3 • Default template since VS2013 • Developer friendly • Widely used • http://getbootstrap.com/ Ed Charbeneau
- 21. RadPageLayout
- 22. Demo time <!-- begin demos --> <demos> Ed Charbeneau
- 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. 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. 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. Questions? <!-- end demos --> </demos> Ed Charbeneau
- 27. Want to know more? Ed Charbeneau • Ping me on twitter @edcharbeneau • Visit Developer.Telerik.com • Get the Free whitepaper
- 28. Ed Charbeneau
Editor's Notes
- 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/