Category Archives: Web Development

Keeping up with the times

Posted on by

Everytime you turn around there’s something new in the web to learn. Whether it be another JQuery plugin (YAJPI), a new blogging service (YABS), social networking site (YASNS) a new way to handle CSS Sprites or yet another acronym to learn (YAATL).  There’s so much to do and learn about, how do we keep up?

I think most of us (the people who read this blog) keep up with the times by monitoring RSS feeds or reading books, I know that’s how I do it. But over the past few years my RSS reader has become more and more bloated. From time to time you may run through your feeds and delete the older ones, one’s that haven’t posted in a while or people who just complain about the government. But they’re all still valuable!

I try very hard to never delete an RSS feed. In fact, not too long ago I noticed that my feed menu had started to run off the page (I use Firefox to manage my RSS), so I got a bigger monitor to compensate; because you never really know where that bit of genius, that air of brilliance will come from. It could be from Eric Meyer, David Shea or from your random Swatkins blog.

I first noticed that I was neglecting my feeds when I saw 2 cycles of A List Apart and at least 10 CSS-Tricks posts/screencasts whiz past me, and that I hadn’t made a blog post in over a month (not cool with that at all). We’re all very busy at work, some more than others, but we still need to keep up with what’s happening in the industry.

Many times when I’m busy and I look at that long list of RSS feeds in front of me I just let out a :sigh: and say “I’ll just check a couple since I’m busy, and then maybe some more tomorrow when it calms down.” It had been happening a lot lately so I came to the conclusion that it’s not going to calm down, and that it’s time to get back into my old RSS groove. It’s really not that difficult to take some time out of every day for a little news reading. In fact, the ALA news days usually take the most time.

Many of us get to work, have our coffee, sit down, chat a little and before you know it, 20-30 minutes have gone by and you haven’t really “started” work yet. This is the time I use to read my news.

Not every blog/site you follow will update content on the same day. If you run through them every morning before you start your “heads-down” development/design you’ll find 1, maybe 2 sites that have made updates.

Keeping up with your RSS is really important, especially if your one of those psycho/learn everything about everything Web designer (like me :o P). I find that at least checking your feeds once a day, or even every other day can save you tons of time, energy and frustration in the long run.

But that’s just me hoping that I haven’t lost too many readers because of my month off :o ).

How do YOU keep up with your news?

Finding Inspiration

Posted on by

From time to time we all hit design funks when inspiration is hard to find and everything we make seems to look like crap (at least I do). Having some solid sources you can fall back on while in a slump can be a great asset.

Most people I ask about inspiration will say something like "Inspiration is everywhere!" Which is true (like telling a sprinter to run faster… thanks coach), but not very helpful when you sitting in a cubical or office and you need to build a comp. And I know, when I’m sitting in a coffee shop relaxing, that last thing I want to do is look around for inspiration or wait for it to hit me.

For many years I’ve taken inspiration and creativity for granted, but when you go through a time where the ideas aren’t firing at you as fast as you’d like, you have to seek them out. Recently I’ve have to do that; so I thought I’d share my sources.

EDU Style
EDU Style is a new source I found. University sites usually have a pretty distinct style, as they convey a different message than most blogs or corporate sites. This is a great source for ideas.
Design Meltdown
Design Meltdown is a neat gallery run by Patrick McNeil. Thousands of sites to look through. Patrick McNeil gave a real good talk at FOWD08 about finding inspiration, you can view his presentation slides on SlideShare.
Daily Design Workout
Daily Design Workout is a very interesting project. Jonas Buntenbruch posts a new design every day, mostly images, but a very good source of daily inspiration.
Flickr 7days
Flickr 7days shows a random assortment of images that have been uploaded to Flickr in the last 7 days. It’s neat to look through, and every once in a while you’ll run into a cool picture you can grab some ideas from.
Twitter public timeline
Millions of people all over the world use Twitter every day, and a lot of them post links. Just go through the public timeline and click some of the links people post, check out the design; you never know what’ll be there.
OpenID site directory
The OpenID site directory is a fairly comprehensive list of all sites that integrate OpenID. It’s a massive list of web sites, why not click around?

Doing a Google search for "CSS Gallery" will turn up some good sites too (like cssmania and css beauty), but I think most us know about those, so I opted to leave most of them out of my list.

