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’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:
…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:
I’ve never done a completely CSS-based layout.
I’ve done very little PHP development.
My current experimental site won’t accommodate this stuff very well.
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.
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.
