Responsive Web Design

Talk given at Dundee Web Standards group on Responsive Web Design.

Transcript

1. Responsive Web Design
2. About Me Front End Developer at MTC @gpirie graemepirie.com
3. The Web is changing Mobile usage increasing all the time. More devices available to buy. Impossible to keep up with the pace of change.
5. A new approach A new approach is needed that caters for all of these devices Impossible to test across all these hundreds of devices and operating systems. A device agnostic approach is required, a responsive approach.
6. Responsive Design Responsive web design is a philosophy and approach which embraces the natural flexibility of the web
7. The Web is not fixed The web is fluid by default – we’ve attempted to make it fixed for years by applying strict constraints. Hangover from print days, by making fixed designs it gives us greater control and eases development.
8. The Web is not fixed But this flexibility is the web’s greatest strength, and we’ve been ignoring it for too long. It’s time to embrace it by creating responsive designs which are as device agnostic as possible.
9. Responsive Design Responsive web design is a philosophy and approach which embraces the flexibility of the web and makes the most of it’s flexibility
10. Responsive Design != Mobile Design Stop designing for most people, and start designing for everyone. Users shouldn’t have to adapt to your site, your site should adapt to them. Large screen and small should be given an optimal experience
11. Device Agnostic The web hasn’t changed but the way we access it has. Make sites which are accessible regardless of the browser or device which is used to access them.
12. Becoming Responsive Think about what your pages do and not what they look like Start with a small screen first and design from the content out.
13. Becoming Responsive When you’re forced to be simple, you’re forced to face the real problem. When you can’t deliver ornament, you have to deliver substance. Decisions made for small screen benefit the larger screen
14. Becoming Responsive Three key components of responsive design: • Fluid Grid • Responsive Images and other media • Media Queries
15. Fluid Grids Dimensions expressed in proportional terms. Percentages and ems used instead of pixels.
16. Responsive Images and Media Images that re-size with the browser. HTML5 Video and even flash can become responsive. img, video, object {Max-width: 100%;}
17. Media Queries @media screen and (max-width: 480px) { background: red; } <link rel="stylesheet" href="css/style.css" media="screen and (min-device-width: 768px)" />
18. Media Queries Options include: • Height • Width • Device-width • Resolution • Aspect Ratio
19. Browser Support
20. Drawbacks IE Support Whole new way of thinking, developing methods/best practice still evolving.
21. Conclusion Responsive design offers a wide range of new possibilities. One site accessible anywhere. Can be used today with appropriate fallbacks for older devices/browsers. No reason not to utilise this in development
22. Thank You