The case for XHTML/CSS Style Guides

I have been working for a short while on a side project that I have already found very useful, and that is to develop a tool that aids in creating what I call a “CSS Style Guide.” There may be a better name for it, but the concept is quite simple, a guide for clients or website owners who will be maintaining a website after you have delivered it to them.

Style guides typically outline when you should use a H1, H2, H3, ordered lists, tables, etc… so that everything remains consistent and unified.

The interesting part about the style guide, as I have found, is that it often brings to light the incompleteness of our work as website builders.

Why the typical website building workflow leaves holes

The web is part coding (for lack of a better word) and design. The typical web design workflow starts in visual tools that represent a given page / interface and then moves into the coding and building of the site (working with text, markup, and style sheets).

What ends up happening is markup and design is only created for the elements that show up on those pages. Typically H1 – H3 (if that) and a few other design elements such as bulleted lists.

This is not great for a website that needs to grow, and a client that needs to maintain it. There may be a few rare cases where it makes sense to move all the way down to an H5 / H6.

However unless the designer thinks ahead to design a style for all common elements that fit with in websites needs, it will not have the same uniform approach that the rest of the well planned elements have.

This becomes esspeically important on any website that is content focused or content heavy.

It is bad for the website, the client and yourself if you never bothered to design what a “block quote” looks like and a blog post ends up failing to communicate that content is in fact, a quote.

What I suggest to do about it

I have learned simply through making mistakes, “agh crap, I forgot to style that.” You could just wait until specific elements need styling and have the client ping you, but that is not ideal.

Instead I have developed a simple one page “Style Guide” that lets you load or paste in CSS styling so you can get a clear picture of how the most common elements on a page look. It is flexible so you can easily see how elements wrap and/or how they look in wide and narrow columns.

Take a look, and play around

Feel free to take a look and play around with it on my server, or download it for yourself to use, update and improve.

I had a fair amount of fun just loading other peoples stylesheets to see how they stylized each level of heading and how far in the styling they actually went.

It is free to use, alter, etc… if you can keep a credit in the head section that would be great. I really would like to get more conversation around creating a guide to how a website should be styled and have it be a deliverable to clients who need it.

The importance of controling feedback and critique

Any designer who has produced work for anyone other than themselves knows how tricky the design feedback process can be. As designers we have very specific reasons for designing a site the way we do. We have expertise in rhythm, proportion, sizing, whitespace, grids and other graphic design concepts. Many times hours are spent trying different combinations, layout positions, usage of colors, etc… by the end of the work we know what didn’t work and what did.

When we present our work to a client / boss we have two unique and profound depths of insight that they simply don’t have. Communicating and being authoritative on the reasons you chose the design decisions that you did is a key element in ensuring that the client does not get in the way of themselves and end up with a weak design.

Every time I go through the process I think of new and better ways to approach it. To the point where I am currently developing a “script” of how to move from point to point.

My Feedback “Script”

1. Creative Brief

I start way before I even design. Before I even open up photoshop I write a creative/idea brief and deliver it to the client and ask them to sign off on it, to make sure that my thoughts and ideas on how the design should look and feel is in line with what they expect. This at least introduces them to my take on the design problem.

2. The introduction

I find the introduction is one of the most important aspects of the process. This is where it is important to explain how you are going to conduct the feedback and review process, what should be considered and why, and how to give feedback in a way that will benefit the design process rather than hurt it. The following list a general process of what I talk about:

1. We are going to review the designs, I will explain why I designed things the way I did. At this point please hold any feedback until you have conferred with everyone over a few days, and we will reconnect to talk about your thoughts. It is important to discuss feedback and revisions rather than firing off gut reactions.
2. Remember that design is subjective, everyone will like things differently. What is most important is that your clients / users like best. Think about things from a user perspective, not your own.
3. I rerun through my creative brief that was approved. We decided that we were going to design in this fashion because… remember that you agreed.
4. This is not just visual style, but more importantly what it communicates.
5. When you do give feedback tell me what does not work and why. Direction is counter productive, as one change alters the balance of the whole design. Let me what needs to be fixed and I can sort out the design problem.

