So after about 8 years of coding web pages with ‘web standards’ in mind I have come across this phenomenon many times: “most graphic designers do not write code”. In a production environment, primarily where the graphic design is done by one person and the coding is done by another, this becomes an important issue. In the past my solution has simply been to take what the design team produces and spend several hours ‘translating’ that design into a web ready page with standards in mind, primarily XHTML Strict 1.0, and after design approval finally code it.

Since I am writing this for graphic designers I will spare some of the code talk, however, I am going to introduce the basic concepts here in an effort to raise the bar for designers everywhere by producing what I expect will be a simple guide with good reasons as to ‘why’.

I will divide this series of posts into topics, but they will be a merge of code concerns translated into Graphic design talk. Keep in mind this is not for code guys, this is for the visual team. Here are the topics I will cover:

1. Typography: how it relates to on site SEO.
2. Images: how to use them.
3. Color:  its not Pantone, its HEX.
4. Menus: what are they really for?
5. Layout: now there IS a reason.

Lets start with a basic introduction “in the beginning, there was a blank page”.

As a designer you start with a blank document, same as us coders, however from there our first steps are completely different. The designer begins with some research, this is usually a color pallet, brand manual, or some other form of guideline, the first thing they tend to do is put a logo on the page and then choose a background. But this is not print, this is the web. Think about it like this: you are about to design a magazine ad for a blind person, it will be READ to them because search engines are blind users. Therefore the TEXT on page is more important than the images. You may go back and make alterations, but consider typography FIRST.

You could start anywhere, but the best place to start is WHY. Why are you designing a website in the first place? The answer comes in the form of text. Ususally one of the following:

• My client wants to sell ‘widgets’ on their website (e-commerce)
• My client wants to discuss ‘widgets’ on their website (blog)
• My client wants to inform users about ‘widgets’ on their website (informational site)

Article one – Typography: how it relates to on site SEO

The first thing you should do is think like a blind person who is about to have a book read to them. You sit down, you read them the title of the book, you open it, and read the table of contents to them, then you read the preface and finally, you ask them where they want to go. It could look like this:

Now we are cooking, here is how headers work:

The H1, or header one, should relate to EVERYTHING on that page until another h1 appears. You can mine down to an h2, this means priority of 2, and everything from that h2 till the next h2 is related, even the h3, but they are ALL under the h1.  consider the next image:

What you are essentially saying can be understood like so:

1. Everything on this page is “All about widgets” (h1)
   1. Everything on this page talks about what a widget IS (h2) and the paragraph up top near the h2 also describes everything on this page as well…
      1. The chapter “widgets are widgets”…
         1. has part one and…
         2. has part two, and they are all related to chapter one, within the book “all about widgets”
      2. but this; chapter two
         1. is not related to chapter one
         2. nor is it related to part one or part two of chapter one

So, now there is reason to your rhyme, you are using font size and color in a dance with code, this dance is called onsite SEO, and just like any dance, be it the waltz or the 6-step, there are rules for when you place foot one behind foot two. If you do not follow the rules your dancing partner will become confused, but when you do you can dance with anyone in the world who follows the same rules for that particular dance.

Here are the rules for Graphic Designers when selecting type:

1. The #1 golden rule- there is really only SERIF or SANS or fonts. Here are your choices for TEXT on the web:
   • Arial / Helvetica
   • Times New Roman / Times
   • Courier New / Courier
   • More web safe fonts and information can be found here: http://www.w3.org/TR/CSS2/fonts.html
   • if you use anything else, anything at all, it will have to be an IMAGE (or some fancy coded crap with flash called SIFIR and we are not going there today), so unless you plan to describe to a blind person what Engravers Gothic or Old-English looks like, then plan not to use them for any text you would consider ESSENTIAL to reading…
2. The #2 golden rule- the text must be readable of course, 3 steps up from its background color, enough contrast to be fully visible. Reverse text is ok, but search engines are smart enough to be able to tell when you put white text on a white background. Even though they are blind there are special codes for every single color, technically there are only 256 colors, but we can go into that more on a later article describing color use for the web.

