This action might not be possible to undo. Are you sure you want to continue?
Skip site navigation Home All Articles Tutorials Freebies About Contact Subscribe: RSS Feed Follow on Twitter Tweet
A Guide on Layout Types in Web Design
Jul 22 2010 by Alexander Dawson | 35 Comments | Stumble Bookmark
PageLines PlatformPro Drag & Drop Theme Framework
One of the most variable aspects of web design is the way in which we approach width and height in terms of measurements and flexibility.
1 of 24
12/16/2012 8:30 PM
A Guide on Layout Types in Web Design
For many years, we have rotated between the benefits and pitfalls of using fixed, elastic, and liquid measurements in a quest to give optimal viewing experiences in highly varied situations, while balancing our need to control things in our web pages. But, as Bob Dylan proclaimed a long time ago, "The times, they are a-changin’," and with these changes come a variety of new ways for laying out your website’s pages and an even more variable landscape of methods for viewing websites. In this article, we will examine web layout types — old, new, and the future. We will explore the subject in the context that websites are being viewed in a diverse amount of ways, such as through mobile phones, netbooks, and touchscreen personal devices like the iPad.
About Your Options
Let’s set our objectives for this exploration of layout types: We shall examine the variety of options that exist For each layout type, I’ll try to suggest some situations they are best used in The pros and cons of a layout type compared to others We will discuss 10 types of web layouts.
2 of 24
12/16/2012 8:30 PM
3 of 24 12/16/2012 8:30 PM . which still uses these conventions when formatting text and sizing the dimensions of a document in order to make it appear as close as possible to printing on paper. Absolute Layouts One of the least commonly used methods of measurement employed in web design is absolute measurement (i.A Guide on Layout Types in Web Design http://sixrevisions. liquid or elastic! The main lesson to take away from these choices is to think carefully about why an option is suitable for a particular situation and how your choice will affect your audience. mm and picas). inches. which natively use these units of measurement. there’s more to layouts than fixed. The conversion of print to web format can be seen in word processing software such as Microsoft Word. starting with absolute layouts.com/web_design/a-guide-on-layout-types-in-web-design/ While pixel perfection is a pipe dream. Let’s dig in. Absolute units and positioning is traditionally found in print media.e. cm. Absolute layouts have limited use in web designs.
4 of 24 12/16/2012 8:30 PM . just because it isn’t popular doesn’t mean it doesn’t have its place on the web designer’s bevy of options. The area inside the red border is the browser’s viewport.A Guide on Layout Types in Web Design http://sixrevisions. mm. people do still print web pages — the absolute measurements of cm. You can change the size of the viewport by resizing the window. inches. Of course. If you are someone who utilizes printer-friendly stylesheets — yes. Relative Layout Relative positioning and layouts adjust in size depending on the size of the user’s browser viewport. and pt can help you prepare a page layout for printers more accurately.com/web_design/a-guide-on-layout-types-in-web-design/ A use for absolute layouts on the web is for PDF documents where content remains static. Different monitor sizes have various maximum sizes for the view port.
the use of pixel-based measurements has almost a digital resonance associated with it that transfers across from the print industry. Fixed Layout Commonly regarded as one of the least flexible methods of laying out a web design. in that the medium relies on fixed/static measurements.A Guide on Layout Types in Web Design http://sixrevisions. but it does work. This unit of measurement is accurate and leaves little guessing as to how a web design will appear across different web browsers and has become exceptionally popular among sites that favour control and predictability over optimizing the layout for the audiences’ particular viewing situation. We all know that problems can arise from having to scroll in all sorts of directions. Absolute Layouts A fixed width layout is used on Six Revisions.com/web_design/a-guide-on-layout-types-in-web-design/ Typically. and the fixed measurement 5 of 24 12/16/2012 8:30 PM . Very few sites make use of 100% widths. This means that the layout will scale according to the viewer’s situation. this type of layout relies on everything working at 100% width. whether it’s a small screen (like a netbook) or a 24-inch widescreen desktop monitor.
but it can have issues if the text scales beyond the viewport (causing unwanted horizontal scrolling). Unlike with fixed units of measurements where absolute-unit elements like images are best suited (due to maintaining without distorting). portrait and landscape). Scaled Layout One of the latest methods in CSS3 allows the manipulation of the available viewport around certain device orientations (i. elastic layouts work best when flexible content (such as text blocks) takes the front seat (though there are ways to have images scale elastically as well).com/web_design/a-guide-on-layout-types-in-web-design/ of a px-based layout has this general issue in spades. 6 of 24 12/16/2012 8:30 PM . and enlarging the text will have the opposite effect. Making the text smaller in such a design will reduce the width or height. text sizes. it has shown a great deal of appreciation within the web design community due to its ability to scale content.A Guide on Layout Types in Web Design http://sixrevisions. This unique attribute allows the layout to resize based on the content rather than the needs of the layout. em measurements are recommended for font sizes.e. Absolute Layouts Popular for its elastic nature. Of all the methods listed. Commonly referred to as an elastic layout design (due to the way it flexes by growing and shrinking to meet the content’s needs). fixed measurement layouts can do the job well and act as the best all-around solution. the elastic layout type is the most subservient to your content as it gives the content itself the deciding position as to how the layout should scale. While many people seek out some sort of ideal width to ensure maximum compatibility. Using an elastic solution is perfect if you want the layout to be determined by the content. it’s worth mentioning that if you use a lot of elements that require fixed layout rules like non-repeating background images or borders with other non-relative elements. Elastic Layout One of the most used methods of laying out a design’s content is using the relative em unit of measurement. and such.
However. for example). the design has the potential to alter its visual layout (altering the amount of space given to the content itself). this type of layout does not rely on measurement units. Unlike the others. but rather a specific layout type. 10 years ago. this notion shouldn’t be underestimated as a way of dealing with complex columns on small screens.A Guide on Layout Types in Web Design http://sixrevisions. 7 of 24 12/16/2012 8:30 PM . we wouldn’t have considered a screen’s orientation.com/web_design/a-guide-on-layout-types-in-web-design/ Depending on the way in which the device is held. How the times have changed! Scaled layouts truly shine in the smartphone market where the display can be rotated or moved frequently (such as the iPhone. Scaled Layout The iPhone adjusts orientation of your websites on-the-fly.
Each person will use his or her web-enabled mobile device in a different way. This layout type has gained mass popularity because it is the ultimate way of allowing the total opposite of a fixed layout where the content will simply take whatever space is available to it.A Guide on Layout Types in Web Design http://sixrevisions. but you can also allow people the option to choose whichever method they prefer to visualise the information. Equated Layout The next method of laying out content we shall look at is the equated layout. which makes use of a new CSS function called calc (see W3C calc spec). you can maximize the usability of your content. 8 of 24 12/16/2012 8:30 PM . Liquid (or Fluid) Layout The most relaxed method of providing a dynamically expanding or contracting design makes use of the ever-popular percentage (%) unit measurement. you cannot only maximize the way your pixels are allocated. Absolute Layouts Percentages require careful calculation as you can’t give more than 100% without issues! The limited guarantees you hold on the viewport being used goes beyond screen resolutions (imagine your site on a 6-inch screen versus a 100-inch screen. and by allowing your design to relate your content in a transformative way depending on the orientation. Though it goes without saying that a liquid layout is useful in almost every web-based situation because it adjusts its width depending on how big or small the user’s viewport is — so it’s definitely worth looking into. even just at 80% width).com/web_design/a-guide-on-layout-types-in-web-design/ With such limited space being available on handheld mobile devices.
you can set limits on how much the design can scale so that you can still have flexibility — but only to a certain extent. 9 of 24 12/16/2012 8:30 PM . the relatively-measured and flexible content we have gets too diluted or too compressed (which is bad news). Fluid-Min/Max Layout A common problem that we have as designers is that whenever the amount of space we have becomes either too wide or too narrow (or too tall or too short). While the previous layouts we’ve covered rely on specific widths or heights being provided.200px). it’s certainly something that has crossed your mind. an equated layout allows you to mix a fixed and relative value by using a calculation like width: calc(50% . this can be a future-forward option for building layouts with an added layer of pliancy.A Guide on Layout Types in Web Design http://sixrevisions. this layout type flows only up to where it’s told (‘atta boy). a new level of control will exist. Using minimum and maximum widths (or heights). Rather than spanning the viewport like a liquid layout.com/web_design/a-guide-on-layout-types-in-web-design/ When this measurement capability reaches browsers. While the function still isn’t widely supported by existing web browsers. which has not been widely adopted yet (but is part of the CSS3 spec) may just be the thing you are looking for. Have you ever had a situation where you wished that you could make up the full 100% but also account for things like divs with borders and elements that have fixed widths (such as an image)? If you’re anything like me. The calc CSS3 function.
max-width. This layout type is something I’d like to call "conditional layout. 1. The benefits of the CSS min-width. it’s us making assumptions as to the amount of space that we will have available for our design elements. The ability to serve a unique stylesheet based on the device or viewport width and height (through CSS3′s media queries) gives rise to an even more flexible and friendly way to represent your site’s content. min-height and max-height properties are most widely noticed when you want your layout to be confined within certain dimensions (like within a fixed-width design) but don’t want to suffer the wrath of horizontal scrolling. If there’s one thing that causes problems with layouts.500px so that your layout doesn’t get too wide for larger screens. if you wanted to have your width scale to 100% for small screens but only up to. For example. then you can use a max-width:1500px.A Guide on Layout Types in Web Design http://sixrevisions. As this method of laying out a web page provides a safety net that browsers can rely on (based on the min and max values you supply). say. Conditional Layout With the rise in devices like the iPhone. you can give your fixed work a bit of added flexibility.com/web_design/a-guide-on-layout-types-in-web-design/ A fluid/"jello" layout will scale only to a certain fixed width or height. a need has appeared for a way of altering web designs beyond conventional layouts to ensure that mobile device users can have an optimized experience." 10 of 24 12/16/2012 8:30 PM .
we can’t forget to mention the most popular layout method of all — the hybrid layout pretty much stands by its name in that the design ends up using a mixture of various layout types. it’s possibly the smartest way to design and develop.A Guide on Layout Types in Web Design http://sixrevisions. This includes mixing and matching various units and concepts to ensure that the design adapts to the browser’s viewport only when it needs to and still be able to retains a certain level of control over parts of a website that need more fixed structures.com/web_design/a-guide-on-layout-types-in-web-design/ The above design uses CSS3 media queries to scale the design down as required. 11 of 24 12/16/2012 8:30 PM . while mentioning all of these layout types. Most website designs rely on a single stylesheet. maintained IE-specific stylesheets. The downside of this is that it means you will need to develop and maintain stylesheets for particular devices — much like how you. Using CSS3 media queries (especially with mobile and desktop experiences) can bring conditional layouts to best meet the user agent. While it requires you to be more thoughtful over your work. in the past. Of all the methods of laying out information that have appeared recently. Hybrid Layout Of course. this is by far the one with the most promise (once the browser compatibility issues are ironed out).
there are many options to consider when laying out your web pages. Perhaps you might end up with an absolute layout in your print stylesheet. Most websites make use of a hybrid layout because certain measurement units are useful for certain situations. While many people still cling to the idea that there is one perfect layout method waiting to be found. they hybridise based on needs. and maybe you might have fixed widths using a liquid body with elastic content and a fluid control for the outside edges with scaled and flexible support for certain devices — the combinations are bountiful! The Bigger Picture Clearly. I think that the hybrid will overcome situational issues by blending together the best of all worlds. 12 of 24 12/16/2012 8:30 PM . and thus it makes sense — both pragmatically and theoretically — to pay close attention to the details and scope of any design project you undertake. It’s also worth highlighting that there’s no perfect way to deal with every situation and therefore there’s no one type that is universally the best for all situations.com/web_design/a-guide-on-layout-types-in-web-design/ Most sites don’t stick to one measurement type. Which layout type you utilize to produce your website is something that deserves as much attention as the fonts you use or the color theme you put together.A Guide on Layout Types in Web Design http://sixrevisions.
web copy. Related Content The 960 Grid System Made Easy A Brief Look at Grid-Based Layouts in Web Design The Brads – Alignment in Design Related categories: Web Design and Web Development About the Author Alexander Dawson is a freelance web designer. A good website must meet an ever increasing number of needs and thus the search for the perfect layout has become a Holy Grail quest of sorts for web designers. accessibility and UX design. The way the Internet is being consumed is rapidly evolving. accessibility. but careful thought can improve some situations. While times are changing (as do situations). he spends time on Twitter. and so forth. author and recreational software developer specializing in web standards. color contrast. Design is one of the most fundamental skills that any web professional must get to grips with. There’s more to contend with than good usability. As well as running a business called HiTechy and writing. SitePoint’s forums and other places.com/web_design/a-guide-on-layout-types-in-web-design/ There’s no right or wrong way to design. with wide disparities in both the devices we employ and the tools we take advantage of.A Guide on Layout Types in Web Design http://sixrevisions. helping those in need. picking the right layout right now should be done methodically. 35 Comments Tom Black 13 of 24 12/16/2012 8:30 PM .
It helps us decide better. 2010 Great article. Zlatan Halilovic July 22nd. Jordan Walker July 22nd.com/web_design/a-guide-on-layout-types-in-web-design/ July 22nd.A Guide on Layout Types in Web Design http://sixrevisions. like online tutorials and books to learn that layout from? Thanks in advance! :) P. thanks :) Paulo França Lacerda July 22nd. Very informative article. which I’ve been using for a while now. I hope I’m not asking for too much 14 of 24 12/16/2012 8:30 PM . I have just one question for you. 2010 wow great article alex.S. 2010 Excellent article Alexander. 2010 I didn’t realize there was so many layout types. which one of these would you suggest to me? And are there any good resources. 2010 A really useful piece and a good reminder of all the various options paul July 22nd. differentiating between layouts is important to clear up projects. If I wanted to move away from the fixed layout.
as always. alex. But I think Alexander’s intention here was simply to highlight your options and to sort of show that there’s more to laying out a page than fixed width. it would be much more engaging an article if you had some concrete examples on which each method would fail.com/web_design/a-guide-on-layout-types-in-web-design/ Young July 22nd. 2010 Hey you don’t have to wait for browsers to catch up with the css3 for the calculated layout. elastic. Trey Brister July 22nd. I realize that it’s sort of hard to grasp if you don’t have something to play around with and test (or at least code that you can copy/paste and test yourself).org If you don’t want to mess with less. fixed) so that you can do the comparing and contrasting. but man. great article! i definitely didn’t know about a couple of these.A Guide on Layout Types in Web Design http://sixrevisions. fixed to highlight the differences and downsides/benefits of using each. i personally hate to work with em’s cuz i hate doing the math in decimals…and i’m a math minor! Enor Anidi July 22nd. 2010 i haven’t been able to check SR in the past couple days cuz of a project finishing up. Then I combined the WordPress Thematic Framework child theme CSS 15 of 24 12/16/2012 8:30 PM . though. and it’s more important a topic than ever with the smartphones…as much as i still abhor surfing on my iphone. What I envision is having a basic HTML document and then using different types such as fluid. elastic. Thanks for the feedback. min/max. for example. 2010 Great article to tweet! Jacob Gube July 22nd. Just check out http://lesscss. it might’ve made the article too long but it’s kinda hard to relate to generalizations. 2010 @Young: Glad you’re back Young! I think a solid follow-up to this would be actual examples of these layout types (or at least the major ones like fluid.
you’re really contributing a huge amount of very useful articles for Six Revisions. And I am on popurls everyday. the key is to experiment with the options listed until you find something that suits your needs best! @Young: As Jacob mentioned.com Trey Brister July 22nd. 2010 Thanks for the comments everyone! @Zlatan Halilovic: It honestly depends upon what you’re trying to achieve and the type of content you are offering as to what will work best. If it’s okay. Download at http://lessthematic. 16 of 24 12/16/2012 8:30 PM . 2010 Whoosh.somanyproducts.com/web_design/a-guide-on-layout-types-in-web-design/ with WP-Less into the Less Thematic WordPress theme. :) Alexander Dawson July 22nd.A Guide on Layout Types in Web Design http://sixrevisions. 2010 This Hybrid Layout is a new enlightening idea that you just taught me. fluid and elastic. I simply intended to list the various different layout types that are available so people realise that there’s more to life than fixed. @Trey Brister: Excellent resource. This is terrific. Alex. Michael Tuck July 22nd. The thing is that there’s no one layout type which is perfect for every situation. I guess that makes it a usable solution of sorts already! @Michael Tuck: Sure! I don’t think Jacob would mind. Thanks! I hope one of these days I can get a good tutorial on the Hybrid Layout. I’ll quote some of this in the section of my tutorial site concerning layouts. I wouldn’t like to say that any specific implementation is wrong or worth discouraging (or encouraging over another). Though as every web situation is different.
have bookmarked it. 2010 good article to keep in mind David July 23rd. 2010 Very interesting and informative post. Thanks for posting… PixelCrayons July 23rd. Cheers! Carp Vlad July 23rd. It all depends on your requirements that which lay out you opt for!!! Great info. have bookmarked it. I have used a variety of these layouts depending on a particular project or more importantly the content of a particular project. 2010 Thanks for this informative article. 17 of 24 12/16/2012 8:30 PM .com/web_design/a-guide-on-layout-types-in-web-design/ Siku July 22nd. There is no single lay out which is perfect and absolute.It all depends on your requirements that which lay out you opt for!!! Great info. Manali July 23rd.A Guide on Layout Types in Web Design http://sixrevisions. 2010 This is a nice and comprehensive article. A must read for every web designer out there. 2010 Thanks for this informative article.
single style navigation. I actually own the very first production pair of Wilson Audio Tiny Tots (WATTs). 2010 Wow! Great article you have there! Doing a fixed layout is kinda boring. I think it’s a lot easier with regards to both style and content to develop mobile sites for clients or make their existing site mobile-friendly. In fact. 2010 Great article.com/web_design/a-guide-on-layout-types-in-web-design/ Gerben van Ouwendorp July 23rd. Moreen July 23rd. Great article. CahabaWeb July 24th. 2010 It seems that with the continued evolution of devices and resolution – everyone has their mind on horizontal. It seems we never build vertical left side navigation anymore. 2010 I don’t see the big deal in designing for mobile devices.A Guide on Layout Types in Web Design http://sixrevisions. Thanks…it’s top of mind again! Jon Brink July 23rd. It used to be the choice 18 of 24 12/16/2012 8:30 PM . Experimenting is good and what your article stated is just great! Thanks for posting! Patrick July 23rd. 2010 I love Wilson Audio.
Thanks! Madina September 20th. Best way to achieve flexible. child elements floated left or right. Great comprehensive guide on layout types for web design. 2010 It’s very good to read about layouts. (other cases. Peter August 12th. 2010 Before now I thought there only two layout types – fixed & fluid. Because our teacher has ordered us to find information on ths theme 19 of 24 12/16/2012 8:30 PM . Fixed positions (PX or EM) inside child containers for thumbnails & descriptions. vertical banner ads. Thanks for sharing Alex! Craig September 18th. Sidebars usually end up taking up large chunks of a page. As for the article. and a hybrid method is definitely great advice because it importantly is decided by the content of a particular project. shame nobody wants to adopt it) Hybrid all the way. takes advantage width and height equally. 2010 Wow. i’m a fan of compact fixed top-left menus. I never realized they added Calc to CSS3. 2010 @CahabaWeb I think the main reason is simplicity and more efficient use of width and height. tweet panels and the like) Personally.com/web_design/a-guide-on-layout-types-in-web-design/ of a large percentage. (perhaps even bring it close to the simplicity of XUL which is fantastic for interfacing. people have reviews. very nice. hopefully that could get around stupid issues CSS has with positioning some things. It’s just gone.A Guide on Layout Types in Web Design http://sixrevisions. collapsible columns outside of grid systems. parent container flexible. Hunnter July 29th. I thought the conclusion was really relevant because one size does not fit all. and they usually just contain nothing besides that menu.
com/web_design/a-guide-on-layout-types-in-web-design/ individually. This is one of the best articles I ever read on the web. Read CSS3 Multi-Column Layout Module and CSS3 Animations and have a look at css 20 of 24 12/16/2012 8:30 PM . Yeah! Infinitive November 4th. Thank you. I never imagines that we have almost 10 methods to layout our web pages. 2010 Truely great artcle. 2011 really good…thanks!!! Stan68 March 30th.A Guide on Layout Types in Web Design http://sixrevisions. Alas. 2011 I always thought that I know what the web layout is. Thanks! sasa February 17th. 2011 coollllllllll Amit Rudra March 24th. do you mean fixed width layout? Saeed Neamati June 4th. Let’s support CSS3.It has helped me in the resolution of an issue with a client over the layout of their website. that was a mistake. 2011 by ‘fixed layout’.
2011 Wow its amazing bombastic tutorial. I never thought on distinguishing layout to so many types. Nishant September 24th.A Guide on Layout Types in Web Design http://sixrevisions. 2011 Very informative.It gives me new dimension and clear my vision for Css layout. Thanks a lot :) Raja Aamir October 19th.com/web_design/a-guide-on-layout-types-in-web-design/ animations at My heart beats using latest version of Google Chrome.Great Tutorial thanks & thanks . Mehul Thakkar September 30th. Chris Villestas August 18th. 2011 very informative. 2011 thanks brother…… Leave a Comment Name (required) email (will not be published) used for Gravatars (required) Website Subscribe to the comments on this article. 21 of 24 12/16/2012 8:30 PM .
ag Desizn Tech fudgegraphics Function GraphicsFuel iBrandStudio InstantShift LaptopLogic.co The Winners of Proto.net MyInkBlog Naldz Graphics NETTUTS N.A Guide on Layout Types in Web Design http://sixrevisions.Design Studio Noupe Onextrapixel ProductiveDreams psdfan.io Lifetime Subscriptions Design Mistakes We Made in Our iPhone App Announcement: Winners of DesignBoost Subscriptions Free PSD UI Kit: Super Buttons Partners MaxCDN Friends 1stwebdesigner Addictive Fonts AddToDesign App Sheriff Blog.com PSDVIBE Queness 23 of 24 12/16/2012 8:30 PM .com Marcofolio.com/web_design/a-guide-on-layout-types-in-web-design/ WordPress Recent Giveaway: Dot Grid Books for Designers from Dotgrid.SpoonGraphics BrushLovers Burbia Chris Wallace CoolHomepages CSS Globe Design Bump DesignOra DesignM.
Advertise . Six Revisions mobile version by Mobify.com Vandelay Design Walyou Web Designer Help Webdesigner Depot Web Design Ledger Wordpress Themes Shock WPBeginner Become a Facebook Fan of Six Revisions.Contact . 24 of 24 12/16/2012 8:30 PM .com/web_design/a-guide-on-layout-types-in-web-design/ [Re]Encoded.A Guide on Layout Types in Web Design http://sixrevisions.RSS Feed ©2008-2012 Six Revisions.am TheBestDesigns.com Smashing Apps Smashing Magazine Stylegala Speckyboy Design Magazine Stylized Web Technology.