3. The explination

I will walk through why I chose to design the way that I did for each design. I am learning that it is better to jot down notes during the design process and before the actual review, as I have a tendency to rush through it and miss many important details. Including all of the details is extremely important to help flesh the idea out in your clients mind as well as establishing yourself as an expert.

If the client gets the impression that you are just throwing paint onto a digital canvas they will have no reason to trust your design choices over their own, and why should they if it doesn’t sound like you had any reasoning behind the layouts.

4. Ask for questions

At this point I normally ask if there are any questions about the designs. I am finding it is best at this point to reiterate that we will reconnect for direct feedback in a few days, as this is often a point where it becomes hard to resist expressing ones opinion (and it is understandable).

I don’t normally get many questions, which could mean there is some optimization that could be done in this step of the process.

5. Getting feedback

When reconnecting for feedback I like to go through each item one by one, and have the client not only explain “what” by “why.” Not only does this give me better insight, but also forces the client to really think about the importance and context of the revision. That is not to say that the revisions are invalid. Rather that if there is a request that is not the best of choices it does set you up to say “You may not like the extra contact link, but a user who is 5 minutes late to a meeting and needs your phone number to call on the way to your office will sure appreciate it.”

6. Next Steps

Confirming what feedback and revisions you will act on and which ones were decided to be unnecessary (by the client and you collaboratively.) Sometimes if I think that one avenue is going down a wrong path and I can’t convince the client to agree otherwise I will ask permission to do two concepts to demonstrate my point of view.

How do you handle feedback?

I have yet to see a process that feels and works perfect anytime. Any thoughts/ideas/stories on how you go about handling the feedback and review process would be wonderful.

Occam’s Razor in Web Design, Simplicity Wins

You may have herd of the term “Occam’s Razor” before, but most likely it was not in relation to web design (or design in general). If not take your moment to familiarize yourself with the concept as it could alter how you design or craft interfaces from this point forward.

The concept was developed by a 14th-century English logician and Franciscan friar by the name of William Ockham.

It is a simple concept, yet it is so powerful especially when applied to the web.

Paraphrased the concept states that “All other things being equal, the simplest solution is the best.”

What Does “Simplest Solution” Mean for Web Design?

When I first began designing I had a tendency to try and make my work interesting, exciting, and dynamic. Now that is not to say there are not reasons to design work that fits those descriptions. Rather it is rarely the best solution. Any element on a page or in a design changes the signal to noise ratio (something I will cover in later blog posts).

A design can be simple and still exciting, well crafted, and interesting. Simple doesn’t necessarily mean minimal (which is a specific design style). It means that given what you need to have included things should be laid out and designed in the simplest manor possible.

How to go about simplifying your designs

Following Occam’s Razor is more about careful planning and deliberate thought process rather than any sort of art form. The first step is to figure out exactly what needs to be included in the design. Here is a typical example from a work that I had created long ago:

• Company logo
• Photography (to communicate subject matter)
• Descriptive text (communicate subject matter)
• Company messaging (marketing message)
• Newsletter subscription (site goal)
• Navigation
• Company address + contact information
• Parent company’s logo

After you have decided what absolutely has to be on the page you must then order them in terms of importance.

1. Company logo (branding)
2. Navigation (usability)
3. Photography (quick communication of subject)
4. Messaging
5. Contact Information
6. Newsletter Subscription
7. Parent company (not as important)
8. Address (not as important)

From their you can decide what elements should be seen in what order, and assess if any design element you add is noise and competes with the important pieces of the design.

Example Real Estate Company

A few years ago my first attempt at the design in the example resulted in this design concept.

Clearly I did a fair amount of visual decoration that really didn’t add any “signal” to the design and was nothing more than noise. Let’s break down what really was unnecessary

• The goofy break out headlines
• The background color stripes
• The huge picture (it used way more visual real estate than needed)
• The different color zones and blocks
• The “stacked paper” look
• All of the extra information at the footer

