Redesign

It’s time it’s time, to redesign. I’ve gone back and forth with this site quite a few times. From trying to go minimalistic and send people to my projects elsewhere, to being blog/writing focused. This time I’m trying to do both, but have a home capable to housing and publishing content very well. My goals:

  • Facilitate all the older blog content, while building a nice environment for future articles.
  • Treat “link” posts differently.
  • Showcase my other (more important) projects on the homepage.
  • Redo my portfolio to be a little more classy than it was before.
  • Have fun with typography and new technologies like HTML5 and CSS3.

Articles

If you are reading this post directly on the site, you are looking at the new format. I like it. I think it’s sexy. My favorite part is that there is ample margins on both the right and left, so I can play around with formatting and do dramatic things like have a basketball player going in for a dunk jut into the text (and all it takes is some simple CSS classes). These images might be awkward in RSS, so I hide them with inline style (display: none;) and then bring them back to life in the CSS with (display: block !important;). That technique failed. I may need to look into using empty divs with background images instead to keep purely decorative images out of RSS.

Link Posts

I use a WordPress plugin called Postalicious to import my Delicious links and turn them into blog posts. I like moving that data over here, because I think it makes for good blog fodder and then the data is under my firm control. But links posts are decidedly different than other written articles, so this new design treats them differently. The latest is shown on the homepage, but the other recent links are only to actually written articles, not link posts. The blog page also only shows real written articles, relegating link posts to it’s own section.

Showcasing Other Projects

The homepage still has prominent links to the other stuff that I do. I’m still not entirely satisfied with this area though. Not sure why. Will work on that.

Portfolio

My old portfolio used some fancy JavaScript and all sorts of animations and such. It got old to me quick, so this new design features really simple text and screenshots and I think it will be a more timeless approach for me.

New Technologies

This website is marked up in HTML5 (view source and check it out!). It also uses all kinds of CSS3 stuff from rounded corners to RBGa to transforms and transitions. I’m only using a touch of jQuery to solve a little tiny problem I’ve never had a great way of solving with CSS (I’m using padding and background on links inside articles, and I can’t figure a way to use CSS only to remove those properties when a link contains only an image).

For this fancy font (Skolar), I’m using TypeKit.

Let Me Have It

Like it? Hate it? Find bugs? (There are surely some bugs)

