Why Fluid Responsive Design Is Best

With the numerous ways a user can view a website, your website needs to be able to adjust to those varying sizes. People use different monitor sizes and all mobile devices have different screen sizes. You need your website to look at it’s best on virtually any screen size. Fluid responsive design, also called liquid layout, is your best option.

What’s the Difference?

• Fixed websites have a set width and resizing the browser or viewing it on different devices won’t affect on the way the website looks.
• Fluid websites are built using percentages for widths. As a result, columns are relative to one another and the browser allowing it to scale up and down fluidly.
• Adaptive websites introduce media queries to target specific device sizes, like smaller monitors, tablets, and mobile.
• Responsive websites are built on a fluid grid and use media queries to control the design and its content as it scales down or up with the browser or device.

Fixed Website Layouts

A fixed website layout has a wrapper that is a fixed width and the components inside it have either percentage widths or fixed widths. The important thing is that the container (wrapper) element is set to not move. No matter what screen resolution the visitor has, he or she will see the same width as other visitors.
The image above shows the general outline of a fixed-width website layout. The components inside are fixed to 520, 200 and 200 pixels, respectively. A 960-pixel width has become the standard in modern Web design because most website users are assumed to browse in 1024×768 resolution or higher.
 

Fluid Website Layouts

In a fluid website layout, also referred to as a liquid layout, the majority of the components inside have percentage widths and thus adjust to the user’s screen resolution.
The image above shows a fluid (liquid) website layout. While some designers may give set widths to certain elements in fluid layouts, such as margins, the layout in general uses percentage widths so that the view is adjusted for each user.
Fluid web page design is user-friendly because it adjusts to the user’s set up. The amount of extra white space is similar between all browsers and screen resolutions, which is more visually appealing. If it’s designed well, a fluid layout can eliminate horizontal scroll bars in smaller screen resolutions. If you use a simple design, your site will be easier to create and maintain. Doing this will make your site more compatible with alternate screen resolutions.
 

Examples of Fluid Responsive Design