Revisiting Today

Now that I have been away for awhile, I decided to try and revisit this design and really think about how I could simplify it. This included:

• Removing all decorative elements (goofy headlines, background, etc)
• Rework the navigation so it is harder to miss and balances out the design, rather than being an afterthought
• Simplifying the content area to improve readability and comprehension
• Balancing the photo so it complements the design, rather than dominates it
• Simplifying the footer information

The result is a much stronger and more visually attractive design. Even though I removed a lot of decorative elements, the design actually looks better. As designers we need to be careful of trying to hard to “over design” our work. Ultimately our job is to make difficult information easy to understand, not to create digital art.

Think you can do better?

Think you can do a better job simplifying the design? Let me know and I would be happy to send you the PSD of the file and post up your simplification.

The Gutenburg Diagram in Design

We are fortunate to be a part of the web design as it has begun to reach a level of maturity. With advances in technology and prominent bloggers publishing great information on design concepts such as using grids, baselines, art direction and the rule of thirds (among others) we are able to work with the design of websites on a much higher level than even a few years ago.

However there are other principals of design that have yet to get ample amount of attention or usage. One of these principals is the “Gutenburg Diagram,” which you have likely used on some level with out realization.

How the Gutenburg Diagram Will Improve Your Design

The gutenburg diagram is a method of understanding how cultures who read right to left, visual navigate a composition, and how to optimize layout as a result of it.

Since we are trained to read from the top left to the bottom right naturally, we instinctively sweep a composition starting from the top left down to the bottom right (often several times).

As information hierarchy and visual emphasis are such critical parts of design, knowing how a user is going to look at your site despite design can lead to a much more effective layout.

How the Diagram Works

The diagram dissects the composition into four quadrants. In this case since we are designing for the web, it will be dictated by the screen resolution and location of the fold.

The upper left quadrant is the first area that a users eye will focus on. The eye will then sweep downward crossing the center or intersection of all four quadrants, before coming down to the bottom right hand quadrant.

The upper right quadrant and lower left quadrants are called fallow areas. The top right is a strong follow area, where the lower left is a weak follow area.

These areas will receive little visual attention unless they are emphasized through design. The top right will receive more attention than the lower left all other things equal.

Using the Diagram for Excellent Web Design

By understanding and working with the diagram we can maximize the effectiveness of our designs by using it to our advantage. It is probably a good thing that web convention puts the logo in the top left of the screen. It will be the first thing that users see, tell them where they are as well as help brand the website.

De-emphasis

Since we know that the bottom left and top right quadrants will receive less visual attention, we can put less important elements in those areas. You may have noticed the convention that puts secondary navigation links in that area, such as client login, rss feed, etc…

This is a perfect use of the gutenburg diagram, as such navigation is not nearly as critical as the primary navigation. However those who are looking for it can still find and use it when needed.

Place important visuals and content consciously

As you design down the page, you may also want to consider moving more important content or visuals into the path of the diagram. If you have a choice, place important content at the fold on the right hand side of the design rather than the left. A common occurrence would be swapping content for a image left to right, to place greater emphasis on one or another.

You may also want to reconsider placing the navigation in a right aligned manor, as you are unlikely to place it at the bottom of the composition anyways.

Examples of the Gutenburg Diagram

OH Tele

Rocket Club

Revyver HQ

Wellness Class

Final Thoughts

The Gutenburg diagram is not gospel. Once you start playing with visual emphasis and weight, how a user looks at a design can drastically be altered. However the idea is to use the diagram to your advantage and use our instinctual way of looking at a design to strengthen the layout and composition.

We are all consultants

I have never been the type that has been overly pushy about my opinion. In a lot of ways that has helped me in regards to my business, as there have been times where I disagreed with a client I was able to quietly sit back and do things their way rather than offend them and potentially damage our working relationship. However this is to their disadvantage as well.

