Smashing Magazine rounds up a few tricks for “CSS Layouts, Visual Effects and Forms”. Not everything in here looks useful to me, but I did notice a few gems while quickly browsing through. Bookmarked for later investigation.
Mr. Clarke advocates creating one single universal style sheet to handle all styling in IE6, and to stop worrying about making content in IE6 look anything like the high-end experience.
I’m now advocating to my clients (and to you), that where feasible, not to waste hours in time and a client’s money on lengthy workarounds in an unnecessary attempt at cross-browser perfection. Instead, you and I should provide simple but effectively designed HTML elements. This means just great typography for headings, paragraphs, quotations, lists, tables and forms and no styling of layout.
This will work well for content-focused web sites. And then maybe it’s officially time to completely drop support of IE6 for web apps.
Universal Internet Explorer 6 CSS
forabeautifulweb.comNice going, Ethan. Definitely one to keep in the ol’ bag o’ tricks.
Fluid Images
unstoppablerobotninja.comI love this in-depth look at implementing grids for liquid layouts. Ethan goes into detail just how it all fits together, and the magic formula needed to make it all work. Now if we could just have the ability to easily scale images inside a liquid layout (without resorting to clipping background images), we’d be golden (pun intended).
Fluid Grids
alistapart.com
Eric Meyer elaborates on why we need a better layout mechanism for web content (whether it be via CSS or not). We know we shouldn’t use tables for layout. Floats are a hack, positioning is flawed, and
display:table-cellis no better than using a table itself. But Eric explains here why table behavior works moderately well for layout:… this is why the old “only use tables for layout” argument keeps coming up over and over: strip away the overheated rhetoric and obvious link-baiting, and you find the core of a real need. Because as powerful as CSS can be, table cells do certain things very easily that CSS makes very, very hard. Cells stretch vertically, keeping equal heights as a matter of their intrinsic nature. They stay out of each others’ way, while still being allowed to sit next to each other and use any sizing dimensions. They tie their layout to their parent elements, and vice versa.
Wanted: Layout System
meyerweb.comRecreating the button
Until some future version of HTML gives us new native controls to use in a browser, at Google, we’ve been playing and experimenting with controls we call “custom buttons” in our apps (among other custom controls). These buttons just launched… ~1,800 words
Bookmarking this late. But an interesting perspective into Jason Santa Maria’s simple system for creating the dynamic layouts of his recent entries.
Making Modular Layout Systems
24ways.orgStill throwing tables
On the one year anniversary of the article: Throwing Tables Out the Window, I thought it appropriate to reveal some behind-the-scenes info regarding the Microsoft example discussed in the article. ~700 words
Zoom layout
In a presentation for @media entitled, Zoom the Web, Joe Clark revealed and explained several possible options (a new trend, hopefully) for making sites more accessible and readable for low-vision users. In the continuing effort to make our sites accessible as possible, many have assumed accessibility best practices deal primarily with blind people who often use screen readers. ~1,400 words
CSS organization tip 1: Flags
Do you write and manage large CSS files? Ever get tired of scrolling up and down in search of a specific rule or set of rules? The CSS files I work with for client projects are often quite long, requiring constant scrolling up and down several screen’s worth of text to alter rules or add new ones. While working on a current project, I just made a tiny little addition that makes finding what I want almost immediate. ~700 words
Capturing SXSW
When I finally met Hugh Forrest for the first time in Austin this past week, I told him I keep thinking each year that SXSW is the biggest it can possibly get. That there’s no way the following year can top the previous year in terms of the talent he pulls in for speakers, and the amount of interesting people attending who are so open and receptive to new ideas. Each time I’ve been wrong. ~600 words
MSN goes CSS
In conjunction with the launch of Microsoft’s new search effort, MSN gets a pretty significant makeover. Significant, not because of the new look, nor because of the multi-million-dollar ad campaign which will attempt to oust Google out of the #1 search spot. But because the underpinnings of the home page represent a considerable move toward web standards. ~900 words
Targeting small screens
Early last week, I spoke to packed crowds at Web Design World in Boston. Clearly the conference scene is heating back up, as budgets for events and off-site training seem to be reappearing. The two sessions I presented (“Beautiful Interfaces with CSS” and “Throwing Tables out the Window“) were lots of fun. I had to bolt to the airport to catch a flight after my last talk. So I didn’t get to stick around to see the rest of the conference or talk to more of the attendees over the next two days. ~1,700 words
Flavor saver
With the return of the full-color, fixed-width design to this site over the weekend, Stopdesign received numerous messages and even a few comments regarding the switch back. Some of the messages and comments are in favor, heralding the welcome return. Others cry foul as their Bleach is stolen away. ~500 words
Liquid Bleach
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. Liquid layouts are easy to create in theory, but can be difficult to implement effectively. Doubling margins, subtractive padding, nested percentages, and differing box models, oh my! ~1,100 wordsIntroducing Bleached
Ever wondered what your site would look like devoid of most of its color and imagery? Bleach the entire design, remove the saturation and leave behind the basic visual structure on a stark white background? Sure, some sites already use a white background for their design. But Stopdesign has been filled with deep colors and prominent header images since I launched this design a few months ago. ~600 words
Projected savings
In the article published here yesterday, “Throwing Tables out the Window“, I provided a few what if projections of bandwidth savings based on a shot-in-the-dark conservative estimate that Microsoft.com might average about 1 million page views per day. Turns out I underestimated. By just a little. ~200 words
Throwing tables out the window
With the CSS waters thoroughly tested by many sites that have taken the plunge, it’s time for us to start cheering from the water below, coaxing and encouraging those who haven’t yet jumped in, to make that jump. There’s no longer any reason to use tables for layout, nor is there reason to maintain multiple versions of a site solely for different desktop browsers. Throw the tables out first. Trust us, they’re not needed anymore. ~2,200 words
A CSS mosaic
I just returned from Seattle, where I gave two well-received presentations covering design and CSS. One of my screens from the first presentation used a mosaic I assembled (which I share here) of 144 sites that have been added to the CSS Vault within the last four months. My, how quickly the use of CSS is expanding. ~600 words
Women, part II
Interesting that the same topic I wrote about at the end of last year (
Who/Where are the Women? ) is resurfacing. Well, actually, it’s always a topic, but one that seems to be getting hot again. ~1,400 wordsFiltering CSS
Looking to keep hacks in your primary style sheet to a minimum? This entry introduces a new CSS filter that can be used to import a separate style sheet for IE5/Mac, named the IE5/Mac Band Pass Filter. ~1,000 words
The new mp3.com
This must be the week — if not the day — to launch new designs of products and services under new ownership. Good friend, and former colleague at Wired, Stephen Blake played a large role in today’s launch of the new CNET-owned mp3.com redesign. XHTML, CSS, Sliding Doors, and rounded corners… oh my. ~200 words
Props to the old school
As we approach the 6-year anniversary of the original CSS2 Specification that reached W3C Recommendation status on 12 May 1998, and as the major undertaking of CSS 2.1 rapidly nears Proposed Recommendation status, John Allsopp writes a very appropriately-timed post. ~200 words
The return
I’m sure Dave will write from his own perspective, but I thought I’d offer up some answers, information, and details about yesterday’s mischief. ~1,500 words
DWM interview
Digital Web Magazine just posted another interview for their latest issue, this time, the questions from Craig Saila were directed at me. Read all about why I wrote off CSS as a failed pipedream for so long, what I think about the Wired News design more than a year after our launch, and my sentiments about the end of Webmonkey. ~94 words
SxSW CSS presentations
I’ve received a few requests for public links to the presentations I used for the CSS panels at SxSW. In the spirit of sharing information–and since they’ve already been linked from other locations–I’ll point to them here. If you weren’t there, you won’t get all the commentary that went along with them, but you’ll get an idea of what I covered for each panel. If you were there, I hope we covered topics on both panels that were interesting and relevant to you. ~900 words
The Macromedia interview
One of the major players in the Wired News redesign was Aaron Jones, the Senior Engineer with whom I collaborated to make the redesign a reality. A few weeks ago, Macromedia requested an interview with both of us to discuss the Wired News redesign and our highly publicized leap into the world of CSS. Knowing the strong efforts Macromedia has been making with Dreamweaver’s support for CSS, we graciously agreed. One Thursday afternoon, I met Aaron and the Macromedia team at the Wired office, where a crew set up lots of lights, cameras, and microphones, took over an hour of audio, condensed it down into a concise three-minute micro-interview, and laid down the audio track into a Flash file, matching it with video stills, screenshots, code snippets, and supporting imagery. ~500 words
Doug talks
Earlier today, I had the honor of giving a presentation about the beauty of CSS at Digital Design World. The crowd seemed warmly receptive to hearing about (and seeing) how they can make better-looking sites by putting into practice some basic design principles, practical tips, and a few advanced techniques. ~300 words
Let's be bad
Ooo, yeah, I know. Jeffrey Zeldman reports that the CSS Validator Changes the Rules. It chokes on the Box Model Hack’s
voice-familyproperty when used in a style sheet specified with the “screen” media type.Update: Olivier Thereaux writes a public response from the W3C that addresses this bug in the CSS Validator.
~300 wordsParla italiano?
My original Sliding Doors of CSS article published at A List Apart is now fully translated and available in Italian on gdesign.it. ~55 words
IE Factor, exemplified
After writing about the
IE Factor several days ago, I thought I’d detail a specific example which had me pulling out my hair last week. I’ll also provide the solution I came up with. ~900 wordsThe IE Factor
I relate it to a driving experience. One in which I travel to a certain destination often enough, that I become more and more familiar with the route that takes me there. I learn the best streets getting to and off the freeway system, every exit along the way. I know the interesting segments, the boring stretches… ~900 words
On fixed vs. liquid design
Apparently, there’s been some huff and commotion out there about SimpleBits and Stopdesign dropping liquid layouts in favor of fixed-width designs. This probably wouldn’t have been as big an issue if we both hadn’t changed (by chance) the very same week. ~800 words
Blue man do
It’s not very often that I point out or write about standards-compliant site designs and launches which get sent to me by email, especially personal sites. But Cameron Adams just launched a site that I think is worth your attention. ~200 words
Sliding Doors now in Russian
If you happen to be fluent in Russian, you might be interested in Andrei Smirnov‘s recently completed Russian translation of my Sliding Doors of CSS article, originally published at A List Apart. ~100 words
No limits
When I was designing Wired News last year, I was limited by what I knew I could implement. It’s obvious to me whenever I look at Wired now: there are things I would have designed differently had I known how — and been able — to pull them off. ~400 words
Sliding Doors of CSS, part II
A follow-up to the popular “Sliding Doors of CSS” (Part I, published at A List Apart) which fills in a few gaps of missing information, and covers additions and variations on the technique introduced in the original article. (Translated into: French I, French II, Italian, Russian) ~200 words
ALA and Sliding Doors
We’ve read words about a relaunch, seen hints of a new logo, and gazed at a teaser screen that promised it was coming soon. After weeks of patient waiting, the new version of A List Apart is here. As is my contribution to ALA 3.0, “Sliding Doors of CSS”. ~400 words
Sliding Doors of CSS
It’s time to push the limits of CSS and raise another bar for standards-based web design. This tutorial walks through a new Sliding Doors technique for creating visually stunning interface elements with simple, text-based, semantic markup. (Translated into: Farsi, French I, French II, Italian, Russian) ~100 words
Are they really separated?
“Separate content from its presentation.” One of the lingering mantras of web design and development. It exists as both a rule and a strategic practice. A commandment which promises rewards if followed. But have we iterated this phrase so much as to strip away its meaning? ~700 words
Firestarter
News.com staff writer Paul Festa draws more public attention to Internet Explorer’s lack of full CSS support in “Developers gripe about IE standards inaction”. ~300 words
Explaining the value
Adaptive Path just published an essay written by Jeff Veen, entitled “The Business Value of Web Standards”. It’s a short, concise overview focusing on the tangible benefits of designing and coding a site using web standards like XHTML and CSS. ~200 words
Like Lichen?
It’s nice to see someone take an influence and actually do something with it. ~100 words
Making the absolute, relative
A reader wrote to question the use of positioning for the Adaptive Path navigation. Certain positioning requirements can be met by wrapping one positioned element with another. ~900 words
Weaving CSS dreams
In promising news for web design and development, Macromedia’s Dreamweaver MX 2004 claims it will possess much more powerful CSS support, as well as significant improvements which will help its users create accessible content. ~700 words
New ink for Inc.com
Congratulations to Dan Cederholm and team on launching a brand new Inc.com. The site sports a clean design, valid XHTML 1.0 Transitional markup, and a nice dosage of the CSS background-image property to pull in decorative icons and bullets,… ~100 words
The new Path
Today, I can announce completion of the first major publicly available Stopdesign project since the redesign of Wired News last October. Last night, Adaptive Path completed the launch of a brand spanking new redesign of their website. ~700 words
Quark site finds standards religion
In a related note, Quark recently redesigned their site using XHTML for structure and CSS for presentation and table-free layout. The pages are simple and beautifully clean. The main navigation features slick slide-down subnavigation, though they could have built this… ~100 words
A design process revealed
A detailed look at the process and decisions which were part of a design for the CSS Zen Garden submission titled, Golden Mean. (Translated into: French) ~1,900 words
In the garden
I returned last night from a relaxing holiday weekend spent in Pismo Beach with a few good friends. One afternoon, while most of the others retired to their rooms for a midday siesta, I pulled out my laptop, settled into… ~1,200 words
