Learning Responsive Web Design |
Author: Clarissa Peterson
Responsive web design refers to a method of designing websites that are flexible and adapt to screen sizes. Who will this book benefit?
This book has plenty of illustrations - web pages on various devices, bits of web pages, assets to use on websites and so on - so the fact the it is full color is an advantage. The content is arranged in four parts:
Chapter 1 asks the question "What is Responsive Design?" and puts this methodology into its historical context. Clarissa Peterson starts her account by explaining that it was the advent of the iPhone in 2007 that led to the need for web designs that could be viewed on screens of different sizes. She goes on to explain that it was CSS3 2009 that made this possible. Summing up at the end of this chapter she states: Responsive design consists of two main components: flexibility which means that horizontal measurements need to use relative units like percentages so they can respond to the size of the screen, and media queries, which allow you to use CSS to change the design of the website depending on the width of the device's screen. Chapter 2 moves on to Responsive Content and advises that you need to think about and discuss content before you embark on creating the visual design rather than after and refers to Kristina Halvorson's Content Strategy for the Web. One of the chapter's main messages is that you need to pare down content to enable responsive web design – something I would have to argue is not applicable to all websites! What I can agree with is the need to be concise, to use sections , headings and chunks that can be moved and to employ plain language. Peterson advises the use of an inverted pyramid approach to content in which you deal the most important material first, then less important followed by least important - which can be dispensed with if the item gets too long. Yes, I agree, but does the idea really need to a page (including a diagram) devoted to it? After a fairly discursive Part I, the book gets much more hands-on in Part II. Chapter 3 introduces HTML for Responsive Sites and makes the assumption that the reader has basic familiarity with HTML. It also introduces a sample website that you'll work with as the book progresses. Throughout the chapter Peterson stresses the use of HTML 5's structural elements and she also includes WAI-ARIA attributes to cater for older browsers. Chapter 4 moves on to CSS. Again it is intended for those already familiar with the use of cascading style sheets but Peterson does go into the topic at a good level of detail on the grounds that it is CSS that makes a site responsive. She provides browser prefixes for the four most important rendering engines and discusses the box model, which determines how elements are displayed on the web page with each element represented as a rectangular box, which she considers to the most important concept in CSS layout.
In Chapter 5 we reach Media Queries - the facility that make responsive websites responsive to the devices the sites are viewed on. Two primary ways of using them are discussed: including media queries in stylesheets and linking stylesheets by media queries. In looking at what can be queried Peterson explains that while several characteristics can be queried - including orientation, aspect ratio and resolution, the one that is most important is the width of the viewport, Peterson points out the versions of Internet Explorer up to and including IE 8 don't support any media queries and that if you want to cater for them you need to use conditional comments or polyfill to apply the correct styles. The chapter also looks at breakpoints, where different layouts are chosen based on the width of the viewport and the techniques of progressive enhancement and designing with grids, in particular 12-column grids. Chapter 6 covers Images, which are considered a key part of any website's content and its design. It discusses the differences between file formats and how this affects the size of images. It also asks whether you can do without images and points to the distinction between vital content images and dispensable background images. The main piece of advice is to use max-width to make sure images are not bigger than their containing elements. It also points to the need for descriptive alt text for situations in which images cannot be viewed. Part III has just two chapters. Chapter 7 on Responsive Workflow is devoted to strategy and planning and argues that you should put user research and content strategy before getting down to a visual design. It also advices that you use a small-screen first approach. Peterson then goes into practicalities of prototypes, wireframes,page layouts and style guides, with advice about how much and what to prototype and suggestions for using prototyping frameworks or responsive prototyping tools.The responsive design tools discussed all come from Adobe – Photoshop InDesign Edge Reflow and Dreamweaver – and the alternative of designing directly in the browser is also considered. The chapter concludes with the topic of persuading clients/co-workers of the merits of responsive design and ways of helping them understand what they will be getting at the end of the process. In Chapter 8 the focus shifts to user experience on a range of devices. Peterson emphasises the importance of taking touch into account and also of making a responsive site universally accessible, mentioning the needs of, for example, color blind users. The final part of the book gets down to the nitty gritty of designing. Chapters 9 and 10 Chapter are devoted to typography and navigation respectively and both of these are very practical. Chapter 11, the last one, is on Performance. This is a big issues for responsive design in order to achieve reasonable load times for users with slow connections. Perterson discusses tools for measuring performance, the importance of good code that isn't repetitive and the use of minification to decrease file size. She also advises minimizing the number of HTTP requests made to the server by combining CSS, JavaScript or image files and discusses the ways in which JavaScript can impact your site's performance - particularly by blocking site loading. The advice here is to only load the JavaScript and CSS you need and to replace scripts with HTML/CSS where possible. This is the most technical chapter of the book but is indispensable to cover the topic. Overall the book is attractively presented, with a clear and readable style. However while it has the subtitle "a beginner's guide" you do need a background in both HTML and JavaScript to get the most out of it.
|
|||
Last Updated ( Friday, 18 August 2017 ) |