How to mark up your website logo has always been a really controversial topic on the web. There are literally hundreds of articles about the topic and, well, this is another one.

Over the past year we've changed our approach to this extremely boring (but important) subject 3 times. Below I will hit on each one and follow up with how we're doing it now - which in my opinion is the "right" way.

H1 Image Overlay

This approach seems right; throw an anchor in your H1 with your company name written inside of it, hide the text with CSS and show the logo. Secondary page titles start with H2 and make their way down, etc.

The HTML

<h1>
 <a href="#" title="Company Name">Company Name</a>
</h1>

The CSS

h1 {
 text-indent: -9999em;
}

h1, h1 a {
 height: 50px;
 width: 230px;
}

h1 a {
 background: url("logo.png") no-repeat;
 display: block;
}

Problems with this approach

1. We're hiding text, which is tedious and could possibly hurt search rankings… though I have no idea if it really does or not. I'll be safe.
2. Our Secondary page titles shouldn't be H2's, they should be H1's.

After researching a little bit I eventually found this video by Google on YouTube. The video basically says to use alt, not css, so thats what we started doing.

H1 w/ Image in the markup

According to our friends at Google, this approach is "better". You simply put an image tag inside of your H1 and put your company name in the images alt tag. But still, secondary pages start with H2.

<h1>
 <a href="#" title="Company Name">
  <img src="logo.png" width="" height="" alt="Company name">
 </a>
</h1>

After sticking around here for a while, and still not being satisfied, I came across a comment #47 on 456 Berea Streets article, Headings, heading hierarchy, and document outlines. Perfect!

The "right" way to markup your website logo

Homepage Logo

<h1>
 <a href="#" title="Company Name">
  <img src="logo.png" width="" height="" alt="Company name">
 </a>
</h1>

Secondary page Logo

<p>
 <strong>
  <a href="#" title="Company Name">
   <img src="logo.png" width="" height="" alt="Company name">
  </a>
 </strong>
</p>

If your website was a book, the homepage would be its cover. The secondary pages are the books chapters and the H1 should be used for the "chapter titles", not the "book's title".

So, that's our approach. I know there are a million approaches out there but in my opinion this is the "best" way to semantically markup your websites logo.

A few weeks ago I started obsessing over visual hierarchy, which, admittedly, is something I think our work is sometimes lacking in.

We design sites, code them, and then the second a page isn't laid out exactly how we mocked it up everything looks weird. I wouldn't admit this unless I was 99% positive that  99% of you have the exact same problem.

So, here's my challenge: Style every single HTML tag on your next project without giving them any classes or ids. Style a crap load of width-less, height-less widgets that can be reused in almost every situation. Test it out, see how it works. Does it work? If not, revise it. We need to make websites like that *could* last forever and we need to assume that the person in charge of them is going to screw something up. If they do, will it look good? Hopefully.

Last night I went ahead and accepted my challenge. It's definitely not done, but it's a start: http://gandrweb.com/docs/styleguide

Here's a little code example on how we made our horizontal navigation bar using CSS3 Selectors and Sprites: http://labs.gandrweb.com/navigation

Having a beautiful background, header, footer and a huge happy illustrated fairy on crack in the sidebar of your website isn't going to keep people browsing. We don't browse the web for beauty, we browse it for content. Anything that takes away from that content and/or the main goals of your site is just art. Art belongs in The Guggenheim.

Not many people understand the importance of visual hierarchy. Hell, I didn't even know this subject had a name until a few hours ago. I just knew it was a problem (that we have). So, I did a little research, found a few links, drank some coffee, ate some donuts, drove to work and here I am; kindly posting this here for your enjoyment.

• Visual Hierarchy in Web Design
• Common Mistakes in Web Design
• Thinking w/ Type: Hierarchy
• Typography Tuesday: Hierarchy
• Understanding Visual Organization (written in 2003 but tastes better than a cinnabon)

Enjoy, you little rat.

With strong reasoning behind every line of code in our stylesheets we can make them cleaner, easier to maintain and more universally compatible. Yes, some style types will always need to be bug fixed in different browsers but unordered list navigation isn’t really one of those things.

I’ve seen navigation bars styled a thousand different ways with an unordered list. I’ve also had people come to me with a thousand different problems they’re having because the “navigation bar looks like crap in this browser and good in that one”. Most of the time those problems can be fixed by sprinkling some of the special salt on them that I describe below.

These are a few guidelines I try and stick to when building out a navigation bar. I’m not saying this is the only way but yes, I am saying this is the only way.

