Is it responsive? With a growing number of hardware devices that access the web, building a website that is responsive has almost become expected. This can be both good and bad, as responsiveness is a daunting task when not understood properly. So, let's talk about it.
Simply put, a responsive website adapts its layout according to the device being used to access it. The website will dynamically change its layout depending on the device's screen size and orientation.
Some examples of this include menus that collapse, images that resize, and column structures rearranging (for example, a two-column layout converging into one column).
The goal of this book is to make designing and building a website less of a daunting task for the ever-growing number of devices that we use to obtain information from the Internet. We access the Internet from so many different devices, ranging from smart watches to mobile phones and desktops with large high-resolution displays, that responsiveness has become an almost essential feature in web design and development nowadays.
There are prerequisites for a site to qualify as a responsive website. Fluid grids, media queries, and flexible images are a few of them. Additionally, a distinction does need to be made between an adaptive layout and a responsive layout.
An adaptive layout uses fixed-width grids or columns that are triggered at specific and static points.
Chapter 1, The Good, the Bad, and the Ugly of Responsive Web Design, covers what responsive design is and, more importantly, why it's so important on the Web today.
Responsive web design helps us create a more uniform appearance across an array of devices. It leaves users feeling more familiar with a brand, regardless of the device they're using to interact with it. Code is kept together in one place, and this negates the need to maintain multiple pages or documents for one website.
Chapter 2, Tweaking Your Website for Performance, describes the importance of resource placement on the DOM. It's true that placing scripts at the bottom of the page improves performance, but it's also true that some scripts need to load before the DOM renders.
Preloading content can be greatly helpful in improving the initial load of your site. DNS prefetching is a very helpful piece of code that can resolve the DNS name in the background for the site that your page might point to. Search engines can greatly benefit from this.
Chapter 3, Managing Images, proves that managing images is no small feat in a website. Almost all modern websites rely heavily on images to present content to the users.
This chapter explains which image formats to use and when, and also how to optimize your images for websites. We discuss the difference between progressive and optimized images. Conditional loading can greatly help us load our site faster, and we discuss how to use conditional loading to improve our site's performance. We touch on server-side optimization using caches, ETags, and media queries for retina displays.
Chapter 4, Learning Content Management, takes your development in the right direction. We take a look at style sheets, media queries, and how to work with viewports. This chapter also covers the use of CSS preprocessors such as SASSY CSS, SASS, and LESS. Though these are not covered in detail, this serves as an introduction to help you get started. CSS preprocessors are an excellent way to code your style sheets; once you have the hang of it, you can eliminate lines of unnecessary code.
The Web is slowly but surely moving towards an app-like experience, and frameworks such as AngluarJS are right at the forefront of this movement.
This chapter also covers conditional content management with the <link> tag to load style sheets based on device size requirements.
Optimization doesn't just occur on the client side, but sometimes on the server side as well, to help deliver correct content before it reaches the client. This is an effective way to manage content.
Parallel downloads are briefly covered. We discuss the fact that the time that the client spends waiting for requests to finish is referred to as blocking, and that our goal should be to reduce blocking as much as possible to achieve shorter load times.
We also cover another excellent way to deliver your sites quickly: by making use of content delivery networks. Then we discuss fonts and how they can affect a website's performance.
Chapter 5, The Fastest HTTP Request is No HTTP Request, proves that one of the best ways to improve the load time of your website is by reducing requests. We look at some effective and easy-to-implement techniques to help you achieve speedy load times. We discuss sprite sheets and how they can take a bunch of requests and turn it into one request. We also provide information about combining files.
Server-side optimization is also a great place to make some improvements. We talk more about server-side optimization and also take a look at AppCache, which is another excellent method to improve your site's performance.
Chapter 6, Testing, Testing, and Testing, asserts that testing is a crucial stage of the development life cycle. It's where you can not only identify problems with your site but also root out performance issues.
Chapter 7, Speeding Up Development with Design Concepts, Patterns, and Programs, focuses on a few ways to improve your site. We kick off by looking at design concepts: graceful degradation, and progressive enhancement. We discuss the differences between these two concepts and how a better user experience can be achieved on a website by making use of progressive enhancement rather than graceful degradation.
Making use of object-oriented CSS (OOCSS) can be a great benefit to your website's maintainability and can improve its loading speed. By following OOCSS, you can reduce the size of your CSS files, thereby improving the download time of the resources required to load your site. We also take a look at how we can improve OOCSS even further by combing it with a CSS preprocessor such as SASS.
There is a brief mention of available patterns to get you started with your project.
Programs such as GruntJS and RequireJS can make you more productive and improve your website's performance. We describe them as well.
Chapter 8, Using Tools for Performance, is basically an introduction. It is intended to point out available applications that you can use to make your development cycle more efficient.
Once we're almost done, we take a look at some resources to take what we've talked about to the next level. We mention some great developers who have made significant contributions to the web field and give you some excellent starting points to further your knowledge of responsive web design.
Appendix, Taking the Next Steps, contains an overview of the entire book. It summarizes what we talked about and helps you understand the next steps to becoming a great, responsive web developer.
This book will focus on improving the performance of your responsive sites. We will go through some exercises to encourage you to think of performance as an integral part of the design process.
At its core, the Web is responsive. If you were to create a page with only a few paragraphs of text and a heading or two, you could view that page on any device. The text would automatically reposition itself to fit into any view.
However, as we all know, today's web browsing experience is expected to be much more complex and immersive than a white page with text on it; as we move further into the future of technology, these demands may get bigger and more elaborate. Websites have rich and interactive content, beautiful imagery, interactive elements, and content that spans across wider and wider screens. Along with the complexity of the modern Web, we have seen the arrival of easy-to-use frameworks such as Bootstrap and Foundation to assist with responsiveness; however, even these amazing platforms come with problems of their own, performance being one of the major issues.
In today's immersive, Internet-obsessed world, viewers don't wait longer than a couple of seconds for their content to load, which means that performance is key. We will take a look at principles such as Mobile First, HTTP caching, and dynamic content loading to help make your sites quicker and more responsive, thereby creating an experience that people can enjoy and respond to in a positive way.
This book is aimed at developers who have experience in building websites and have had at least some exposure to building a responsive website. The goal here is to foster a deeper understanding of responsive websites to improve the way we build them.
You'll need a working knowledge of HTML, CSS3, JavaScript, and jQuery. This book does not provide an introduction to any of these technologies as it assumes that you have moderate knowledge of them.
In this book, you will find a number of text styles 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: "As an example, I've included the sizes of the two style sheets from the Bootstrap framework—bootstrap.css and boostrap.min.css."
A block of code is set as follows:
<head> <!-- Styles --> <link rel="stylesheet" href="css/style.css" type="text/css" /> <!-- Scripts --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript" language="Javascript"></script> </head>
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
<head>
<!-- Styles -->
<link rel="stylesheet" href="css/style.css" type="text/css" />
<!-- Scripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript" language="Javascript"></script>
</head>Any command-line input or output is written as follows:
npm install -g grunt-cli
New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "Clicking on the Next button moves you to the next screen."
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: https://www.packtpub.com/sites/default/files/downloads/0839OS_ColoredImages.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.