A neat source for typography inspiration is any magazine you can get your hands on. Magazines use so many different typographical styles that by just looking through a few different ones you can a ton of ideas to apply to your site(s).

Those are just a few things I’ve done to try and get out of a design slump, hopefully they’ll be helpful for you.

Where do you get YOUR inspiration?

Your Body and You

Posted on by

About couple weeks ago I wrote a post called “Styling your body” which attempted to break the convention of using a “container” or “wrap” div when building a new site. I showed how to cut out a (usually) unnecessary div element and clean up your code. In this post I hope to show you how to cut down on your HTML even more by integrating a body class.

First off, let’s look at the value of adding a body ID.

The Body ID

The body ID of this site is “www-csskarma-com” (you can view source and check that out if you’d like). I picked up that method from a talk Eric Meyer gave at An Event Apart – Boston in 2007. He mentioned that to help users create custom style sheets, you can add a body ID to your site, so the user could add something like:

body#www-csskarma-com{
     font-size:5em;
}

To customize their experience with your site. This can help with accessibility and user experience. I know I use custom style sheets from time to time, so it does help from a user standpoint. You can also see this same body ID technique on Meyerweb & SimpleBits (SimpleBits actually uses a wrapper div with an ID of “simplebits”, but it’s the same principle).

For some reason, using this hasn’t really taken off yet, but I think it’s useful… so I always add it into any site I build.

There are a fair amount of sites using the body ID to tag individual pages, which essentially is the same thing, but I like to leave the ID for the site URL (www–csskarma–com).

The Body Class

Using a class on the body element is extremely helpful in cutting down on the number of classes used on a page, especially with a large site that has many different styles. And (IMO) the benefit of keeping clean, semantic HTML far outweighs the extra long CSS rules you have to use to reference an individual element.

As an Example: When building a site you may want to use an unordered list in the main content area of your homepage, but also in the main content area of your contact page. And to get them styled differently you might do something like this for the contact page:

HTML:

<ul class="contact-page-list">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

CSS:

ul.contact-page-list{
	color:red;
}

But, if you use a body class your markup would look like this:

HTML:

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

CSS:

body.contact #content-main ul{
	color:red;
}

I know this may see like just taking a class from one element and adding it to another, but the body class can be applied to any element on the page, whereas the UL class only applies to itself and anything inside of it. Using a body class will ultimately cut down on the total number of characters in your CSS and speed up your load time (ever so slightly, but every little bit counts).

Generating the body class with PHP

When managing a large (or any) web site, you don’t want to have to go into every single body element and put in a different class. So, to help with that, I created this PHP function:

<?php
//defining some global variables, change the SITEURL to your site
define(SITEID, "www-csskarma-com")
define(SITEURL, "http://www.csskarma.com/");
define(DOMAIN, $_SERVER['HTTP_HOST']);
define(CURRENTURL, "http://" . DOMAIN . $_SERVER['REQUEST_URI']);

function myDir(){
	//removing index.php from the URL so it matches the one we set
    $clean_siteURL = str_replace("index.php", "", CURRENTURL);

    if(trim(SITEURL) == trim($clean_siteURL)){
        return "home";
    } else {
        return end(explode('/', dirname(!empty($_SERVER['REQUEST_URI']) ?
        	$_SERVER['REQUEST_URI'] : !empty($_SERVER['PHP_SELF']) ?
            $_SERVER['PHP_SELF'] : str_replace('\\','/',__FILE__))));
    }
}

//saving the function output to a variable
$dir = myDir();
?>

Then in your body you’d to this:

<body id="<?php echo SITEID; ?>" class="<?php echo $dir; ?>">

So, what’s happening here?

We set global variables so we can use them in any function we create – not just this one. You could even make the clean URL a global variable if you wanted; I just chose not to in this example. It’s important that you update the SITEURL variable to your web site URL. I also set the SITEID to www-csskarma-com in the body so it will generate both attribute values (and I can re-use the function/variables with minimal editing).

The function is checking to see if the current URL matches what you set as the home page. If it does, then it will return a value of “home.” If not, it will return whatever directory your in. For example, if the current page is http://www.csskarma.com/contact, it will return “contact.” Your output will look like this:

