There are a few cons to responsive design, including: Not every site looks great on every device. You may want to offer different things to different users according to which device they use, and this can be somewhat difficult on responsive websites. You could run into problems with resized advertisements or banner ads.
What is fluid web design? In fluid web design, the widths of page elements are set proportional to the width of the screen or browser window. A fluid website expands or contracts based on the width of the current viewport. Fluid design helps make websites more usable across device types with varying screen dimensions.
Good websites are well organized and follow a structure. They are not cluttered; they are clean and professional. They are also built around a target audience and market. Organization makes a website accessible and user-friendly.
It depends on your audience and your content.
The following are sites I respect and I think are example to imitate.
Fluid Examples:
Amazon
Wikipedia
Static Examples:
Apple
eBay
MSN
StackOverflow
MSDN
Some Mix it Up!
CNN
I think I prefer static most of the time. It is easier to make it look good in more browsers. It is also easier to read.
Making a website fluid, but adding a min/max-width attribute seems to be the best of both worlds, for me. You support fluidity, but you limit it at a certain width (say, 800px and 1200px).
It is up to you - here are some things to consider:
Absolutely. It is a big inconvenience to people with huge monitors to have to resize the page. It can also be a bit dodgy with some layouts. Little inconveniences, no matter how trivial, can actually affect people's opinions of your site.
Also, netbooks have odd resolutions which make it hard to design sites for. For example, I'm writing this at 1024x600.
It's not particularly hard nowadays either (in modern browsers), especially with min-
and max-height
in CSS, and the new gradients, etc in CSS3, so image scaling won't be as big a problem in the near future.
In response to the comment below, I think that the pros outweigh the cons in this particular case - IE6 is a problem everywhere. We just have to deal with it.
You have to realize most computer users don't even KNOW HOW to zoom in the browser! Most users are so far from the understanding of computers that we have. We always have to remember that fact.
Text based apps: No. Table based apps: Yes.
Pros of fluid layouts
Cons of fluid layouts:
If you're showing tabular data (iTunes, db manager, ...), fluid width is good. If you're showing text (articles, wiki pages, ...) fluid width is bad.
From my iPhone's perspective, fixed width layout is problematical when using code blocks. The scrollbar for wide code blocks doesn't show up, so I can't read the far right of the block.
Otherwise, I think it's a simple matter of what kind of site you're designing and how it looks on different size screens and windows. As previously mentioned, there's an option to set a maximum width, but the same caveat applies to code blocks and iPhones. I've designed both, and I don't prefer one over the other.
Although, it's fun to watch the boxes move around as I play with the browser size with a fluid layout, but I can be easily amused.
The most important thing is to consider dominant use cases of your web site or application. Do you expect people to use it exclusively on mobile devices? Mobile phones, netbooks, desktops?
Take a look at "Responsive Web Design" by Ethan Marcotte: http://www.alistapart.com/articles/responsive-web-design/
Great article that demonstrates the use of truly fluid layouts using media-queries. Sometimes you need to built out a separate front end for different user-agents, but sometimes media-queries are the perfect tool to service multiple resolutions across different user-agents.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With