The SitePoint Blog Redesign: A Process Revealed

Matthew Magain

If you’re viewing this post in your web browser, you’ll have noticed that the SitePoint Blogs have received a bit of a makeover. This redesign is the first step in our attempt to consolidate the various visual styles in play across all of the sitepoint.com sub-sites. We like the new look, and we hope you do too.

The Why

sitepoint.com has been running for over 11 years, and serves millions of page views each month to its visitors. Because it has evolved in a piecemeal fashion, it now serves a varied set of users and is spread across a variety of servers. One of the side-effects of having such a fragmented collection of sites is that you end up with a site that lacks a unified, modern aesthetic. It’s time for that to change, beginning with these blogs.Additionally, as you may have read on other blogs, Adobe’s latest version of their Creative Suite offering, CS5, launches today. I was lucky enough to get hold of a pre-release version of the suite, and decided to put it through its paces when working on this redesign. As I’ve detailed below, some of the new features helped make the redesign process relatively smooth.

important: The Disclaimer

Look around and you’ll notice there are banner advertisements for the Adobe CS5 suite. Here’s that all-important disclaimer: Adobe is an advertising partner here at SitePoint. As I mentioned earlier, I was lucky enough to be provided with a pre-release copy of CS5, so you shouldn’t read this as an independent review of Dreamweaver or Photoshop. I did, however, use both of these tools to redesign the SitePoint Blogs so as to coincide with the CS5 launch. What I’ve written here is an insight into that process.

The What

Layout

The biggest change to our blog template is our move to a fixed-width layout. Traditionally, sitepoint.com has stuck to a fluid layout. However, the debate for whether a fixed or fluid layout is better is one that has raged for years. After considerable thought, we’ve decided that for an ad-supported content site like sitepoint.com, providing a fixed width provides us with a more robust platform for delivering ads and content, side-by-side.You’ll also notice that switching between blog categories is now much easier with the tabs at the top of the page. We may not be breaking any new UX ground here, but suffice to say that tabs are popular because they work well — especially in situations like the blog categories we have here.

Colour and Style

SitePoint’s brand colours of orange and blue, while complementary colours, are a challenging combination to work with. Use too much blue, and you run the risk of creating an interface that is cold and sterile. Use too much orange, though, and … well … I think there’s only one man who can get away with that. The combination of different shades of blue combined with bright, punchy orange buttons strikes a balance that we’re happy with, and plan to roll out to other parts of the site. The orange RSS, Search button, Retweets, Newsletter signup and other calls to action brings warmth to the otherwise cool foundation that the blue provides.I’ve only briefly touched on our thoughts and the steps that we took to arrive at the user interface you see and the mood that it portrays. I plan to post a follow-up post that elaborates more on how we arrived at where we are.

The How

As I mentioned, the mockup for this redesign was created in the pre-release version of Photoshop CS5, and Dreamweaver CS5 proved itself a worthy editor when coding and styling the WordPress templates.

Photoshop CS5

I didn’t really tap into any of the funky new stuff in Photoshop CS5 when designing the new blogs template, such as the much-talked-about content-aware fill or the new 3D features, so I can’t profess to have explored its full potential yet. However, from what I can tell Adobe have added a ton of features to this version of Photoshop. If touching up photos and digital painting are what you use Photoshop for, then there are some exciting new tools to play with, so definitely check it out in order to decide for yourself whether it’s worth the upgrade or not.

Dreamweaver CS5

Dreamweaver certainly held its own as an HTML and CSS editor. New features such as the related files are a huge aid when navigating your way through WordPress templates, or dealing with a stack of CSS or JavaScript with which you’re not familiar (think: large teams working on a large site).

The related files feature of Dreamweaver CS5 displays externals JavaScript files, style sheets, and files included on the server side.

The most useful new feature for me personally, however, is the new Inspect mode.Inspect mode is pretty self-explanatory. It’s basically the Inspect Element feature of Firebug, incorporated right into your code editor. To enable Inspect mode, simply select Split View and then click the Inspect button. You can then hover over a region of the page, and you’ll see the relevant part of your source code become highlighted, much like the DOM tree in Firebug.

In Dreamweaver CS5′s Inspect mode, you can hover over regions on the page; the relevant source code is highlighted — even when the content is dynamically generated!

Even cooler is the fact that this functionality is not limited to static files. If you’re coding a WordPress or Drupal theme, for instance, you’ll still find this useful. It’s possible to set up a local staging server (something that I usually do anyway). Configure the staging server in your Dreamweaver project, and you can inspect your dynamically generated content. I can see this being an insanely useful feature for web developers, and is a welcome addition for this Dreamweaver user.

The Competition

