Web design is responsive design. Responsive web design is web design done right. | ||
| --Andy Clarke, Stuff and Nonsense | ||
Take a straw poll of one hundred users and it is likely you will find that a good proportion have viewed the Internet from a mobile device at some point in the past. Use of these devices to access the Internet has exploded massively over the last few years. This has highlighted the need to design sites that work well on a variety of different devices and platforms.
First coined as a term by Ethan Marcotte back in 2010, responsive web design is the art of designing such sites. A key element of responsive web design is the addition of images and videos. Throughout this book, we're going to take a look at the tips and tricks you need to get ahead in adding responsive media to your sites. We'll see how the lack of a common W3C standard means the field is wide open for different solutions and that catering for different platforms means understanding their limits and making suitable allowances for each type of device.
We'll work through a number of practical examples, with both images and videos, and see the importance of testing both to ensure your content displays as expected on any device. We'll then make use of some of the tips and tricks in several real-world examples, using popular frameworks such as WordPress or Less CSS—you'll see that adding responsive media isn't actually that complicated!
Question is though—are you ready to make a start?
Chapter 1, Working with Responsive Images, starts our journey with responsive media, where we take a look at working with responsive media. We'll cover the basics with a look at a wide variety of topics, including retina images, providing fallback support, different image formats to use, and catering to the differences between mobile and desktop platforms.
Chapter 2, Adding Responsive Video Content, continues on from where we left off in Chapter 1, Working with Responsive Images, with a look at adding responsive video to our sites. We'll cover the different formats available to us and the methods to be used to determine which one to use, how to determine the size of the video to use depending on viewport space, providing fallback support, and making allowances for different platforms.
Chapter 3, Mixing Content, helps us bring it all together with a look at some of the considerations or pitfalls of mixing responsive content and how we can reduce delays by using preloaders to control when content is loaded and rendered on screen. We'll work through an example of mixing both responsive images and video on the same page, so we can see how it works in practice and consider what allowances may need to be made for different platforms.
Chapter 4, Testing Responsive Media, delves into the world of testing our creations to ensure they work properly. We'll see that there is no need for complicated tools as most of our work can be done in a browser; we will also cover some tips to troubleshoot slow performance issues and how we can make quick and easy changes to help improve speed.
Chapter 5, Using Frameworks, finishes up the book with a look at three real-world examples of using responsive media in popular frameworks; our examples include a look at WordPress, Less CSS, and Bootstrap. We'll take a look at some of the tips and tricks (and plugins) available for use in WordPress, adding responsive media to a Bootstrap-enabled webpage, and how we can use Less CSS to help better manage our CSS styles.
All you need to work through most of the examples in this book is a simple text or code editor and a browser (preferably Firefox with Firebug installed). I recommend installing Sublime Text—either Version 2 or 3—although if you have your own particular preference, that will be fine.
Some of the examples make use of additional software, such as WordPress or Crunch—the details of each are included within the appropriate chapter along with links to download the application from source.
The book is for frontend developers who want to get up to speed on making media content responsive as part of building responsive websites. To get the most out of this book, you should have a good working knowledge of HTML, CSS, JavaScript, and ideally be comfortable using jQuery.
Some of the examples towards the end of the book use popular tools such as WordPress, Less CSS, and Bootstrap. Although it is assumed you will have some prior knowledge of each, the tips and tricks are not complex and could be picked up relatively easily.
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "Catering for HD/Retina images and using the <picture> tags."
A block of code is set as follows:
img { max-width: 100%; height: auto; float: left; padding: 10px; }
#description { box-sizing: border-box; }
#peytoe { ... padding: 0px 10px 10px; width: 66%; }When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
<title>Demo - Setting a viewport using CSS</title>
<meta name="viewport" content="width=360">
<link href="css/viewport-css.css" rel="stylesheet">Any command-line input or output is written as follows:
npm install grunt-cli grunt-contrib-watch grunt-autoprefixer
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text likes this: "Click on the cog, then select Share and embed map."
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail <[email protected]>, and mention the book's title in the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from: http://www.packtpub.com/sites/default/files/downloads/6968OT_ColorImages.pdf.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
If you have a problem with any aspect of this book, you can contact us at <[email protected]>, and we will do our best to address the problem.