After lots of discussion and with much excitement, we are proud to announce that Garrett, partner and lead developer at GANDR, will be going to work for Erskine Design in their Nottingham office. He will be instrumental in continuing to develop their killer front-end code as well as their ExpressionEngine integrations. He will be moving across the pond at the first of 2011 and will be a full-time Erskine employee.

We are also proud to announce Ryan will be taking an Online Marketing Manager position with a startup in Austin called Boundless Network. He will be starting his new position mid-November 2010.

Garett Mayfield (our designer) will continue to amaze us with his work at Wednesday Design, a custom design, events and paperworks company founded by himself and his wife Jessica.

So yes, much is changing here at GANDR. It is very sad yet exciting.

So why the sudden change?

Many people have asked us why we would suddenly change direction with so much momentum swinging our way. This is really a two-part answer:

1. The opportunity for Garrett to work with such a talented team was more than he could stand. There are only a few agencies that lead the way the web is going and this is one of them.
2. We love the web and we love our clients but we are ready for a change of pace. After living in Abilene for 6 years (4 in college and 2 in business) we were both more than ready to expand our horizons.

Is GANDR still a company?

Yes, GANDR is still a company and will continue to produce mind-blowing work.

Garrett will no longer be affiliated with GANDR (as his heart is with Erskine now) but Ryan will run the company just as sexy as before. We have brought on another awesome ExpressionEngine developer and HTML Guru (pardon the annoying buzz word) to be announced on a later date. So we are still the same company as before just Garrett-less and with less tweets.

We will continue to accept projects but will be much more selective about the projects we take on. Time is limited with our new business structure and it’s high time to just take on the cooler projects.

Note: some may make crazy assumptions about Garrett and Ryan’s partnership, but they are still buddies and the change of the direction of the business has nothing to do with GANDR but more to do with the fact that Garrett will be living in freaking Nottingham!

Just posted a HTML/CSS/JS form template for best practice markup and validation of web forms. It includes validation of names, emails, phone numbers, password/password confirmations, messages etc and a plug-and-play css template to help keep your form styling nice and clean. Feel free to check out the demo or go grab it on github.

Out of the box, the 960 Grid System can accomplish just about any complex website layout you can imagine. There are times, though, when you're going to have to do some minor customizing to cleanly accomplish what you want.

For example, lets pretend we want to have a full width background for our header and footer. We'll need to make some sort of wrapper to go around the grid like this:

.whole {
 width: 100%;
}

.branding {
 background: url("tile_branding.png") repeat;
}

With these new classes in place we can build a workable (but bloated) solution that would look something like this:

<div class="whole branding">
 <div class="container">
  <header class="grid_12">
   <!-- blah blah blah I'm a header -->
  </header>
  <span class="clear"></span>
 </div>
</div>

<div class="container">
 <div class="grid_12">
  <!-- Page content goes here -->
 </div>
 <span class="clear"></span>
</div>

<div class="whole branding">
 <div class="container">
  <footer class="grid_12">
   <!-- And finally, the foot. -->
  </footer>
  <span class="clear"></span>
 </div>
</div>

The above lazy approach isn't too bad, but we can do better. I'd be a lot more satisfied without those pointless .container divs wrapping the header and footer. Let's make some adjustments to the css:

.whole {
 ...
}

.branding {
 ...
}

.whole header,
.whole footer {
 margin: 0 auto;
 width: 940px;
}

Now in our HTML we can drop the .container wrappers around our header/footer as well as drop our header/footer classes.

<div class="whole branding">
  <header>
   <!-- blah blah blah I'm a header -->
  </header>
  <span class="clear"></span>
</div>

<div class="container">
 <div class="grid_12">
  <!-- Page content goes here -->
 </div>
 <span class="clear"></span>
</div>

<div class="whole branding">
  <footer>
   <!-- And finally, the foot. -->
  </footer>
  <span class="clear"></span>
</div>

Tada! A clean, simple approach to full width backgrounds using the 960 Grid System. Enjoy.

Just finished reading through the styleguide for the BBC website [pdf] - so many great techniques, rules & guidelines.

Check it out: http://www.bbc.co.uk/guidelines/gel/downloads/GEL_styleguide.pdf

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.