Promised one week ago today, this is the next phase in a temporary exploration of page design and CSS layout for Stopdesign. Bleached turns liquid, making this Liquid Bleach.
The parent container for Liquid Bleach is set to 95% of the browser window width. 2-column proportions are basically set at 65%/35%, while 3-column proportions adjust those numbers to keep the middle column slightly wider by a small percentage. A min-width for the parent container is set at 750px for 3-column layouts, and at 600px for 2-column layouts, in attempt to prevent any weirdness caused by fixed-width images that live in the liquid-width columns. (IE users beware: min-width is — yet — unsupported in your browser, so it is possible for you to drag your window so small that the layout might break.)
Liquid layouts are easy to create in theory, but can be difficult to implement effectively. I’ve seen many liquid layouts that fall apart with hardly any browser resizing. I don’t even think this version comes close to achieving perfection. With liquid layout, columns constantly change widths, text reflows freely, objects reposition on the page without warning. More challenges ensue when relying on CSS for layout, rather than the easy-to-fall-back-on table-based layout.
Doubling margins, subtractive padding, nested percentages, and differing box models, oh my! Enough to make anyone shake their fist at the monitor a time or two. It’s hard to keep everything straight in liquid design. Which is my guess why we’re seeing so many fixed-width CSS layouts emerge. With fixed-width, everything Just Works™ a lot more often. Liquid? Well, creating a flexible-width design might take just a little more care and experimentation. Pulled off well, they can be a pleasant wonder the user never needs to think about or notice, because the design adapts to whatever size their browser window happens to be.
At this point, I’m not arguing for either. I’ve written before about fixed vs. liquid before, but I always dodge the debate. Apply whichever one makes sense given needs, goals, and the environment you intend to create. Given the success of the liquid-based version 2 of Stopdesign, I thought it important to eventually go back and create a liquid version of this new design, even if it were devoid of most color.
When creating liquid layouts using CSS, here are a few considerations I keep in mind:
- Double-div columns: As much as I hate to use extra markup, there’s no easier way to ensure maximum compatibility across multiple browsers than to use two divs for each column. The outer divs are used for setting widths. Inner divs are used to set padding to create gutters of white space between each column.
- Use fixed-width gutters (or gutter widths based on type size): When column width gets applied independently of column padding, as above, percentages can be used for widths, and pixels or ems can be used for padding. This, without worrying about one column getting bumped to the bottom of another, or without purposely under-sizing columns so they always fit on the page. Even though column widths change as the browser gets wider or narrower, the text on the page generally stays the same size. The amount of white space required to make the text feel comfortable is dependent more on the size of the type, rather than the size of the column containing that text.
- Avoid fixed-width columns: As much as possible, make all columns a percentage width. It’s tempting to think of sidebars and navigation columns as being one static width, and let the main or middle column do all the expanding. This quickly destroys any proportions that may have been carefully chosen, as the fixed width columns can look puny and weak at large resolutions. Or wide fixed-width sidebars can become daunting, over-powering the main column at narrower browser widths.
These aren’t, by any means, rules of the road. They’re simply my own formulas for making liquid layouts as pleasing to the eye as possible. Given the first point, some of the markup had to change here to enable greater flexibility for different types of layouts and future style-switching of the design. As more flexibility is built into a design, the markup slowly gets more complex to account for different scenarios.
One small point of interest I’ll quickly point out: I’m using a new technique for liquid layouts that I’ve been wondering about for a while. Eric Meyer helped hammer it out last week as we batted ideas back and forth. It combines my Sliding Doors method with Dan Cederholm’s Faux Columns to create some sort of Sliding Faux Columns effect. Each of the floated columns vary in width and height, depending on browser width, and the column separators move with them, sliding together or apart as necessary. The separators also span all the way from header to footer, regardless of which column is longest.
This bleached version of Stopdesign only requires column dividers, since it eliminates the original tinted columns. But this same technique could also be used for columns filled with background colors or patterns, as might be shown in a future version of Stopdesign.
The trick is to create an ultra-wide background image (or two images for 3-column layouts, thus the Sliding-Doors-nature of the technique). The image is partially opaque, and partially transparent. It gets tiled vertically inside the parent container, just like Dan’s Faux Columns technique. The opaque portion of the image should match percentages of the column it helps create, so that it can be positioned with an identical background-position value. This allows the transition from opaque to transparent to become the axis point for the background’s position. The opaque portion’s position within the image could be altered based on order of content within the HTML to produce almost any effect desired.
Since this bleached version only uses dividers, and not fully filled columns, I’m only using one image for all column dividers, cut down to 1px by 20px. It’s still positioned the same way as above, it just doesn’t need to be as wide since it’s not creating a fill color or pattern.
I’ll restate again: this noodling with the layout is only temporary. Those of you harassing me to change it back, please stop. I’ll eventually default back to the full technicolor fixed-width version of Stopdesign. But it is my intent to make the changes I’ve been testing here available via a server-side style switcher. That’s next on the agenda, after other more pressing work is completed.
72 comments
Lakitu 4 years ago
Great work. You’re simply a genius fluent in CSS. I can’t wait for broad CSS2/3 support to come out and watch in awe what you’ll do with THAT!
ramanan 4 years ago
I’m really enjoying your public experimentation in design. I actually enjoy your muted version of stopdesign more then the original. This muted liquid layout is really quite interesting.
Humberto Oliveira 4 years ago
I really liked the concepts of the Sliding Faux Columns effect. You verbalized everyting I have been thinking for a while. Great work!
By the way, is there any hack for the min-width unsupport in IE?
Darryl Millar 4 years ago
I’m a huge fan of bleached, and liquid bleach is even better!
Douglas Bowman 4 years ago
(#3) Humberto: There supposedly is a way to force IE to support min-width and max-width, documented here. I just don’t like playing around with CSS that ugly. Personal preference. Or maybe it’s because I just don’t understand the voodoo behind it. :-)
Josh Williams 4 years ago
This is really good, practical stuff Doug. Thanks for taking the time to go over the details of your design. I’ve used the double-div technique often in similar situations, and wondered if there were a simpler way — however the extra DIV in the markup seems to be a small, almost non-existent price to pay for the flexibility it allows. Good stuff.
Seth Gunderson 4 years ago
This is a fun thing to watch as you go through it. Thanks for all the commentary!
Tim 4 years ago
Nice work… I’m really enjoying the bleached design and the liquid version is even better.
I did, however, notice a problem in IE 6, SP2 (not my normal browser). The right-hand column was on the right side, but it was all the way at the bottom of the page (starting right where “Comment notes” finishes).
Douglas Bowman 4 years ago
(#8) Tim: should be fixed now. The simple search form in the right column was set too wide, pushing that column to the bottom in IE/Win.
David 4 years ago
Funny you mentioned the sliding faux columns effect. I recently designed a web site where I used that exact technique, even though I decided to use a fixed width for the menu column. The problem was that the markup becomame rather clumpy with many extra divs added. But the result could be quite pleasing. If you want to have a look, the site is located here.
Fernando Dunn II 4 years ago
I’m digging this bleached design. Even though I’m all for fixed widths, this liquid version works well at my resolution.
Last night, I thought about using Faux Columns in a liquid layout. I had a picture in mind of what was needed, but it didn’t think of Sliding Doors. For whatever reason, I was being drawn to something in Mountaintop Corners.
What’s next on the agenda? Color-safe bleach? No-splash bleach? Or is the “bleach” series eventually to end?
Marcus Tucker 4 years ago
min-width support in IE? Easy peasy!
IE7
;)
Steven Woods 4 years ago
Yea this is what happens in IE6 when the Windows is downsized too much:
http://www.elementik.net/YAY/doh.jpg
:(
Jeremy Flint 4 years ago
Liquid does seem to be somewhat harder to accomplish in CSS, mostly because there is really no way to prevent the layout going below a set width in IE. Using tables, you could always just drop a blank gif in and the table would stop at it. Ah, but those days are long gone.
I was pretty happy with the liquid layout I did for the Greater Birmingham CVB web site. The homepage gets a little weird at really small widths, but still looks presentable at 640 wide.
Michael 4 years ago
Great design! I’m a big fan of liquid design myself and use it on my own site. I understand the need for fixed design, and I have used it on numerous occasions for my clients. But when given a choice, I like to let it flow.
beto 4 years ago
I’ve always been tempted to give “liquid” CSS layouts a try, however they have been cumbersome to achieve at best and/or not much aesthetically pleasing, all its scalability advantages notwithstanding. With this, you’ve come to the closest formula for a both effective and aesthetically sound liquid layout I guess. It is not for all sites, though - now that I’m using a lot of photography on mine, it would be a little weird to pretend it to be liquid. But all in all worth a try whenever possible.
David 4 years ago
“Using tables, you could always just drop a blank gif in and the table would stop at it.”
I cant see why you wouldnt be able to do that with CSS as well. Just pop a 400px wide transparent gif in your div and it should work. The question is, do we want a gif there?
Jeremy Flint 4 years ago
David - The problem with that is that the div would not stop at the width of the gif. I have seen cases where an image will sit “above” the div, so that its dimensions do not effect those of the div it is supposedly contained in.
Douglas Bowman 4 years ago
What Jeremy wrote is true. And the behavior is inconsistent across browsers.
IE will always expand the containing element so that it entirely surrounds any fixed-width images. But this could be at the expense of wrecking the layout, and shoving one floated div down below another.
Most non-IE browsers will continue to allow the containing element to shrink smaller than the image, so the image eventually pokes out beyond its container, often causing overlapping content.
Rimantas 4 years ago
Design is nice, no doubt (as usual).
But…
Good bye to reading comfort. On my monitor lines are 1/3 longer than optimal.
Well, at least this is not the worst case…
Jeremy Flint 4 years ago
Doug - Would surrounding the image in a paragraph, or span, or setting display: inline solve the problem in non-IE browsers?
I think I have tried that before, but cannot remember the results of my experiment.
Great design by the way, or un-design as some might call it.
Douglas Bowman 4 years ago
I don’t think so Jeremy, as the columns in a CSS layout that contain these elements (no matter what their display property is set to) almost always have a width specified. And non-IE browsers will obey that width, no matter what. Obviously, you couldn’t set the column div to display:inline, since it would break the layout.
juque 4 years ago
Doug, Doug, Doug… you again! Magnificent Work… I can’t wait the next step on your agenda.
Veerle Pieters 4 years ago
Only one word : waaow! This must have taken a while to accomplish such good result. It still looks fine even if I stretch it very wide (on my Cin√ɬ©ma Display 22″). To be honest, I am a bit afraid to use liquid layouts because of all the trouble you can ran into. But I’m working on 2 projects where my client prefers to have it, so I guess I’ll take the challenge ;-) Is this doable for a newbie (but quick learner) like me? Guess it won’t be just replacing the “px” to “em” and “%” ? Thanks for your tips and information here, still … can I also cheat a little and take a peek at your css? :-D
David 4 years ago
Yes, of course you are right. But i was referring to the fact that non-ie browsers support min-width (in most cases). So adding a transparent gif might be a way to do it for IE, even though there is a risk that the gif breaks the layout, yes. But a pixel gif is and has always been sort of a “hack” which was my point from the beginning.
Brian 4 years ago
I scrolled through the comments and didn’t see this mentioned yet for min/max-height/width properties…
min-height: 500px;
height: auto;
_height: 500px;
documented here
It works great in IE/win, but not for Safari or IE/mac.
ben 4 years ago
min-width support in IE?
Even easier than the IE7 link.
Width is min-width in IE. It behaves as min-width *should*.
so
body {
min-width: 700px;
_width: 700px;
}
takes care of everybody
Andrew Phillipo 4 years ago
Liquid Technicolour! Liquid Technicolour! Liquid Technicolour!
I had to ask ;-)
I hated the previous striped down design - but am so impressed with what you have done this time around. The design is IMHO one of the best that I’ve seen. Also of interest is how a well worked liquid design, seems for me, to mean I feel much less concerned about the line length than I do on some sites.
Thanks.
Jonah Cosley 4 years ago
Re: max-width across nearly all browsers
The dynamic property methods that you linked, Doug, really can work for a website. My own site uses it to make sure an em-based layout never extends beyond the browser window width.
(Sorry for the plug but mine is the only site I know of for sure that uses this for a max-width replacement in IE!)
It works in everything except IE 5.0/win* and IE 5.2/mac (5.5/win does fine). In those two it just ignores the max-width dynamic property value… which is an acceptable degradation if you already have a percentage-based layout.
Just wanted people to know. It is a great, not perfect, technique and really allows one to use em-based (or percentage-based) design comfortably. How I use it:
- percentage based column width
- 100% wrapper width
- em-based max-width
A new template I’ve worked out:
- em-based nav column
- content column width undeclared
- 100% wrapper width
- em-based max-width
It was tricky to get the stuff worked out right, I have to admit. IE did get a little touchier with the max-width dynamic property in there. A tip that someone gave me: put the dynamic property rule at the end of the CSS.
I think I did try min- and max-widths together using dynamic properties and everything exploded.
*It actually does work in IE 5.0/win, until you put a list element on the page! OR until you refresh the page.
Jonah Cosley 4 years ago
Whoops! I forgot to say thanks for sharing this design methodology! Its a nice lesson to see well how things work without any ornamentation.
Phoat 4 years ago
I tried using the Faux Sliding Doors columns technique without success. While the background image lines up perfectly if it is 1px wide, it doesn’t work if it is larger than that.
Am I doing something wrong or is this a limitation?
Phoat 4 years ago
Ok… nevermind I figured it out. I guess I got a little confused at your explanation.
Now that I got it working…
The best innovations/ideas are when someone takes existing methods and uses them in completely new ways. Here’s an example of just that. Thanks!
Jeroen 4 years ago
Doug, you can easily incorporate min-width behaviour for IE5+/win if you include this snippet of code in the head:
<!--[if lte IE 6]><style type=”text/css” media=”screen”>
div#c-ms { width:expression(((document.compatMode && document.compatMode==’CSS1Compat’) ? document.documentElement.clientWidth : document.body.clientWidth) < 600 ? “600px” : “auto”); }
</style><![endif]–>
The conditional comments keep everything non-IE happy, while the checkup on ‘CSS1Compat’ makes sure that the thing works in both quirks and standards mode for IE6.
Ben Alpert 4 years ago
Woo hoo!!! It’s a liquid Stopdesign site!
Dante Evans 4 years ago
I feel your pain, Doug. I myself am creating a liquid design with margins, negative margins, paddings, and a whole lot of cursing at different browsers. :) However the extra markup (about 3 extra divs) is a lot better than the site’s current many nested tables and spacer gifs.
Dave Child 4 years ago
Your original Faux Columns article inspired me to write something similar, for liquid sites, (’Faux Columns for Liquid Layouts‘) back in June. Backgrounds seem an excellent way to make columns match in height, and I found the background-position property is very useful for making this work predictably in fluid sites.
Nice work making use of it here, and can’t wait to see the finished product!
Dave Child 4 years ago
Sorry, I meant “Dan’s original Faux Columns”, not “Your original Faux Columns”. I should never type pre-coffee.
John Serris 4 years ago
I’ve just started getting into liquid layouts again. I find them extremely challenging to get right. My latest design lets you switch styles between liquid and fixed. I’m using a “sliding doors” type of idea on my liquid column so it always matches the length of the side bar if the main content is short. I actually had both columns equal in length during my first drafts but didnt like the look of it. Your situation is a bit different because *all* your columns are liquid. I might give this a shot and see if I can get it working.
Sorry to plug my site here. I just thought it was interesting that we were thinking about liquid layouts at roughly the same time. What brought it on for me was all the “liquid vs fixed” arguments I was seeing on blogs recently.
Last thing I want to mention is that I’ve noticed some people arguing that this should just be done with a table. Well, a table wont let you place the main content first in the source and side bars last (which is something I prefer to do)!
Dante 4 years ago
I believe the Faux Columns technique is overcomplicated. A much simpler way is to use the DOM. I use this all the time now. You read out the height of the content block, and set this height to the sidebar (minus padding and borders, of course). No need for background images. I believe this way is superior. PPK has a slightly different way of using the DOM to stretch columns here.
Donnie 4 years ago
I’m digging the faux columns - I’m also happy to see the return to simplicity; the site reminds me of what a site would look like if the amish got hold of the internet.
Ben Saunders 4 years ago
The return to simplicity? There’s 1,846 lines (36kb) of css! I suppose you could name your ultra-wide background image spacer.gif for added irony ;)
Steven Marshall 4 years ago
I’m generaly not a fan of the liquid layout as it often looks strange at wide/maximised widths.
But this holds up well.
Scott Johnson 4 years ago
Like Steven above, I’m not much of a fan of liquid layouts either. On my 1600×1200 screen, I’m virtually unable to use a maximixed browser window on a liquid site. Perhaps
max-widthwould make liquid sites easier on my eyes. I haven’t examined the stylesheets here yet, but it looks like you are using something like this, as the page doesn’t seem to cover 95% of my maximized browser.But in reality, I never use a maximized browser. That’s why I have the big screen after all … so that I can have multiple apps open at once.
Liquid Bleach looks good, though. Even better on a narrower window. Keep up the excellent design work. :)
Scott B. 4 years ago
Bring back the color!
Ben Saunders 4 years ago
(re comment 41 - Doug, to my astonishment, emailed me to ask what my problem was. D’oh. I hope my reply makes sense…)
Hi Doug
Sorry - I wrote this quite late at night and upon re-reading it I realise that my tone was completely wrong.
Your site has been a huge source of inspiration (I design as a hobby and my current site is the first that I’ve hand-coded from a basic template).
My comment certainly wasn’t meant to be spiteful, but I realise now that it wasn’t very humorous either. The ‘return to simplicity’ bit was a reference to Donnie’s comment, directly above mine.
I think the point I was trying to make was that the whole appeal (for me) of separating content from design was the inherent simplicity - it just made sense. Simple, semantic code and lean sites.
CSS is getting pushed so far now, and the debate between what’s a hack and what’s not is getting so blurred that (from a complete novice/dunce’s point of view) this simplicity seems to be disappearing.
I hope this makes some kind of sense - keep up the good work and feel free to delete my (ill thought out) comment if you wish…
Very best wishes,
Ben Saunders
Bryan 4 years ago
Next stop, A Bleach Alternative.
I still would like to see some color in this layout, so maybe you will implement the style switcher sometime in the future.
Keep up the good work.
Brad Bice 4 years ago
I would like to formally request a future ALA article entitled “Sliding Faux Columns” (or something). I can see how a more detailed description and/or walk-through could benefit those who get confused when it comes to negative margins and percentages and huge background images. Not me though, pssh….chya…as if. Ok yeah me too.
Arik 4 years ago
I would have to disagree with the whole liquid layout concept. When you’re in different production environments that require quick development of layouts (especially in css), its hard to take something that requires a slight rehtink in how your contents flow amongst the page and to totally revamp an already working concept, all so it can go all the way across the screen as per resolution change.
But I think the layout should truly depend on the amount of content is running through that site. If its a blogger style website as far as content is concerned, then fixed centered layouts are far more appropriate. But if you have several platforms of data (i.e photo albums, forums, articles, blah blah blah) all on one site, then I would maybe consider it. But I wouldn’t go as far as thinking its the all in all goal for learning
Anyway. My view on this may be a wee bit unrehearsed. But fixed centerd layouts seem to have proved to be a better solution for the internet user and the developer. I always thought that content should not be in control of your layout, your layout should be in control of your content. (which I’m sure most of you have heard the saying).
Refering to centered fixed layouts looking ugly at large resolutions 1600×1200 and up, I would have to also slightly disagree. For one thing. When content is strectch 1600 + pixels across the screen, it tends to look a wee bit ugly also. Especially on sites like sitepoint or this one even, where the “lead-in” text becomes one line, which is unfortunate and looks awkward. Therefore would be reasoning for creating several css files (with different font sizes and arrangements) to be qued at different resolutions. But anyway, thats how I see it.
These are just my professional opinions and not attacks agaist Doug or anyone else for that matter.
Douglas Bowman 4 years ago
Arik: For one thing. When content is strectch 1600 + pixels across the screen, it tends to look a wee bit ugly also. Especially on sites like sitepoint or this one even, where the “lead-in” text becomes one line, which is unfortunate and looks awkward.
You’re probably using IE (or some IE equivalent) as your browser. Because this site uses
max-widthto constrain the width to a max of 1200px — precisely so what you describe doesn’t happen. But max-width isn’t supported by IE, at least not without using one of the variants mentioned above.If IE supported min-width and max-width, liquid layouts might be more popular, since the extreme limits could be specified.
Erwin 4 years ago
By coincidence, I’ve also been working on a semi-liquid 3-column layout, using a variation of the sliding doors, er, columns method (by semi-liquid I mean the left and right columns are fixed-width, while the centre is liquid).
You can see the result, such as it is, at klimbim.wodarczak.net, using the “Foggy Columns” style. The background of the left-hand column is set in the body, while that of the right-hand column is set in the div named “container” which surrounds all the content. Unfortunately, of course the “container” background only extends down as far as the content - if my browser window is large, there’s a gap at the bottom after the end of the content. Setting a negative bottom margin for “container” didn’t work.
The kludge I came up with was to set the bottom padding for the bottom-most element in the centre column to 200px, forcing the content (and the background of the right-hand column) to extend below the edge of the browser window (except in Opera, which still leaves a 10px gap at the bottom - no such gap in IE and Mozilla). I’m not entirely happy with this solution, but haven’t come up with anything better - I’m open to suggestions.
Michael 4 years ago
I think it’s preposterous to complain about the width of this site on a large monitor. Do you really have to view everything with a maximized window? I have a 21 inch monitor, but I almost never maximize my browser window. My clients’ users all have monitors that are 17 inches and are mostly set to 800×600. Users are slowly moving toward bigger monitors set to higher resolutions but 800×600 is still the majority and the target size I test at.
It would be great if liquid sites looked good at all sizes, but until MSIE catches up with max-width, it’s more important that the site looks good at a smaller resolutions first.
lisa 4 years ago
Re: min-width hassles:
I assume you know about this?
Arik 4 years ago
I stand corrected. I in fact do not use IE for much these days. But I guess when I do, the difference is so enormous, its hard to take a solid stance on certain layout techniques. I’m just biased towards tight consistent layouts. Everytime I try liquid layouts, I have to impliment hacks and whatnot…which takes more time, so I just kinda got turned off toward liquid layouts altogether. I don’t rule them out as a terrible avenue for web page layout, but I’ve just had to many projects go kaplunk into CSS madness for the lack of browser incompatibility and support.
Jacques Distler 4 years ago
I’ve started using javascript to enforce
max-widthconstraints in IE. See, eg., here. It’s very light-weight, seems to work OK, and I get to keep the code seen by other browsers clean and cruft-free.Stefan √Ökesson 4 years ago
I miss the margins on my 20″ Cinema Display, it can never be too much of white space…
Stefan
Rob 4 years ago
I much prefer your new layout, not so much for the liquidness of it, but because your three columns are no longer all the same width. I previously found it awkward to look at because the more important information (eg posts) was difficult to pick out from less important information (eg links) at first glance.
Also with your first or primary post being emphasised by being bigger it makes the flow of the site much easier to follow.
Thats just my two cents
datawise 4 years ago
I much prefer the new look to the older one! First time I ever considered consuming liquid bleach ;-) Great work!
Nathan Kelly 4 years ago
I’m not usually one for the liquid layout, most commonly because I find it easier to read text that is more tightly confined in organised columns rather than screen width rows. However you seem to have struck upon a fairly nice balance between space and form, the content fits neatly into high and low res monitors and there is no extreme left to right eye movement needed.
I would really like to see some colour injected into this layout before you return to the old layout, from my experience, implementing colour on a full screen layout such as this can be the hardest part of the design, but that’s just me.
One thing that does have me thinking overtime though, if you are setting a min-width and a max-width, can this truly be regarded as a liquid layout? Or do these parameters contradict the whole idea? In other words, does this just become a strange hybrid relatively positioned fixed width layout? (It is getting late here so I may just be having a brain fart.;)
Look forward to the next step!
Steve 4 years ago
I like what you’re doing here, but I agree with an earlier reader… bring back the photography. I really loved your use of color on your previous version.
This is a bit of sidebar, but… at some point could elaborate a bit on your use of different MT blogs throughout your site? (similar to your explanation given around the design of your portfolio section)
Hesam Panahi 4 years ago
Looks like it’s no longer liquid bleach…back to the beautifully done previous layout.
Proph3t 4 years ago
I have wondered this for a while, but have’nt got to asking it yet. How would I go about seperating my first post from my other posts like in your layout?
My only problem would be that I’m using Wordpress, so I’d have to find somthing compatible. Where would I start in finding something that could do that, or coding that?
Minh Nguyen 4 years ago
Proph3t, in MT you can do this by using the following code in your template:
<$MTEntries lastn="1"$>This will present only the first entry. Then, somewhere below that, you use the following code:
<$MTEntries lastn="howeverMany” offset=”1″$>This will present howeverMany entries below that lastest entry. The
offsetattribute tells MT not to include the latest entry for the second time.I’m not intimately familiar with WP’s templating syntax, so I’m not even sure if WP allows you to do this.
Dante 4 years ago
Weird. I opened up Stopdesign right when “I could fall in love” by Selena was playing. I literallly hugged my monitor. It’s so good to see the normal, beautiful Stopdesign back!
Luke Shingles 4 years ago
#64: I liked the non-liquid (liquid was too wide at 1280×960 maximized) bleach design the best.
Dan Bowling 4 years ago
Wow, this is fantastic and inspiring.
Jason Earl 4 years ago
A very interesting insight into things. This the bleached look illustrated how a user interface shouldn’t depend on colour or branding to make the page flow nicely. I know a lot of sites which would probably break where visual elements are removed (including some of my work).
About a year back I played with a similar idea to that of bleached, where a site was sectioned off and colour coded. I used different CSS includes to set the colour info and a base CSS file to do layouts. I think the idea of separating the two is quite an important thing to address in a upmarket web design company as you need to produce quality work for clients with small lead times. Being able to “Refactor” design elements (You can tell I’m more from a software programming/engineer background) is important in “Object Orientated Programming”. It’s nice to see the same thing applied to CSS.
I’ve recently played about with the idea a little more along with the liquid / sliding faux column concept. One of the issue is the way IE doesn’t have a min-width etc. However I’ve read through all of the comments in this post, and the thing you posted on using expression() works very well and is not that hard to use. However you do need to use a comment based CSS filter or conditional comment filters in the head section of the markup.
If you look at http://jason.hybd.net/Jason.html it shows this concept very well along with faux columns for the liquid based design that works in IE. I personally think elastic designs work better myself due to the fact that they are more predictable with the placement of items. However IE seems to mess up a lot with elastic designs and therefore I used a liquid layout. However in other browsers, it goes into a elastic mode. Also, the issue with liquid designs is they are harder to read at big screen resolutions (though most people with Hi res screens buy them so that they can have lots of windows open and thus don’t maximise browser widows).
As far as liquid designs go, using the faux sliding column concept, I think that a max-width limit must be placed on designs, as there are the odd few people with very large desktops. My screen res at home is 3200 by 1200 and the example you and Eric made up does break after 3000 px obviously. One advantage over liquid designs over elastic is the fact that elastic designs often use some variant of the Skidoo layout, which is very hacked from a CSS point of view and therefore the use of borders as column is something I dislike personally, though it does work very well. However these seem more readable and they don’t break when the text size is put up. My design seems to still retain it’s layout even at 4000ish pixels.
As far as the mark up issues of extra divs is concerned, I must agree with you here, an couple of extra wrapper divs go a long way towards avoiding float bugs in IE and box model issues. More importantly, in a liquid or elastic layout where you might have some drop shadow on your page wrapper’s, you need to make use of extra divs for margins there as one can not combine em units for the page content with px units for things like gutters and image white-space objects like drop shadows.
I have yet to test my design in IE 5.2 for the Mac, I think it could prove interesting. It works OK in Konqueror 3.2 so Safari should be OK. I’ll soon find out when I get back on the Mac tomorrow :-) (another words don’t have a go at me if things break on the Mac, I know many here are Mac purists).
As for the min-width support, etc in IE, I personally think it’s worth using the expression hack. I know it looks ugly, but it’s no worst than the Mac IE filters, etc. As for the voodoo effect, that’s not too hard to follow if you’ve come from a programming background and know how the inline C conditional operator works. This does go a long way as most people still use IE and therefore IE 5.5 and 6 support is a bigger priority to me than any other browser.
On a side note, it’s nice to see the colour back on this page :) Maybe you’ll present us with an elastic or liquid version of this colour design (that will be a challenge with all the images :-P )
Anyway, your article on faux sliding columns proved to be very handy. I can see us using it a lot at work :-) I’m surprised the idea hasn’t been pushed in the CSS community before as it’s a very basic concept.
Scott B. 4 years ago
Is their a stylesheet-switcher hidden somewhere, or are the ‘Bleached’ styles gone for good?
Adam 4 years ago
Great site! I first stumbled upon it just last week (I know… where have I been?!)
Anyway, my first taste of this site was the bleached version… Today I checked up… and didn’t know where I was!
This design is very nice as well, but I definately prefer the bleached design. No surprise really since many of my designs look similar… but I found Liquid Bleach much easier to read.
Is there anyway to continue to view the site with that style sheet?
Douglas Bowman 4 years ago
Scott B. and Adam (and everyone else wondering): see the latest entry for info on the new style switcher.
Marc Stress 4 years ago
My question as a non-code oriented designer who appreciates the unquestionable versatility and (seemingly) inherent beauty of CSS is this: When is Macromedia going to hire you to consult/direct/rewrite their CSS engine? Huh Macromedia? When?
florian poppele 4 years ago
puh, thanks for the style switcher. bleaching it all ;)
how about a counter how many change the design back to bleached? would be interesting…
Peter Usewicz 4 years ago
Wow! I like the bleached version, but from the other hand, colors are selected wonderfully in this template.