A couple of weeks ago I finished the redesign for the Sports Illustrated website on it’s  South African domain. This post describes a couple of notable points and challenges I faced when redesigning the existing site from the ground up.

The original site used a 3 column (broken) grid layout which, like most magazine sites, tried to pack as much content as possible into the available real estate. The lack of negative space created no focus areas and so you really only ended up focusing on the main story, which took up about 480px of web space. The two sidebars where lost in an orgy of cramped visual noise.

sports-illustrated-south-africa-original

The site in general was very text heavy and I thought that SI, being a very visual brand, could benefit from more real estate dedicated to the photography.

Early Build

One of the first reviewed builds for the index page.

Si-Build-early

The Grid

I don’t like two sidebars. I think it’s to0 distracting from the main content and it just doesn’t strike me as being semantic. I mean which sidebar is more important? The larger aside which contains all the promoted content like the ads, or the secondary content bar which contains other features of the site like popular and recent posts. Why not just combine them into one which will divide the content into logical primary (main) and secondary (aside) sections.

Being a commercial site they have a tendency to use 300×250 and 300×600 ad blocks so I was stuck with a 300px wide sidebar come hell or high water. That left me with about 680px  for content -30px for my gutter (I like big gutters).

The concept of making the site more image-based by adding one featured image block which extended across the whole main content area without any truncated copy went down well. It’s really refreshing to see a new hi-resolution photograph everyday, click on it, read the story behind it.

I put 3 category blocks below the featured image which held the content for their primary/popular categories. The SA site doesn’t have as many writers as it’s US counterpart so 3 was sufficient. Of course this can be extended in the future should they want to hire more writers.

The color palette

I used a combination of light marble grey, dark slate grey and the official SI Red. I always try to keep colors to a bare minimum. You really only want one accent color. I’m very happy with the way this color palette works on the final site. The light marble grey provides a sense of open space in the background, the heavier slate grey grounds areas of the site like the header and footer and the SI red accents active or “clickable” areas beautifully.

The banner ad

Oh 728×90 leaderboard ad, though art the bane of my existence.

Yeah so everyone wants a 728×90 ad at the top of their site. It’s high valued real estate and can bring a lot of money into the site on a month-month basis. I can ‘t stand them because of their width. 728px is the most awkward width in the world to work with because it doesn’t fit into any grid under the sun. And of course it’s completely incompatible with mobile devices even if you use the img{max-width:100%} trick because when scaled proportionality to 360px wide, the leaderboard is 45px high which makes it unreadable.

I’ve found that they’re only two options here. Either squash the banner ad in next to the logo or make an entirely new section above the header devoted just to advertising. I went for the latter in this case.

Firstly putting two elements next to each other creates an obvious visual comparison. Because the SI logo was about half the width of the leaderboard banner, it gave the banner more visual weight which, thinking about it hierarchically, denotes that the brand in the ad banner is more important than the SI brand. That’s a no-no.

Secondly I felt that putting the banner above the header creates an obviously disconnect with the rest of the site. “That’s advertising. Ok get on with the rest of the site now.”

Thirdly it’s much easier to work with in regards to responsive design.

Of course it’s not all roses. Adding a leaderboard above the header pushes your fold down which is not a plus, but in this case it was the lesser of two evils thanks to a relatively  short header.

 

After Further Review

After a few weeks of reviews and Re-reviews the layout was changed slightly. The Latest posts section was moved underneath the content area to create a main content/sidebar balance and a quote widget was added into the header to better balance out the logo with the ad above it.

I’ve grown fond of the quote widget. I think it adds a nice organic touch to an otherwise fairly static and inorganic header.

Si-Build-final

 

The final sports illustrated website

At the end of design I had a total of 10 templates for the various sections of the site. Some of them haven’t been implemented at the time of writing like my Subscription page designs. Overall though I’m very happy with how the final site turned out. It can be viewed at www.sportsillustrated.co.za

The site was developed by Lightspeed.