background preloader

LIQUID

Facebook Twitter

Creating Liquid Faux Columns. Liquid Web Design. Liquid Web Design: Build it right and it will work no matter what the container. The web professional's online magazine of choice. In: Articles By Nick Finck Published on August 29, 1999 Glenn Davis once said, "Webpage building is a lot like bar tending. Build it right and it will work no matter what the container. " I think he was either very drunk when he said that or really on to something. Some people consider the web to be an information resource while others swear up and down that it's a form of entertainment.

Ice: Let Sit and Thaw Ice is probably the most common element found on the web today. Jell-O: Just Add Water Something of a rarity, there really isn't a whole lot of Jell-O out there for the feasting . Liquid: Just Add Water Liquid is perhaps one of the most difficult styles of design one can possibly develop. The Four Inch Rule Making it happen on Paper If you plan on doing a redesign and you want to try to develop a liquid site, you must first have a firm grasp on the general concept of the site. Testing and more Testing Keep the Goal in Mind So why do it?

Flexible Layouts: Challenge For The Future - Smashing Magazine. Advertisement This article is a guest post written by Dirk Jesse, the developer of YAML (Yet Another Multicolumn Layout), an (X)HTML&CSS framework which explains his motivation for YAML in the last paragraph of the article. This article is supposed to initiate the discussion about the need for more flexible layouts in modern web design and explain why flexible designs are still important — even despite the Full Page Zoom-functionality implemented in most modern browsers.

The new generation of web browsers — Firefox 3, Opera 9.5 and Internet Explorer 7 — provides a feature which seems to save a lot of work for web-developers in the future, namely the Full Page Zoom. Instead of allowing users to increase and decrease the font size on a given web-site, browsers now enable users to literally scale the rendered layout including visuals and background images. However, is the new zoom-technique indeed so advanced that we don’t need flexible layouts any longer? The Holy Photoshop Mockup. How to Design and Code a Flexible Website | Nettuts+ In this tutorial, we're going to be designing and coding a simple blog-style web-page. We'll pay special attention to making our design flexible and accessible by using clean and simple XHTML and CSS.

This tutorial is aimed at beginners, and anyone looking to improve the accessibility of their web designs. Tutorial Details Difficulty: EasyEstimated Completion Time: 1.5-2hrs Step 1 So our example web page is going to be based on a simple blog theme, with a WordPress blog-like structure similar to that of the nettuts homepage. It's going to look something like this: The idea here is not for you to reproduce my example, but for you to be able to follow along and apply the techniques to your own designs, hopefully learning a thing or two about the underlying concepts. Step 2 - Photoshop We're going to keep the Photoshop use here to a bare minimum, Usually I mockup an entire design in Photoshop before coding, but here I'm just going to generate a basic layout, and worry about the content later.

Introduction - In search of the One True Layout. Pure CSS-based layouts have come a long way but they still have shortcomings [2] that fail to address certain design goals without compromising the true separation of content and presentation. In short, the problematic design goals are these: Total Layout Flexibility That is, the ability to order columns logically in the source while displaying them in any order desired. For any number of columns. Equal Height Columns Or more accurately, equal height columns without having to rely on faux columns. Vertical placement of elements across grids/columns Designers face the choice of relying on elements being a particular height, resorting to tables or simply not bothering. This article shows how to achieve each of these goals, and then how to combine them, creating what could be called the One True Layout™ [3].

Problems with the Equal Height Columns method Several problems have been found with the Equal Heights method, detailed in Appendix J. Next (Any Order Columns) Liquid layouts the easy way. Date: 30 December 2003 Author: Russ Weakley This article explains one method of achieving a successful liquid layout as well as providing basic definitions of liquid, fixed-width and em-driven layouts. Some definitions Liquid layout All containers on the page have their widths defined in percents – meaning that they are completely based on the viewport rather than the initial containing block. Liquid layout example Combination liquid and fixed layouts Similar to liquid layouts, except one or more of the containers on the page have fixed widths.

