The Average Website Width for Fixed vs Liquid Layouts

As both fixed and liquid width web designs are still used today. A more trending topic and strategy is using a responsive web design.

There are many debates about a fixed and liquid website web design. What are the difference between the two? What are some advantages or some disadvantages to one or the other? There are different ways to approach this. Some web developers like liquid and some like fixed width.

Both layout methods are perfectly fine. It just matters how you want your sites to function. A monthly study by w3c shows that 99% of the average website width is over 1024 x 768 pixels. Storyboarding your website is a great quick way to see how things are going to interact.

Average Website Width

Fixed Layout Design

Fixed Layout Example

A fixed width design is a site that has a standard layout. The width of the site will not change with any screen resolution, browsers are elements on the page. Your web browser can change the zoom size of the page, but the website widths still remain.

CSS Example for Fixed Width: #content { width:600px; }

Liquid Layout Design

Fixed Layout Example

Liquid width layouts have different capabilities. When a web developer codes a liquid layout, the web design width will change automatically will the browser resolution. If you have a small web browser resolution, then the site would “shrink” the pictures, text and layout to fit properly. If you have a big web browser resolution, then the site would “enlarge” the pictures, text and layout to not break the layout of the site. Most common practice is to set a minimum and maximum width for a layout. This gives you both control of how small and large you need to design your page for.

CSS Example for Liquid Width: #content { max-width:1028px; min-width:600px; width:80%;}

Advantages and Disadvantage to a Fixed Layout

There are some advantages to a fixed layout. For a web designer, they have full control of the site design. They can design the site to the exact pixel and you can choose what browser resolution to optimize for. A disadvantage of having this is that you take away the user custom controls. If a user has their font size higher than normal, then the design might render incorrectly. Or the if the user is on a resolution that is smaller than what you anticipated, elements then could be breaking the size layout.

Pros

  • Full control of the design.
  • Layout is Consistent between all internet browsers.
  • Can optimize for the most common desktop resolution.

Cons

  • Smaller desktop resolutions might have horizontal scroll bar.
  • Usability challenges for some visitors.

Advantages and Disadvantages to a Liquid Layout

There are some liquid layout advantages. When the user has his font size higher, the site will automatically adjust the font, pictures and layout of the webpage. The liquid layout will make the larger fonts fit and not cause a problem to the design. But the disadvantage is that, web designer doesn’t have full control over their site design. They can't make the smallest pixel design for their elements, because the user's web browser size could change how the elements flow.

Pros

  • Adjusts for the users browser resolution.
  • Fills the entire page with no white space edges.

Cons

  • Less control over the complete layout and design.
  • Images, videos and other multimedia might not flow with design.
  • Must test for all types of browser resolutions.

Fixed and Liquid Both Work

Fixed and Liquid Layouts

Both methods of web design layouts are fine to use. There are some advantages and disadvantages to both. As a web developer you need to decide before the development stage what you are going to create. Look at the project and decided which format is suitable. If there is a lot of design elements included, a fix width layout is probably better. If there is a lot of content, a liquid width format will give users the ability to change the layout to their preference.

Share

Rating: 
4.3 (6 votes)

Comments (10)

Comment: 
Excellent article, this clears a lot of factors to me.
Comment: 
Very informative, well explained a complex thing in simple & easy words.
Comment: 
Really good post, was looking for an article on this and Google kept giving me rubbish! What width would you recommend for a website?
Comment: 
The last couple of projects I've done have been around 920px. This give you space for the scroll bar and keeps some padding on the sides for screen resolutions at 1024x768.
Comment: 
Hello, sometimes I am having much difficulties on what website width should I use. I read somewhere that 40% or so still use 800x600 screens... so it would be smart to have a website that those users can enjoy. What do you think is the best width?
Comment: 
It can depend on the market. A younger generation of users will have a bigger resolution than an older generation. The best way to find out what you need for your particular website is to set up Google Analytics and see what your visitors are using.
Comment: 
We are debating whether to change from a liquid at 98% to a fixed width of 970px. Since our website is up and running, finding time to experiment is difficult with traffic on the site. Don't want to scare the customers away.
Comment: 
I think fluid layout is best for average website. Accessibility features are the best advantage of fluid layout. It provides no empty space on window screen. It maximizes the area resolution of the window.
Comment: 
XHTML is widely used on the web, although this was not well understood by web designers, and was largely driven by fashion than by technical advances. Further development of the XHTML standard has been abandoned, although the new standard, HTML five, is now available and this also supports an XML serialization. Thanks a lot.
Comment: 
Liquid web width is something i would go for as it can vary along the needs of the user. Similarly i can keep my websites resolution changing get the best requirement accordingly for the needs of the user of my website..... Really a good Post!!

What Do You Think?

Copyright © 2017 https://www.webhostdesignpost.com