1. Responsive

2. Responsive Design

3. desktop, mobile, tablet, tv, …

4. Responsive Design

5. • Step forward towards a better and more flexible web.
• It’s (more) “future-proof”.
• Not just demos, real people, clients and agencies are using it.
• And It’s awesome.
Not a final answer to our problems. What are the project goals?

6. Responsive Design

7. HTML = Content in boxes.
CSS = Styling the content and boxes.
It works in delivering custom CSS for the same HTML
(custom style for the same content)

8. • Borders-radius
• Shadow
• Web Fonts!
• Multi Column Layouts
• Transitions / Animation
• Media Queries ..here is where the magic happens

9. CSS2:
Screen and Print.
CSS3:
Width, height, orientation, aspect-ratio, color, resolution, scan
..and more

10. @media screen and (max-width: 768px) {
.menu { width:100px; }
}
@media screen and (min-width: 769px) {
.menu { width:980px; }
}
This is simple but things can get ugly

11. • Not supported by IE8 and bellow.. of course
• Issues in IE mobile and Blackberry browsers
• Images are not responsive
Good News? There are javascript solutions for that.
Even better? media queries are broadly supported in modern desktop,
mobile and tablet browsers. I can’t believe it either..

12. Responsive Design
Not like this ->

13. (unfortunately)

14. • Strategy: Is responsive design the best approach?
• Choose which devices & resolutions breakpoints to target.
• Mobile first or Desktop first. What are the user’s goals?
• Design closer to development for testing and prototyping
• Arquitect, design and develop all screen layouts.

15. • It’s more complicated initially but the outcome is worth it
• It’s not the answer for every site out there
Strategy and user experience are key
• Could work great for web apps
• With new CSS and HTML versions, there’s more to come.