https://stackoverflow.com/questions/3455016/how-are-pdf-sizes-specified
https://www.ibm.com/support/pages/html-pdf-and-pixel-vs-page-layout-information
http://csskarma.com/blog/css-grid-layout
https://github.com/ademilter/chrome-css-grid-highlighter?
http://jensimmons.com/post/aug-15-2017/heres-super-quick-way-try-out-css-grid
https://getflywheel.com/layout/combine-flexbox-and-css-grids-for-layouts-how-to/
https://matthiasott.com/articles/resolving-css-gridlock?
https://medium.com/@jonyablonski/designers-guide-to-flexbox-and-grid-cec6e7e45736
https://www.rachelandrew.co.uk/archives/2017/07/04/is-it-really-safe-to-start-using-css-grid-layout/
http://jensimmons.com/post/feb-28-2017/benefits-learning-how-code-layouts-css
https://tympanus.net/codrops/css_reference/grid/
http://blogs.sitepoint.com/the-ever-increasing-uses-of-a-zoom-layout-part-1/
http://blogs.sitepoint.com/the-ever-increasing-uses-of-a-zoom-layout-part-2/
http://www.sitepoint.com/solving-layout-problems-css-table-property/
http://www.sitepoint.com/understanding-css-grid-systems
http://positioniseverything.net/articles/onetruelayout/
http://alistapart.com/article/holygrail
http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/
http://www.sitepoint.com/moving-beyond-responsive-web-adaptive-web/
http://www.sitepoint.com/easy-responsive-css-grid-layouts
Multi-columns / Equal-height columns:
Multi-Column Layouts Climb Out of the Box
Faux Columns
In search of the One True Layout
Really simple CSS trick for equal height columns
Super Simple Two Column Layout
Remembering: The CSS3 Multi-Column Layout Module
http://www.addedbytes.com/css/faux-columns-for-liquid-layouts/
http://www.sitepoint.com/adapting-your-site-to-different-window-sizes/
http://coding.smashingmagazine.com/2009/10/26/modern-css-layouts-the-essential-characteristics/
http://coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/
http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/
http://particletree.com/features/dynamic-resolution-dependent-layouts/
http://clagnut.com/blog/1663/
Adaptable view - how do they do it?
Adaptive CSS-Layouts: New Era In Fluid Layouts?
Fluid Width and Floating Object Possibilities
From The Forums: Fluid, Fluid, Fixed & More
Is there a perfect web design width?
Fixed Width, Fluid Width & Elastic Width (screencast from css-tricks)
Modern CSS Layouts: The Essential Characteristics
Modern CSS Layouts, Part 2: The Essential Techniques
The Perfect Fluid Width Layout
Pros And Cons Of 6 CSS Layout Patterns: Part 1
Pros And Cons Of 6 CSS Layout Patterns: Part 2
Screen Resolution ≠ Browser Window
Rein In Fluid Width By Limiting HTML Width
The Weekend Quick Tip: Flex Your Images
Floatless CSS Layout
Modernism to the CSS layouts: What is it all about?
Give Floats the Flick in CSS Layouts
Complete CSS Guide
Fluid Navigation CSS & jQuery
http://www.designtopx.com/archives/2010/2/fixed-height-columns/
http://net.tutsplus.com/videos/screencasts/quick-tip-different-layouts-for-different-widths/
Negative Space in Webpage Layouts: A Guide
http://www.yourinspirationweb.com/en/styles-in-webdesign-the-features-of-a-web-2-0-layout/
http://www.jankoatwarpspeed.com/post/2009/11/08/YouTube-adaptable-view-css-jquery.aspx
http://de-online.co.uk/2006/11/27/more-width
http://adactio.com/journal/1149/
http://christopherschmitt.com/resources/css/headings/
http://ejohn.org/blog/sub-pixel-problems-in-css/
http://www.alistapart.com/articles/dao/
http://www.particletree.com/features/dynamic-resolution-dependent-layouts/
http://www.brandspankingnew.net/archive/2005/12/dynamic_layouts_with_css_javascript.html
http://alistapart.com/article/switchymclayout
http://www.particletree.com/features/dynamic-resolution-dependent-layouts/
http://alistapart.com/article/magazinelayout
Variable fixed width layout
CSS Drop Column Layout
http://www.brandspankingnew.net/archive/2005/12/dynamic_layouts_with_css_javascript.html
Grid:
http://alistapart.com/article/fluidgrids
Grid design basics: Grids for Web page layouts
Applying Divine Proportion To Your Web Designs
Developing the grid that supports your design
Myths & Misconceptions About Grid Systems
Designing With Grid-Based Approach
Grid Based Design Toolbox
http://typophile.com/files/How%20you%20make%20a%20grid.pdf
http://www.markboulton.co.uk/journal/comments/rethinking-css-grids
http://goldengridsystem.com/
http://fluidbaselinegrid.com/
http://sixrevisions.com/web_design/the-brads-alignment-in-design/
Web Design Trend Hunting – Fluid Grid Layout: 10+ Outstanding Examples & 1 Tutorial
http://www.alistapart.com/articles/outsidethegrid
http://www.thegridsystem.org/
http://www.netmagazine.com/tutorials/design-sites-using-responsive-grid-system
http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-1
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/
http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/
http://www.noupe.com/design/ultimate-guide-to-grid-based-web-design.html
http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/
http://tympanus.net/codrops/2012/04/17/the-divine-proportion-and-web-design/
http://www.smashingmagazine.com/2008/03/26/grid-based-design-six-creative-column-techniques/
Making and Breaking the Grid - Timonthy Samara
http://gridr.atomeye.com/
http://designmodo.com/flat-design-principles/
http://designmodo.com/flat-design/#ixzz2Ol7Ejxab
Layout is a very generic term. Most of the time it refers to how the page look. Sometimes it refers to how the page should look or behave when the user change the font size, or zoom in or out (what unit of measurement — %, em, px, etc — should developers use when specifying the font size). Sometimes it refers to the number of columns displayed on the page. Sometimes it refers to using certain technology advancement to achieve certain behavior. Each layout have different characteristics. Some can take advantage of big screen monitors, and some cannot (require intervention from the user: the user has to manually zoom in). But the term layout always refers to how the page should look and behave.
What is the difference between Relative Layout and Liquid / Fluid Layout? Not sure yet.
What is the difference between Fluid / Liquid Layout and an Elastic Layout? Do not know yet.
Adaptive View:
Adaptive view is a user interface design pattern which you can use to allow users to manually change visual appearance of content in order to fit their needs. This is usually done by switching styles (in web sites and applications). This way you provide your users with more control over the appearance of content which improve user experience.
To implement adaptive view pattern, you typically put an element on the web site that allows the user to choose the view that they want, and based on their choice, your script change the CSS accordingly.
Grid:
Grids are utilised as a structural foundation for a website. It can enhance the overall look and feel by allowing you to create a stronger layout for your elements. The structural layout of the grid give the user the impression that the site is well organized, and that thought has been given to how the web site is to deliver its information to the user, and therefore gives the user confidence in the web site. The grid gives the designer a reference to help them realize their design.
It is important to realize that the grid is only a reference. It would curtail a designer's creativity if it was followed strictly. The grid is there to help you achieve your design's aim. It should in no way 'limit' you.
Aesthetic is subjective and therefore it is ultimately your decision as to what resolution you want for your grid columns. Typically, nicely divisible numbers are used, with the most common being 12, which is divisible by 2, 3, 4, and 6. Sixteen and 24 are also popular.
Words like grid, structure, foundation and system are very firm, hard words that are being used to describe something that in reality is a helpful guide, intended to be used in a fluid manner. Grids are suggested alignment to be followed as a general rule but to be broken out of whenever the design calls for it. None-the-less, using a grid system does provide a foundation to the web site, that when the elements of the web site are added, results in the impression of structure. It is this impression of structure that will give the user confidence that there site owner has spent enough time and resource to make sure that the site is usable.
There are many different theories on the best way to set up your own grid and the options are endless but in the end, you must choose what works best for you and the project at hand. You can divide a blank document mathematically, creating an even or odd number of columns to work with. It's usually helpful to think about gutters — the space between columns — and integrate them into your grid system as well.
Imagine that we have a design which consist of 3 columns, and we do not want the content of each column to be touching each other. The gutter is the space or margin between the columns.
Grids are a great way to line up items, keeping your design clean, user-friendly, and streamlined. However, you should not let the grid stifle your creativity and make you feel like you're trapped within its border. Feel free to venture out of the guidelines. Everything does not need to be line up in order to make a gridded design work. Items that break the grid help the design feel more organic and free-flowing instead of table-based and boring.
Grids are not the solution to every design problem and they don't work for everyone. They do provide a greate starting point for solid, clean designs that need structure and balance.
Grid system generators typically ask us to specify the width of the design, the number of columns, the gutter, margin, base font size, etc.
<div id="wrapper">
<div id="header">Header</div>
<div id="content">Content</div>
<div id="sidebar">Sidebar</div>
<div id="footer">Footer</div>
</div>
Fluid Grid:
The first step in creating this fluid layout is to create a mock-up of the preferred fixed-width layout. This way the designer can still see the proportions and can apply Divine Proportion, balance and appropriate spacing techniques.
Lets say that we start with 960px total width, and we have elements that are 880px, 640px, and 220px. When we convert this into a fluid layout, we'll have to change our 960-pixel width to 100%, and then find the percentage equivalents of 880px, 640px, and 220px:
880 / 960 = 0.9166667 = 91.66667% = 92%
For the content and sidebar areas, we need to do the same thing, but because these two areas are within the 880px wrapper DIV, we need to find the percentages of these relative to this DIV:
640 / 880 = 0.727272 = 73%
220 / 880 = 0.25 = 25%
Designers will determine the length of the margins in different ways. One way is to calculate the percentages of the margins (in this case, 20px / 880px). Another way is to set fixed margins (hard code them as 20px). Each method has its own pros and cons. With percentage margins, the designer risks the margins being too wide in very large screen resolution but probably achieves better proportion. Fixed margins may cause slight imperfections in the proportions but guarantees that the spacing will look right no matter what the screen size is.
Common pixel ranges (screen width): 240 and below, 240 - 320, 320 - 640, 640 - 800, 800 - 1024, 1024 - 1280, 1280 and up
Absolute layout (pt) is for print media.
Relative Layout (100%): adjusts in size depending on the size of the user’s browser viewport. You can change the size of the viewport by resizing the window. Different monitor sizes have various maximum sizes for the view port. Typically relative layout relies on everything working at 100% width, whether it is a small screen (like a netbook) or a 24-inch widescreen desktop monitor. This means that the layout will scale according to the viewer's situation.
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. It adjusts its width depending on how big or small the user’s viewport is.
Fixed (px): 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.
Elastic Layout (em): Commonly referred to as an elastic layout design (due to the way it flexes by growing and shrinking to meet the content’s needs), it has shown a great deal of appreciation within the web design community due to its ability to scale content, text sizes, and such. Unlike with fixed units of measurements where absolute-unit elements like images are best suited (due to maintaining without distorting), 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).
Of all the methods listed, 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. Making the text smaller in such a design will reduce the width or height, and enlarging the text will have the opposite effect. This unique attribute allows the layout to resize based on the content rather than the needs of the layout. Using an elastic solution is perfect if you want the layout to be determined by the content, but it can have issues if the text scales beyond the viewport (causing unwanted horizontal scrolling).
Hybrid Layout: Of course, while mentioning all of these layout types, 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. 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. While it requires you to be more thoughtful over your work, it’s possibly the smartest way to design and develop.
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), the relatively-measured and flexible content we have gets too diluted or too compressed (which is bad news). Using minimum and maximum widths (or heights), you can set limits on how much the design can scale so that you can still have flexibility — but only to a certain extent. Rather than spanning the viewport like a liquid layout, this layout type flows only up to where it’s told. The benefits of the CSS min-width, max-width, 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. For example, if you wanted to have your width scale to 100% for small screens but only up to, say, 1,500px so that your layout doesn’t get too wide for larger screens, then you can use a max-width:1500px. 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), you can give your fixed work a bit of added flexibility.
Scaled Layout (CSS3, orientate): One of the latest methods in CSS3 allows the manipulation of the available viewport around certain device orientations (i.e. portrait and landscape). Depending on the way in which the device is held, the design has the potential to alter its visual layout (altering the amount of space given to the content itself). Unlike the others, this type of layout does not rely on measurement units, but rather a specific layout type. However, this notion shouldn’t be underestimated as a way of dealing with complex columns on small screens. Scaled layouts truly shine in the smartphone market where the display can be rotated or moved frequently (such as the iPhone, for example).
Equated Layout (Calc, CSS3): 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). While the previous layouts we’ve covered rely on specific widths or heights being provided, an equated layout allows you to mix a fixed and relative value by using a calculation like width: calc(50% - 200px). 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, it’s certainly something that has crossed your mind. The calc CSS3 function, which has not been widely adopted yet (but is part of the CSS3 spec) may just be the thing you are looking for. While the function still isn’t widely supported by existing web browsers, this can be a future-forward option for building layouts with an added layer of pliancy.
Conditional Layout (CSS3, media queries): 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. Using CSS3 media queries (especially with mobile and desktop experiences) can bring conditional layouts to best meet the user agent. The downside of this is that it means you will need to develop and maintain stylesheets for particular devices — much like how you, in the past, maintained IE-specific stylesheets.
Rules-Based Design:
Grids are used to balance the design of books, ads, posters, and paintings. They are also often used in web design, particularly when it is executed via HTML tables or Flash. The grid has a long and noble history in the design of two dimensional media. But it is not the only way to design web pages and it is certainly not the webbiest way.
A modular approach, wherein the display of each element on the page is controlled by rules that take serial adjacency into account, may be better suited to the web as a medium. We call this approach Rules-Based Design. Instead of basing size and positioning according to a grid, rules-based design takes the environment of each element into account before determining how that element should be displayed. As a simple example, a header may have one margin when preceded by an image, and a different margin when preceded by a paragraph.
Adjacent sibling selectors in CSS enable designers to create flexible rules without slapping classes on every element and without having to manually change those class attributes as they update their page’s content.
Let’s say you want 25px of white space above every content entry except the first. You’d start by creating an h3 rule that turns off vertical white space:
h3 {
margin: 0;
padding: 0;
}
Next, using adjacent sibling selectors, you’d create a rule like this:
p + h3 {
margin-top: 25px;
}
This rule says: if an h3 header is preceded by a paragraph, insert 25px of vertical white space above that h3 header.
The effect of the two rules is pretty simple. An h3 preceded by nothing (or preceded by an image, or preceded by an h2, or a list) will have no additional vertical margin above it. An h3 preceded by a paragraph, in contrast, will have 25px of white space above it. This will work in any browser that supports adjacent sibling selectors.
The alternative method – the one used on most sites – is to slap a class attribute on ’most every element on the page. For instance, using old-school techniques, you might create the following rules:
h3 {
margin: 0;
padding: 0;
}
.vs25 {
margin: 0;
padding: 25px 0 0 0;
}
You would then have to write <h3 class="vs25"> wherever you wanted your h3 header to be preceded by 25px of vertical white space.
If you update your site frequently, an h3 that initially contained no extra class attribute (because no white space was needed) would have to be rewritten as it moved further down on the page (because it would now require 25px of white space and would therefore need a class attribute).
Manually changing class attributes in this way is kind of dumb: computers are supposed to automate tasks, not force us to work harder. Using adjacent sibling selectors frees you from wasting brain cells on this kind of manual authoring. It also reduces bandwidth and clutter and allows you to focus your markup on underlying semantics instead of presentational nuances. But it doesn’t work in IE/Win.
We were initially unwilling to compromise with IE/Win, but we got tired of seeing our headlines jammed up against each day’s opening header graphic, and we figured some of you were tired of it as well. So we’ve bent a little, assigning all h3s 5px of vertical white space and using adjacent sibling selectors to expand that white space by an additional 20px in browsers that understand more CSS than IE/Win presently does. The site is imperfect in IE/Win but looks better than it used to. On the other hand, the extra 5px of white space makes the site look a bit looser in more conformant browsers.
References:
General:
A Guide on Layout Types in Web Design
Elastic Design
Creating Liquid Layouts with Negative Margins
How to Design the Web in a High-Def World
Fluid Grids
FLUID IMAGES
Switchy McLayout: An Adaptive Layout Technique
http://www.zeldman.com/daily/0403b.shtml#ap3003
Multi-columns (equal height):
Fixed width left and right columns, fluid center
Fixed width left and right columns, fluid center with borders and source code order
Grid:
The Use of Grids in Website Design
A Brief Look at Grid-Based Layouts in Web Design
GridControl: A Grid Overlay System for Design Development.
Grid - Tools:
Grid Designer 2
Grid System Generator
Grid Calculator
jQuery Masonry
Slammer