As web designers (regardless if we are part of an internal department or freelancers) it is pretty easy to fall into a “well I will build what you tell me to build” sort of mindset. Because people use the internet day in and day out they tend to gather a whole list of things that they think they want on their website, with out really much thought that goes into it.

The result is you get a list of items “We want blah, blah, blah blah, and blah…” of course the easiest thing to do is to simply nod, smile, and build it the way they want it. After all, battling and educating the client / boss / etc is really just unpaid time and frustration.

This is even more difficult when you are a freelancer, business owner, or sales person. As you could spend hours working out what the potential client really wants, only to have them take your spec sheet to a cheaper firm.

Despite some potential draw backs, we are all consultants when it comes to the web. We all have a much better understanding of what will work, what is/isn’t a good idea, and the best way to make a website a success than anyone who would be hiring us. It is our job to consult, recommend, and make suggestions every step of the way. Even if it results in unpaid hours now, it will further your career later.

I have found that several potential clients love the initial process of suggesting, recommending, and discovering what they really need in their website. It has helped seal jobs before, as they felt not only did I better understand their needs but I had a level of creativity that the other firms did not.

A tricky aspect of this situation is a joint worry about scope / price creep. You obviously don’t want to do more work than you get compensated for and the client doesn’t want the price to rise indefinitely. Especially at the start of an engagement, it is very comforting to know that X dollars will be exchanged for X specific deliverables.

I have started a new process of engagement that protects the client and yourself from scope and/or price creep. The normal meetings and proposals are pretty typical and standard, I issue a price that states “If nothing else changes, this is exactly how much you will pay for these items. However we will do an initial kick off meeting to dive into your company, brand, customers, and needs that could change this scope to be larger or smaller.”

The reassuring factor for the client is that they know they can always just choose to do what was originally on the table. However if a great idea comes up in the kick off meeting they can opt to incorporate it as well. The reassuring factor for you, is that if you suggest a change you know there is an understanding that it won’t be free.

This also includes shrinking the scope, as needed. There have been times where I have suggesting removing pages, features, and functionality because it wasn’t going to make an impact compared to how much it was going to cost. A lower price is always a welcome surprise from a clients perspective.

So next time you are about to start a project don’t consider yourself the builder, consider yourself the architect. It is your job to use your expertise to ensure the website that is built is as effective and successful as possible.

Don’t Design for your Client, or Yourself

I recently did a presentation called “It doesn’t matter if you like it…” in which I talked to marketing professionals about how their is a fundamental flaw in the way many people go about designing, or having something design.

I often talk about how a large part of design is communication. With so many CSS Galleries it is easy to get stuck in a mindset where you simply want to create the “coolest” looking website rather than “the most effective” website.

The truth is that even beautiful design can be damaging to a site/brand/company if it is not “correct” design. Studies have shown that you have 10 – 15 seconds before a user has an impression about your website. Ten to fifteen seconds is not enough time for them to fully read and understand the history of your company, it is long enough for them to make some very detailed conclusions based on what your design communicates.

Why Our Approval and Design Processes are Often Wrong

What I am ultimately leading up too is that in most cases the design / approval process that we go through leads to work that does not communicate what it should to the end users.

This is a typical creative process of a sizable firm:

• Creative director to graphic designer: “It should say this”
• Graphic Designer: “Hmmm, I like it when it looks like this”
• Manager: “This looks off, why don’t you tweak that?”
• Creative director: “I don’t like this portion, fix it”
• Client: “I like the color red, use red”
• User: “I am looking for something high end, this looks cheesy. Goodbye.”

We often have people who are a part of the design process that alter the end work based on their own personal preference, and guess what… as designers we are one of them.

Now let’s look at it from a smaller firm / freelancer

• “Lets make a great looking interface!”
• “How do you like it?”
• “Lets make it POP!”
• “There we go, it looks really cool!”
• “Aghhh, I don’t want to go to a coffee shop that is this nutty”

Ultimately it doesn’t matter if you like the design, if you are serious about your profession than you shouldn’t be creating sites so that you can have another great looking portfolio piece.