<body id="www-csskarma-com" class="contact">

Closing it out

In a nutshell, I got into this habit by managing a fairly large department web site and it carried over into all the sites I do. I really like keeping my HTML as clean and as slimmed down as possible, so this method works well for me. And besides that… who decided that a class wasn’t presentational markup? I’m not condemning it at all, just some food for thought.

Special thanks to Akira_x from TSN for helping me clean up the function.

Quick iPhone Media Detection

Posted on by

I finally got around to reading David Shea’s post on MediaTyping today and as I was going through it, I asked myself if all the PHP he was using was really necessary. It sure wasn’t for what I wanted to do. I just wanted to detect an iPhone or iPod to test out some interfaces.

I did some digging around after that and came across a short post on iPhoneAppr about how to auto-detect a browser based on the user agent (what is essentially the browser).

The HTTP User Agent

When you visit a web page, your user agent changes based on the media you’re using. So, right now, if you’re using Firefox 2 your user agent string looks something like this:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.14)
Gecko/20080404 Firefox/2.0.0.14

and if you’re on an iPhone it will look something like this:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like
Gecko) Version/3.0 Mobile/4A102 Safari/419.3

As you can see, the user agent string has some key difference. The iPhone agent actually says "iPhone" in it. With this in mind we can use a neat little function built into PHP 5 called stripos to search the user agent and return some code (like code to send someone to a mobile version of a web site).

Let’s just get into it shall we? Here’s the PHP:

<?php
//setting the variables
ipod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iphone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");

//detecting device
if ($ipod == true || $iphone == true){
    echo "iPhone or iPod";
    } else {
    echo "Screen";
}
?>

Stripos is a function that takes 2 arguments. The first is what you want to search (the haystack) and the second is what you want to search for (the needle). If the needle is found in the haystack it will return "true", and if not, it will return false. An important thing to note about stripos is that it’s case insensitive[edit], so if you have some initial trouble, check your spacing and maybe try trim().

Trouble I had

In the PHP manual it says to use === when checking the value (which is for an exact match, true=true), but for some reason that didn’t work for me so I used == (match, but not exact so true=true & true=1 for boolean values). It’s usually just a spacing issue, but I’m not real sure this time. Feel free to tell me I’m wrong.

view live demo

I like this, it’s pretty easy, light, and useful if you just want an iPhone/iPod interface.

Styling Your Body

Posted on by

Diving into the depths of CSS involves much more than just mastering selectors, properties and semantic (X)HTML, it has a lot to do with knowing when you need extra elements (span, div, etc). What do I mean?

Since CSS layouts have exploded into the mainstream of web design there have been few designer/developer types who can say they haven’t seen id="wrap" or id="container"; in fact, most of have been using it for years and it’s a bit of a standard now. Meanwhile we all seem to forget that there’s a lovely element we rarely use… html, the proud parent of body. All parents like to see their children succeed, but html has been depressed for some time now. Why? Because it’s child isn’t being put in in the 4th quarter, it’s being taken out in the 8th inning, not being used to it’s fullest potential because of this smug little punk on the block called "container" (or "wrap", for short).

No one forgets that body and html are there, they just forget they’re a stylable elements, everything can be manipulated with CSS, (remember?). So rather than doing something like this:

#container{
width:60em;
margin:0 auto;
}

Try filling out your body like this:

body{
text-align:left;
width:60em;
margin:0 auto;
background:#fff;
}

And then style that proud parent html (at the top of the style sheet)

html{
background:#ccc;
text-align:center;
}

There you go, you cut just down on an extra div you didn’t need. This technique will work in 95% of the web sites out there. The only case it wouldn’t fly is if you need to put content spanning the whole top of the browser window (with a center aligned page). With 95% of page load time happening on the front end, every character you can shave off counts. Since there’s very little semantic benefit to a having html body div#wrap, it’s usually an easy choice to cut out.

