When I determined how much content I wanted to deliver up front, I knew it would be a challenge to differentiate each section at first glance and to present it all in a way that wasn’t overwhelming or seem cluttered. This is where the use of colour comes into play. I love pink, and pink and black is the hottest combo ever. So pink represents this guy right here – whether it be the body of a post or a comment I’ve left. Green is “external” or off-site links and blue represents user feedback.

Once I had the colours all picked out, I adapted my mock to reflect them, sat back and said to myself “Holy hell, that’s ugly!” And indeed, it was. So much colour splashed all over. It just looked horrible. After removing the colour from everything but the headings, I knew I was onto something. That’s when I thought of only showing the coloured underlines on an area that’s in focus. I’ve seen similar treatments on a few sites (I believe the first time I saw this sort of thing was on the previous version Shaun Inman’s site.), but none quite like this. In all other cases, the effect was on the paragraph that was in focus, where as mine highlights the entire block of content.

For the rest of this example, I’ll be referring to the container on individual posts which holds the full blog post. It’s identified as ‘blog’ in the XHTML and CSS and has an accompanied class named ‘content’ (‘content’ is in a nested div on archive pages to ensure that each entry has the highlight effect instead of all of them at once). Pretty creative with naming conventions, I am. But hey, isn’t that the point of semantic markup?

First thing’s first – I setup link classes as I normally would.
[php]
.content p a:link, .content p a:visited, .content p a:active {
color: #FFFFFF;
text-decoration: none;
border-bottom: 1px solid #666666;
}

.content p a:hover {
color: #000000;
text-decoration: none;
border-bottom: 1px solid #d4366a;
background-color: #d4366a;
}
[/php]
As you can probably make out – that covers the ordinary white links with grey underline which changes to a black link with a pink background on hover. You might be wondering why I left the bottom border on the hover state – if you set the border on the hover state to [php]border: 0;[/php] the background will appear above the inactive link border making it look 1px less in height.

Now, to make those underlines highlight when the mouse enters the content area. By adding a hover state to [php].content[/php], we can change how the links will appear when the mouse is over the given area.
[php]
.content:hover a:link, .content:hover a:visited, .content:hover a:active {
color: #FFFFFF;
text-decoration: none;
border-bottom: 1px solid #d4366a;
}
[/php]
And to finish it off – the link hover state when [php].content[/php] is in focus…
[php]
.content:hover a:hover {
color: #000000;
text-decoration: none;
border-bottom: 1px solid #d4366a;
background-color: #d4366a;
}
[/php]
By now, you might have made the connection that you shouldn’t need to have standard [php]a:hover[/php] link class since technically, that state will never been seen. [php].content:hover a:hover[/php] takes it’s place. But, because of an ultra sucky browser that will rename unnamed, we do have to have that class. Why? Because this browser isn’t capable of rendering [php]:hover[/php] on anything… except [php]a:hover[/php]. And as such, IE users don’t see the fancy [php].content:hover[/php] link classes. Do I care? Hell no! That’s what they get for using a sucky browser! 😛

So, why did I apply the [php]:hover[/php] classes on the container ([php].content[/php]) instead of the [php].content p[/php] link classes? As I mentioned previously, I wanted all of the links in the focused area to be highlighted. If I had applied them to [php].content p:hover a…[/php], only the paragraph which is in focus would be highlighted. Also, by applying the [php]:hover[/php] states to [php].content[/php], the headings (as seen on archive pages) and meta links (tags, categories, etc.) are also highlighted.

There you have it. Pretty simple stuff – just took a little imagination to get it to behave the way I wanted it to.

What’s in store for Part 3? You’ll have to check back to find out…

12 Comments

I said it before – wicked design! Quite like the sectional highlight that you have going on… and everything else actually. great job!

Wow Matt, your handy dandy skills really show up! I have adaped some of these techniques to my new layout. Rember on the 5th of December it will be up! But for now I am having so much fun playing around with my css and learning new things! I want to thank you so much Matt!

Levi

Oh yeah, Matt your site, your content, your just overall vibe to the show is just amazing! I hit this site at least 3 times a day and I am subscibed to the feed….

I was wondering whether you’d fixed the hover for IE, I could never be bothered to open IT and check. There is no need to fix it, as it’s not mission critical behaviour and only niccities. Screw extra work in that respect.

Personally, I dislike that effect on most sites, but that’s usually because they don’t distinguish links unless you’re in the paragraph. This works as it only adds emphisis.

I doubt many of your target audience is THAT browser anyway. And your target audience is what matters anyway.

trovster,

Yeah my thoughts exactly. "This wouldn’t work in IE."

(and you might want to check IETab extension for Firefox, Seamonkey and Flock: http://ietab.mozdev.org/ I don’t open IE for anything. )

What i do when i want to fake :hover effects is turn the whole thing into an anchor tag…when it makes sense. Of course this isn’t feasible or needed in this case. Like you said, Matt was clever enough to provide a way to identify links even without this effect. It only adds emphasis.

From the usability point of view, it’s very well done. 😉

I use something of the sort for comments. But i only highlight the text color. This is so much better.

Levi: I’m so stoked to hear that I’ve inspired you to do some cool shit with your own site. I look forward to checking it out on Dec 5.

andr3: I tried out the IETab extension a couple weeks ago but didn’t like how there was no ‘open this page in new tab’ ability. I just reinstalled it hoping the new version would be able to do this, but alas, it does not. Maybe with a combination of the duplicate tab extension this could be useful.

I like what you’ve done with your comments. Good stuff!

Was wondering if you experimented with putting the portfolio section on the main page in the far-right column. In terms of eye-gaze it would be better to put the quicklinks (more frequently changing content) into the center column. That said, the portfolio pieces are a standand fixed-width and the text might look ugly in the middle. Unless you want the portfolio to be the first thing you see, which isn’t the worst thing in the world.

Yeah Matt… i noticed that too. That’s one of my biggest gripes with IE now… i’m middle-clicking on the links and nothing happens. The same happened when i tested IETab… It’s probably a good suggestion for the developers. Either include a submenu = "Firefox Menu", or use a combination of keys like CTRL+right-click for the native menu. Not sure if it’s doable, since they’re using the engine of the IE unchanged.

dave: I actually did have the Quick Links and Portfolio sections switched in the initial wireframe, but once I dropped the content in, it just didn’t look balanced. So you’re assumption as to why I positioned them the way there is correct.

yo! dude! wer can i get a design or template like yours for my blog?

help!?

P L E A S E. . . .

——————————–

SPACEMAN.COMS.PH

Great design, specially the sections and the grobbler; i finally managed to get some of ur section structure. I read in a reboot article you would release your site as a theme ?

Comments are automatically closed on articles over 5 years old.