As a client or website owner it doesn’t matter if you like design. If you are serious about your company or website then you should have the site created so the users like it, not so that you can brag to your friends about how cool your site is.

How can you change this?

There really are a few approaches to the process that can greatly alter the outcome in a positive way. The first step is our great friend… research.

RESEARCH

Anything you can do to get into the minds of the end users will result in a much more successful design. This can take the shape of client interviews, researching competitors, attending events that users may attend, or other forms of traditional market research (surveys, demographics, etc)

Research should be compiled and decimated into a few deliverables such as a competitive analysis, user personas, and a creative brief.

These deliverables will be key in the design approval process, especially if someone on the design committee says “Why don’t we make it blue?” With the documents you can now say “our research shows that red will make users feel how we want them.”

TESTING

Actually testing designs can be a great way to find out what works best for different users. A lot of projects don’t have the budget for this, but it doesn’t have to be incredibly high cost.

I will go into ways to test in future blog posts, but for now consider showing a user a design and asking 3 – 4 questions about how they would describe that design. You are not looking for feedback in terms of “use a different picture, color, etc” rather it is important to understand what messages does the design give off. Does it feel affordable? high price? exciting? calming? interesting? sturdy?

Additionally you can show a user a design for 3 – 5 seconds, then ask them to tell you what they remember from it. It will give you a clear idea as to what are the most prominent items on the page.

LARGE SCALE SURVEY

This is currently being done with the Drupal project. Designer Mark Boulton is getting feedback from a community of tens of thousands. What he has found is that over the personal preferences trends emerge, and those trends provide a huge amount of insight and value that can be worked into the next design iteration.

IT DOESN’T MATTER IF YOU LIKE IT

Yes it doesn’t matter. Some of my most effective and successful designs from an analytics/statistics standpoint are not ones that I particularly like. That is because I am not the user, and I think and interpret visuals differently than psychology scholars (or any other given user base)

Improve your typography with “typographic contrast”

Having just spent a week in various countries through out Europe I found myself studying the design techniques of thee various different cultures as well as how it compares to that of the US. Interestingly enough I found myself able to look at the typography of design completely independent of the message (as I did not know the language). This is an oddly effective way to see what techniques of displaying and using type were effective, for what reasons, and why.

With out knowing what anything said I could easily identify even subtle cues as to what was the most important element in type, what was secondary information, and what was practically meta data. This hierarchy of visual importance in regards to type can also be referred to as typographical contrast.

What is “Typographical Contrast”?

Simply put it is the grouping of two typographical elements, then using different methods of traditional design to create contrast. The contrast places emphasis on the important element of type, letting the secondary element command less attention. The result is an improvement in the communication of the overall design message.

If we look at traditional forms of contrast then we have:

• Size
• Color
• Spacing
• Shape

All of which can be used with type to improve our typography on the web. To keep this post short an interesting I will be offering some examples, explain what I did, and move on.

1. Size

This is probably the most common use of typographic contrast and is quite common on blogs and other content that has a time relevance. Many blogs uses this method to provide additional information for those who are interested, but kept it subtle enough where it doesn’t distract or command your attention.

My blog, for example uses large headlines with smaller type for supportive data. The headlines are large as it is the most important element of type in it’s area. However there is additional content that is of value, it simply is less important (in this case the number of comments, posted date, and author).

The concept is pretty simple, make the most important element of type larger while and supportive type can be smaller. See the example below:

Size Contrast

By contrasting large type with small type we get a visually interesting typographical design and it is functional. The most important element commands the most attention, while the secondary element is subtle yet legible. This dynamic builds a visual hierarchy.

2. Color

Color is another common way to develop some contrast between typographical elements. The most common way that we see this in design is having some type lighter than others. Obviously lighter text (when dealing with a light background) has less energy and thus less visual attention. This creates a contrast between it and any darker element.

I have also seen great examples where black is contrasted with color, or the richness or vibrance of colors is used to develop a level of contrast.

Color Contrast

