As a follow up to my latest re-design (which I still haven't gone back and made the final revisions to) I offer this article and demonstration of a technique that I developed in the process of coding this site: Wicked Worn + Bulletproof Liquid
As a follow up to my latest re-design (which I still haven't gone back and made the final revisions to) I offer this article and demonstration of a technique that I developed in the process of coding this site: Wicked Worn + Bulletproof Liquid
9 comments:
Hello Nils and others!
Another tasty application of the Sliding Doors! And, quite remarkable, it's just a detailed description of "The Painting Around" example in my Liquid Corners Playgarden, in which I showed the same idea, but without too much explication. If interested: over there also some more examples and an article-tutorial about liquid corners / borders/ css-images in general.
- Glad to see more people are exploring the endless possibilities of css (even without css3)!
francky
Nicely done. I used to spend a lot of time working on ideas like this. But I finally caved in to fixed-width centered designs for most projects. Two reasons mainly: 1. Too many wide screens out there. A page that works on 800x600 looks horrible on my 1920x1200 screen. It's better to just have the page centered in the browsers.
2. Typography rules say that text should never go too wide. Perhaps newspaper columns are too skinny for some, but for sure a paragraph going over 800 pixels wide isn't as friendly to read.
I don't want to go into the whole liquid vs. fixed debate (and accompanying religious wars), but I feel obligated to make a couple points. One, the problems that you are talking about are easily addressed with a max-width (although certain browsers require a little assistance). Two, who do should we cater the worst case scenarios around, the person running at high resolution yet making the decision to not utilize their screen real estate by running their browser maximized, or the person on one of those free (with computer purchase) 15" dell flat screens who has no way to make their browser window any larger?
Personally, I choose to optimize my designs for the current "low average" resolution, 1024x768. This means that things will be a little tight at 800x600, and those running 1600+ will either get a max-width (and accompanying JS hack) or grow up and stop running maximized. Ughh. Exactly why I didn't want to get started. The bitterness against people who can afford a huge monitor but waste all that space by running their browser maximized always creeps in. Oh well.
Anyway, it's an old debate. 456 Berea Street has had some of the better discussions and article collections about it. Don't miss Fixed or fluid width? Elastic!, an actual how-to tutorial (as opposed to my mostly abstract article/demo).
the link to csszengarden into your nice artikle might be wrong. I think you forgot to add the http://
If you're looking for other WickedWorn brushes [née Grunge], take a gander at Misprinted Type's goodies. Sr. Recife makes some of the best brushes, not to mention his scrumdiddleyumptious typography and design skills.
Thanks for the catch on the CSS Zen Garden link. I ought to have noticed that only one link did not appear visited.
I absolutely should have mentioned Sr. Recife's fine work, as I used Dirty Ego (one of his freeware fonts) on the home page of my last re-designed. I've added a credits page to the long list of stuff I still haven't done on the site (along with some better margins in places, background colors that you can see on a PC without the brightness cranked, etc. etc.)
Nice work. I did something similar for the small screen/zoom layout for http://www.drink-drive-lose.com/adchallenge/ last spring.
Great article. I began an attempt to create different types of liquid news and info blocks ( www.bcsgap.org ) that could be dropped into any page and scale easily. These techniques and brush designs will really help. I have also wanted to creat a higlighted block that would do the same ( www.crosssection.net ). Dan's work and examples should help me there. Thanks for an informative (and quite pretty) article.
man thanks for writing this article... you make it seem so easy! blessings...
Post a Comment