Jump Start Responsive Web Design Modern Responsive Solutions (Chris Ward) (z-library.sk, 1lib.sk, z-lib.sk)

Safety Area: All Text, Logos & Barcode should remain inside the Pink Dotted Lines Bleed Area: All Backgrounds should extend to, but not past, the Blue Dotted Lines JUMP START RESPONSIVE WEB DESIGN BY CHRIS WARD MODERN RESPONSIVE SOLUTIONS R W D JU M P S TA R T R E S P O N S IV E W E B D E S IG N W A R D SITEPOINT BOOKS Advocate best practice techniques Lead you through practical examples Provide working code for your website Make learning easy and fun WEB DEVELOPMENT PRINT ISBN: 978-0-9943470-9-1 EBOOK ISBN: 978-0-9953827-2-5 Visit us on the Web at sitepoint.com or for sales and support email books@sitepoint.com USD $29.95 CAD $39.95 The pixel-perfect web is dead. The days of positioning elements on a web page and expecting them to always display exactly how we wanted are a distant memory; we now cope with the constant barrage of new and varied devices that our designs need to look fantastic on. Responsive web design is no longer a nice-to-have bonus feature, it’s an expected must-have. This book aims to get you started understanding, and using, the suite of CSS and HTML tools available for responding to this new world of devices. Offering practical guidelines, with plenty of detailed examples, this book covers: • Use the responsive building blocks that help your pages adapt • Develop responsive grids to make your layouts work on any device • Add great-looking responsive text to your designs • Use responsive image and video that will work on any device • Respond to user context: orientation, ambient light, local time, and more BUILD YOUR OWN FULLY-FEATURED RUBY ON RAILS WEB APPLICATION YOUR AUTHORS CHRIS WARD Chris Ward explains cool tech to the World. He’s a technical writer and blogger. He has crazy projects in progress and will speak to anyone who listens. 2ND EDITION

Jump Start Responsive Web Design, 2nd Edition by Chris Ward Copyright © 2017 SitePoint Pty. Ltd. Product Manager: Simon Mackie English Editor: Ralph Mason Technical Editor: Craig Buckler Cover Designer: Alex Walker Notice of Rights All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews. Notice of Liability The author and publisher have made every effort to ensure the accuracy of the information herein. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein. Trademark Notice Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark. Published by SitePoint Pty. Ltd. 48 Cambridge Street Collingwood VIC Australia 3066 Web: www.sitepoint.com Email: books@sitepoint.com ISBN 978-0-9943470-9-1 (print) ISBN 978-0-9953827-2-5 (ebook) Printed and bound in the United States of America i

About Chris Ward Chris explains cool tech to the World. He’s a technical writer and blogger. He has crazy projects in progress and will speak to anyone who listens. About SitePoint SitePoint specializes in publishing fun, practical, and easy-to-understand content for web professionals. Visit http://www.sitepoint.com/ to access our blogs, books, newsletters, articles, and community forums. You’ll find a stack of information on JavaScript, PHP, Ruby, mobile development, design, and more. ii Jump Start Responsive Web Design

This book is dedicated to 2016, as that was the year I was supposed to finish it, but life got in the way. It was also a pretty interesting year, wasn’t it? I should probably also dedicate this book to my wife for putting up constantly with “Can’t do anything this weekend, got to work on the book.” iii

Table of Contents Preface ............................................................................... ix Who Should Read This Book ...................................................................... ix Conventions Used ........................................................................................ ix Tips, Notes, and Warnings ............................................................... xi Supplementary Materials............................................................................ xi Chapter 1 The Meaning and Purpose of Responsive Web Design ..............................................1 History.............................................................................................................4 Schools of Thought Within Responsive Design .......................................5 Progressive Enhancement ................................................................5 Graceful Degradation........................................................................5 Mobile First .........................................................................................5 What Do You Need To Support? .................................................................6 Computers ...........................................................................................6 Mobile Phones ....................................................................................7 Tablets ..................................................................................................7 Hybrid Devices....................................................................................7 iv Jump Start Responsive Web Design