As part of Adobe’s launch campaign, Behance.net is holding a competition to giveaway 5 copies of Adobe CS5 Master Collection every week for 5 weeks. Screenshots of the sitepoint.com redesign are proudly displayed as a Before/After example on the contest page, along with other participating sites that redesigned using pre-release versions of Adobe CS5. If you’re interested in winning a copy of Adobe CS5, you should definitely consider entering!A big thanks to everyone in the SitePoint Forums who provided feedback to help shape this design. There may be a few styles that need tweaking—let us know your thoughts on the new design, and if you notice any quirks on the site.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • kingkool68

    Looks good. I like the cleaned up look. Dreamweaver CS5′s inclusion of WordPress code hinting is welcome by me as I’m moving 5 sites to a WordPress MU install in the near future.

  • Ben

    This looks so much better! Great job on the re-design!

  • AndrewCooper

    Fantastic! I love it! Really, it’s great that you’ve moved to a fixed-width design and I love all of the design elements! Everything is much more modern and actually feels even more professional than it did before. I also like what you’ve done with the buttons for subscribing and so on. Very nice.

    I seen the new blog layouts today at college and it doesn’t look very nice at all! The college computers use Internet Explorer 7 though. Have you not done the design for IE8 and the most recent versions of the browsers but also done an IE7 stylesheet too? It’s up to you guys at SP HQ and whatever your Web browser statistics are but bleh. Just letting you know the design is screwed up a bit in IE7.

    I hope you’ll role out this same / similar design across the whole of SitePoint.com too! I can’t wait!

    Andrew Cooper

  • http://fcOnTheWeb.com ferrari_chris

    The new design will take some getting used to I think.

    Also, I think you might have issues with your old posts being all over the show. But it should be good for the new posts I reckon.

    I watch with interest…

  • paro

    Regarding the whole fixed width vs fluid thing, why not have the best of both worlds with something like the following.

    #content { min-width: 950px; width:80%; margin: 0 auto; }

    Instead of:

    #content { width: 950px; margin: 0 auto; }

    That way it won’t look really skinny on wide screens.

  • hairybob

    It looks kind of dated to me. I would have expected something a little more fresh and funky from sitepoint. The new (Back to the future) design looks like a vanilla blog (blogger) theme from 2004. Just my 2c.

  • http://sffarlenn.net Laneth

    I’m liking the simplified and intuitive new look to the SP blogs and look forward to the changes as they sweep across the SP network – Awesome work!

  • http://www.magain.com/ Matthew Magain

    @Andrew Cooper: The biggest IE issues should be mostly resolved. There are a couple of tweaks to the comments that are outstanding, but we’ll get them fixed asap.

    Glad you like it guys.

  • http://www.magain.com/ Matthew Magain

    @hairybob Thanks for the feedback. The goal was to find an aesthetic that still has some elements of “fresh and funky” that you’ve mentioned with the fact that SitePoint is a respected and reliable publisher. Sorry if we didn’t meet your expectations. Hopefully you’ll agree that it is an improvement on the previous design though!

  • Anonymous

    The new design looks good to me. I have one problem though: When I open any page of Sitepoint, my browser slows down until I am about halfway through the content before it responds as normal. I use Firefox 3.6.3 on Win 7 Pro 64x.

  • AndrewCooper

    Hey again! I’ve just been reading through some more blogs / articles on SitePoint and I’m not too sure whether you’ve added any JS to some items on the page but when I hover my mouse over items like the “This Week” and “All Time” under the “Popular Posts” box the title tooltip gradually appears and gradually fades. The same goes for when rolling over image advertisements such as the 5 weeks of 5 advertisement.

    Another one was in James Edwards’ article about the Cooler Focus Caret where I hovered over the word CSS which says “Cascading Style Sheets”. Again, the appearance and disappearance was gradual, as if JS has been added. I thought it might just be my browser being a little pissy (IE8) but I reloaded the Web page several times and tried a few other blog posts and it’s the same everywhere except for the main site.

    Is this a new feature you’ve added? I would be very happy if you took it away as it’s very annoying. When I hover over an element I want the extra information as fast as possible, not to be waiting for a second for it to appear and then fade away! Oh, and I don’t want the answer to this to be: “Sorry if we didn’t meet your expectations. Hopefully you’ll agree that it is an improvement on the previous design though!” As I won’t accept it. The design is much better yes, but the functionality of the tooltips is terribly annoying. Please do something about it, if it is indeed an issue on your side.

    Kind regards,

    Andrew Cooper

  • http://www.brothercake.com/ brothercake

    Andrew – the tooltips are nothing to do with us, it’s something in your browser. Sounds like a very heavy CPU load causing a rendering lag, to me.

  • shadow_slayer15

    I wish I knew where you got the pre-release version of the CS5 Suite. I looked everywhere for it and couldn’t find it.

  • http://sffarlenn.net Laneth

    @shadow_slayer15 – I think that it was an invite-only pre-release. Everyone that’s writing about it is saying they were invited by Adobe to try it out and review it – don’t think there was a public beta.

  • KiwiJohn

    In IE 7, FF 3.5.8, and Chrome 5, I find the bottom half of the Flash ad covers the disclaimer and in Opera 9.6 the bottom half of the ad is covered by the disclaimer. These are the only browsers I have tried.

  • http://www.magain.com/ Matthew Magain

    @KiwiJohn We’re still tweaking and introduced a rendering bug for a period of about 20 minutes today—are you still seeing the issue? It may be that you caught us at the time when the behaviour you’re describing was occurring.

  • dawgbone

    In the comment section the profile pics often cover part of the username in ie 8.

  • http://www.madmacreations.com TMacFarlane

    Just wondering: Did Adobe upgrade Spry with this new release? Or is the framework just gonna languish and force those who started out believing in it to eat crow while they study jQuery?

  • arts-multimedia

    Looks very good and clean, like a blog should be, not too much tralala :-)
    My compliments!

  • KiwiJohn

    Matthew

    Yes, it is fine now.

  • Jimi Bostock

    Great blog. As a long time SitePoint lurker, I certainly noticed the change and for the better, not that it was so bad.

    While you have been rightly geeky with the post, what I do like is that it reveals some of the thinking one needs to do when considering tools and approaches.

    So, that said, I am off to win a CS5, thanks for the tip

    Jimi Bostock
    PUSH Agency
    Brisbane | Canberra | Sydney | Australia
    pushagency.net

  • runa

    Thanks for sharing this beautiful blog!!!!!!!!

  • runa

    Thanks for sharing this beautiful blog!!!!!!!!