Implementing Responsive Design is a comprehensive guide to responsive web design. The book has breadth and depth on an all topics related to responsive design and plenty of code examples to use and try out.
There are examples of responsive navigation patterns, approaches to handle responsive media, and everything you could ever want to know about media queries. After reading, it serves well as a reference too.
Here are 5 takeaways you can apply from Implementing Responsive Design.
1. Progressive enhancement > graceful degradation
Rather than building sites and then dumbing them down for smaller screens and less capable browsers, we should be building for the less capable browsers/devices and progressively enhancing for the more capable.
When developing with progressive enhancement in mind, you first build a base experience that any device can use. This way you know that your site will provide a functional experience to everyone at the very least. If a visitor can’t load your cool jquery effects or even your rounded corners, at least you know they can read your posts and tweet them if they want.
2. Mobile isn’t less capable
Before reading Implementing Responsive Design I thought of mobile devices as less capable, but that’s not necessarily true. Sure, they have less computing power than a laptop and often access your site from bus stops and places with weak wifi. However, in many ways, mobile devices are more capable than desktop machines.
Most people allow their mobile device to send information about their location that you can use. A touch screen is a more human and personal way to interact with a device. They can swipe, change the device’s orientation, and perform other motions that aren’t usually done on a computer.
If anything, mobile devices are only going to provide richer experiences in the future.
3. Build mobile first
We often approach mobile screen widths with a bit of disdain because we have to cram the whole site into that tiny screen. The answer is often to decide which parts can be removed because mobile users either don’t need them or simply won’t get them.
When you build mobile first, it forces you to immediately focus on the most important aspects of your site and include them from the start. As you scale the size, it is easier to keep the design focused on the most important elements.
4. This isn’t about mobile
Okay I’ve been using the term ‘mobile’ too much.
Responsive design isn’t about mobile vs desktop. It’s about designing a site that will at least function properly and potentially provide an amazing experience on any device running any browser even if it’s in someone’s refrigerator.
5. Responsive experiences aren’t just about screen width
When you think about responsive as an experience, it becomes clear that screen width is only one element. Screen width is the only consideration in a lot of responsive designs which seems silly when you consider the whole experience.
What about image sizes being served? What about location? Who is it visiting your site right now, and what are they doing?
Think About It
Alright those are my personal takeaways from Implementing Responsive Design. There’s a lot more useful and thought-provoking information in there.
If this post resonated with you and you want to learn more about responsive design, I recommend getting yourself a copy of Implementing Responsive Design.