David Kadavy is author of Mind Management, Not Time Management, The Heart to Start & Design for Hackers.
Destrukshun has brought to my attention a great collection Josef Müller-Brockman‘s posters. They’re showing in Dublin, so seeing them on the online will have to do.
Nathan Sharfi has pointed out that the CSS3 Specifications have a feature called psuedo-elements that will behave just like my proposed use. I suppose what Luke desires is to specify containment of divs through the style sheet, but to still be able to assign content to the divs through the markup. That would be handy indeed, and would enable true re-designs through stylesheet changes. I feel a bit foolish for not having been familiar with this feature of the CSS3 spec, but that is how you learn.
After further consideration, I have noticed that there is a possible issue with “element nesting” as I have described it below. Luke Redpath proposes still including all of the DIV tags in your markup. In my proposed use, there is no indication in the markup of any “wrap1,” “wrap2,” elements. So it seems that in trying to take presentation out of the markup, perhaps I have inserted markup into the presentation, meaning that the presence of the “wrap1” etc. elements derive from them being indicated in the stylesheet. This is something I’m sure the W3C could figure out. It wouldn’t work right out of the box as I’ve proposed it, but you get the idea.
I just read an article with a pretty intriguing proposal in it. If I understand it correctly, Luke Redpath proposes that the next CSS specification include an ability to specify that an element contain other elements by default. This would be an ideal way to create visual effects that would otherwise require extraneous DIV tags. For example, for the technique, Onion Skinned Drop Shadows, the code would look something like this:
.wrap1, .wrap2, .wrap3 {
display:inline-table;
/* \*/display:block;/**/
}
.wrap3 {
padding:0 4px 4px 0;
background:url(corner_tr.gif) right
top no-repeat;
}
/* CSS rules from the future */
.wrap1 {
contain: .wrap2
float:left;
background:url(shadow.gif) right
bottom no-repeat;
}
.wrap2 {
contain: .wrap3
background:url(corner_bl.gif) left
bottom no-repeat;
}
img .shadow {
contain: .wrap1
}
/* end CSS rules from the future */ Now, instead of your markup looking like this:
<div class="wrap1"> <div class="wrap2"> <div class="wrap3"> <img src="object.gif" alt="The object casting a shadow" /> </div> </div> </div>
It would look like this:
<img class="shadow" src="object.gif" alt="The object casting a shadow" />
I think this would be a big step toward separating presentation from content.
I’ve finally done it, and it didn’t take as long as I had expected. I have created my own template for my blog. Here is a Safari screenshot:
Sure, most of the code is still from the Blogger.com template, but I will tweak it as I go along. I’m quite pleased just to have developed a template that isn’t falling apart in the browsers I test it in. I hope to incorporate some visual effects into my template in the future.
As I said, making my own template was easier than I had thought. I just downloaded the source code from my blog, reworked the CSS in it to my liking, took out my styles to make an external stylesheet, and plugged in the tags that apparently tell the Blogger.com engine where to put the content. Then I copied and pasted my source code into my Blogger.com template. Here is a screenshot of some of my code nicely color-coded by GoLive 6:
It still needs alot of work, though.
…shouldn’t be very tough. After sorting through some of the code in my template, and running a few simple tests, it looks like plugging my blog into a personal/portfolio page should be relatively easy. I aim to do a nice CSS-based layout, and use some PHP to plug in includes and maybe for some other features. Which leaves me with just three issues:
So, this should be a fun challenge. Hopefully I can stay committed to accomplishing this. I have a strong desire to master CSS-based layout. From what I can tell so far, doing CSS layout is a pain in the rear, but I really believe in the power of CSS.
Why? So many of my designer friends ask. Here are a few reasons truly off the top of my head:
-maintain the structure of information
HTML’s various tags work wonderfully to categorize information or give it a hierarchy. CSS enables you to use these tags while still giving everything the look you desire.
-separate style from content
Nothing new to you if you are familiar with CSS. With CSS the information that is in your source code will be just that: information. You won’t have a bunch of meaningless table tags strewn about. This also results in a faster load time, because your formatting remains in your style sheet, which is then cached. The browser only needs to download the information.
-forwards compatibility
Since the actual HTML markup is so clean, it breaks apart nicely on mobile devices and the like. Re-designs are easier with CSS, too. All you have to do is change out your style sheet, and your site is totally redesigned. Keeping clean markup makes it easier for archivists to save your content so it will outlive you.
-accessibility
…to both humans and machines. Keeping your text as text, and not hidden away in some Flash movie or image file makes your information scalable for sight-impaired users, and readable both by search engines and aural browsers.
It is bold of me to say (bold because months could go by before I actually get around to it) that I am going to re-design this site. Right now, it is on the beautiful, CSS based, standards compliant, template designed by Douglas (Stopdesign) Bowman. It’s a great template, but being a designer, and one that hopes to master CSS layout, I shall have to create my own. The thing that worries me at this point, is that I am going to want to include information other than my blog on the site, such as a portfolio of my work, some experimental design, some articles, etc. I imagine that I can probably suck the xml feed into a site design, but at this point, I’m not sure how to do that. I have made some progress in CSS layout techniques, mostly with help from A List Apart, and inspiration from the CSS Zen Garden, but I’m not sure yet where to find help on this. I’ll keep you posted on my progress.
Tonight I am going to watch the second half of Pride and Prejudice. It is based on the book by Jane Austen, which I recently completed reading. I have been on this kick the last couple of years of trying to catch up on all of the classics I didn’t read in High School (I get most of the books for very cheap at the Public Library’s Book Sales, or at estate sales). Unlike The Grapes of Wrath, seeing this movie after reading the book is far from a disappointment. The actors they chose are absolutely perfect, and the dialogue is word-for-word from the book. The only downfall is that altogether it is five hours long (much shorter than reading the book, however). By the way, it’s a great story.
Okay, I’m finally trying out this blog thing. I don’t really have any particular intentions for this blog, except to ramble (and perhaps inform) about design, web design and the like. I looked around and saw some very impressive blogs all organized into categories and I was pretty intimidated…only to find out blogger.com seems to make all of that pretty easy. I’m glad I decided to just jump into it. I have a tendancy, when I’m learning something new, to try to take in every detail of something before I attempt it. The result is a sort of paralysis. So, since I don’t know much about blogging yet, and it seems there is a decent amount to know, I’m just going to barf this out and clean it up later.