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.

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

6. Ed Charbeneau

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