Our Mindfly Blog

Website Design and Development

Random creative design element

Creature Feature: Active Page Highlights with CSS

by Karina Beattiger 15.April 2008 09:24

With WD Weems out of the office, it's time I seized control of all things Mindfly blog-like and make my coup.  Translation:  He's running late on blog posts and is guaranteed to shoot me evil, evil looks as I do my third post in a row.  Mwaha.  Mwahaha.  Haha.  Ha.  So, today's episode of the Hitchhiker's GuideMindfly blog is a Creature Feature.  There won't be any vampires, werewolves, and mummies, oh, my!, but there will be various annoyances, evils, and detailing that clients (and, yes, designers) sometimes ask for and want.

These are personal interests that I run into now and again, bits and pieces that I don't initially know how to do, or run across, or end up -- such as this particular bit -- being shown by Kyle's mad Google skillz.  

Here we go.  Lights, camera... For a website we had to do recently, one of the requests was that the drop-down menus would highlight to dark blue on a rollover, and then stay that way when you click on any of the pages in said dropdown.  To date, the only way I knew how to do that was through javascript.  A viable option, but for those of us still struggling to master javascript, an annoying one.  I can't tell you how many times I have to get Kyle over here to do some simple bit of coding because I'm still trying to figure out if, else, then, blah.  (Rumor has it that Andy Clarke once said at a conference that he's been known to hire other people to do his javascript for him in a professional environment.  This makes me feel better.  That being said, I think he's a wizard at code anyway, which sort of takes away from my inner contentment and spiritual well-being as a code-challenged individual.  I have a sneaking suspicion I should get off my horse and actually learn what it is I'd be contracting out to other people: just because I want to go home and play World of Warcraft doesn't mean I should. ...Right?)

Anyway!  The point here is that we at Mindfly feel that such "You are Here" indicators are essential to the complete website experience.  It's nothing short of annoying to find yourself on a website where you have no idea where you are based on a quick glance.  Whether it's done with headers or with visual cues, it allows your viewer (reader, customer, rabid fanatic stalker type, whatever) to know where she is in the space of a moment.  If you have the kind of site that has layers upon layers oflinks and sub-links, it definitely helps a viewer keep her place mentally.  No one likes having to search through a dozen links trying to figure out which section she's currently in.

So, with little enough ado, I summoned WD Weems, pointed to the screen, and said, "Quoi?"  (Fortunately, he's learned to recognize what my various nonsensical sounds mean.)  Since inputting yet more javascript on every page we make is not the most ideal solution -- after all, the more javascript you put on a page to load, the longer it takes, not to mention what happens when a user disables javascript -- we wanted a solution that would still work in most cases.

Enter active page highlighting with CSS. This is exciting stuff.  This is... years old.

Oh, boy.  Aren't I the slow one?  Apparently, the only way to learn stuff is to research it, even years after it's been written.  Seriously, who knew?

Comments

Andy Clarke

Andy Clarke said on April 20, 2008 (13:22)...

"Rumor has it that Andy Clarke once said at a conference that he's been known to hire other people to do his javascript for him in a professional environment"

Every time! I have no knowledge of any scripting or programming, I know no Javascript, PHP or anything similar and I have no intention of learning.

I just concentrate on what I enjoy, markup, Microformats and CSS.


Karina Beattiger

Karina Beattiger said on April 21, 2008 (08:31)...

@Andy: You are a terrible, terrible influence on my code-learning ambition. Laughing That said, I have no shame! It's good to know that it's not necessarily a bad thing that I don't stress myself over learning JS and .NET and such.

Besides... Kyle would miss having to help me with my code-needs if I did! (It's all about sharing the wealth, right? ^_^)


Add comment



(Will show your Gravatar icon)  









Live preview

said on August 28, 2008 (05:38)...


 

Powered by BlogEngine.NET 1.2.0.0. Original Design by Heather Alvis.
Sign in

Bellingham, Washington
Copyright © 2007 Mindfly Inc. All Rights Reserved.