Responsive Design Isn't Breakpoints

Last night I was watching the Macaw video to see what others have been talking about. If you know me at all, you’ll know I’m not a fan of anything that supposedly does your job for you, so I admittedly watched the video with a high degree of skepticism.

This isn’t a post about Macaw or design to code apps, but something about what Macaw said really bothered me – and proved to me that this is already not an app that should be used seriously.

macaw

Macaw supposedly allows you to define “arbitrary” breakpoints for your designs – which I assume means device sizes. Perhaps I’m reading this wrong, but this is approaching responsive completely the wrong way.

I’ve had many clients that have asked what “devices” my responsive sites will work on. Will it work on just iOS? Will it include some or all Android devices? Just how many devices will the site be “optimized” for?

This is, of course, thinking about responsive completely the wrong way. While it’s true I do test on an iPhone and iPad while coding, I’ve never “optimized” any of my sites for these devices. My breakpoints are never device sized.

When working responsively, the site should work at any width, regardless if there’s a current device that’ll display it or not. This not only future-proofs your site, in case a device that size actually does come out, but it also ensures that if anyone resizes an actual desktop browser, they’ll get a perfect working site.

So how do you define your breakpoints? When coding up a responsive site, I prefer to do my desktop-down or mobile last (I’ve written on why before). I can then start resizing the site down, and wait until something looks stuffy, unusable or just plain breaks. There’s your first breakpoint. If it happens to be at a weird number, say 583 pixels wide, I will round it up to 585 or 590 just for neatness. But I never add an actual device size (unless of course, the design does break at that width).

I do stop at 320px though – as it’s not prudent to go below that, and I always use the original design as the max width. It’s utterly impossible to truly make something that will resize to fit ANY viewport – it’s just not financially nor time feasible.

I’ve noticed there’s a tendency to overcomplicate mobile in this industry. Talks about adding different code for touch, mouse, keyboard and now even actual gestures are everywhere. Hundreds of frameworks and plugins and add-ons that claim to make it “easier” and more user-friendly are everywhere. Every day we read some kind of article about “problems” in mobile and how we’re not doing it right if we don’t test on sites on every device in the world. There are even those with “device labs” that are proud to spend money on hundreds of devices. Who wants, or even needs, to waste their entire day testing on 400 devices? I also disagree with the need to test and specifically optimized for gaming consoles and TVs. This just isn’t prudent, or necessary.

Code your sites using standards and make it work at any breakpoint. There’s a 99.9999999999999999% chance that if it works on iOS and at least one¬†Android¬†device – it’ll work on everything else. Stop optimizing for specific devices and stop making things more complicated than they have to be.