Not only is it an easy choice the drop, but it’s a seemless integration. You essentially move all the layout properties up a level (move #wrap to body and body to html). There’s usually little to no change for the user and few things to fix.

A True CSS Table

Posted on by

A few years ago I while I was working at a community college in Virginia I was building a site for their Arts & Sciences department and trying out some think, different colored borders for the site container and I noticed that when two borders intersect they form a diagonal line. You can see it if you try out this code:

div{
border:20px solid red;
border-top-color:blue;
border-bottom-color:green;
}

or see the example

I thought it was neat, but didn’t think too much about it. Then about a year later I saw Eric Meyer’s Slantastic

Shortly after that, I created CSS Shelves based on the search box area of webmonkey

This morning I found myself thinking about tables for some reason and in a moment of clarity (while reading css-tricks) I thought to myself “CSS Tables… hmmm… CSS tables… a table doesn’t have to look like a table, but what if it looked like an actual table (like a kitchen table).” I wondered if I could make it happen, could I take a semanticlly marked up XHTML table and make it look like a kitchen table? After a few hours of coding the answer was becoming clearer to me… “kind of”.

What do I mean? Check out my true CSS table.

99% image-free CSS, unfortunately I broke down around hour 4 or 5 and used 1 background image (feeling all sorts of shame). But I came out with a nice looking table with a transparent top, that gets destroyed in IE. I decided to only make it for Firefox 2 since it’s pretty much just a novelty item and has very few practical uses other than decoration.

It is, however (in my opinion) a pretty neat trick and a great way to show the power CSS has over the presentation of (X)HTML. A table (or any element) doesn’t have to look the way the browser intended.

This is how I did it:

First off, I made up some data and filled it into a semantic table using ids, headings, table headers, axis, and any table attirbute available that I could use to grab control of each cell. You can view source on the example to see the mark up I used.

Next, I started building the legs:

th{position:absolute;font-weight:700;}

th[scope="col"]{
border:1px solid #999;
border-right:10px solid #888;
padding:250px .5em 0;
font-weight:700;
z-index:99;
}

/*table legs*/
th#us{top:160px;left:-350px;}
th#cdn{top:20px;left:-150px;}
th#aus{top:20px;left:150px;}
th#uk{top:160px;left:-50px;}

th#tables{top:-160px;left:-180px;}
th#chairs{top:-120px;left:-235px;}
th#doors{top:-80px;left:-290px;}
th#dressers{top:-40px;left:-355px;}

After that, I styled and positioned the data

th[scope="col row"]{
background:#fff;
position:absolute;
left:261px;
top:-5px;
height:50px;
width:50px;
}

td{position:absolute;text-align:center;width:90px;}

td[headers="us tables"]{top:-160px;left:-130px;}
td[headers="us chairs"]{top:-120px;left:-180px;}
td[headers="us doors"]{top:-80px;left:-230px;}
td[headers="us dressers"]{top:-40px;left:-280px;}

td[headers="cdn tables"]{top:-160px;left:-50px;}
td[headers="cdn chairs"]{top:-120px;left:-100px;}
td[headers="cdn doors"]{top:-80px;left:-150px;}
td[headers="cdn dressers"]{top:-40px;left:-200px;}

td[headers="aus tables"]{top:-160px;left:30px;}
td[headers="aus chairs"]{top:-120px;left:-20px;}
td[headers="aus doors"]{top:-80px;left:-70px;}
td[headers="aus dressers"]{top:-40px;left:-120px;}

td[headers="uk tables"]{top:-160px;left:110px;}
td[headers="uk chairs"]{top:-120px;left:60px;}
td[headers="uk doors"]{top:-80px;left:10px;}
td[headers="uk dressers"]{top:-40px;left:-45px;}

Lastly, I had to build the table top

table{
position:relative;
top:100px;
border-top:200px solid #eee;
border-left:0;
border-right:220px solid #fff;
width:600px;
z-index:50;
}

caption{
font-size:1.5em;
position:absolute;
top:100px;
left:0;
line-height:100px;
margin:-130px 0 0 0;
padding:30px 0 0 0;
border:0;
border-bottom:180px solid #ddd;
border-left:260px solid #fff;
z-index:50;
}

thead{
position:absolute;
height:199px;
width:400px;
background: transparent url(edge.gif) no-repeat 0 0;
left:424px;
top:101px;
z-index:99;
}

tbody{
position:absolute;
border-right:240px solid #e3e3e3;
border-top:180px solid #ddd;
top:100px;
left:425px;
z-index:90;
background:#eee;
height:20px;
width:20px;
}

You may have noticed that I use edge.gif… unfortunately it’s to cover up, what looked like a peice of table cloth hanging off the edge of the table. I used a little more absolute positioning than I would have liked, but hey, this was a tough one!

Anyway, I’d love to get some feedback on this, find out what everyone thinks and if you can offer and improvements short of loading the table up with classes to get it to work in IE. It was a fun little project for today, and I hope you all enjoy poking through the code.

The final product (Firefox, load in IE for a laugh) download the CSS.

with ease,
tim

Lack of news and some hot topics

Posted on by

Has anyone noticed the lack of hopping in web development over the past month or so? The industry is usually so active that we can find new stories coming up in our RSS feeds every week. Maybe it’s the feeds I subscribe to, but the stories have been trickling in lately. Maybe we’re all off building our mobile web sites.

Here’s some things we can read up on in preparation of the new web.

The Web Beyond the Desktop

An article by David Shea written in April based on a presentation by him and John Allsopp at Web Directions North 2008 in Vancouver. David talks about how there is a movement beyond the desktop computer to mobile devices, Wii, PS3, and anything with web browsing capabilities. This is an important article and was my main arguement for getting a Wii in the office here… it didn’t work but my arguement was still valid.

Mobile Web Design

A book by Cameron Moll giving a great jumping-off point for anyone looking to get into mobile development and talks about the inevitable collision between web standards and the mobile web. Cameron provides a very well written introduction the the mobile web in a round 100 pages (which I love). It’s not long-winded like many books, it gets right to the point, and its not expensive… hightly recommend.

Putting 2.7 billion in context: Mobile phone users

An article by Tomi Ahonen highlighting the impact of mobile technologies in recent times. There’s a good follow up article by Tomi to this as well: When there is a mobile phone for half the planet: Understanding the biggest technology. Both these articles are pretty long, but very good and considered to be required reading for anyone diving into the mobile web.

WAI ARIA accessibility support

I first heard of WAI ARIA in an article on A List Apart called “Accessible Web 2.0 Applications with WAI-ARIA” and it seemed very interesting, but unsupported. Then in a talk by Derek Featherstone, I heard it mentioned again and it peaked my interest.WAI ARIA is a way to make all these cool Ajax apps more accessibile by describing the role of a certain area of the page (like giving your navigation a role of “navigation”). It also allows users to navigate by section of the web site rather than tabbing through all the links or using a skip menu.

Content Delivery for Mobile Devices

An article from dev.mobi on the best practices for serving up web content on a mobile device. Delivering content to mobile devices has been a very tricky subject. Developers who came into the mobile world were usually confronted with a new and unknown paradigm, where very little information could be found on how to determine devices’ capabilities and to deliver content to them (used a q tag for the first time right there).

I feel like this post was mobile-heavy, but it’s important to not forget about the basics of web standards while developing in these new buzzwords; and more basics like learning JavaScript and the XMLHttpRequest before you heavily use jQuery or Prototype. Reading Bulletproof Ajax helped me with that.

Anyway, I hope this gets some RSS feeds stirring. Thoughts? Comments? Complaints about my awful grammar?

with ease,
Tim

Web Directions North slides and podcasts now online

Posted on by

Back in January I went up to Vancouver for the Web Directions North (WDN) conference (notes from day 1 – notes from day 2). It was a great conference and I meet some really cool people, learned a lot, and got to bring a lot of knowledge about where the web is headed (beyond the desktop). Last night I got an e-mail from the folks at WDN about the podcasts and slides from the conference and in the spirit of open source, I thought I’d share:

Hi there,

How time flies. Much more than 2 months since Web Directions North. But plenty of time to start putting all the things you learned in January in Vancouver into practice I hope.
The really good news is that we’ve been able to put together an excellent set of resources to refresh your memory. All the slides and podcasts from just about all of the sessions are now available at our resources site. The easiest way to see all of them at once is via the blog post below:

http://tinyurl.com/4yce3u

Please do spread the word about these around your office and anywhere else there may be interest. This is an outstanding collection of materials: we want as many people as possible to benefit from them.

And keep an eye on the Web Directions blog for other materials from future events.

http://www.webdirections.org/

We hope you had a great time at the conference, and do stay in touch.

Regards,
Dave Shea
Derek Featherstone
John Allsopp
Maxine Sherrin
north.webdirections.org

“Please do spread the word about these around your office and anywhere else there may be interest. This is an outstanding collection of materials: we want as many people as possible to benefit from them”

So from WDN -> help yourself to the conference slides & podcasts

I’m not sure if I ever thank anyone for visiting my site, so just incase I can’t say it in person… thank you and I hope you enjoy the bloggings.

With ease,
Tim

Cracking open Google Gadgets

Posted on by

A few weeks ago, I decided to do a little research into Google Desktop. Which is basically a Google widget platform competing with Yahoo! widgets. After some exploration and dissecting Google Gadgets, this is what I came out with:

  • The core of the application runs on 2 files
    • main.js
    • main.xml
  • There are also some image and CSS options readily available, but the guts of it really run on JavaScript and XML
  • Overall, it’s very straightforward, a little playing around with the sample gadgets will give you a good idea of what you can do (endless possibilites)

The file structure of some of the sample gadgets leaves a lot of room for improvement. Some seem to be built to handle very large, modular applications, but in most cases, they’re a little too modular (in my opinion).

Some of the more useful samples you can go through are:

  • Animations
  • ComboBox
  • Countdown
  • DragDrop
  • HelloWorld
  • HTMLDetailsView
  • QueryAPI
  • RSS
  • XMLDetailsView
  • XMLHttpRequest

There are others too, but these are the one’s I found most useful. So, lookin at those options, a being an RSS freak, I chose to customize the RSS gadget for CSSKarma

CSSKarma RSS Gadget

Download CSSKarma RSS Gadget

The first thing to do is to make a copy of the RSS sample given with the Google Gadget samples. I did that (as a CSS person), I opened up the theme folder “default” and looked for “details.css”. I assumed this file would edit all the presentation for the gadget. It doesn’t. I only edits the flyout menu (after you click on a link in the RSS gadget). OK, that’s fine. So I enter this CSS:

body {
  color:#323F4C;
  background:#fff url(http://www.csskarma.com/images/bg_branding.jpg) no-repeat 0 bottom;
  font: 0.8em/1.5 Verdana, Arial, Sans-serif;
}

That will add my CSSKarma logo to the flyout and add some basic CSS. The other files in the theme folder to deal with are “entry_item.xml”, “theme_config.xml” and “title.xml”. After you look at “theme_config.xml” and “title.xml”, you’ll see why I think this is a little too modular. I left those two file alone. But I did edit “entry_item.xml”, view entry_item.xml. I edited some style information in there (one more thing I’m not thrilled about – embedding style info into the XML).

The next folder to tackle is “editme”. It contains 2 files (config_constants.js and entry_item_impl.js). In “entry_item_impl.js” you can edit the RSS nodes, if you want. I chose not to. In “config_constants.js” you need to edit the URL of the RSS feed you want to use.

The last thing I wanted to do was to remove the default background image from “main.xml”. When I did this, the background was transparent, by default. So in “main.xml” I added a background attribute of #FFFFFF to top level div (container). I also edited the height and width attributes of the “view” element for when the gadget is undocked from Google Desktop.

The outcome of this was the CSSKarma RSS Gadget (You’ll probably need Google Desktop installed to use this). A very basic RSS gadget made by making simple modifications to the sample files. Feel free to download, play around with it, and let me know about any errors you find.

Aptana Jaxter

Aptana Jaxter recently released “The worlds first Ajax server” (I have no date to back up the claim that it was recent). I’ve seen some web apps using this in integrating the Google API, looks promising but there’s very limited server space right now. I’d like to see how these can be integrated into the Mobile web. I don’t have too much information on it right now (and I keep losing the damn link).

That’s all I have for now.

With ease
Tim

Tomorrow’s CSS Today [SitePoint Article]

Posted on by

I wrote an article for SitePoint called “Tomorrow’s CSS Today: 8 Techniques They Don’t Want You To Know” that got published today. Let me know what you think:

http://www.sitepoint.com/article/tomorrows-css-today

With ease,

Tim

Also, I’d like to apologize for not participating in CSS Naked Day this year. With the SitePoint article going live today, I thought it would be a bad time to strip all the CSS from this site. I do, however, fully support it.