Wearables ............................................................................................8 TV ..........................................................................................................8 Cars.......................................................................................................8 Game Consoles ...................................................................................8 Print .....................................................................................................9 Sample Application.......................................................................................9 Introducing RWDFlix .........................................................................9 Computer Version ..............................................................................9 Tablet Version ...................................................................................10 Mobile Version.................................................................................. 11 TV Version ..........................................................................................12 Structuring a Page with HTML5 ...............................................................13 Ready to Respond? .....................................................................................20 Chapter 2 The Building Blocks of Responsive Design.................................................................................21 Media Types..................................................................................................22 Creating a Query .........................................................................................23 Logical Queries with Only and Not...............................................28 Query Features .................................................................................29 Streamlining the Example App .................................................................32 Table of Contents v

Mobile First ..................................................................................................38 The Viewport Meta Element......................................................................39 Any Queries? ................................................................................................46 Chapter 3 Better Responsive Structures with Grid Systems ..................................................................47 What Is a Grid? ............................................................................................53 Creating Your Own Grid.............................................................................54 Flexbox ..........................................................................................................65 CSS Grid Layout...........................................................................................71 Making Grids Easier with Frameworks ....................................................80 Bootstrap...........................................................................................80 Foundation........................................................................................81 What About the Demo App?.....................................................................83 Wrap Up ........................................................................................................83 Chapter 4 Responsive Text.....................................84 The History of Text......................................................................................84 Responsive Typographical Properties in CSS ..........................................86 Fixed Sizing .......................................................................................88 vi Jump Start Responsive Web Design

Relative Sizing ..................................................................................91 Creating Readable Text ..............................................................................99 Read On ..................................................................................................... 103 Chapter 5 Responsive Images and Video .....104 Images ........................................................................................................ 105 Responsive Dimensions ................................................................ 109 The Right Image for the Right Device ................................................... 111 srcset............................................................................................112 The picture Element ..................................................................114 Responsive Video.......................................................................................115 The video Element.......................................................................116 Get Visual .................................................................................................. 126 Chapter 6 Responding to User Context .........127 An API for Everything ............................................................................. 127 Based on Time........................................................................................... 128 Battery Level ............................................................................................. 130 Geolocation ............................................................................................... 135 Based on Network .................................................................................... 138 User Preference ........................................................................................ 139 Table of Contents vii

Ambient Light ........................................................................................... 140 Vibration .................................................................................................... 143 Device Orientation ................................................................................... 144 Responding to All..................................................................................... 150 viii Jump Start Responsive Web Design

Preface The pixel-perfect web is dead. The days of positioning elements on a web page and expecting them to always display how we wanted are a distant memory; we now cope with the constant barrage of new and varied devices that our designs need to look fantastic on. This book aims to get you started understanding and using the suite of CSS and HTML tools for responding to this new world of devices. It will introduce you to the building blocks that help your pages adapt to different devices, take this a step further with grids, show you how to make text and images readable on all devices, and, in the final chapter, cover how to utilize more esoteric device capabilities. Let’s get started. Who Should Read This Book This book is for web designers and front-end developers. You’ll need to be familiar with HTML and CSS, but no previous responsive web design experience is required. Some JavaScript familiarity is useful for the latter parts of the book. Conventions Used You’ll notice that we’ve used certain typographic and layout styles throughout this book to signify different types of information. Look out for the following items. Code Samples Code in this book is displayed using a fixed-width font, like so: <h1>A Perfect Summer's Day</h1> <p>It was a lovely day for a walk in the park. The Preface ix