Again this establishes a visual hierarchy as the most important elements will command the most visual attention (and I might note that the lighter type element doesn’t necessarily have to be the at a lower visual importance.)

3. Spacing

The use of spacing can be a tricky technique to master. However when done properly it creates a rich contrast and interesting typography in design. The spacing of type itself can obviously be altered in three traditional ways, letter spacing, line spacing, and word spacing. To be honest I have only see spacing work effectively in line spacing and letter spacing, however I would be more than happy to be corrected in terms of the use of effective word spacing in typographic contrast.

Space can also be altered simply in the placement of type. Right justified vs left, indented vs on the same rule, etc… Any time you alter the typical placement of type you will create tension and visual interest (and thus contrast).

Spacing Contrast

Space works best when used in conjunction with other techniques. It is a tricky technique to master because depending on the situation more space can either increase or decrease the visual weight.
It can either thin the text out, removing visual interest and attention; or it can also cause the element to take up more space more than thinning it out which could cause it to have more visual interest and attention.

4. Shape

When I refer to shape I am talking about either using different typefaces or italic, bold, etc caps vs lowercase, etc… Really altering and playing with the shapes of two different typographic elements.

This can range from something as simple as coupling a serif with a san-serif, or as dramatic as a decorative font with an ultra-simple font.

When used effectively it can be a nice balance between legibility, style, and visual interest.

Contrasting with Shape

Shape probably has the most capability to create typographic contrast. Because of this you also must be careful of how you use it, it is really easy to create some “cool” design elements that really detract from everything else on the page because they simply command too much attention.

5. Putting them all together

After you have worked with the different individual elements for some time you can start to work them together for an even richer experience. This is another situation where you really want to ensure that you balance the interaction and relationship between the two type elements and everything else in the composition. It is easy to create a lot of visual contrast using all possible elements, only to end up detracting from the rest of the composition.

Contrasting Everything

You may notice that I was able to play with the different elements to increase contrast in one way, but decrease it in another. For example make the type bigger, but lighten it; or make it smaller but a brighter color. A thinner font but played with the spacing.

You can create some very powerful typographic contrast by playing with these elements. Every adjustment you make alters the message a little bit, and by balancing the message and communication with visual impact it enrichens the visual experience.

Any thoughts on other ways to increase typographic contrast? How about some good examples?

Better design by brushing up on your techniques

I often fall into the trap where I limit the scope of my design capabilities by what techniques I have learned for my design tools (in this case photoshop, and illustrator.) You may not realize it, (and I often do not either) but the techniques that you don’t know actually hinder your overall design capabilities.

Even if you have been through graphic design school or experienced in fine arts, you will still suffer from a narrow design capability if you don’t work to learn more about these tools. This is because there are techniques you could use but don’t even realize are an option while creating a new piece of work.

Photoshopers vs Designers

I see two different skills related to this subject, “Photoshopers” and “Designers.” I used to be very specific about calling myself a “designer” over a “photoshop guru.” The reason being that photoshop gurus tend to be amazing at altering photos, or developing incredible works of digital art in photoshop (sometimes making the surreal look real.) Where design requires functionality, usability, balance, and finesse. These are two different and specific skills, however it pays greatly to have both.

Getting to my point

When you are working with a design, even if you have done sketches, thumbnails, etc… chances are you are not even considering some great design accents because you simply don’t know how to do them. Maybe you don’t even realize that they exist as a possibility. If you were to know about them, in the right moment you would realize said technique would be worth trying and it would raise the quality of your work.

You may be looking to create a specific look, feel, or develop a specific mood. Naturally you will be thinking in terms of “what can I do to achieve this goal?” However “what can I do?” is actually “what can I do to achieve this goal that I know how to do?”

This is why it pays to take time to continually expand your skills and capabilities with your tools so that you have a wide range of available technique and have more to select from. Eventually you will have thousands of techniques and capabilities to create a wide range of moods/impacts/feelings/etc, and won’t be limited to the basic techniques you have used in a hundred of your old designs.