Liquid/fixed layout example Fixed-width layouts All containers on the page have their widths defined in pixels or other fixed units. Fixed-width example Em-driven layouts All containers on the page have their widths defined in ems. Em-driven layout example You can also use combinations of the above. The secret of liquid layouts Liquid layouts are easy to achieve if you follow some basic rules.

Step 1 – Start with a layout grid Step 2 – Leaving space HTML code. L’Incredibile Em e i Layout Elastici con i CSS. Quasi un anno fa, Ty Gossman su Stylegala mi chiese di scrivere un articolo riguardante i layout elastici. Il meglio che ho potuto fare allora fu scrivere una veloce mail mentre lavoravo. Ho sempre voluto migliorare a questo proposito. Grazie per avermelo chiesto, mi scuso se ci ho messo così tanto.

Questo articolo vi guiderà attraverso la creazione di un semplice layout elastico; cosa sia esattamente un “em” e come calcolarlo, come usare gli em per creare layer elastici per contenuto con testo scalabile ed immagini, includendo un rudimentale ritmo verticale. Cos’è un Layout Elastico? Un layout elastico si ridimensiona in base alla dimensione del testo dell’utente. Più precisamente, un’ interfaccia elastica si ridimensiona in base alla dimensione del testo del browser—solitamente di 16px—che l’utente può cambiare a piacimento.

Il design elastico usa valori di em per tutti gli elementi. Sono calcolate in base alla dimensione del testo dell’elemento genitore. Iniziamo Come Patrick H. N.B. Max Design - Liquid layouts the easy way. Date: 30 December 2003 Author: Russ Weakley This article explains one method of achieving a successful liquid layout as well as providing basic definitions of liquid, fixed-width and em-driven layouts. Some definitions Liquid layout All containers on the page have their widths defined in percents – meaning that they are completely based on the viewport rather than the initial containing block. A liquid layout will move in and out when you resize your browser window. Liquid layout example Combination liquid and fixed layouts Similar to liquid layouts, except one or more of the containers on the page have fixed widths. Liquid/fixed layout example Fixed-width layouts All containers on the page have their widths defined in pixels or other fixed units.

Fixed-width example Em-driven layouts All containers on the page have their widths defined in ems. Em-driven layout example You can also use combinations of the above. The secret of liquid layouts Step 1 – Start with a layout grid Step 2 – Leaving space. The Perfect 2 Column Liquid Layout (right menu): No CSS hacks. SEO friendly. iPhone compatible. Download this layout (20kb zip file). Percentage dimensions of the right menu layout All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content. Maximum column content widths To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden.

This chops off any content that is wider than the div. 800 x 600 Right column: 162 pixels Main page: 550 pixels 1024 x 768 Right column: 210 pixels Main page: 709 pixels The nested div structure I've colour coded each div so it's easy to see: The header, colmask and footer divs are 100% wide and stacked vertically one after the other. No CSS hacks The CSS used for this layout is 100% valid and hack free. SEO friendly Full length column background colours No Images This layout requires no images. No JavaScript JavaScript is not required. No Quirks Mode. The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible. Download this layout (25kb zip file). Percentage dimensions of the holy grail layout All the dimensions are in percentage widths so the layout adjusts to any screen resolution.

Vertical dimensions are not set so they stretch to the height of the content. Maximum column content widths To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. 800 x 600 Left & right columns: 162 pixels Center page: 357 pixels 1024 x 768 Left & right columns: 210 pixels Center page: 459 pixels The nested div structure I've colour coded each div so it's easy to see: The header, colmask and footer divs are 100% wide and stacked vertically one after the other. No CSS hacks The CSS used for this layout is 100% valid and hack free. SEO friendly 2-1-3 column ordering Full length column background colours In this layout the background colours of each column will always stretch to the length of the longest column.