What’s in a link?
posted on March 1, 2010 by Soroush
One of the most frustrating and prevalent UX problems for the end user is knowing what’s a link and what isn’t. Styling links seems like it should be one of the most straightforward and easy parts of designing a website and managing the interactions people have with that website, but it’s amazing how often people get it wrong.
I finally decided I’d had enough when I went to Merlin Mann’s website, and saw that the <a> anchor tags in his blog posts were simply bold (to be fair, they’re really bold). Of course, I thought he was just trying to add emphasis to something, until I realized they fit the context as links, and I hovered over them. Only when the link I hovered over changed colors and gained a text underline did I realize that the bold things in his blog posts weren’t emphasis, they were links to other pages.
It got me thinking about how much styling is necessary to differentiate an aesthetic styling and link styling. Even underlining alone (with no color change) can be ambiguous, since some authors use underlining for emphasizing along with bold and italics. As an aside, this is also bad practice — underlined texted was invented to add emphasis to typewriters that didn’t have bold or italic functionality.
So how much styling is required to differentiate a link from body text? My first instinct was that two separate style changes were required: i.e., a color change and a weight change, or an underline and a weight change. While that is sufficient in all the cases I can think of, it might not be necessary. I was noticing in NetNewsWire that the default style sheet has links that are a different color with no weight change or underlining. This works well, especially if you have lots of text with very little styling, as in NNW’s case; it also helps to choose a bright color, to make it more obvious.
To play it safe, I think I would recommend using at least two style changes (font color, background color, weight, underlining) for each body link. Link styles should under no circumstances just be bold, italic, or underlined, however, since people might mistake them for emphasis. Having obvious hover styles can also play a small role.
The only one of my sites that doesn’t follow the two-style-changes rule for links is Carson Andrew’s portfolio. While the links on that site aren’t obvious from their styling, there are really no body links on that site, and the other links seem pretty obvious from their location and context.
Comments Off - Tags: css, UX
Semantic vs Functional CSS
posted on August 4, 2009 by Soroush
As web developers, we try to do things “the right way.” We try to keep our markup clean and our file sizes low with proper CSS, instead of doing things the easy way in the face of issues that arise. There is an elephant in the room, though; a difficulty that comes up when we look at the future of the web.
The Problem
The fundamental difference between Semantic CSS and Functional CSS is that, with Semantic CSS, the naming conventions are based on the role of the element within the page, whereas with Functional CSS, styles are named based on layout and formatting. Since HTML5 comes with tags like <article> and <nav>, that are meant to be used semantically, and with HTML5 standards fully available in Safari 4 and partially in Chrome and Firefox, we need to decide how to mark up our HTML documents.
The Argument for Semantic CSS
Much as the <b> tag, which is functional, was deprecated in favor of the <strong> tag, which is semantic, HTML5 seems to be moving in a semantic direction. Instead of using .leftbar to describe a sidebar that is floated left, .sidebar would be more descriptive of the role of the content contained within that element. It also allows for portability of markup to newer stylesheets without tinkering with the markup itself, for whatever that is worth.
The Argument for Functional CSS
Frameworks like Blueprint make the transition from mockups to CSS and HTML much easier, as well as providing a grid system that is easy on the user. The job of a designer and developer is greatly streamlined with such tools, but <div class="span-16 content"> inherently contains Functional elements, which seems contrary to the direction that HTML has been heading in. Further, the CSS technique of combining multiple Functional styles (such as <div class="red center pad10 w200"> for a centered, red alert with a width of 200 pixels and a padding of 10 pixels would be off the table.
The Conclusion
While HTML and the Web are unquestionably headed towards Semantic styling, the advantages of Functional CSS shouldn’t be forgotten or ignored. Personally, I think that solution is to create “includable” CSS styles like so:
.content {
.span-16;
.body-text;
color: #333;
}
This way, the functional elements of a style can be used but don’t affect the markup, and everyone wins. CSS4 in 2018, maybe?
Comments Off - Tags: css, development
Site Launch
posted on July 1, 2009 by Soroush
The site is finally ready for launch. The idea behind Differentia Designs has been in the works for a long time. I started out with the web sometime in 2002, designing the first iteration of the Epicure Café site. Like any neophyte’s first project, mistakes were made, and it was lacking. Over the years, I’ve learned a lot and I have to say, I’m much more pleased with the current iteration of their website.
As for the Differentia site, it has been a great lesson in custom jQuery animations (for the Portfolio page) and, as always, squashing CSS bugs for Internet Explorer 6 and 7. I really dig the result, and I enjoy grungy design as much as modern, clean looks.
