responsive website min-width?

Question

In my experience most responsive websites don't have min-widths so when resized to a tiny size (say a 100px window) the content screws itself up and becomes illegible.

example: http://alistapart.com/article/responsive-web-design

I love the flexibility of RWD but usually implement a min-width on my sites as I don't like the site presentation when it gets too small. A lot of sites which aren't responsive let you scroll and I was wondering if it would be a good compromise to have a min-width and whether it effects usability at all. examples https://theartofdining.co.uk/

Answer 1

Web design has always been about choosing an audience you care about. You could care about every single browser in use and either rely on the minimal set of common functionality or use progressive-enhancement/graceful-degradation techniques to take advantage of modern functionality where it's available. The later approach takes much resources.

Personally I only worry about devices with 320px width or greater. In a sense I don't care much about smaller devices, although I expect sites I make to have some (possibly reduced) functionality in every browser.

Answer 2

First: You can have a great responsive site loaded with min-widths or max-widths or even mix them up in the same media rule. People have different approaches when writing a responsive style sheet.

Having your media-queries all written with:

@media screen and (min-width: 320px) {
}
@media screen and (min-width: 680px) {
}
@media screen and (min-width: 1024px) {
}

Means that this CSS will apply if the viewing area is greater than 320, 680 and 1024 respectively.

Altough if you have:

@media screen and (max-width: 320px) {
}
@media screen and (max-width: 680px) {
}
@media screen and (max-width: 1024px) {
}

Means that this CSS will apply if the viewing area is smaller than 320, 680 and 1024.

Second: You can even have a more specific media-querie saying:

@media screen and (min-width: 680px) and (max-width: 1024px) {
}

which states: If the viewing area is between 680px and 1024px those styles will apply.

Wrapping it up, if you don't see many web sites with min-width media-queries it doesn't mean they don't work as good as the max-width ones. They do, maybe the person who wrote the responsive bit was more confortable using max-width.

EXTRA EDIT FOR CHARACTER LIMIT

Answer 3

Wether or not it's going to affect usability depends on your audience, the device they're using, and what you've decided on for a minimum width.

Most smart phones allow you to scroll and zoom, so you may want to set your minimum width to whatever the lowest width is that won't hinder your content. However, the whole purpose of responsive design is to be able to change your layout at different widths, allowing you to fit content in. You should be able to find some layout solution for nearly all sizes, unless large images or charts are part of your content.

Either way, I generally don't worry too much about widths below 320px, and it seems neither do most web designers.