I’ve read to not set breakpoints to devices but content. I don’t get that. The design has to work on existing devices.
So wouldn’t you set the breakpoints at the threshold of device formats (IE: Mobile, Tablet, Desktop, Widescreen Desktop).
Hi,
I’ve just finished working on a site which I built for mobile first. In the course of this I also came across quite a lot of articles saying the same thing.
My take on this is that you should optimize for what looks good in terms of layout and not rigidly adhere to set breakpoints, just because they correspond to the width some popular mobile device or other.
This is perhaps best summed up by a guy called Stephen Hay on Twitter who advised “Start with the small screen first, then expand until it looks like sh-t. Time to insert a breakpoint!”
Saying this, it is a matter of personal taste and what works best for you. It is more important to be thinking responsively in the first place than to lose sleep about where to have your breakpoints.
Here’s a good article for this approach: http://adactio.com/journal/5425/
And here’s a good article against: http://alwaystwisted.com/post.php?s=2012-04-28-a-common-set-of-breakpoints-to-start
Would be interested to hear what others think.