Long story short, you should have the skills and capabilities of a photoshoper with the design fundamentals of a designer.

Some Examples

You can often tell which designers have not only mastered the fundamentals of design but the tools used to create the work as well. N Design Studio and Veerle are two excellent examples of this. In the case of N Design Studio, Nick La clearly has a great sense of design. His work is balanced, the typography is well crafted, and the color scheme communicates a specific message. However he is able to take the design to a whole new level by some of the advanced as well as stunning techniques he has learned.

If you take a look at Avalon Star you will notice the same trend. Again the designer has a clear mastery of design fundamentals. So much so that the site would be very well designed even with out the level of detail put into it. However he is able to create a truly memorable, high impact design through his understanding of photoshop.

So what am I saying?

If you have time it is worth while to practice your photoshop/illustrator skills as often as you can. With so many great tutorial sites available, there are always new techniques and methods to learn. Below is a list of the ones I follow,

• PSDTuts
• VectorTuts
• Smashing Magazine
• Verlee
• Web Designer Wall

What sites do you follow for tutorials?

Effective Web Copy

I am often frustrated with how little attention is put into the messaging on most websites. It seems that you run into two scenarios when faced with web copy. The first is that the website owner has the writing done internally and then edited professionally, and the second is that their is a professional advertising/marketing agency that writes the web copy because budget permits it (however most of the time the copy is better suited for print than the web).

The result of either of these situations is poor and uninspiring web copy. The messaging does not compel you to read it nor does it inspire you to learn any more about the product/service/offering. The worst offenders for what ever reason tend to be web design companies themselves. If I see another “We create beautiful sites based on web standards blah blah blah” headline I just might crack.

Effective web copy must be short, to the point, and focus on the benefits that you are offering the user. It needs to be presented in a way that takes little effort to read/scan, and should immediately give you the option to jump to the next stage of the conversion funnel. From attention to interest, interest to desire, or desire to action, etc…

If you can’t stare at the screen for 10 – 15 seconds and immediately be able to describe the unique value of your product/service than your web copy has failed. Keep in mind that the communication of the unique value will always come from the copy and not the design. A design might tell you something about the quality, attitude, or brand of the site but a design will never tell you that “The unique materials make North Face clothing the strongest and warmest gear with out extra weight or bulk.”

Lets look at a web design company that does it well. WebpageFX has extremely well crafted messaging in their flash header. Despite some potential usability issues, when you do find the good messaging it is very clear, compelling, and professional. Try click on the little circles in the bottom left hand corner and watch the simple clear messages and how they are enhanced by design but not replaced by it.

You understand the benefits of complex services very quickly, including mobile web, analytics, etc…

This could even be done with out flash and still be effective because the simple clear messages work so well. So when in doubt try and simplify what you are saying and really focus on making the value and the benefit clear.

All the Tools You Need for Rich Web Typography

Typography has come a long way on the web, but we are still stuck with a fairly limited amount of control over our type and how we use it. Even after exploring fonts that you could use but probably don’t, and learning some advanced css typography techniques, we are left with maybe a handful of additional typefaces and techniques to really make our typography shine.

Luckily there are some tools and methods to improve the typography on the web, and most of them are simple, and scalable.

The Situations

There are two distinctly different situations where we would want to improve our web typography. They require different methods, tools, and needs. These situations are headings and body type. Headings should draw attention, have an impact, and be meaningful. Where body type should be easy to read, clean, and have a consistent flow.

When it comes to headlines we have several options to improve our CSS based typography, or use replacement techniques such as sIFR, flashImage, or CSS Based image replacement.

Body type is much more difficult, we have fewer options to really control and work with out typography. Luckily body type should do little other than be clean and legible. In this situation we really are looking at tools that will increase the legibility of our type.

Headlines

sIFR

sIFR is by far my favorite method of improving the headline typography. It addresses almost every typographic issue that you may run into. Not only can you use any typeface that you have on your computer, but you also have more control over letter spacing, leading, word spacing, font smoothing, and even some stylization.

