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.
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.
Matthew MagainMatthew Magain is a UX designer with over 15 years of experience creating exceptional digital experiences for companies such as IBM, Australia Post, and sitepoint.com. He is currently the Chief Doodler at Sketch Group, Co-founder of UX Mastery, and recently co-authored Everyday UX, an inspiring collection of interviews with some of the best UX Designers in the world. Matthew is also the creator of Charlie Weatherburn and the Flying Machine.
