Tools for Responsive Development

Overview of components, techniques and tools used for developing a responsive website

Transcript

1. Tools for Responsive Development Katja Durrani 11 June 2013
2. 2010 - Responsive Web Design • Fluid grids • Media queries • Responsive Images http://alistapart.com/article/responsive-web-design Ethan Marcotte, May 2010
3. 2013? • Javascript • Server-side adaptation • Performance optimisation Additional components of Responsive Web Design
4. Performance
5. Reduce Http Requests Reduce page load time • Use image sprites • Use dataURIs • Use Icon Fonts • Combine script files, same with CSS Reduce Http Requests • Compress Images • Minify JS and CSS (+Gzip! See below) • Limit use of heavy libraries/ frameworks Reduce File Size Server-side • Serve text-based files gzipped • Set appropriate caching
6. A dataURI in the wild
7. Viewport + Media queries
8. Viewport <meta name="viewport" content="width=device-width, initial-scale=1"> 980 px 320 px
9. Media Queries <link rel=”stylesheet” href=”base.css” type=”only screen and (max-width: 30em)”> @media only screen and (max-width: 480px){ .main { float: none; width: 90%, margin: 0 5% } }
10. Responsive Layouts
11. Layout types Type Unit Fixed px Elastic em Fluid % Types of Responsive Design: Adaptive – Switches between different fixed-width layouts, does not change between two breakpoints Fluid – Fluid between two breakpoints It is also possible to be responsive without breakpoints!
12. Frameworks? • Zurb Foundation 4 and Twitter Bootstrap 3 both take “mobile first” approach; vast numbers of CSS grid frameworks available, too • Useful for rapid development, and good resource for development practices • But: Can be prescriptive and create “look-alike” issues • Perhaps alternative approach? Use (pattern) libraries or develop your own
13. Design Patterns ign Multi-Device Layout Patterns — http://www.lukew.com/ff/entry.asp?1514 Responsive Patterns — http://bradfrost.github.io/this-is-responsive/patterns.html
14. Some general rules • For fluid designs, use percentages to divide horizontal space, ems for vertical • Try to write modular CSS – for example use different classes for layout than for content of elements • Use one stylesheet in which you place media queries at the end
15. Responsive Images
16. Responsive Images - Problems Proposed solution in 2010: img(max-width: 100%) • Not ideal when large images get downloaded to mobile, unnecessary use of bandwidth • Extra processing power needed to resize image and browser repaint
17. Responsive Images – Possible solutions • When possible, use Scalable Vector Graphics(SVG) • Background image inside min-width media query • Some solutions available using Javascript or server-side detection to serve different-sized images (e.g. Responsive- Enhance, Adaptive Images) • "Picturefill" (js) mimicking proposed w3c <picture> element • New image formats • Or: Embrace constraints of the medium that is the web (see Paul Robert Lloyd — http://alistapart.com/article/the-web-aesthetic)
18. JavaScript and Server-Side Components
19. JavaScript Some examples: Respond.js Enable media queries in IE < 9 Enquire.js Trigger Javascript function at certain breakpoints → can be used to conditionally load content Enhance.js Tests for browser capabilities and only adds enhanced features when browser passes test Also: Modernizr.js for feature detection, implementing fallbacks
20. RESS (Responsive Design and Server-side components) • Server-side detection using a device library (e.g. WURFL, OpenDDR) • Can be useful for Responsive Images • Also, for optimization at the component level, to increase performance or tune user experience (e.g. phone numbers)
21. Implementing Responsive Design – personal experience
22. Why? • Always loved fluid layouts (and ems!), it reflects the universal nature of the web • On websites with a lot of reading material, much easier to read in one long column then having to pinch and zoom • Customers (sometimes using tablets more than PCs) • Don't really need to mention: More and more mobile traffic, it will become a requirement
23. Issues • Quite a few techniques don't work across all browsers, need fallbacks (e.g. Icon fonts, SVG) • Tendency to solve everything with Javascript, can lead to bloated site • No optimal solution for high-res responsive images • Testing is tricky and time-consuming, and it's difficult to say where to draw the line • It generally does take more time But it also allows you to be creative in new ways, and it makes you focus on content better. Learn to love constraints!
24. Resources to get you up and running • Tim Kadlec, Implementing Responsive Design, Peachpit Press, August 2012 • Net Magazine: The Responsive Web Design Handbook, May 2013 • Paul Robert Lloyd, Build a site in a week, April 2012 http://www.netmagazine.com/tutorials/build-responsive-site- week-designing-responsively-part-1#comments
25. Thank you! Katja Durrani mail@kdurrani.co.uk @kdurrani