This nifty tool (and yes I said ‘nifty’) uses javascript to dynamically insert a flash movie into the document where you have text that you would like to be displayed.

Since it is inserted dynamically you still get the semantic and SEO benefits of your H tags with the design and typographic benefits of a tool this powerful.

Of course if a user doesn’t have javascript, they are still able to see the normal HTML text and still have a positive user experience.

Their are some drawbacks however. It can be tricky to configure / install, and sometimes it takes a noticeable amount of time for it to render. It has a noticeable footprint the first time it downloads (afterwards it is cached) and of course will slow down the rendering of the page slightly.

FaceLift

FaceLift provides the same function as sIFR, but uses dynamically generated images instead of flash. Again you have the same benefits of actual semantic H tags, but have the ability to use any font that you have installed on your computer.

It seems to be a bit faster than sIFR and the technology is much less complicated. FaceLift supports transparent headlines for complicated backgrounds through the use of the PNG image format (so IE6 might require some finessing).

Simple and straight forward FaceLift is a great option for beautiful typography. However it does not support some of the advanced functions that sIFR does. Letterspacing, leading, and other stylization such as dropshadow filters and selectable text are available in sIFR but not FaceLift. However it does seem to have better consistency size wise across browser.

CSS Image Replacement

Sometimes there is no replacement for the classic method. If you have complicated typography in addition to some complex styling, it is very likely that neither FaceLift or sIFR will be able to dynamically generate the look you need. In this case you need to create the headlines in photoshop and use CSS to replace your markup. This is called “Image Replacement”

There are several methods of doing this each with their pro’s and con’s. With nine different methods to chose from, finding one that fits your situation should not be all that difficult.

The advantage for using this method for your rich typography will be that you can make it look exactly as you wish and you know everyone will see it in a very consistent way. Of course this method doesn’t work so well if you have a large CMS based site.

Body Type

As stated early there really is one major focus of body type, make it legible and clean. Of course there is some room for picking the right typeface, however with a limited range of choices you should quickly be moving on to more important things such as baseline rhythms and legibility.

Luckily there are some great tools out there to make this job easier, and if you have done it all manually you will be excited about how much time you really save.

Of course the first step is to figure out what font to use and what fonts are safe to use.

PICKING AND WORKING WITH THE FONT

FontStackBuilder makes building your font stack quick and easy. With a great cross section of fonts that are available on windows, mac, and Linux you can easily find and generate the code for a safe and effective font stack. Ensuring you have selected typefaces that all users will be able to read and understand regardless of OS will put you on the road for great typography.

But to really take advantage of typography (even in your body text) you really should have a good idea of how the type looks in all different sizes and states. This way you can make an educated choice in how to display non headline type (bold, all uppercase, etc). If you need a good render of type with out the hassle of save and preview then you need csstype.com.

CSSType.com lets you specify what typeface and words you want rendered and it will give you a whole output of different states and sizes letting you really see a range of options to use in your stylesheets.

If you are looking for more of a playground to work the your typography, have a look at CSSTypeSet.com has a simple interface with easy sliders so you can make fine adjustments on the fly, see how it looks, and get the CSS code when finished.

WORKING WITH YOUR BASELINES

But as I touched on before setting and working with your baselines is probably one of the most tricky aspects of web typography related to your body font. Setting a baseline or vertical rhythm ensures that the bottom of all elements and lines of type line up with each other creating a consistent and integrated composition.

Of course understanding how it works is pretty the first step, but afterwards you may find it quicker and easier to use the vertical rhythm calculator than doing all of the calculations and coding yourself.

Once you have developed your vertical rhythm make sure to test it using Rob Goodlattes great “syncotype” script. The script puts an overlay of the rhythm you are aiming to achieve over your site so you can see if any element doesn’t line up and make tweaks accordingly.

THOSE TOOLS SHOULD BE A GREAT START (OR SPEEDUP) OF YOUR WEB TYPOGRAPHY

Have any other tools or techniques you use to improve your web typography? Let me know so I can add them to this list.