A bit pedestrian, but a decent intro to fluid grids and responsive design.
This link has been bookmarked by 508 people . It was first bookmarked on 03 Mar 2009, by Randy Brown.
-
04 Dec 12
-
13 Jun 12
-
17 May 12
-
11 May 12
-
With a
font-sizeof100%, all the elements in our page are sized relative to the browser’s default type size, -
desired
font-size -
expressed in relative,
em-friendly terms. -
If we could treat font sizes not as pixels, but as proportions measured against their container, we could do the same with the different elements draped across our grid.
-
sing a variant of our
font-sizeformula to define the maximum width of our design.
-
-
08 May 12
-
26 Apr 12
-
24 Apr 12
-
18 Apr 12
-
06 Mar 12
-
05 Mar 12
-
28 Feb 12
-
25 Feb 12
-
21 Feb 12
-
08 Feb 12
-
29 Jan 12
-
Patrícia AlecrimHow awesome would it be if you could combine the aesthetic rigor and clarity of fixed-width, grid-based layouts with the device- and screen size independence and user-focused flexibility of fluid layouts?
-
25 Jan 12
-
16 Jan 12
-
10 Jan 12
-
04 Jan 12
-
21 Dec 11
-
What’s doubly sexy is that one simple rule allows us to get most of this in place:
body { font: normal 100% Helvetica, Arial, sans-serif; }With a
font-sizeof100%, all the elements in our page are sized relative to the browser’s default type size, which in most cases is 16px. And thanks to the browser’s default stylesheet, theh1is big, bold, and beautiful—but still in Helvetica, and much too large. So while it’d be easy enough to slap on afont-familyto fix the header’s Helvetica problem, how do we size the text to 24 pixels? Or accurately reduce the size of that list?With
ems, it’s easily done. We take the target value for each element’sfont-sizein pixels and divide it by thefont-sizeof its container (that is, its context). We’re left with the desiredfont-size, expressed in relative,em-friendly terms. Or to put it more succinctly:target ÷ context = result
If we assume the
body’s default type size to be 16px, we can plug each desiredfont-sizevalue into this formula. So to properly match our header to the comp, we divide the target value (24px) by thefont-sizeof its container (16px):24 ÷ 16 = 1.5
So the header is 1.5 times the default body size, or 1.5
em, which we can plug directly into our stylesheet.h1 { font-family: Georgia, serif; font-size: 1.5em; /* 24px / 16px = 1.5em */ }To size the list to the
em-equivalent of 14px, we can use the same formula. Assuming again that thebody’sfont-sizeis roughly 16px, we simply divide that target by the context:14 ÷ 16 = 0.875
And we’re left with a value of 0.875
em, which we can again drop into our CSS.ul { font-size: 0.875em; /* 14px / 16px = 0.875em */ }With those two rules, our sample page is looking a lot closer to the comp, and will be practically pixel-perfect after some slight cleanup. All with the help of our
targetformula.÷ context = result
-
-
20 Dec 11
-
12 Dec 11
-
10 Dec 11
-
05 Dec 11
-
30 Nov 11
-
09 Nov 11
-
01 Nov 11
-
31 Oct 11
-
17 Oct 11
-
13 Oct 11
-
10 Oct 11
-
28 Sep 11
-
27 Sep 11
-
-
26 Sep 11
-
22 Sep 11
-
20 Sep 11
-
19 Sep 11
Morten JustAre you bored with creating fixed-width-websites all the time? Try Fluid Grids for a challenge: http://t.co/9nrw2bLO #webdesign
-
16 Sep 11
-
14 Sep 11
-
11 Sep 11
Romain Poucletminimum screen resolution lets us design for a contrived set of users who see design as god intended http://t.co/vrrmrS3
-
30 Aug 11
-
24 Aug 11
-
19 Aug 11
-
16 Aug 11
-
15 Aug 11
-
14 Aug 11
-
27 Jul 11
-
20 Jul 11
-
05 Jul 11
-
17 Jun 11
-
-
And with some type rules applied, we’ve got a respectable-looking starting point. However, the
#pagecontainer doesn’t have any constraints on it, so our content will simply reflow to match the width of the browser window. Let’s try to rein in those long line lengths a bit:#page { margin: 40px auto; padding: 0 1em; max-width: 61.75em; /* 988px / 16px = 61.75em */ }We’ve used margins and padding to ventilate our design a bit, and establish a gutter between it and the window edges. But in the last line of our rule, we’re using a variant of our
font-sizeformula to define the maximum width of our design. By dividing the comp’s width of 988pxby our basefont-sizeof 16px, we can set amax-widthinems to approximate the pixel-based width from our mockup, which will prevent the page from exceeding our ideal of 988px. But since we’ve usedems to set this upper limit, themax-widthwill scale up as the user increases her browser’s text size—a nifty little trick that even works in older versions of Internet Explorer, if a small CSS patch is applied. -
every aspect of the grid—and the elements laid upon it—can be expressed as a proportion relative to its container. In other words, as in our type resizing exercise, we’re looking not just at the desired size of the element, but also at the relationship of that size to the element’s container. This will allow us to convert our design’s pixel-based widths into percentages, and keep the proportions of our grid intact as it resizes.
-
So we’re working from a target value of 700
pxfor the page’s title—but it’s contained within a designed width of 988px. -
As a result, we simply divide 700
px(the target) by 988px(the context) like so:700 ÷ 988 = 0.7085
And there it is: 0.7085 translates into 70.85%, a
widthwe can drop directly into our stylesheet: -
So if, for example, our left-hand marginalia was too wide for IE (Internet Explorer), you might change your calculation from:
124 ÷ 988 = 0.12551
to a lower target of 123
px:123 ÷ 988 = 0.12449
Plug that
widthof 12.449% into your IE-specific stylesheet, and your layout woes should clear right up.
-
-
09 Jun 11
-
06 Jun 11
Luis GilArtículo sobre los diseños web con cuadrículas fluídas y elásticas
diseño css grid layout webdesign fluid referencia interesantes
-
26 May 11
-
04 May 11
-
28 Apr 11
-
26 Apr 11
-
24 Apr 11
-
Instead of exploring the benefits of flexible web design, we rely on a little white lie: “minimum screen resolution.”
-
With a
font-sizeof100%, all the elements in our page are sized relative to the browser’s default type size, which in most cases is 16px. -
We can even perform the same simple division to wrap up the layout for the entry itself, sized at 844
pxin our comp, with some 124px-wide marginalia to the left of it. For the entry:844 ÷ 988 = 0.85425
And for the informational column:
124 ÷ 988 = 0.12551
These two quick divisions net us some percentages that we can drop into our stylesheet, fleshing out our layout even more:
.entry h2, .entry .content { float: right; width: 85.425%; /* 844px / 988px = 0.85425 */ } .entry .info { float: left; width: 12.551%; /* 124px / 988px = 0.12551 */ } -
if IE causes undue wrapping with your percentage-based columns, reducing the target value by one pixel can help. So if, for example, our left-hand marginalia was too wide for IE (Internet Explorer), you might change your calculation from:
124 ÷ 988 = 0.12551
to a lower target of 123
px:123 ÷ 988 = 0.12449
-
-
19 Apr 11
-
28 Mar 11
-
23 Mar 11
-
17 Mar 11
-
the actual size of an element’s
emis computed relative to thefont-sizeof its parent element -
sized relative to the browser’s default type size, which in most cases is 16
px -
font-sizeof100% -
target ÷ context = result
-
proportions measured against their container, we could do the same with the different elements draped across our grid.
-
max-width: 61.75em; /* 988px / 16px = 61.75em */
-
since we’ve used
ems to set this upper limit, themax-widthwill scale up as the user increases her browser’s text size -
every aspect of the grid—and the elements laid upon it—can be expressed as a proportion relative to its container
-
the relationship of that size to the element’s container
-
allow us to convert our design’s pixel-based widths into percentages,
-
-
03 Mar 11
-
02 Mar 11
-
27 Feb 11
-
26 Feb 11
-
14 Feb 11
-
Add Sticky Note
-
-
Fluid layouts are an undervalued commodity in web design. They put control of our designs firmly in the hands of our users and their browsing habits. They’ve also utterly failed to seize the imagination of web designers.
-
-
11 Feb 11
-
27 Jan 11
-
14 Jan 11
-
08 Jan 11
-
26 Dec 10
-
target ÷ context = result
-
target ÷ context = result
If we assume the
body’s default type size to be 16px, we can plug each desiredfont-sizevalue into this formula. So to properly match our header to the comp, we divide the target value (24px) by thefont-sizeof its container (16px):24 ÷ 16 = 1.5
-
By dividing the comp’s width of 988
pxby our basefont-sizeof 16px, we can set amax-widthinems to approximate the pixel-based width from our mockup, which will prevent the page from exceeding our ideal of 988px. But since we’ve usedems to set this upper limit, themax-widthwill scale up as the user increases her browser’s text size -
So we’re working from a target value of 700
pxfor the page’s title—but it’s contained within a designed width of 988px.
Converting our pixel-based title to percentages.
As a result, we simply divide 700
px(the target) by 988px(the context) like so:700 ÷ 988 = 0.7085
-
-
22 Dec 10
-
19 Dec 10
-
13 Dec 10
-
08 Dec 10
-
04 Dec 10
-
29 Nov 10
-
20 Nov 10
-
17 Nov 10
-
09 Nov 10
-
05 Nov 10
philipmorton"How awesome would it be if you could combine the aesthetic rigor and clarity of fixed-width, grid-based layouts with the device- and screen size independence and user-focused flexibility of fluid layouts?"
-
02 Nov 10
-
22 Oct 10
-
13 Oct 10
Vernon FowlerThe above is, of course, a starting point: there are myriad other challenges that face the liquid web designer, most of which arise when you introduce fixed content (such as images, Flash, and so forth) into a fluid framework. I’ve been experimenting with
accessibility article articles blog css design howto html layout tutorial tutorials typography web webdesign webstandards for:@twitter
-
06 Oct 10
-
02 Oct 10
-
27 Sep 10
-
25 Sep 10
Sophie DennisEthan Marcotte on applying fluid (i.e. %based) design principles to grid design, to deliver sites which resize based on browser width.
-
22 Sep 10
Public Stiky Notes
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.