I’ve know that device based breakpoints are quite a bad idea with so many different device sizes, but I’ve never really considered it properly. Today shared an article which was “handy to prove a point that device-based breakpoints are bullshit”.

Looking at the sheer amount of devices listed on that website it’s safe to say that Dan’s statement is pretty much spot on. I’ve not done much research on this and It’s one of those issues where there is no OFFICIAL right answer, but here’s my take…

Obviously if I create a website that fits perfectly on the iPhone 5s and then a month later the iPhone 6 comes out with an extra 50px each side then it’s safe to say that your website is going to look differently than intended on this larger screen. We shouldn’t be designing for iPhone, iPad or fisherprice because there are so many different screen sizes out there.

Well what should we do then?

What I believe we should do, and what I am planning to do, is change my thinking during the design process of a project. I don’t think this is really a developers issue, it’s a fundamental design problem which needs to be considered right from the start.

My take is….

If I design a site I should be considering at which points the design should change on screen as opposed to changing the design for individual screen sizes

Take a look at this bit of code.

.col {float: left; width: 100%;}

@media only screen and (min-device-width : 320px) {
 .col {width: 50%;}
}

@media only screen and (min-device-width : 768px) {
 .col {width: 25%;}
}

So the cols are 100% width on “mobile”, 50% on “wide mobile” and 25% on “tablet/desktop”. There’s potentially nothing wrong with this code if the design needs to change at 320px/768px and these breakpoints aren’t added purely because they’re Apple device screen sizes.

These breakpoints should be when they design “needs” to change/adapt/move in order to look better, NOT because they fit nicely on a modern device.

E.g My cols might look decent until they hit 350px and then they should split into 50% width in order to look better with less whitespace. If that’s the case then my code should be..

@media only screen and (min-device-width : 350px) {
 .col {width: 50%;}
}

This way I’m not thinking about what device the end user is viewing my site on. It makes no difference to me if it’s an iPhone or a Tamagotchi as my code has breakpoints at widths that makes it look better.

So what needs to happen?

The more you thinking into it the more complex it can get.

My cols above are fine, but what about if I’ve another set of cols that look better at completely different breakpoints? Do I design them different to the others I wrote code for? What will the design look like if I have multiple breakpoints on each section? How will you structure/name your cols in the code if you’ve lots of different ones?

I am personally going to start to implement at least three basic breakpoints and introduce them into Base. There’s going to be no phone, tablet and desktop. It’s going to be small, medium and large. However that doesn’t mean to say that you need to use any of those. You might want tiny, small, average, large, whopper. It totally depends on your design and how it looks at different sizes.

That’s all for now. Quite a vague post but I now understand that designing based on device based breakpoints is a bad thing. If you’ve any thoughts on this this shoot me a tweet.

Thanks for reading.

• CSS
• HTML
• Learning
• Web Design