| |
| |
| |
| The Anywhere, Everywhere Web | |
| |
| |
| Where we went wrong | |
| |
| |
| The devices are coming, the devices are coming | |
| |
| |
| Display size | |
| |
| |
| Network speeds | |
| |
| |
| Standards support | |
| |
| |
| Input method | |
| |
| |
| Context | |
| |
| |
| Separate sites | |
| |
| |
| Divergence | |
| |
| |
| Becoming responsive | |
| |
| |
| Progressive enhancement | |
| |
| |
| Why another book on responsive design? | |
| |
| |
| What's covered? | |
| |
| |
| Who is this book for? | |
| |
| |
| Code examples | |
| |
| |
| The companion site | |
| |
| |
| |
| Fluid Layouts | |
| |
| |
| Layout options | |
| |
| |
| Fixed-width | |
| |
| |
| Fluid layouts | |
| |
| |
| Elastic layouts | |
| |
| |
| Hybrid layouts | |
| |
| |
| Which approach is the most responsive? | |
| |
| |
| Sizing fonts | |
| |
| |
| Pixels | |
| |
| |
| Ems | |
| |
| |
| Percentages | |
| |
| |
| Bonus round: rems | |
| |
| |
| Which approach is the most responsive? | |
| |
| |
| Converting from pixels | |
| |
| |
| Grid layouts | |
| |
| |
| Content-out | |
| |
| |
| Setting the grid | |
| |
| |
| Mixing fixed and fluid widths | |
| |
| |
| Table layouts-the right way | |
| |
| |
| Wrapping it up | |
| |
| |
| |
| Media Queries | |
| |
| |
| Viewports | |
| |
| |
| A pixel is a pixel, unless it isn't | |
| |
| |
| Viewport tag and properties | |
| |
| |
| Media query structure | |
| |
| |
| Media types | |
| |
| |
| Media expressions | |
| |
| |
| Logical keywords | |
| |
| |
| Rules | |
| |
| |
| Embedded versus external | |
| |
| |
| Media query order | |
| |
| |
| Desktop down | |
| |
| |
| Mobile up | |
| |
| |
| Create your core experience | |
| |
| |
| Determining breakpoints | |
| |
| |
| Follow the content | |
| |
| |
| Enhancing for larger screens | |
| |
| |
| Using ems for more flexible media queries | |
| |
| |
| Navigation | |
| |
| |
| Toggling | |
| |
| |
| Supporting Internet Explorer | |
| |
| |
| Wrapping it up | |
| |
| |
| |
| Responsive Media | |
| |
| |
| What's the problem? | |
| |
| |
| Performance | |
| |
| |
| Selectively serving images to mobile | |
| |
| |
| JavaScript | |
| |
| |
| Introducing matchMedia | |
| |
| |
| Responsive image strategies | |
| |
| |
| Fighting the browser | |
| |
| |
| Resignation | |
| |
| |
| Going to the server | |
| |
| |
| Responsive image options | |
| |
| |
| Sencha.io Src | |
| |
| |
| Adaptive Images | |
| |
| |
| Wait, what's the answer here? | |
| |
| |
| Background images | |
| |
| |
| While we're at it | |
| |
| |
| High-resolution displays | |
| |
| |
| SVG | |
| |
| |
| Other fixed-width assets | |
| |
| |
| Video | |
| |
| |
| Advertising | |
| |
| |
| Wrapping it up | |
| |
| |
| |
| Planning | |
| |
| |
| Choosing to be responsive | |
| |
| |
| Considerations | |
| |
| |
| Performance | |
| |
| |
| Context | |
| |
| |
| Content negotiation | |
| |
| |
| Time investment | |
| |
| |
| Support | |
| |
| |
| Advertising | |
| |
| |
| Conclusion | |
| |
| |
| Consider your analytics | |
| |
| |
| Skewed site analytics | |
| |
| |
| Which stats matter | |
| |
| |
| Skewed market share statistics | |
| |
| |
| Consider your content | |
| |
| |
| Content audit | |
| |
| |
| Page tables | |
| |
| |
| Consider where you're going | |
| |
| |
| Optimized for some, accessible to many | |
| |
| |
| Consider the cross-device experience | |
| |
| |
| Prepare your test bed | |
| |
| |
| Actual devices | |
| |
| |
| Emulators | |
| |
| |
| Third-party services | |
| |
| |
| Wrapping it up | |
| |
| |
| |
| Design Workflow | |
| |
| |
| Your mileage may vary | |
| |
| |
| An interactive medium | |
| |
| |
| Collaboration | |
| |
| |
| Thinking in systems | |
| |
| |
| Thinking mobile first | |
| |
| |
| Mobile is exploding | |
| |
| |
| Mobile forces you to focus | |
| |
| |
| Mobile extends your capabilities | |
| |
| |
| The tools | |
| |
| |
| Wireframes | |
| |
| |
| Mock-ups | |
| |
| |
| Style guides | |
| |
| |
| Wrapping it up | |
| |
| |
| |
| Responsive Content | |
| |
| |
| Starting with the content | |
| |
| |
| Content types | |
| |
| |
| Purpose | |
| |
| |
| Creation | |
| |
| |
| Structure | |
| |
| |
| What content to display, and when | |
| |
| |
| Removing content | |
| |
| |
| Enhancing content | |
| |
| |
| When should content order change? | |
| |
| |
| Structure, again | |
| |
| |
| Where we need to go | |
| |
| |
| Code soup | |
| |
| |
| Baby steps | |
| |
| |
| Building an API | |
| |
| |
| Wrapping it up | |
| |
| |
| |
| Ress | |
| |
| |
| User agent detection | |
| |
| |
| Anatomy of a user agent string | |
| |
| |
| What can you do with user agent detection? | |
| |
| |
| Feature detection | |
| |
| |
| Modernizr | |
| |
| |
| Going to the server | |
| |
| |
| Combining user agent detection and feature detection | |
| |
| |
| RESS: The best of both worlds | |
| |
| |
| Troubled waters | |
| |
| |
| Installing WURFL | |
| |
| |
| Configuration | |
| |
| |
| Detecting capabilities | |
| |
| |
| Making calls | |
| |
| |
| Optimizing for touch | |
| |
| |
| Wrapping it up | |
| |
| |
| |
| Responsive Experiences | |
| |
| |
| A system of sensors | |
| |
| |
| Network | |
| |
| |
| What can we do? | |
| |
| |
| Context | |
| |
| |
| Classifying context | |
| |
| |
| Observe and research | |
| |
| |
| Capabilities | |
| |
| |
| HTML5 input types | |
| |
| |
| APIs | |
| |
| |
| Wrapping it up | |
| |
| |
| |
| Looking Forward | |
| |
| |
| Photo Credits | |
| |
| |
| Index | |
| |
| |
| About the Technical Editor | |
| |
| |
| About the Author | |