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