Some Folks go Sans-CSS

April 05th, 2007 | Nerdery | Syndicate Content

Today is “CSS Naked Day” and many (over 1,500) folks are displaying their site plain and simple. I’m not participating because honestly, I don’t know how to strip my site of CSS. I know I could have figured it out in about 3 seconds, but I didn’t have the energy. However, 3 friends of mine have striped their sites. Here’s some screenshots: Who’s looks the best to you? UPDATE: Josh Hawkins joined the fun. Yeah boooyyeee.

OpenSwitch.org

PomoMusings.com

Ronalfy.com

JoshuaHawkins.com

15 comments

15 Comments »

  1. Ronalfy said:

    Of course mine :) jk.

    Let’s just say I have a lot of work to do for next year. I forgot to strip out my conditional stylesheets for Internet Explorer, so my site is not completely naked.

    I like PomoMusings.com the best out of the three examples.

    Posted on April 5, 2007 at 11:08 am

  2. Chris (aka BurritoChriS) said:

    This is a fallen world God established that clothes should be worn. Keep your CSS all the time…naked is not good!

    Posted on April 5, 2007 at 11:56 am

  3. {Shawn} said:

    I was going to vote for Adam’s (pomo) but now I’m voting for Josh’s. Only because I owe Josh everything I know about websites.

    Posted on April 5, 2007 at 2:43 pm

  4. Ben G. said:

    Part of the issue at hand, I’ve found, is that as more and more people are using images for their titles instead of text they are completely removing the <h1> element from their blog, like Pomomusings does. This isn’t a good thing because from a text-only perspective, as you can see, there is no blog title. I’m fairly sure that not having an <h1> title on your site adversely affects your google-search-ability. H1 tags are necessary, folks! Even now, after putting back on my stylesheet the H1 tag is still there, but the H1 text is indented off the page so you never see it.

    Posted on April 5, 2007 at 9:00 pm

  5. {Shawn} said:

    @ Ben: Good eye. How do you have an h1 title tag without it being visible?

    Posted on April 5, 2007 at 9:10 pm

  6. Ben G. said:

    Here’s the HTML:

    <div id=”header”>
    <h1 id=”blog-title”><a href=”<?php echo get_settings(‘home’) ?>/” title=”<?php bloginfo(‘name’) ?>”><?php bloginfo(‘name’) ?></a></h1>

    </div><!– #header –>

    Here’s the CSS:
    div#header h1#blog-title {
    text-indent: -9999px !important;

    }
    div#header {
    width: 860px;
    height: 102px;
    background: url(‘images/logo.png’) left no-repeat;
    margin: 0 0 3px 0;
    }

    Depending on the situation I suppose you might need a display:block in there somewhere, especially if you want your header graphic to be clickable. Me, I didn’t want it clickable on purpose. If you do want a user to click on the header image and have it take them back to the front page (or where ever) then I think you’ll have to style the ‘h1 a’ as well. It’ll look something like this:

    #header {text-indent: -9999px; width: 810px; height: 142px; background: #013356 url(‘images/logo.gif’) no-repeat; }

    #header h1#blog-title a {display: block; width: 810px; height: 142px;}

    CSS needs may vary but that’s basically what it’ll look like. You’ll have to fool around with it to get it just right though.

    Posted on April 5, 2007 at 9:21 pm

  7. Ben G. said:

    Keep in mind, though, that there’s always a possibility that I’m wrong about needing an h1 element. I’m just going on what I’ve heard.

    Posted on April 5, 2007 at 9:27 pm

  8. {Shawn} said:

    Thanks Ben. I learn something new every day.

    Posted on April 6, 2007 at 5:49 am

  9. Ben G. said:

    No problem ;)

    Posted on April 6, 2007 at 7:13 am

  10. Evan Olsen said:

    I actually found it really funny that you called it sans-CSS..

    CSS is such a cool thing, but without it..uh..yeah.

    You’ve seen the CSS zen garden, right?

    Posted on April 6, 2007 at 10:03 am

  11. {Shawn} said:

    @ Evan: CSS zen garden was my first introduction to CSS. I was clueless. It wasn’t until I started tweaking and breaking my wordpress theme that I CSS started making sense.

    Posted on April 6, 2007 at 12:29 pm

  12. Evan Olsen said:

    Yeah, me too..I didn’t get it until that site. I don’t understand most of it, besides basic text editing type stuff. I took some online free courses to see if I could learn it better, but the guy teaching wasn’t very smart…heheh.

    Posted on April 6, 2007 at 1:27 pm

  13. Ronalfy said:

    I didn’t get CSS until I read “Designing Without Tables.” A lot of it is figuring out what doesn’t work in which browser. :)

    Posted on April 6, 2007 at 1:30 pm

  14. Jen said:

    Oh man, my site without css would be soooo ugly. Like a little old man, all wrinkly. And naked. Best not posted.

    Posted on April 21, 2007 at 3:11 pm

Dem's fightin' words...