CodeinWP CodeinWP

Rolled Out a New Design

New DesignI got ambitious this past weekend and slapped together a new design for this site. Nothing too drastic, just a basic re-skinning with some layout tweaks.

I’m not going to write a book here to describe it, but I did incorporate some interesting new things that I will probably write about in future articles.

Here are the highlights:

  • It’s responsive; my first real foray into this area
  • A simpler look that keeps focus on the content as much as is practical
  • The primary headings font is Gnuolane and I’m also using Open Sans Condensed from Google’s web fonts
  • A mega-large footer, just like all the cool kids have
  • Using HTML5 Reset’s WordPress Theme, which worked out really well
  • For the first time ever, I didn’t even try viewing it in IE6, but it does seem to work pretty well in IE7 and IE8

And here are the problems with the design/code that I intend to work on:

  • Way too many to list here, but (I hope) not too much that’s immediately apparent

I’d be happy to hear if anyone notices any bugs.

19 Responses

  1. Thomas McGee says:

    Like the new design! Nice and clean ;-)

  2. I think it’s a bit forgettable compared to the other one, I’d call it bland—says one who likes minimalism.

    A couple notes about the smallest “size” of the website: maybe the article images shouldn’t be hidden and there’s quite a bit of whitespace in the footer.

    • I expect a lot of people to feel it’s bland. I want to have as much focus on the content as possible, so I don’t mind. I think it definitely lacks some depth and texture, so maybe I’ll make some tweaks in the coming months. We’ll see.

      And thanks for the feedback on the small version; it definitely needs work. But for now, it’ll have to do.

  3. Pablo Lara H says:

    Congrats! I like a lot the nice animated transitions effects.

  4. Shameer says:

    Nice and clean design. Submit your site at new fast loading web ui gallery.

  5. Tim Normandin says:

    I find the clean look refreshing. But what I really like is the wealth of info to be found here.
    Kudos to you.

  6. Tamra Kehres says:

    Love The Website! Hope to continue reaching out to the comunity. Keep up the good and interesting articles.

  7. rrcalbick says:

    I particularly like the resizing transitions. However, I’m really not a fan at all of the super huge footer, not just on your site, but on sites in general. But, I’m a big fan of minimalism, which you adhere to pretty well, I just think the footer kind of ruins that…but again, more of a personal choice. Nice additions to the site overall.

  8. Cory says:

    You weren’t joking about the footer.

    The hover effects are neat.

  9. Michael says:

    I think it’s really fine. Except for the god-awful footer. I can’t understand why how this “design pattern” caught on, or why it is considered “cool”. It doesn’t look good, and in this case, it is far too large (which makes it look even worse).

    Of course, I’m one of the “less is more” camp, when I finished updating my site, it will have even less in the footer than now. I’ve come to the conclusion that almost anything can be pulled out of a site and placed in a separate page. So, I also think that the link list could do better on a links page.

    Of course, that’s just me. So long as you like it, I guess that’s the most important thing. :)

    (Also, your site comment system is broken without JS or cookies. I can’t understand why, as it should be a simple POST.)

    • Yep, I hear you about the footer. I honestly was not necessarily doing it just to “be cool”. I was only kidding about that. Right now, I just don’t have a portfolio site online (too lazy to build one, and I’m not really actively pursuing extra work) but I still wanted to have some of my work showcased, so that’s all it is really.

      Definitely too big, but it’s not affecting the content and purpose of the site in any way, so I don’t think it’s a problem.

      And about JavaScript/Cookies: The form will work without JavaScript, but I believe the cookies are needed for spam protection. I think there’s a plugin I’m using that needs cookies enabled. Although the error you saw says you need JavaScript and cookies, that’s not actually correct, it should say that it only requires JavaScript because cookies alone are fine.

  10. Ferdy says:

    Well done. I like how clean things are above the fold and the design looks simple and spatious. Good job on the responsive design as well!

    I do hate the font in the comments though, very hard to read. It could be me but the kerning between characters is absolutely terrible and inconsistent leaving large gaps between characters.

    • Ferdy, thanks for the feedback.

      That’s very odd that you say that the comments font is messed up. It’s supposed to be the same font as the body copy. Can you provide details on OS/Browser/Version? And maybe a screenshot?

      • Ferdy says:

        hi Louis,

        Sure. Actually, now that I have a closer look, I see that the problem is in the body text as well but much less visible due to the large size I guess. I’m using FF7 on W7.

  11. Scott Vivian says:

    I’ll be honest, my first response was “boring!” The structure is fine and focuses on the content but I think losing the blue was a mistake. Using colour doesn’t make anything less minimalist. The previous design of was a good example – a simple header with colour but still a focus on the content: (has since changed)

    But hey, I come here for the content rather than anything else :)

    • Yeah, that’s exactly my point — I want the content to stand out as much as possible. The “branding” should be the content, not the design, for a blog like this.

      But because of the simple design, it won’t be very difficult at all to update the header with a more textured look, or even change its color, so if I get sick of it, then I could easily change it. :) Thanks for the feedback.

  12. Zobia says:

    Awesome Design!

  13. mojo706 says:

    Without attribution! You are one of my best Tutors. About the redesign I like it think I should do mine now. Kudos, plus I also like the comment instant update!

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).