Comments

  1. WOW!!

    Really love this design!

  2. Becca says:

    I like that it’s a dark site, but also readable. The background texture is cool without being over the top. Simple and sophisticated. Well done!

  3. Jad Limcaco says:

    Great job on the redesign. I really like the way you can format your posts to have those images like that basketball player. Really cool!

  4. Ash says:

    Great job, Chris; An inspiration as always!

    Especially love the typography!

  5. Nice! I like it. It’s so hard to find time to work on your personal site when you are busy with client work.

  6. chrismtp says:

    Great job. Love the color scheme. I’m not a fan of Georgia or Serif fonts. It’s a little hard on my eyes, but great design!!

  7. Ryan Olson says:

    Chris I love the new site man, sleek and clean! I look forward to seeing all you do here. You rock.

  8. Wes Bos says:

    Pretty nice site. How do you change the highlight colour?

    The font is terrible, barely readable.

  9. Wow. This looks very good … love the site! You managed to do this within a few days or were you able to recover your files after all?

  10. Andy Shaw says:

    Looks awesome Chris, Skolar is the shit. Really dig the way you layout the posts. Comments look great too. Small thing, maybe add 20px padding to the bottom of the body to let the footer breathe a little more.

  11. Arda Kilavuz says:

    It looks nice but please change the font :)

  12. MBJ says:

    Great site, Chris. Nicely done as always.

    On your “Showcasing Other Projects” goal, what if you had one of your headings (H3s similar to the ones you have on the left) sticking out from the right side there – between the photo of you and the screenshot thumbs. Call it “Other Projects” or “My Other Websites” or whatever.

    The wide aspect screenshots/links are cool but that heading might provide the context for people who need an introduction to what you do. Just a thought.

    Thanks for your work.

  13. Brian Yerkes says:

    I agree about the font. It is thick and clunky and hard on the eyes. I’m viewing it on a PC, FF 3.5.4 , 1680 x 1050 if it’s any help.

    I like the use of html 5 for the links with borders, and your styling on the h3’s are nice.

  14. Brian Yerkes says:

    Just had a look in IE7..font looks much better but the h3’s and the comments background are seriously black, whereas they are grey in FF and Chrome. Everything looks nice in g chrome

  15. Nikola says:

    awesome! great work

  16. Return says:

    Well, i really like the design, however i personally think
    that the font may need a lil bit of letter-spacing..
    my spec ff 3.5 / 1024×760 / winxp

    On a PC sometimes it gets bold or something O.o
    Don’t be so hard on pc users xD

    Best Regards from Argentina,
    Return;

  17. Wes Bos says:

    Yeah, this is what it looks like on FF/ Windows 7

    http://screencast.com/t/xMgMqcVzkFw

    And with a slightly larger font and 2px letter spacing it looks much better:

    http://screencast.com/t/sP3Unj1B5F

  18. Chris Coyier says:

    @Wes – I think the first screencap is more attractive and readable.

  19. Daz says:

    Chris, I quite not fully understand the problem with the links you can’t fix with CSS only and need a bit of javascript for it…

    Is that so?
    “You have anchor tags with text to which you add padding, and would like to remove the padding with the content is not text but an image” ?

    If I understand it correctly, have you tried negative margin for the image inside those anchor tags?

  20. Looking good, and that font looks great in Safari 3 on a PC.

  21. Return says:

    Well, this is how i see the fonts:

    http://img197.imageshack.us/img197/2348/ccfont1.png
    http://img5.imageshack.us/img5/8010/ccfont2.png

    The “L” gets bold or something like that and it’s really
    different than the screens from Wes :/

    Maybe is a problem with my pc xD dunno..
    btw sorry for my english..

    Best regards,
    Return;

  22. Chris Coyier says:

    @Return – Now THAT looks like crap! Is this the only site that looks like that or do you have font rendering problems in general?

  23. Return says:

    First time i see a font rendering like this..
    In Chrome looks really nice and smooth, IE same as chrome..
    so probably there is a problem with my ff rendering this..
    Cause Wes screen looks nice as well, maybe FF in XP renders it like this? I will ask a friend if he has the same ‘problem’ and i will let u know

    I hope u understand what i’m trying to say here..
    My english is gettin’ worse every day.. haha

    Best regards,
    Return;

  24. Aziz Light says:

    This is amazing. I L-O-V-E the new design! Good Job!

  25. Ben says:

    Very nice, if that doesn’t get you new clients I don’t know what will.

    One thing though, I don’t really like the font. It sort of looks like chiller or something.

  26. Drew says:

    Dig the new design, but I’m not a big fan of the font. Maybe it’s a little trendy, but I thought Segoe UI worked well via Firebug.

  27. Guillermo says:

    Great job. I actually like the typeface — but I’m a weirdo.

  28. Greg says:

    Typekit isn’t working out I don’t think. I get anti-aliased but fuzzy boldy-looking text in Fx 3.5, aliased-to-heck text in Opera, and reasonable (although it might be my imagination and it might actually be the same as Opera).

    I’m not ruling out my monitor as a culprit (though it’s the richer of my two monitors in terms of color) but the design doesn’t have enough contrast in the one monitor. I have to view in my “too bright/cheap” monitor to see the design as I suspect it was meant to be seen.

    While I’m busy with “constructive criticism,” although your other projects are somewhat showcased on the Home (as per your goal), if someone enters your site through a blog article, they might not take that step to your home to see what else you offer. It would make sense to put some sort of “advertising” to your other projects persistent throughout the entire site.

    Design by committee sucks, though, so ignore us. ;-)

  29. Greg says:

    Missed a whole phrase…

    “reasonable (although…) text in Chrome.”

    Also forgot to say something positive–

    I’ve also been a sucker for JavaScript animations and so forth, and I think it’s a good move going with less. I’ll be trying to follow suit in my own endeavours as well.

  30. Grant Z says:

    Chirs, I’m a fan! Great look. Very original and creative.

  31. bobsoap says:

    Re your background and padding issue with image links:

    a { padding:2px 5px; background:#f00; color:#fff; }
    a img { margin:-5px/*right here*/; }

    :)

  32. bobsoap says:

    Oh, and great redesign by the way! I love what you did.

  33. Monika says:

    Hi I can’t scroll on this site, (browser flock) and in this browser your layout looks very creative ;)
    I have to use the scrollbar of my browser – I don’t know why but this is very unhandy.

    regards
    mts

  34. Josh says:

    It’s a pretty nice look. Not a lot of “wow” factors, but it’s extremely functional. My only complaint is that font a the top in the header is just a little too eye wrenching.

    Possibly keep that font as a background, make it like #eee and then use the same red and font for your name as your h3’s?

  35. Ugly Redesign says:

    Really crap! Like the css-tricks site much better, you should have put more effort into this one. So ugly!

  36. Oleg says:

    Hi. Look your site in Chrome. Your embed font is missing “E” and “I” letters, so i read: LAV A RPLY, LT M HAV T and other incomplete titles. Check ;)

  37. Jeremy Davis says:

    Are you keeping your old design up somewhere like v2.chriscoyier.net?

    Not that I dislike the new design, I just liked referencing the old one because I liked how the old one keep the opacity down on peripheral items until you hover over them.