UPDATE: I’ve since rethought the implications of this post and I wanted to add that using h1 as the company name is the right choice is certain scenarios. I simply wished to provide an alternate method.

First it has been a very long time since my last post. My excuse is that I moved…and I’ve been a bit lazy. I felt the need to address a topic that seems to have been brought up to me several times over past couple weeks: CSS site navigation.

When structuring and styling menus, a definition list (dl) should be used for the site title and navigation.

The first roadblock some have with this method is that they feel the h1 tag must be used for the site title. However, using the h1 for the site title (or company name in many cases) is redundant. Your h1 (although many web builders view it improperly as a semantic whore and over use it), has great value in SEO. Because the h1 is suppossedly the most important content on a specific page, why would one waste it something like Widgets, Inc. when it could be used for maybe a content rich headline: Widgets Inc Provides Solutions for All Widgets Manufacturers. I thought the following experience was very valuable

As I observed a blind web user navigate through a few pages, he reported that hearing the h1 content on top of the page was boring and redundant for him. Because his screen reader read the content of the title element first, the title element served as the actual title of the document for him, and the h1—which merely repeated the content of the title element—was useless.

ALA – October 09, 2006 – Working with Others: Accessibility and User Research”

If a blind human and his screen reading software sees the h1 used as the site title as redundant, I wonder how it impacts how a search engines screen reader views your site’s content. Clearly, using the dt instead of the h1 for the site title is not a bad thing whatsoever.

Secondly, if you look at the meaning of a definition list you will see that it fits perfectly with the notion that you are defining your site and there direct relationship between the items (navigation). And to reiterate the advantage of not using h1 for your site name, the site navigation is now minimized along with the site name – since both are redundant and not content rich.

Lastly, stlyling your header is now a breeze. And your html structure won’t give you indigestion due to enclosing your site name, navigation, and possibly one other element (perhaps search) in a wrapping div.

Here is the markup for your reference (or view a mockup page). Using this method, you can easily create dropdown menus by nesting another unordered list (ul) inside of the list item (after the anchor tag).

<dl class="sitedefinition">
	<dt><a href="/">Company Name, LLC</a></dt>
	<dd>
		<ul>
			<li><a href="/company/">Company</a></li>
			<li><a href="/solutions/">Solutions</a></li>
			<li><a href="/strategy/">Strategy</a></li>
			<li><a href="/clients/">Clients</a></li>
			<li><a href="/partners/">Partners</a></li>
			<li><a href="/contact/">Contact</a></li>
			<li><a href="/">Home</a></li>
		</ul>
	</dd>
</dl>

Tags: CSS, CSS Walkthrough, Experimental, h1, SEO
Posted in CSS, SEO | 2 Responses » | View blog reactions

We found out today that a tech blogger recently reviewed 1,088 websites of publicly traded companies in the technology sector. Initially his review process was broken into three sections (A-G, H-O, P-Z), and 45 sites were selected in each section. The sites were filtered on aesthetics and function.

Upon completion of the process mentioned at the outset, the top 20 sites of the 1,088 were selected.

All of us at Vovéo, especially those deeply involved in producing Safeguard.com, feel honored to have our work ranked among the ‘best of the web’.

» View the whole article
» View Safeguard.com

Furthermore, despite the amount of objectives we had to accomplish on the Safegaurd site (also known as: we had a lot to fit on that homepage), we were able to keep the site clean, simple, and visually pleasing.

Tags: Safeguard Scientifics, Vovéo, Web Design
Posted in Random Rubbish | 2 Responses » | View blog reactions

Microsoft has released ASP.NET Futures. Although I loathe Microsoft as much as drinking warm milk on a hot day, I am quite pleased. Microsoft now gives us full access to WPF/WCF, great new AJAX functionality, and you know that web.sitemap file…well now you can provide it to Google or any other sitemap service without writing a single line of code.

There are some nice quick starts on the MS site. So what are you waiting for, go download Futures now!

Tags: .NET, Microsoft, News, Visual Studio
Posted in .NET | No Responses » | View blog reactions

Have you ever wondered if the new parts or new car you just are genuine? Or maybe that new golf driver you just bought off ebay? One of our recent sites we just completed addresses these exact problems. The technology presented to solve counterfieting on demand is actually really cool. For instance, I wonder every so often if the carbon fibre hood (which I did not purchase direct from the manufacturer) I have on my car is actually a real Seibon hood. After all, the automotive industry had a huge market for replica goods. The anti-counterfeiting solution presented on this site would put my mind at ease…especially considering the cost I incurred.

On the technical aspect, the site was built on .NET 2.0, using our proprietary CMS. We ended up using a significant amount of sIFR along with some useful flash widgets. Adobe After Effects was used to create the animations on the home page.

Enjoy.

http://www.authenticate-360.com

Tags: Document Security Systems, Ergonimics Group, sIFR
Posted in Vovéo | 1 Response » | View blog reactions

If you don’t want to use JavaScript or create a 24-bit and an 8-bit PNG in order to accommodate all browsers (mainly IE 5.5 – 6), you can use Microsoft’s handy Dx Attribute as filter in your CSS.

The drawback is that you have to create a separate style sheet for browsers greater than IE 5.5 and less than IE 7.

For example, if you need to use a transparency for a site’s logo, you may do something like:

<style type="text/css">
.logo
{
	background: url(img/button.png) no-repeat center center;
	height: 126px;
	width: 190px;
}

.logo a
{
	display: block;
	overflow: hidden;
	/*setting a width breaks link area for PC IE 5*/ ;   width/**/: 190px; /*\*//*/   width: 190px;   /**/ ;
	height: 126px;
	text-indent: -90000px;
}
.logo a:hover
{
	background-color: transparent;
}
</style>

<!--[if gte IE 5.5]>< ![if lt IE 7]>
<style type="text/css">
.logo
{
	background-image: url();
}
.logo a
{
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'img/button.png\',sizingMethod=\'image\');
}
</style>
< ![endif]>< ![endif]-->

MSDN has a library of some of the possibilities (not new by any means), but helpful nonetheless.

Tags: AlphaImageLoader, CSS, CSS Transparency, CSS Walkthrough, PNG
Posted in CSS | 2 Responses » | View blog reactions