Table of Contents for
Responsive Web Design Patterns

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Responsive Web Design Patterns by Chelsea Myers Published by Packt Publishing, 2015
  1. Cover
  2. Table of Contents
  3. Responsive Web Design Patterns
  4. Responsive Web Design Patterns
  5. Credits
  6. About the Author
  7. About the Reviewers
  8. www.PacktPub.com
  9. Preface
  10. What you need for this book
  11. Who this book is for
  12. Conventions
  13. Reader feedback
  14. Customer support
  15. 1. Creating a Home for Responsive Patterns
  16. Why and how to create a responsive site
  17. Breaking websites down to their patterns
  18. Building a home for your patterns
  19. Summary
  20. 2. The Main Stage – Building Responsive Layouts
  21. Most popular layout patterns
  22. Creating complex systems
  23. Summary
  24. 3. Make Way for Responsive Navigations
  25. Responsive navigation patterns
  26. Summary
  27. 4. From Static to Dynamic – Embedding Media
  28. Responsive image patterns
  29. Understanding sliders and carousels
  30. Implementing videos
  31. Summary
  32. 5. Gathering and Displaying Information
  33. Responsive table patterns
  34. Summary
  35. 6. Combining Responsive Patterns
  36. Continuing to look for patterns
  37. Your pattern library is not done yet!
  38. Summary
  39. 7. Ship It – Finalizing Your Pattern Library
  40. Getting ready to handoff
  41. Publishing your library
  42. Further exploration
  43. Summary
  44. Index

Chapter 1. Creating a Home for Responsive Patterns

In 2010, Ethan Marcotte coined the term "responsive design." Since then web design has only been improving. The web community came together and stood behind this new concept. Beautifully responsive websites can now be seen all over the Internet. As a web developer, when I stumble upon a new responsive site, I love to evaluate the patterns that make up its system. It's like looking at the individual brush strokes that make up a painting.

Pattern libraries house the elements that make up a design system. A responsive pattern library houses elements for a responsive system. When we create these libraries ourselves, they act like a tool for archiving designs, modules, and templates for future reference. Developers can also use existing frameworks with responsive patterns premade, such as Bootstrap and Foundation. Unfortunately, using these patterns with few to no alterations has produced a lot of websites that look the same. But when we use these responsive patterns as a base, and not the solution, responsive websites can be as unique as snowflakes.

Because of its mass support, best practices have formed around responsive web design (RWD). There are popular patterns that developers and designers agree upon to be good solutions for websites catering to multiple devices. This book's goal is to familiarize you with these patterns and show you how to use them. The next step is to use these patterns as a stepping-stone to creating your own responsive designs. In this chapter, we will have a look at the following topics:

  • What is RWD?
  • What makes up a responsive website?
  • What is a pattern library?
  • How do I create my own pattern library?

The need for responsive web design

Let's say it is 2007, and I am waiting for a bus and browsing the Internet on my shiny new iPhone. If I wanted to see the latest from my favorite web comics, Hark! A Vagrant (http://www.harkavagrant.com/), the page would take around 50 seconds to download. 50 seconds! If I did this today on my iPhone 6, the same page would take 6 seconds to download. Both of these figures are relying on the fact that I have a decent signal as well. And since I live in a city, I probably wouldn't even be using my data plan. With hotspots popping up all over the world, I would most likely be connected to one of those. Meaning that even the largest comics from Hark! A Vagrant wouldn't even take a full second to load.

When the iPhone first appeared on the EDGE network, accessing the Internet was a hassle and took patience for each page to load. I remember using the browser on my Blackberry Bold and hating the experience. Flash-forward to today, and I do everything on my smartphone. According to Pew Research Center (http://www.pewinternet.org/), in 2015, 64% of American adults own a smartphone and 89% of them use it to access the Internet. And the most common time to do this? When they are at home or traveling. No longer can we as designers and developers ignore that fact that any site we create will be accessed through a mobile device. It is our job to make that experience as easy as possible.