Before you do anything you always want to make sure you’re using some sort of CSS Reset to reduce browser inconsistencies (since everyone (browsers) renders CSS how they feel like it). Until all the browsers come together, go on a few dates, fall in love and eventually universalize their default stylesheets you need to use a reset

The HTML

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Nothing new here. Just your basic unordered list.

The basic CSS

Okay, so here’s the code. I’m going to paste it in full and then describe the reasoning behind it.

nav ul {
    list-style: none;
    width: 100%;
}
nav ul, nav li { float: left; }
nav li { display: inline; }
nav li a { display: inline-block; }

Explanation

1. The UL – The container for everything. The list-style: none; makes sure your LI has no bullets and the width is really only needed if you’re going to want to have a background color or image behind your navigation.
2. Float the UL and LI left – This gets rid of the annoying little space that you can’t get rid of to the left of your list items.
3. LI – We display this inline to, well, make it a horizontal navigation bar.
4. LI A – This part is important. You shouldn’t ever really need to style your LI more than just giving it display: inline; – Any padding, coloring or icons really belong to the actual link itself. display: inline-block makes sure you can do this without ever straying outside of the list item itself.

Okay, so that’s the foundation but how do we go about giving it a little flare?

The sexy-fied CSS

nav ul {
    background: #2C1720;
    list-style: none;
    width: 100%;
}

This is exactly the same as above except I added a background color to the UL. Giving you the bar, in navigation bar.

Now we need to make those pretty links. So, naturally, we style the links. Not the list item.

nav li a {
    background: #D77F67;
    border-right: 1px solid #964043;
    color: #DFEAE4;
    display: inline-block;
    padding: 10px;
    text-decoration: none;
}

I added lots of stuff here.

1. Background Color – To make the links a little more distinguishable.
2. Color – Because we all know everyone hates default blue.
3. Border-right – Adds a little separation to the links (not really needed)
4. Padding – A bigger button is a more usable button. Even if there is no background color, give it a little padding.
5. Text-decoration - Nothing fancy here, I just don’t like my navigation links to be underlined.

And then, of course, we need a hover effect.

nav li a:hover { color: #2C1720; background: #FCC769; }

The moral of the story

That’s really all there is to it. Use this and you shouldn’t really ever run into any problems. Do what you want with this but always remember the moral of the story:

The main reason for navigation is the links. Style the links, not the list-items.

The second Abilene Build Guild in the entire galactic universe EVER is at 5:30PM on Tuesday, June 8th at the Abilene Brewing Company. Last month we had a grand ol' time hanging out, networking and talking about anything and everything web related. Don't believe me? Read about it, I dare you. We really look forward to seeing you, meeting you, and growing the oh-so-beautiful Abilene, TX web community.

See you soon!

A few days ago we decided it was time to start a new side project. Something that we can all play around with and mold into something completely different than the original idea (that's how that usually works, right?).

So, we decided on http://feed-ee.com/ which, I think, will be tons of links for anything ExpressionEngine related. Some will be RSS, some will be manually added by us, etc. A central hub for everything EE around the web. No launch date in sight but here's a little teaser. Enjoy :)

http://feed-ee.com/

Writing great content for your website is no easy task and it is imperative to keep in mind that your content is why users come to your website.

Steps to begin

• Create a tone - whether it's fun, creative, corporate, professional or playful. It is important to first decide the tone you want your content to portray and keep it consistent once the decision is made.
• Identify objectives - before writing your content, you need to identify what you would like your content to accomplish (inform, sell, sign up, etc).
• Drafting - write out everything you want to say on each page. Try not to worry about the final version, just get it down on paper.
• Edit - your users do not want to spend hours reading about "your company" and why they should choose "you." Cut down your content to be as easy to read and concise as possible (bullet points are encouraged, long paragraphs are not).

Note: Your website is not the place to cram all of your marketing language. It should be focused on providing your audience with the right information in a concise manner.

Tip: Users typically decide whether or not to stay on your website in a matter of 4 seconds. Don't bore them with the typical content. Be interesting.

What about SEO?

"Solid search engine optimazation can be accomplished with proper copywriting, code, and structure. With these three things in place, SEO just kind of happens. Search engines are smart..."
- Forty Agency

Search Engine Optimization is an incredibly popular topic amongst businesses, ultimately because if your website is at the top of rankings, you make sales. The best way to create seo-friendly content is:

• Engage with your users. If you try and use a keyword in every other sentence in hopes of driving more users to your website you're doing it wrong. It will be obvious not only to the user but to the search engine as well. Just write naturally.
• Provide the users with quality content. If you write good, intuitive information that is useful to the users, search engines will recognize that and your rankings will likely climb.