You are previewing Responsive Web Design Patterns.
O'Reilly logo
Responsive Web Design Patterns

Book Description

Learn how to build your own pattern library and fill it with the most popular 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. Knowing what makes a responsive site tick is not enough. You also have to know the best way to design a site that fulfills its required goals, shrinking and stretching to polar sizes all the while. This book aims to equip you with a foundation to do just that.

    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 examples and guides 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 them efficiently

  • Pay attention to detail by reviewing commonly forgotten responsive elements such as typography

  • See real-world examples of these patterns being used by websites like Disney, NASA, and more

  • Review techniques and best practices when it comes to building responsive websites

  • In Detail

    Responsive Web Design (RWD) is a web design approach aimed at arranging things in a way to get optimal viewing experience and easy reading and navigation on different screen sizes. It bonds together designers and developers as they publish and test new solutions to build websites for all screen sizes. The simplicity of this technology stems from the fact that learning about the most tested RWD solutions along with basic HTML, CSS, and a bit of JavaScript, can soon help you start using these solutions for yourself. The foundations of RWD, once mastered, will help you gain the skills you need to create your own responsive website.

    Keep track of Responsive Web Designs (RWD) patterns by building your own pattern library and creating RWD’s most popular patterns, seen on hundreds of websites today. 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 different sections of a website; presenting patterns for each section. We move on to building responsive layouts of varying degrees of complexity to house the type of content you need. Develop menu systems and see which responsive navigation fits the size of your website. Next, you’ll learn tactics to present media and data elegantly on different screen sizes. And finally, you’ll tie up all those loose ends on your responsive website and pattern library to get it ready for launch.

    Style and approach

    This book is a collection of favored responsive patterns broken down to be easily understood and recreated. Each chapter focuses on a specific part of a website, from large to small, and shows you the markup and styles behind it. A responsive pattern library accompanies this book that you can download and see the patterns and your code beforehand.

    Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

    Table of Contents

    1. Responsive Web Design Patterns
      1. Table of Contents
      2. Responsive Web Design Patterns
      3. Credits
      4. About the Author
      5. About the Reviewers
      6. www.PacktPub.com
        1. Support files, eBooks, discount offers, and more
          1. Why subscribe?
          2. Free access for Packt account holders
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      8. 1. Creating a Home for Responsive Patterns
        1. The need for responsive web design
        2. Why and how to create a responsive site
          1. Media queries
          2. Responsive meta tag
        3. Breaking websites down to their patterns
          1. Learning how to spot patterns
        4. Building a home for your patterns
          1. Use of a pattern library
          2. Pattern library examples
            1. The Pattern Lab
            2. MailChimp
            3. Responsive Patterns
            4. Other examples
          3. Your very own pattern library
            1. Setting up your responsive pattern library
        5. Summary
      9. 2. The Main Stage – Building Responsive Layouts
        1. The Web is naturally responsive
        2. Most popular layout patterns
          1. Tiny tweaks
            1. Pattern summary
            2. Live examples
          2. Mostly fluid
            1. Pattern summary
            2. Live examples
          3. Column drop
            1. Pattern summary
            2. Live examples
          4. Layout shifter
            1. Pattern summary
            2. Live examples
          5. Off canvas
            1. Pattern summary
            2. Live examples
        3. Creating complex systems
          1. Starting with a grid system
          2. Responsive grid systems
        4. Summary
      10. 3. Make Way for Responsive Navigations
        1. Responsive navigations
          1. The "hamburger" icon
        2. Responsive navigation patterns
          1. Simple stack
            1. Pattern summary
            2. Live examples
          2. Anchor and footer
            1. Pattern summary
            2. Live examples
          3. The toggle
            1. Pattern summary
            2. Live examples
          4. Off canvas (navigation version)
            1. Pattern summary
            2. Live examples
          5. The overlay
            1. Pattern summary
            2. Live examples
        3. Summary
      11. 4. From Static to Dynamic – Embedding Media
        1. Introducing responsive images
          1. Basic image scaling
          2. Optimizing responsive images
            1. The picture element versus the srcset attribute
              1. The picture element
              2. The srcset attribute
            2. When to use picture or srcset
              1. Browser support
        2. Responsive image patterns
          1. The big hero image
            1. Pattern summary
            2. Live examples
          2. An image grid
            1. Pattern summary
            2. Live examples
        3. Understanding sliders and carousels
        4. Implementing videos
          1. Responsive HTML5 videos
          2. Responsive iframes
        5. Summary
      12. 5. Gathering and Displaying Information
        1. Guidelines for creating responsive forms
          1. The responsive form pattern
            1. #1 Give all inputs breathing room
            2. #2 Use proper values for input's type attribute
            3. #3 Increase the hit states for all your inputs
        2. Responsive table patterns
          1. Fading tables
            1. Pattern summary
          2. Stacked tables
            1. Pattern summary
        3. Summary
      13. 6. Combining Responsive Patterns
        1. Selecting a pattern
          1. Question #1 – does this pattern make sense for my content?
          2. Question #2 – does it meet my browser requirements?
          3. Question #3 – will my user understand it?
          4. Combining responsive patterns
            1. The full span video pattern
              1. Pattern summary
              2. Live examples
        2. Continuing to look for patterns
          1. Keep your eyes open
          2. Website awards
          3. CodePen
        3. Your pattern library is not done yet!
          1. Colors
          2. Typography
          3. Icons and responsive icons
          4. Vertical media queries
        4. Summary
      14. 7. Ship It – Finalizing Your Pattern Library
        1. When to create your pattern library
          1. After development
          2. During development
          3. Before development
        2. Getting ready to handoff
          1. Company branding
          2. Quality assurance
          3. Avoiding mutated libraries
            1. Writing meaningful descriptions
            2. Keep a copy
            3. CSS bloat
        3. Publishing your library
          1. Password protecting
        4. Further exploration
          1. Reading
          2. Websites to provide inspiration
          3. People to follow
          4. Live responsive pattern libraries
          5. Pattern library templates
        5. Summary
      15. Index