{"id":3428,"date":"2011-07-18T17:25:33","date_gmt":"2011-07-18T23:25:33","guid":{"rendered":"http:\/\/www.evolutionarydesigns.net\/blog\/2011\/07\/18\/fluid-vs-fixed-design-which-is-better\/"},"modified":"2011-07-19T09:38:23","modified_gmt":"2011-07-19T15:38:23","slug":"fluid-vs-fixed-design-which-is-better","status":"publish","type":"post","link":"http:\/\/www.evolutionarydesigns.net\/blog\/2011\/07\/18\/fluid-vs-fixed-design-which-is-better\/","title":{"rendered":"Fluid Vs Fixed Design: Which is Better?"},"content":{"rendered":"<p>For as long I can remember, the question I am always asked or ask myself when working a design is, \u201c<strong>Which is better? Fixed or fluid design<\/strong>?\u201d This is a great question and the answer is it depends. Personally, I prefer a fixed design.<\/p>\n<p>Today, I decided it was time to talk about fixed and fluid designs. I will go into short detail about what each layout is and the pros and cons of both. This article was written for those just getting into design or those that are not familiar with design layouts and are wanting to know more so they can get their site up and running and still look good.<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/www.evolutionarydesigns.net\/blog\/wp-content\/uploads\/2011\/07\/Water_Drops_by_Speedbird19611.jpg\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" style=\"display: block; float: none; margin: 10px auto; border-width: 0px;\" title=\"Fluid Vs Fixed Design: Which is Better?\" src=\"https:\/\/i0.wp.com\/www.evolutionarydesigns.net\/blog\/wp-content\/uploads\/2011\/07\/Water_Drops_by_Speedbird1961_thumb1.jpg?resize=604%2C353\" border=\"0\" alt=\"Fluid Vs Fixed Design: Which is Better?\" width=\"604\" height=\"353\" \/><\/a><\/p>\n<h2>Design Elements to Think About Before Deciding to Go with a Fluid or Fixed Design<\/h2>\n<p>Before getting more into fluid and fixed design, there are few things a designer needs to think about before designing a new layout.<\/p>\n<ul>\n<li>Not everyone browsing the internet has the same hardware and software settings.<\/li>\n<li>There is more than just one web browser available. Each browser can display a website differently. Make sure to test your finished design in the four major browsers.<\/li>\n<li>Its not that big of a deal, but some users may have some toolbars installed in their browsers. Some of these toolbars may block certain elements of your site.<\/li>\n<li>In my opinion, screen resolution is the most important thing to remember when designing a new layout. Test your design with different resolutions and see what it will look like.<\/li>\n<li>Some people will browse the web with their browser not fully maximized. What does your design look like if they are using the browser at different window sizes?<\/li>\n<\/ul>\n<h2>What is Fluid Design?<\/h2>\n<p>A fluid design, is a type of website layout design where most of the elements that make up the site will adjust to the users screen resolution (screen size). These layouts will use percentage widths for all its containers and columns.\u00a0 <img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" style=\"display: block; float: none; margin: 10px auto; border-width: 0px;\" title=\"Fluid Web Plage Layout\" src=\"https:\/\/i0.wp.com\/www.evolutionarydesigns.net\/blog\/wp-content\/uploads\/2011\/07\/fluidlayout_thumb.png?resize=604%2C399\" border=\"0\" alt=\"Fluid Web Plage Layout\" width=\"604\" height=\"399\" \/><\/p>\n<h3>Pros of using a Fluid Design<\/h3>\n<p>As you can see from this screenshot of <a href=\"http:\/\/www.evolutionarydesigns.net\" target=\"_blank\">Evolutionary Designs<\/a> it has a fluid layout set, it stretches everything out. You loose the background, the columns are stretched to across the screen, and the floating icons are setting on the content. Its not very attractive.<\/p>\n<p>Check out the pros and cons before deciding if you want to use fluid or fixed layouts on your site.<\/p>\n<ul>\n<li>In most cases, the amount of extra white will look the same in most screen resolutions<\/li>\n<li>Most design layouts will look the same in modern web browsers. <strong>NOTE<\/strong> &#8211; IE 6, will look different than modern browser. Lucky for us, <a href=\"http:\/\/arstechnica.com\/microsoft\/news\/2009\/08\/microsoft-dropping-support-for-ie6-is-not-an-option.ars\" target=\"_blank\">IE6<\/a> is no longer supported! Or should say it won\u2019t support much longer.<\/li>\n<li>Fluid designs is more likely to adjust to a users hardware and software settings.<\/li>\n<li>If designed right, a fluid web page layout will eliminate horizontal scrolling when a fluid layout is viewed by smaller screen resolutions.<\/li>\n<\/ul>\n<h3>Cons of Using a Fluid Design<\/h3>\n<ul>\n<li>With today\u2019s large screen resolutions, readers will see more white space than content.<\/li>\n<li>Sometime images with fixed widths may display incorrectly on different resolutions. After testing you may have add extra widths for different screen resolutions.<\/li>\n<li>What I find most annoying when using a fluid design, is not being able to test all the possible screen resolutions and monitor sizes. There have been times, when I tested a design on variety of screen resolutions and browsers and I thought they looked good. Then loaded the page on an old dinosaur of a computer with a tiny low resolution monitor to the final testing and it looked bad. At that point, I had to decide, if this was going to be a major issue for the readers or will be ok. Some sites its not that big of a deal but on others, it is.<\/li>\n<\/ul>\n<h2>What is Fixed Design Fixed Design<\/h2>\n<p>With a fixed design, the layout has a set of fixed widths instead of percentages. Most designers, including myself, prefer fixed layouts. That is because, they have some control of how a layout will look on most browsers and screen resolutions.<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/www.evolutionarydesigns.net\/blog\/wp-content\/uploads\/2011\/07\/fixedscreen.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" style=\"display: block; float: none; margin: 10px auto 15px; border-width: 0px;\" title=\"Fixed Web Page Layout\" src=\"https:\/\/i0.wp.com\/www.evolutionarydesigns.net\/blog\/wp-content\/uploads\/2011\/07\/fixedscreen_thumb.png?resize=604%2C399\" border=\"0\" alt=\"Fixed Web Page Layout\" width=\"604\" height=\"399\" \/><\/a>As you can see from this fixed layout screenshot, it does not stretch across the screen, but its balanced and looks good.<\/p>\n<p>Check out the pros and cons of a fixed layout.<\/p>\n<h3>Pros of Using a Fixed Design<\/h3>\n<ul>\n<li>You do not need to worry about <a href=\"http:\/\/www.w3schools.com\/cssref\/pr_dim_min-width.asp\" target=\"_blank\">min-width<\/a> or <a href=\"http:\/\/www.w3schools.com\/cssref\/pr_dim_max-width.asp\" target=\"_blank\">max-width<\/a> properties. <strong>NOTE<\/strong> &#8211; These properties may not even work in some browsers.<\/li>\n<li>With fixed layouts, websites designed for low resolution, the content is still legible. But does it look? Think about this and test it to see how good it really looks.<\/li>\n<li>You do not have to worry about fixed-width content looking different browsers. All browsers will read the widths the same.<\/li>\n<li>Fixed widths are easier to customize. If you need to change a column width. Then make the changes and make changes to the other columns to keep the overall layout measurements the same.<\/li>\n<\/ul>\n<h3>Cons of Using a Fixed Design<\/h3>\n<ul>\n<li>May have issues with background images. You will have to use continuous patterns or use a graphic editor to fade the image into the back and set it so it doesn\u2019t repeat.<\/li>\n<li>Sites that have large layouts may need a horizontal scroll bar for users using very low screen resolutions.<\/li>\n<li>With a fixed-width layout, large screen resolutions can cause unwanted white space. This can cause an unbalanced look (<a href=\"http:\/\/www.contributecontent.com\/02061056\/internet-business\/web-design\/web-design-rule-thirds-explained\" target=\"_blank\">Rule of Thirds<\/a>) to your site.<\/li>\n<\/ul>\n<h2>Final Thoughts<\/h2>\n<p>When I create a new layout, I generally create sites and choose templates that use a fixed layout. Fluid layout design has its uses and I have created fluid layouts in the past but I was never happy with the final results. So whenever someone asks \u201c<strong>What&#8217;s better? Fluid or a Fixed layout design<\/strong>.\u201d I will tell them that it all depends on the design, (this includes what clients want in their design and audience requirements.) But I prefer a design that is fixed, it doesn&#8217;t matter if I created or if I am just a reader on a site. I prefer to view sites with a fixed width.<\/p>\n<p>Image Source: <a href=\"http:\/\/speedbird1961.deviantart.com\/art\/Water-Drops-65720147\" target=\"_blank\">Water Drops<\/a><\/p>\n<p>Edited: July 18, 2011<em> &#8211; <a href=\"Shannon M\u00f8lhave \" target=\"_blank\">Shannon M\u00f8lhave<\/a> mentioned on <a href=\"It shouldn't &quot;depend on the design&quot; but on the audience &amp; context imo - Fluid vs. Fixed Design http:\/\/t.co\/BNHct4e via @Element321 @mlane\" target=\"_blank\">Twitter<\/a>: &#8220;It shouldn&#8217;t &#8220;depend on the design&#8221; but on the audience &amp; context imo &#8211; Fluid vs. Fixed Design <a rel=\"nofollow\" href=\"http:\/\/t.co\/BNHct4e\" target=\"_blank\">http:\/\/t.co\/BNHct4e<\/a> via @Element321 @mlane&#8221; <\/em>Shannon make&#8217;s a great point and when I realized that I didn&#8217;t give more details in the last paragraph, I went back and gave a little more detail.\u00a0 &#8211; Thanks Shannon. <em><br \/>\n<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>For as long I can remember, the question I am always asked or ask myself when working a design is, \u201cWhich is better? Fixed or fluid design?\u201d This is a great question and the answer is it depends. Personally, I prefer a fixed design. Today, I decided it was time to talk about fixed and [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[34],"tags":[928,929,1480,930],"class_list":["post-3428","post","type-post","status-publish","format-standard","hentry","category-design","tag-fix-design-layout","tag-fluid-design-layout","tag-web-design","tag-web-site-layouts","entry","has-post-thumbnail"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pJPdG-Ti","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/posts\/3428","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/comments?post=3428"}],"version-history":[{"count":0,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/posts\/3428\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/media?parent=3428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/categories?post=3428"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/tags?post=3428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}