On to the merge, since the next article is going to be about images i will discuss here about how to use images with typography, especially when your client has a terrible title for their book…

In a perfect world your client would actually title their book “All about widgets”, but we live in a world where people name a motor vehicle “viper” and name a poisonous viper “Water moccasin”.

Essentially a bad idea, but fun. So what do you do when your client says the title of their book is “Joeywidge- a  guide to it all”, and his favorite font is “Bleeding Cowboy”. Well, you cant tell Joey ‘no’, and of course you could always take his money and give him what he wants, but thats no good either. You man up and tell Joey, “yes, we can do that, but in order to do it right we must follow web standards, you can call your book what you want, but your website is going to be for people who may never heard of a ‘joeywidge’ and here is how we do it:

Yeah, its ugly, but its the start of something beautiful. As a Graphic Designer you have not really satisfied the visual aspect yet, but what you have done is created

• a REASON for why the fonts are a certain size,
• a REASON to use keywords and whats called ‘semantic markup’,
• a REASON to get found in search engines and a good page start that can be read to a blind person.

Here is where your design skill starts, but it must follow the rules, so lets look at the first bit of freedom you have, you carved out a portion of what a coder would call ‘worthless image space’. To understand this the SEO and XHTML Strict coder does not want to put an image on a page at all unless it has a point, and this logo has no point at all… yet…

Sure, its company name, but that only matters to the company, this brings us to the most important concept to ever apply to the business world as a whole “the way a company sees itself is not the way a consumer sees that company”. To elaborate, for the most part someone who wants to know about widgets does not care if Joey, Sam, or his dog wrote the book on widgets, they are going to search for “what are widgets” if they have no clue, never ever will they EVER type ‘joeywidge’ in the google search bar having never heard of Joey. So lets leave it at that for now, and remember we can come back to this concept later once it is actually important.

So, your itching to do something with that top area, knowing its not really important to a coder, but it is your life blood as a designer to make this look good, without using any “REAL” images YET, so lets just get the logo in there…

This as example of using fancy typography in an appropriate way for the web. Sure, its technically an image, but according to a coder it is not important!

Your next question is going to be “should the logo take you back to the home page” and the answer is NO . Now I know this is ‘controversial’ be the real answer is “its fancy typography”, I am serious, it is a pointless bg image, the ego of a company style, and no one types in “swoosh” when they want shoes, they type in “running shoe”.

What I am actually saying is this, in reality the logo should be at the bottom of the page. Yep, I am serious, this is the conflict of CODE -vs- Graphic Design. take a look, this is what the coder wants:

Now, unfortunately designers are usually the first to interact with the client, usually because a client thinks they should go to a designer first. This is why billions of websites are WRONG. I am serious, this is how websites should be done, the logo should be at the bottom. In fact, did you know the web was originally intended to ONLY ever be text?

This is unrealistic, because the designer will always follow design standards (not coding standards), and those standards come from a time when print was king. I propose we change this, and the only way to do it is by being honest with the graphic design world, If you want the logo to take you back to the home page, PUT IT AT THE BOTTOM OF THE PAGE.

Until this standard is followed coders are forced to break from 100% optimized page, the first -1% happens when the coder is told to put the Logo up top AND link it. By doing so you force them to do one of the following:

• A: place an image and and anchor tag above the H1
• B: place an anchor tag AND an image AND text INSIDE the h1

So what do we do? Well, you CAN design it with the logo up top, but now your at 99% effectiveness with regard to SEO. That is a small loss, but it still is a loss…

Final thoughts:

As I continue this series I will compare both what the coder wants with what the designer wants. I hope to impart a better understanding of the web to designers, inspire new and better coding methods, while finding a good compromise between all three. Here is the final break down:

As you can see, the final is a good compromise, you keep text in high contrast, standard web fonts for all the IMPORTANT stuff, the client gets their logo image thing, and yes… it links to the home page too…

Next is images within the page… but thats for next month.