3 ms·

Having done a number of projects with responsive or adaptive design, most people really pick a series of widths to optimize to because that's the natural resolu

Having done a number of projects with responsive or adaptive design, most people really pick a series of widths to optimize to because that's the natural resolution of those devices. For instance, you'd optimize from around 900px to 1050px to capture all modern smartphones. Then say optimize up to 1440px to capture mid-resolution desktops. I'm not saying that's what they did here, but when you do this kind of optimization there's small windows where a desktop user can resize their browser to make the site appear broken. A little larger and it fits perfectly in the large screen model, a little smaller and it fits perfectly in the small screen model.

lingben 13y ago
True, but you have to check each of those break points to make sure things are a-ok.
chrismorgan 13y ago
It's not a good idea to allow it to be broken at any size. In any design that I implement, I deem unacceptable a solution that appears broken at 400px wide, and similarly unacceptable a solution that is unusable at 300px wide (minor layout breakage is permitted and a fair amount of horizontal overflow is acceptable). Yes, really. It is possible, and typically not difficult. As an example, my own website is moderately ugly at 250px wide but is still entirely sound and usable. (I could still improve it by reducing the side margins at such a small size.) Seriously, use a tool like Firefox's Responsive Design View (Ctrl+Shift+M on Windows/Linux) to conveniently verify that the design really works at all different sizes. It's a great tool and helps you to experience all the different sizes easily. (Note also that I'm one of these 16px-is-a-good-default people who shuns 12px or 14px body text; I have seen some people shrink their text size well below that on mobile to fit in more stuff, and this is my advice on that matter is a resounding don't do it! Start with legible text and then fit your layout around it. Doing it the other way is a Very Bad Plan and will severely hinder the usability of your website/product.)

lingben 13y ago

True, but you have to check each of those break points to make sure things are a-ok.

chrismorgan 13y ago

It's not a good idea to allow it to be broken at any size. In any design that I implement, I deem unacceptable a solution that appears broken at 400px wide, and similarly unacceptable a solution that is unusable at 300px wide (minor layout breakage is permitted and a fair amount of horizontal overflow is acceptable). Yes, really. It is possible, and typically not difficult. As an example, my own website is moderately ugly at 250px wide but is still entirely sound and usable. (I could still improve it by reducing the side margins at such a small size.) Seriously, use a tool like Firefox's Responsive Design View (Ctrl+Shift+M on Windows/Linux) to conveniently verify that the design really works at all different sizes. It's a great tool and helps you to experience all the different sizes easily. (Note also that I'm one of these 16px-is-a-good-default people who shuns 12px or 14px body text; I have seen some people shrink their text size well below that on mobile to fit in more stuff, and this is my advice on that matter is a resounding don't do it! Start with legible text and then fit your layout around it. Doing it the other way is a Very Bad Plan and will severely hinder the usability of your website/product.)