➥ birds were singing and the kids were all back at ➥ school.</p> If the code is to be found in the book's code archive, the name of the file will appear at the top of the program listing, like this: 0-1. example.css .footer { background-color: #CCC; border-top: 1px solid #333; } If only part of the file is displayed, this is indicated by the word excerpt: 0-2. example.css (excerpt) .footer { background-color: #CCC; border-top: 1px solid #333; } If additional code is to be inserted into an existing example, the new code will be displayed in bold: function animate() { new_variable = "Hello"; } Where existing code is required for context, rather than repeat all of it, ⋮ will be displayed: function animate() { ⋮ new_variable = "Hello"; x Jump Start Responsive Web Design

} Some lines of code should be entered on one line, but we've had to wrap them be- cause of page constraints. An ➥ indicates a line break that exists for formatting purposes only, and should be ignored: URL.open("http://www.sitepoint.com/responsive-web-design-real ➥ -user-testing/?responsive1"); Tips, Notes, and Warnings Supplementary Materials The book’s code archive contains downloadable code and sample videos to accompany the examples presented. https://www.sitepoint.com/community/ are SitePoint’s forums, for help on any tricky web problems. Hey, You! Tips provide helpful little pointers. Ahem, Excuse Me ... Notes are useful asides that are related—but not critical—to the topic at hand. Think of them as extra tidbits of information. Make Sure You Always ... ... pay attention to these important points. Watch Out! Warnings highlight any gotchas that are likely to trip you up along the way. Preface xi

books@sitepoint.com is our email address, should you need to contact us to report a problem, or for any other reason. xii Jump Start Responsive Web Design

1Chapter The Meaning and Purpose of Responsive Web Design It used to be so simple: you’d design a website or application for a 15-inch monitor, and—incompatibilities between browsers aside—you were done. Then mobile phones with web browsers came along and ruined our easy lives. Worst of all, people loved browsing the Web on them! Just as developers and designers got used to building websites for phones, along came tablets, watches, TVs, cars, glasses, larger desktop screens, high-resolution The Rise of Mobile In 2016, browsing the web on mobile devices overtook desktop browsing for the first time. The Meaning and Purpose of Responsive Web Design 1

screens, and even web browsers built into walls. (Okay, I made that last one up.) Supporting this seemingly endless stream of new devices is becoming ever more challenging. So how do we support this ever-increasing array of devices? The answer is responsive web design, which harnesses technologies that allow websites to adapt to screens of all sizes. A lot of older sites, or projects maintained by people with little spare time, are unresponsive. For example, the site for the Vassal game engine: 1-3. The Vassal website is unresponsive 2 Jump Start Responsive Web Design

Many other sites, like SitePoint.com, are fully responsive: 1-4. SitePoint.com is responsive, valuing readers on all devices Responsive web design (RWD) subscribes to the popular development maxim “Don’t Repeat Yourself” (usually abbreviated to “DRY”). Instead of maintaining multiple codebases for each device that you wish to support, RWD aims to use a single codebase that adapts appropriately to each device. Using RWD techniques, you write one set of HTML, CSS, and JavaScript, and display elements appropriately for each platform. Many of these styles and elements can even be reused or built upon for maximum code efficiency. The Meaning and Purpose of Responsive Web Design 3

Sound good to you? To begin, let’s go back in time a few years. History “Responsive” design is not necessarily new and is a term that can mean different things to different people, making its exact history hard to track down. In theory, developers have been creating responsive designs since there was more than one browser. Browsers have always had subtle (and not so subtle) rendering differences between them, and developers have been learning how to cope with these quirks for decades. If you’re new(er) to web development, be thankful the dominance of Internet Explorer’s earlier versions is mostly over. The days of dealing with their quirks were dark. Since 2004, responsive design has adopted the more specific meaning of adapting your designs to suit a user’s device of choice—typically based on screen size, but also other capabilities. The concepts for responsive design solidified in 2008, but the term is also referred to as “flexible”, “liquid”, “fluid”, and “elastic” design. It was the inclusion of media queries in the CSS3 specification that fully gave responsive design the potential it needed to be a genuine and more usable concept. We’ll cover media queries in detail in Chapter 2, but in summary, they allow you to change what you show in a web page based on pre-defined screen sizes or types. Ethan Marcotte formally coined the term “responsive web design” in an article for A List Apart in 2010. This led to a growth and consolidation of other techniques and technologies alongside media queries, such as flexible images and grids, all of which we’ll cover in this book. To me, “responsive design” is something of a combination of all these ideas and principles. It’s not just adapting a design to screen sizes, but also to other factors such as color depth, media type (say, a laptop screen, or an eReader), or location. 4 Jump Start Responsive Web Design

