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

Continuing to look for patterns

Combining patterns you know will only get you so far. The great thing about being a web developer is there are new things to learn everyday! If you develop in a bubble and never check out what's current in the industry, you may fall behind. In the film industry, there is a term called "producer's curse." It means that, if you have studied or worked in the film industry, you will never be able to enjoy a movie. You will be too busy analyzing special effects, cuts, or screen writing techniques. You won't be able to enjoy the movie like intended. In the web industry, designers and developers can get this as well. Having producer's curse is a great thing. It makes us analyze all the websites we visit. This is a great skill for spotting new patterns. Hopefully, you've found a website that has amazed you before. You just wanted to open up the inspector and see how it's done. Do this or keep doing this. It will keep you sharp and help you discover new RWD patterns and techniques.

Keep your eyes open

If you are a web developer, you probably spend a lot of time on the Internet. Whether you are procrastinating or actually getting work done, keep your eyes open for impressive websites. Catalog the websites you find. Personally, I use Evernote to bookmark websites I love and want to look back to. The Onion's website, http://www.theonion.com/, is very impressive and cutting-edge. They are using flexbox to create their responsive layouts. When I first stumbled upon the Onion's new website, I took a moment to right-click and inspect it in the browser. Now, if I ever need a good reference for using flexbox in a responsive website, I have one. Have a look at a screenshot of this website here:

Keep your eyes open

Website awards

AWWWards' (http://www.awwwards.com/) and the Webby's website (http://www.webbyawards.com/) are great places to find responsive site inspiration. The AWWWards can show you trending sites, award winners, and the selected "Site of the Day." These websites are typically beautiful and are the pushing the boundaries of web design and development. Most of the examples from the book have come from the AWWWards' website. Searching through AWWWards' site has helped me discover some implementations of this book's popular patterns. The following is a website from AWWWards. For its navigation, it is using the overlay navigation pattern. You will find a lot of websites on the AWWWards site using the patterns covered in this book. You can also find some new and different patterns as well.

Website awards

CodePen

Another great place for RWD patterns is CodePen.io. CodePen houses snippets of HTML, CSS, and JS. It's like a website of patterns! When you have time, check out the Picks and Popular sections on the home page. These are popular "pens" that CodePen users created and usually utilize the latest HTML, CSS, and JS techniques.