Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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/

share|improve this question
add comment

3 Answers

up vote 5 down vote accepted

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.

share|improve this answer
    
I think it might be a little bit of anal web designer problem where I find myself resizing pages to see how they react... in real life Im sure they dont do this –  benbyford Jul 10 '13 at 15:08
    
@benbyford - I do that too. A quick smooth transition is pleasing to me, if not that significant to most real users. Anal? Possibly, but I am what I am. ;) –  obelia Jul 10 '13 at 15:37
add comment

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.

share|improve this answer
add comment

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 creen 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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.