Design Meme

Digg Effect

Hello to everyone visiting from Digg.com today. Dreamhost has set a connection limit to our site to allow only 25 users every 5 seconds in an effort to keep their webserver from crashing.

If the site doesn’t load properly, or you get a “Service Temporarily Unavailable” message, please be patient and try again in a minute or two. If you’re here to see the new Hoverbox Menu article, the nice folk at digg have also mirrored the page.

If this is your first time visiting, Top 5 Posts at Design Meme is a good article for reviewing some of the things I’ve posted here in the last few months.

Tags: development, hosting, tutorial
Posted in web design | 1 Comment »

Redesign 2006

This week you may already have noticed the newly launched version of Design Meme. It’s more of an evolution from the previous design, rather than a completely new direction. The overall darker design is something I had intended to do since switching from Movable Type to Wordpress and moving to the new hosting company. I also wanted to move away from the standard 2-column blog format a bit, and get a bit more creative with colours and typography.

Tags: blog software, hosting
Posted in web design | No Comments »

X-Ray Update Displays ID and Class Attributes

It’s been a couple of week’s since I posted an update—and time to get things back in gear.

Here’s another update to the X-Ray Extension, bringing us up to version 0.7 and adding display of class and id attributes for elements. This was a frequently requested feature, and now that it’s added I think it really adds to the extension. X-Ray will show the tags, class and id names for content generated by external javascript files, which makes integrating generated content like news feeds into your site’s design a bit easier.

The update.rdf file seems to be behaving a little unpredictably, so if Firefox doesn’t tell you an update to the extension is available you can install from here:

Install X-Ray Extension for Firefox

X-Ray is now available from the official Firefox Add-ons site as well, for the people who only install extensions listed there. As of this post they’re still showing version 0.6, but 0.7 should be available soon.

Thanks again for all the support.

Tags: designmeme, development, extension
Posted in designmeme, tools, web design | 3 Comments »

End of the Road for PV Comics?

I just noticed that PV Comics, the webcomic collective I was helping with in 2004, seems to have closed up shop.

We here at PV Comics would like to thank you for the support and readership we’ve enjoyed since our launch two years ago. We’re taking a step back for a while, and wanted to take a second to thank everyone involved – creator and reader alike!

It looks like you can still read all the comics that were published there, as well as check out the sites to most of the 20 listed PV Comics alumni.

What you won’t be able to see anymore are some of the CSS techniques I used when putting the site together. It was the second site I designed using the CSS Imagemaps technique that I developed into an A List Apart article called Night of the Image Map. The first site was Nate Piekos’ Dead Ends, Massachusetts which gave me an excuse to use the spooky theme.

Tags: design, webcomic
Posted in web design | 4 Comments »

New Firefox Extension: X-Ray

One of my New Year’s resolutions was to create an “interesting script, plugin, extension, or widget.” I didn’t think I’d write a Firefox Extension only six days into 2006, but after writing about using the CSS :before and :after pseudo elements to create CSS Curly Quotes, it got me thinking about other uses for that technique. I thought that wrapping the elements on a page with the actual tags from the sourcecode might be a good tool for learning and debugging, but wasn’t sure how to go about creating an extension. Fortunately, I found a great tutorial at roachfiend.com and with a little trial and error, I’ve finished my first extension.

The X-Ray Firefox Extension let’s you see the tags on a page without viewing the sourcecode.

Install X-Ray Extension for Firefox

One installed the X-Ray command is available by right-clicking as well as in the Tools menu. When applied to a page it can help you see how the document was constructed without having to go back and forth between the sourcecode and the page in your browser. Is that list made of li dd or p elements? Is that an h3 tag or just some bolded text? X-Ray shows you what’s beneath the surface of the page.

While I create webpages all the time, there’s something about writing a piece of code you have to install that’s very satisfying. Even better was finding that it was actually something I’d find helpful myself.

For version 0.5 the current list of supported tags is: h1, h2, h3, h4, h5, h6, p, ol, ul, li, dt, dd, font, div, span, blockquote, pre, a, b, i, strong, em. If some other people find this extension useful, I’ll probably add support for more tags, and possibly experiment with adding some other enhancements as well.

Update

By request from the nice folk at digg.com here’s a screenshot of the extension in use:

Donations to The X-Ray Tip Jar are greatly appreciated.

Tags: design, development, extension
Posted in tools, web design | 270 Comments »

New Tutorial: CSS Curly Quotes

It’s been a while since I posted a CSS tutorial here, so this feels like a good way to be starting the New Year.

Simon Collison recently explained how to create Swooshy Curly Quotes Without Images using CSS. It’s a nice technique that works cross-browser, but you have to add span tags to your markup for it to work.

I’ve written a short article outlining an alternate method for creating CSS Curly Quotes that requires no changes to your markup, and works in modern CSS2 compatible browsers like Firefox. Simon’s technique is cross browser, while my approach gives your cleaner markup. I can think of reasons to use both.

Read the article

Tags: design, development, tutorial
Posted in web design | 2 Comments »