Responsive Web Design Patterns

About This Book

• Explore the process of combining responsive patterns together to fit the needs of your own website or project
• Organize your projects by creating responsive pattern libraries and manage unruly design systems as they grow
• Break down the best responsive websites to their patterns and learn how to build them in your own projects

Who This Book Is For

This book is intended for HTML and CSS beginners who want to know where to start when creating a responsive website. It is also for more experienced developers who perhaps need a little inspiration for their next project.

What You Will Learn

• Gain knowledge of the pros and cons of popular responsive patterns
• Build each pattern on your own using HTML, CSS, and JavaScript by following the examples and guidelines provided in each chapter
• Know how to combine patterns to create unique solutions for your own projects
• Understand the benefits of creating a pattern library and learn how to use it efficiently
• Pay attention to detail by reviewing commonly forgotten responsive elements, such as typography
• See real-world examples of these patterns being used by popular websites such as Disney, NASA, and many more
• Review techniques and best practices when it comes to building responsive websites

In Detail

Keep track of responsive web design (RWD) patterns by building your own pattern library and creating some of RWD's most popular patterns. For beginners and pros, this book provides a toolset to help plan the design and functionality of a responsive website.

The book begins with creating a home for all your patterns by setting up your own pattern library. Each chapter is broken down into the different sections of a website, presenting patterns for each section. You will then move on to build responsive layouts of varying degrees of complexity to house the type of content you need. Develop menu systems and see which type of responsive navigation fits the size of your website. Next, you'll learn tactics to present media and data elegantly on different screen sizes. Finally, you'll tie up all those loose ends in your responsive website and pattern library to get it ready for launch.