• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
wpdesigner-logo

WPDesigner

WordPress Themes, Blog Design, and Web Development

  • News
  • Tutorials
    • Theme Development
    • WordPress Tips
  • Resources
  • Reviews
    • Hosting Reviews
  • Collections
    • Plugin Collections
    • Theme Collections
  • Contests
  • WWMD
  • Our Themes
  • Login
WPDesigner » Opinion

What is the advantage with using fluid width?

Last Updated on March 4, 2018 by Jazib Zaman

wpd-800x600

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.

About Jazib Zaman

Reader Interactions

Comments

  1. Jesse says

    June 14, 2007 at 11:17 am

    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.

    Reply
  2. Matt Campbell says

    June 15, 2007 at 6:07 am

    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.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

  • LinkedIn
  • Pinterest
  • RSS
  • Twitter

Recent Posts

  • Secure Your WordPress Admin Area with Some Reliable Tools
  • What is SEO and How Does it Work?
  • 40+ Solutions to Supercharge Your WordPress Website
  • Create Your Own Website or Outsource to a Web Studio?
  • 4 Things You Will Need for a Successful Career in the Tech Industry

Copyright © 2023 · All Rights Reserved · A Project of TechAbout LLC.
All of our themes are 100% GPL compatible.

  • About
  • Write for us
  • Archives
  • Contributions
  • Privacy Policy
  • Feedback
  • Terms & Conditions