CatCubed redesign

Nov 2009 28 – Filed under code + design

I’ve been inspired… and I have a long weekend, which means that I’ve spent the last couple days buried in my laptop. My back aches, my eyes are screen burned, but nothing stops the freight train called inspiration.

Cube The CatI give you the new and improved CatCubed.com! Also, I’m releasing Mr. Cube the Cat as an adorable papercraft doll that you can make yourself! Like the new version of the site, he’s still in beta but he’s stable and I’m releasing him into the world anyway!

Download the Cube the Cat, papercraft PDF (version 0.6 beta).

Yep, I’ve gone and scratched that designer itch that has been bugging me for a while. I’ve decided to use CatCubed as a means to experiment with new web techniques. Besides the cute little paper Cube the Cat, the new site includes:

  • HTML5 semantic structural elements – minimizing the use of divs except where appropriate. I’m still not perfectly happy with the semantic structure of the HTML. Some limitations were due to the layout particulars and the wordpress CMS. I will revisit this at a later point so that it is more in line with proper HTML5 semantics.
  • Extensive use of new CSS3 styles – multiple background images, rounded corners, rgba, box shadows, etc.
  • CSS built using SASS
  • Simplified navigation – Got rid of the sidebar modules clutter. Also, post categories have been reorganized with a focus on the three main things I write about art, code, design.
  • Coming Soon – more robust art, code, and design sections with highlights of my various projects. Mobile version of the site (it’s a image heavy site now, so I think a mobile version is in order.)

The site works best in webkit browsers (e.g., Safari, Chrome, or Internet Explorer with Chrome Frame). If you are on a gecko browser (Firefox, Camino) everything works but you are missing a few design elements due to lack of Firefox’s ability to use multiple background images (this is supposed to be added in Firefox 3.6). I have not tested the site in Opera, but Opera is decent so it should work (except for some of the CSS3 styles). I also haven’t tested in any version of Internet Explorer, and I don’t plan on it. I’ve added the HTML5  shiv so that IE will recognize the HTML5 elements, but considering the fancy things I’m doing with floats, it likely fails pretty bad.

I’ve kicked this whole thing out fairly quickly and I’m experimenting with a few things so there are likely a few issues here or there. If you are running webkit (Safari, Chrome) or gecko (Firefox) and run across any bugs let me know.

I have a few additional things I want to do to this site over the coming weeks and months. So expect to see more changes.

7 Comments to:
“CatCubed redesign”

  1. meligrosa 29 November 2009 at 12:14 am #

    ur so nerdy and creative, I love it!!
    :D long live ajax, I mean HTML, and sudo coffee . yes ;-)

  2. [...] more: CatCubed » CatCubed redesign This entry was posted in HTML5/CSS3 and tagged css3, html5, internet, internet-explorer, opera, [...]

  3. Marshal 29 November 2009 at 8:49 am #

    Very cool design. One of the best. Reall like the changing background images on the right.

  4. Colin 29 November 2009 at 12:57 pm #

    Thanks for the compliments!

  5. liliffi 30 November 2009 at 7:30 am #

    1. Scrollng makes so much sense for reading the text. 2. Background whimsical yet not distracting. 3. Perfect choice of Caption Font in your most original logo design 2.5 The multiple choice selection of Subcaption ingenious. 3. Color theme very pleasing.

  6. Thomas Bacon 21 December 2009 at 4:45 am #

    wow; brilliant design. I keep scrolling up and down and up and down even though I’ve already read the post :)

    Only issue in Safari 4 Mac and FF Mac the comment form CSS is awkward; I can’t actually tell if it’s a bug or intentional, but “Username” is above it’s field but the other 3 labels are to the right.

  7. Colin 22 December 2009 at 12:52 am #

    @Thomas thanks for the heads up. Fixed now. (I had it fixed before but it got reverted somehow.)


Leave a Reply