Schools of Thought Within Responsive Design There are as many schools of thought about how to use responsive design as there are interpretations of it. Some have come and gone, and others have stuck. We won’t cover any in detail explicitly in this book, but we’ll touch upon their practical applications. Let’s quickly cover a few of them now. Progressive Enhancement When following the more traditional principle of progressive enhancement, your primary focus is on making the site content available to all users, however simple their device or slow their connection. Then extra features—such as more sophisticated design and functionality—are added for devices that can utilize them. Graceful Degradation The proliferation of mobile browsing has reversed the more traditional path of design. In the past, you started a design on the platform you worked on (typically a computer) and then stripped away style and functionality to support devices with smaller screens or less support for certain features. While graceful degradation is typically applied to the lack of browser support for particular features, you can also think of it more generally. Its principle is that you start with a fully featured version of a site, running on your ideal device and browser, while also ensuring that essential functionality will work for any user on any (supported) device, even if they lose out on nice-to-have features. Mobile First Mobile first is similar to progressive enhancement, but more specific to responsive design. It proposes that you start with your smallest or least capable supported device (typically a phone when the principle was created) and then add functionality and style as you increase the device scale. The Meaning and Purpose of Responsive Web Design 5

What Do You Need To Support? Before starting or enhancing any web-based project, it’s important to know if it’s worthwhile, and to assess the (potential) userbase for all your hard work. If you have an existing website, it may be worth analyzing website traffic to see what types of devices your visitors are using to access your website. If 90% of visitors have consistently visited on a desktop machine, this shows that either your mobile experience is poor, or that your visitors are not big mobile device users. You could embark on extensive research to find out the exact answer, or simply use responsive design techniques to build a mobile-friendly site that may attract new visitors. If you’re working on a new project, analyzing the needs of your potential users is equally important. This can be done by using traditional market research techniques, creating simple test sites, or looking at your competitors to build a picture of who your customers will be. Computers Despite the slow decline in sales, there are still lots of desktop and laptop computers out there, and lots of web browsers running on them. These computers include everything from low-quality (and low-resolution) 11-inch netbooks to high-powered desktops with 28-inch, high-resolution monitors in a variety of proportions and orientations, all of which greatly affect the screen area you have to work with. Mobile First As a term, “mobile first” can be confusing, especially to non-designer/developer audiences, giving a skewed impression of the priority that mobile will receive in a project. In theory, the practice ensures that smaller devices don’t end up getting second best—that all devices are treated with equal importance. 6 Jump Start Responsive Web Design

Mobile Phones The percentage of people browsing websites on mobile phones has now reached parity with desktop browsing, so catering for users of mobile browsers is of equal (and likely, growing) importance. On iOS, this is generally through just one browser, and the device’s sizes are more consistent. Android has a wide variety of browsers and screen dimensions available. Increasing numbers of devices running mobile operating systems also have high- density screens of varying resolutions. You also need to consider that users are largely browsing with touch and not point-and-click devices, which affects behavior a great deal. Tablets Tablet sales may be shrinking, but there will still be a significant userbase for the foreseeable future, and you shouldn’t think of tablets as large mobile phones or small desktops. Also, users may be using touch screens or mice to interact with your site. Hybrid Devices If handling computers and tablets wasn’t enough for you, there are now hybrid devices, such as Microsoft’s Surface Pro, that can switch between being a computer and a tablet. While each mode can be treated discretely, it’s worth noting that users may switch context while using your site. Mobile Browsing Stats For more details on the rise of mobile web browsing, I recommend the Smart Insights report on Mobile Marketing Statistics and Statcounter’s desktop and mobile usage comparison The Meaning and Purpose of Responsive Web Design 7