Home Opinion What is the advantage with using fluid width?

What is the advantage with using fluid width?

Author

Date

Updated on

Category

Fluid width means your design is able to expand and contract depending on the user’s browser size, which also means your design is able to display correctly to more users. That’s the advantage.

Does browser size really matter when you can simply maximize the browser? Yes, it does. Imagine using the screen resolution 800 by 600. Even with a maximized browser, once a design hits 800 pixels in width and does not contract, you have to use a horizontal scrollbar to view the entire site or design. The horizontal scrollbar is very annoying.

Here’s Wpdesigner within a browser at 800 by 600 resolution:

wpd-800x600

So, if your design is 950-pixel in overall width and a certain user’s screen size or browser can only fit 800 pixels, that user has to scroll horizontally to see the rest of the 950 pixels. That 150 pixels could be a right sidebar. If your design has a fluid width, you wouldn’t have that problem. Your 950-pixel fluid design would simply contract to fit within the user’s 800-pixel screen size or browser.

On the other hand, how would a 700-pixel design look to a person using a 30-inch monitor? Very tiny. Fortunately, not many people are using 30-inch monitors. Let’s pretend that’s the problem here. Someone on a 30-inch monitor is viewing your site. What’s the advantage if your design uses fluid width?

If your design uses fluid width, then your site should be able to expand and cover more screen space to not make your site look so tiny. However, make sure your fluid width design doesn’t become too wide, trying to adapt to the user’s huge monitor. Even for users with high resolutions and wide monitors, it’s difficult to read paragraphs with more than twelve to fourteen words per line.

Lastly, if fluid width can be controlled to always give you an advantage, why not apply it to every design? First, fluid width is difficult to implement. Second, not all designs are worth implementing fluid width for, especially designs that heavily depends on images and background images. Third, sometimes, you don’t need to use fluid width. It all depends on the site’s audience. If ninety percent of your audience use 1024 by 768 resolutions and ten percent use 800 by 600, but your design is a graphic heavy 900 pixel, then it’s not worth it to implement fluid width. (If you really wanted to cater to that ten percent of 800 by 600 users, then you’d be better off creating a 750-pixel design in the first place.)

Fluid width design is also known as liquid design. Learn how to create a liquid three column layout.

If you liked this post, subscribe to Wpdesigner’s RSS feed.

2 COMMENTS

  1. A pretty good explanation and a great article, this should enlighten some of us that are not familiar with how things are designed and why they are set that way.

  2. 10 % doesn’t sound like a lot but even for a site like this, it could mean hundreds of annoyed visitors. My resolution is 1280pixels, decently high, and a 750-pixel width such as my own site looks fine.

    If you are really concerned about the whole deal you should go with a “jello” design such as the way Dan Cederholm of simplebits.com does most of his designs. Include background images that if their container is enlarged will have a larger portion of them revealed. The fonts and the layout width both enlarge proportionally making it a perfect solution for any size screen.

    Also, note fluid designs are bad when they end up creating very long rows of small text which is harder to read. Optimal line length is said to be around 36x the font size so font size 12px line length 432px. This is clearly not a strict rule one must judge what works with their design.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Recent posts

Flat Design for Your WordPress Site: What Is It + 4 WordPress Flat Design Themes

Web designers in the past mostly used 3D styles for buttons that made the button seem more realistic. That all changed when flat design...

LawBlog WP Theme Review

Regardless of which area of law you practice, it’s imperative that you have proper online representation. You need to give your customers a feeling...

The Deeper Meaning and Purpose Behind Shapes in Web & Graphic Design

Sometimes in web design, a clean website is often the best choice for certain clients. Instead of elaborate backgrounds or too many aesthetic choices,...

How to Easily Design a Website Without Coding

Are you looking to build a website and you don’t know how to code? Online web design services are helpful to create website templates...

The importance of SSL Certificates as part of a web hosting package

Building a successful business requires trust, and gaining trust can be difficult especially when you run a business where it is taken for granted...

Recent comments