Because we are forced to use a select few typefaces we are limited in not only our creativity, but also in how we can best represent a brand that dares select a corporate font that falls outside of the 15 - 20 "safe" fonts to use on their website.

Now don't get me wrong, there are some work around methods out there. Hell some of them are even pretty good, but none of them are great. They almost all rely on some form of javascript or server side processing and it never works as well as actual web text.

Then there was @font-face

For a long time this has looked like the best solution to our typographic toils. Now we can embed fonts into our websites and if users don't have them it simply gets downloaded to their computer, brilliant! What a huge advance in web technology! It may shock you that it has been supported by IE of all browsers since version 5.5. Yes, yes, we have actually been waiting for so called "modern" browsers to adopt the technology before we got to the point we could use it.

Poking fun at browsers aside we can now use @font-face safely and expect that a majority of our users will be able to experience the new fonts. Only there is another problem, a problem that actually was a part of @font-face's solution.

Downloading fonts onto a users computer that doesn't hasn't purchased the rights to them? Whoops, that is a copyright violation.

So we can't use commercial fonts?

A nice selection of fonts to chose from

As it stands we can't use commercial fonts and typefaces using this method. There is no license that I am aware of that allows you to freely distribute a font after purchase. So we are limited to using freely distributed fonts. As desperate as this situation may sound it is actually OK because there are some pretty good free typefaces ones out there (thank you dedicated type designers, I love your work).

What actually becomes the challenge is finding these quality typefaces. Beyond finding them there is some effort in converting the typefaces for IE, hosting them and integrating them into your CSS.

How TypeKit Solves These Problems

Typekit aims to free us of the restrictive "web safe fonts" as well as make the process easy and effortless. Sure there are some sites out there that list @font-face safe fonts but typekit takes it not just one step further, but four. How do they make it four steps further you ask?

• With a large selection of fonts (approximately 75 for the trial account) and an easy way to sort and narrow down the available fonts finding one you need take minutes
• Rather than downloading the font, converting it and hosting it TypeKit keeps all of the fonts on their servers saving time, effort and bandwidth
• Rather than dealing with @font-face CSS files you simply include a javascript file and add which selectors you want to have the fonts embeded
• Font not quite the best fit? Rebranding? Redesigning? You can change the font used on a dime

Easy to integrate into your website

Price points

The trial account is just that, a trial. You can use two fonts on a single website and don't have access to the full library. However the upgraded accounts are really quite inexpensive ranging from $24 - $250 per year ($20 a month isn't so bad). With upgrades you get to use the kit on additional websites and have access to a larger font library.

My only complaint would be that there is no "unlimited" option. For those of us who run agencies it is conceivable that over time we would need to use the service on more than 40 sites and purchasing multiple accounts could get messy.

The product is a solid concept and is well executed. The extra effort to make it more than a repository of free licensed fonts goes a long way.

What are Your Thoughts?

Let us know if you think the service is something you would use and pay for, or what you would improve about it.

If we are to look at the percentage of people who potentially have one accessibility need or more, you can get a pretty clear picture that not only is it a good idea for the betterment of the web -- but also it makes good business sense.

The Rundown:

The following is the percentage of web users I have found with a specific accessibility need (please note that these statistics are gathered from reports specifically in America - however I would expect similar results in other major areas of the world).

• Users with visual, motor, cognitive or hearing disabilities - 10%
• Users with an outdated browser (pre IE6) - 1%
• Users who have javascript disabled - 5%
• Users running on a low resolution (800 x 600 or lower) - 4%
• Users on dial-up or a slow internet connection - 10%

This means that up to 30% of users surfing the web can be effected by accessibility issues on a website (there could be overlap in some of the different categories, so I say up to). This is a strikingly high number of users that could be effected and should be reason to wake up and smell the coffee. You wouldn't turn 3 out of every 10 people away from your store front, why are you turning them away from your website?

How to Test

Testing your site for accessibility usually requires a handful of methods and techniques. The best method of course is doing actual testing with users who have accessibility needs. However if you are not able to do so there are plenty of ways to test your site by yourself.

Turn Elements Off

One of the easiest and best ways to start testing your site for accessibility is simply to start browsing under different situations.

• Browse in all text
• Turn off images
• Turn off javascript
• Shrink your web browser

This can easily be done with tools such as the web developers toolbar.

Try Using a Screen Reader

There are a handful of ways to test your site using a screen reader with out spending large sums of cash.

• JAWS free trial
• FireVox Firefox screen reader plugin

Test Internet Speeds

Using a tool like Internet Speed Simulator you can actually limit your bandwidth to see how your site will perform under dial up or slow speed connection situations.

Accessibility Effects More People Than You Think

Ultimately you need to remember that accessibility effects a lot more people than you may think. It is way to easy to dismiss accessibility because you don't see your users having accessibility needs, however that simply is not the case. There are plenty of more common accessibility concerns that you may not have in mind that could be keeping users from accessing your site.

One of the great perks regarding this technique is that in the event that a user doesn't have a browser that supports the CSS that we will be using, they will still see a nice beveled button - it simply won't look quite as nice.

What We are Going To Do

To create a nice button we have a few major components:

• A nice background gradient
• Rounder corners
• Some nice borders to give it a 3D effect
• A drop shadow
• A text shadow (for a nice touch)

In the end we will have a button that looks just like this, only with out using any images behind a few pixel background gradient (and when CSS gradients are supported we can even remove that!).

The HTML

<p><a href="#">Example Button</a></p>
<p><a href="#">Example Button</a></p>
<p><a href="#">Example Button</a></p>

As you can see the HTML is very basic, we essentially just need an anchor tag and text. The paragraph is there just to be semantic.

The CSS

.css3button a {
     background: url(background.gif) bottom repeat-x #9eabb3;
     padding: 5px 10px 5px 10px;
     text-align: center;
     font-weight: bold;
     color: #fff;
     text-decoration: none; border: 1px inset #aaa;
     -webkit-border-radius: 8px; width: auto; -moz-border-radius: 8px;  -khtml-border-radius: 8px;  border-radius: 8px;
     -moz-box-shadow: 1px 1px 1px #666;  -webkit-box-shadow: 1px 1px 1px #666;  box-shadow: 1px 1px 1px #666;
     text-shadow: rgba(0,0,0, .5) 0px -1px 0px;
      border-top: inset 1px #ccc; border-left: inset 1px #ccc; border-bottom: solid 1px solid #000; border-right: 1px solid #666;
}

.css3button a:hover  {
     background: #999;
     text-shadow: rgba(0,0,0, .5) 0px 1px 0px;
}

The CSS is a bit more complicated, but still fairly simple. We are really just adding a repeating background image, adding some rounded corners, as well as box and text shadows. The borders add a bit more depth / shading and ensures that if the CSS properties are not supported that the element still retains a beveled appearance.

The background image is simple gradient to give the button some depth, in this case I used the following image:

That Simple

That is how easy it is. If you want to play around with the borders you can end up with some pretty nice effects as well.

Examples

Example Button

Example Button

Example Button

Example Button

We as a community and as an industry have become very good at most aspects of building websites. Just looking through a few CSS Galleries clearly shows the quality of design that is being produced and how much it has improved in just a few years. If you look a layer deeper and view the source of these websites you will see beautiful and semantic XHTML/CSS. It seems the days of table based layouts is finally gone.

The amount of functionality and rich experience that sites have now day are creative, impressive and engaging. Powerful javascript libraries such as jQuery, MooTools and prototype make it easy to produce these experiences rapidly and effortlessly.

But a website is more than the design, code and effects/functionality. Sometimes we have to rethink our approach and find out what is really important. What are the sites objectives and what are our users objectives? More often than not you will find that you could improve the following areas of your websites:

1. Web forms

While they are far from the sexiest part of web design, web forms are arguably one of the most important. In almost all cases a web form also functions as a conversion point (a point where a user performs an action that accomplishes a site objective).

Here a user is going to enter in some of their personal information so that they can get something in return. This establishes interest and provides the site owner with some valuable information.

Web forms are often neglected in two ways:

1. There is not enough attention in making them usable. This could be poor validation, improper labeling of required fields, making them too long or poor form layout.
2. There is not enough attention to what information is asked from the user.

You have a real opportunity to learn more about the people who use your website. That information can not only help you build a better website but also a better business. This marketing information could easily lead to R&D improvements and better products.

Do some research and learn how you can make more effective forms. Your clients, bosses and website owners will thank you many times over.

Resources

• Web Form Design: Filling in the Blanks
• Web form eye tracking studies

2. The Content

Content is king. In a recent study 25% of users noted that the number one reason they were to leave a website was due to "weak web copy." The only reason anyone ever goes to any website is because of the content, yet so many website owners neglect the content. Despite it's importance content becomes an afterthought. Appearance, search rankings and conversions tend to be the focal point of most web design projects. What we may forget is that with out great content you still have a poor appearance, you won't rank high and no one will convert.

Rather than trying to write all of the content yourself, hire someone. It will be worth it, I promise you. If nothing else write the bulk of the copy and hire someone to make it consistent with the proper voice and tone.

Resources

• The Web Content Style Guide: The Essential Reference for Online Writers, Editors and Managers
• Quality Web Content

3. The Footer

With a little thought it becomes painfully obvious, most website footers are absolutely useless. A user takes the time and effort to read (or scan) through an entire page, and when they reach the bottom they are rewarded with links that don't fit anywhere else, a copyright notice and maybe an address and phone number.

The point where page content ends is a very high action zone. That means that users who get to that point have a high probability of clicking on any link that comes below it. Rather than some meaningless legal links and an address create a footer that gives the user a place to find additional content that may interest them.

This could be:

• Related pages / articles / posts
• Links to rich media
• Latest news / updates
• Previously viewed pages
• A contact form
• Ways to save / share the page
• Newsletter sign up

Resources

• Footers in modern web design
• Footers with great usability

4. The Print Version

Many designers fail to realize how many people still prefer to print off websites rather than try and read them on screen. There are two significant benefits to paying attention to the print version.

The most obvious benefit is that it can improve the user experience of the site. Users who visit your site and print it out will actually read the content and are more likely to revisit the site and make an action (or conversion). If the printed version is difficult to read and work with they are highly likely to simply recycle the paper and forget they ever visited your site in the first place.

The second benefit is it could be a real competitive advantage. If a user prints off two web sites, and yours clearly has more attention to detail in the print version, they are much more likely to use your product/services over the competitors.

You can improve the print version simply by:

• Turning off unnecessary items such as the header, footer, navigation, search box etc...
• Changing the font to serif, increase the font size and space out the line height to make the print version more legible
• Adjust the columns or remove sidebars so that only the primary content prints out

Resources

• Print style sheets, a definitive guide
• Pro CSS Techniques

5. Analytics

How users behave and use a website is one of the most important factors you could possibly focus on. Despite this fact it is so commonly neglected by both website owners and website designers. Businesses need to spend more money on the analysis of user behavior and web design companies need to promote the service more heavily.

Even a website that is built using an effective strategy, user testing and best practices is a best guess at what will be most effective.

If you actually pay attention to how users behave and analyize that behavior you can discover countless ways to continually improve your website.

• Are users leaving a specific page more than others? Maybe they are not finding what they are looking for and that page can bet altered
• Do you have a page where a lot of people are entering the site other than the homepage? You need to start thinking of those pages as landing pages
• Are there important pages that don't get a lot of traffic? Figure out how you can make those pages more prominent

Resources

• Web Analytics: An Hour a Day
• Occam's Razor - web analytics blog

Due to the nature of the industry and vast range of contributors to it, it can often be hard to find and monitor the great content that is being published. I used to find myself hunting through countless different websites and RSS feeds, trying to ensure I didn’t miss any valuable information, articles or techniques. Even trying to sort through them in an RSS reader is more difficult than it should be.

So to try and make finding the best web design news easier, we have launched Today In Design. Today In Design aggregates the most popular design articles from sources such as delicious, digg, design bump, etc… additionally it pulls in hand selected news articles from sources such as CSS Globe and Design Newz.

Any feedback or suggestions would be more than welcome.

Sometimes rediscovering these capabilities are valuable for creating new ways to add creative touches, such as the parallax scrolling effect. Other times they can greatly improve the usability and user experience of our sites. In some cases they do both.

I was recently reading through "The Elements of User Experience
," which opens with a compelling story describing why things going wrong in your day could be the fault of poor design in regards to usability. Interestingly enough one of the points covered in this section is the use of feedback as a way to notify a user that something has occurred.

View the demo here

Most Web Designers Fail to Take Advantage of :active

In the case in the book they mention a coffee pot beeping so you know that it was switched on. This same principal of offering a user basic feedback applies to the web, yet we rarely see it used in all instances it can.

We have had the ability to style a links :active pseudo selector since CSS1, yet when was the last time you actually used it? I will admit that I am a grand offender as well, as I couldn't tell you. However the value of such a subtle detail can have large benefits  to a users experience of the site. Not to mention it does give another avenue to enrich the interactivity of our interfaces.

An Common Example

If you have ever done any usability studies you will have probably run into a situation where things that seem incredibly simple end up taking significant amount of time. One of the most basic of these situations is that of clicking on a simple link. I have many times in my "behavior observing" career seen a user who thinks they have click on a link, despite having missed it slightly.

What follows is a long pause while they wait for the page to change, before getting frustrated and either blaming the internet, the site, or swirling the mouse to ensure the computer hasn't locked up.

This could all be solved by simply giving the user feedback when a button is clicked. Interestingly enough flash based websites have done a better job through out history of accomplishing this than most HTML sites, done so by adding a subtle "clicking" noise as a link is clicked.

Of course I am not advocating the use of sound (as it fails on several accessibility levels among other issues), however it wouldn't be hard to give the user some feedback to let them know the link was successfully clicked on.

What We Can Do

By using the :active selector in CSS we can give the user some feedback that a link has in fact been clicked. This way if there is any sort of delay the user knows that it is successful loading and they don't have to reclick the link. This will make the site more usable and as more developers and designers begin to adopt this process the web itself will become more usable.

Additionally it opens up a new area for us designers to work our creativity. We can now think about what subtle design elements we can give links and buttons to indicate to the user that they have been clicked. In my example, a beveled button appears to be pushed inward.

It Isn't Perfect

Despite the fact that it is a dramatic improvement over not having any feedback and it does give us more room to express our creativity, the functionality isn't perfect. You may notice in the demo that if you click on a button quickly it changes so fast you might not even notice. You may not realize that there is even an effect giving you feedback.

Regardless, using :active will still enhance the user experience. Even if only 10% of your users notice it is worth the time and effort put into it. Additionally users who are less familiar with computers and the internet will be more likely to hold the mouse button down longer and thus notice the effect.

Consider Adopting it as a Regular Practice

I really advocate the adoption of it as normal standards based markup. If it becomes a convention than users will expect some sort of notification that a link was clicked and even it happens to fast on the pages that load right away, they know to look for it.

View the demo here

1. Improve Your Semantic Names

If you work in a team or ever revisit your code and need to update it then you should think about the quality of your class and ID names. It is not uncommon for developers to use class names like "box", "wrapper", or "container." While you may think that these naming conventions or "semanitc enough" none of them describe the content that is inside them. Instead consider using HTML5 spec's such as "content-sub", "section", "content-aside" or "content-sup."

You and your team will have a much easier time sorting through code that describes the content than trying to remember the details of "box."

Read more about semantic naming from Andy Clarke and A List Apart.

2. Improve the Organization of Your Files

I think it is reasonable safe to assume that most developers have at least started to organize their files by type (ie: a folder for images, css, javascript, etc...). You can go a step further and improve the organization even more, particularly any folder that is going to have a lot of files (such as Images in particular and CSS as a secondary.)

I find it best to create sub folders with in images and separate images based on design structure, buttons, headlines, photos, etc...

There are plenty of other folders you may want to create to keep the updating and growth of a site easy and efficient, including:

• Documents
• Client files
• Copy
• Proofs
• Staged/Development area (folder for a "clone of the site" where you can make changes and get sign off)
• Downloads

The Elements CSS Framework does a great job of organizing files based on the normal client/provider workflow.

3. Use Commenting in Your XHTML

Any time you end up developing complex layouts you are bound to use a lot of <div>s in your markup. This can be particularly confusing to go back and edit as it becomes hard to figure out which div is being closed where. You may see three </div>s all in a row.

To combat this simply add some coments at each </div> (or any other closing element if you find that it will be helpful) to let you know what element was just closed.

     <div id="header" class="section">
          <div id="header-logo">
               <h1>HTMLiZER</h1>
          </div><!--/#header-logo-->
     </div><!--/#header-->

If you find it useful you can take it one step further and comment the primary area you would be editing (such as the main content area, sidebar, etc...)

4. Segment Your CSS

For small 4 - 5 page brochure sites your CSS will be pretty manageable even if you don't spend the time and effort you should into organizing and commenting. Once you start developing web applications or large sites with a vast array of design "modules" you should make sure that you organize your CSS in way that is easy to manage.

I recommend splitting your css into logical different files for better organization, such as:

• reset.css
• main.css
• structure.css
• typography.css
• print.css
• helpers.css

This way you don't have to sort through all of the typography styling to find the area where you defined the size of the header. Likewise if you want to adjust the headings it is pretty simple to find it through a small typography.css file rather than a huge file that has everything.

5. Create a TOC With Comments in Your CSS

Every CSS file you plan on editing and extending over time should have a table of contents at the begining and a headline seperator at every section. This will allow you to easily jump to a section using "find" rather than scrolling for that one area that had the CSS you are hoping to modify.

EX

/***********

TOC:

=1: Header
=2: Content
=3: Footer
=4: Navigation
=5: Portfolio

****************/

/* *********  =1: HEADER *********** */

#header { ... }

6. Compress and Combine Your CSS files

Even though it is easier to work on a site when you segment and organize your css into several different file names, it actually causes your site to load slower. The more calls the browser has to make to the server for additional files the slower it will load.

Before deploying your css files you should combine and compress them. Compressing them removes any uncessary whitespace, comments, etc... that is unnecissary when the site is live.

There are several handy tools to do this including this online version.

7. Create your own framework (or improve on another one)

As you get more experience under your belt you will find that you use the same methods and naming conventions over and over. This is helpful for several reasons and it should be encouraged. It has lots of benefits including:

• More consistant rendering due to reusing ideal CSS techniques
• Easier editing and maintenance as you can better recall what names mean
• The start of code that can be saved and reused every time

Chances are that you end up rewriting the same type of code over and over again, simply because you don't have it stored somewhere. Some examples may be:

• A class that floats an image left / right and gives it some margin
• The structure for an unordered list navigation
• The structure for a form
• external link, pdf and download icons
• clearfix
• png fix
• Typeography baselines and hierarchies
• etc...

Rather than reusing these bits of codes write modules into your own CSS framework (or you could imrpove on another one). This way you can streamline the development process so it takes less time and improve the consistancy of your work.

8. Develop your CSS to be modular or "object oriented"

You could assign every bit of code an unique ID or adjust the margins and padding per instance. Lots of coders do this to try and get the CSS as close to the designers comp as possible. However this is inefficient in development time and file size. Establish a set rule for differnt types of content and how they should be styled, this should include basic things such as:

• Font sizing (all normal text is 12px, featured text is 14px bold)
• Margin's (normal margin is 10px between elements, margin between two content blocks is 40px, etc...)
• All navigation tabs will have 15px height and 13px font
• etc...

This way you don't have to rewrite the code for every new item added to the site. Additionally it will keep the site feeling consistant and well balanced visually. If all elements and every page follows the same rhythm it will feel more unified as a whole.

Some call this object oriented css, it is worth looking into for rockstar like front end coding.

There's no new syntax to learn and no programming skills needed, file is really small - 6 KB core script (GZIP compressed, 12 KB uncompressed), cross-browser compatible for Internet Explorer 6+, Firefox 2+, Opera 9+, Safari 2+, valid W3C CSS...

You can download latest version directly here or you can go to the download page for changelog and more resources. MoreCSS is very well documented with good descriptions and working examples.

How to install

MoreCSS runs automatically on page load and applies the properties written in external stylesheets to the specified elements. You do not need to configure the code or anything. Just include MoreCSS.js and the external stylesheet(s) in your page header. Be sure that you include the stylesheet(s) at first, then MoreCSS.js and at least all plugin scripts.

What can you do with it?

• add-class - Add the specified CSS class to an element, very good example is zebra-style table, it can be used for script generated lists for example in WordPress (list of archives, posts...)
• content - Adds dynamic content before / after static content. Enhanced cross-browser solution for CSS property.
• default-value - Adds a default value with typical on focus behaviour to the specified input field.
• include-content - Includes the content of a file (via AJAX).
• target - Opens the link target in a new window, popup or layer.
• tooltip - Adds a styleable tooltip to the cursor position.
• fade - Opacity fade effect.
• and much more ...

How to use

Syntax Elements
The syntax in MoreCSS is very similar to real CSS, but with some limitations because of performance reasons. But MoreCSS has also some special syntax elements for advanced functions.

Properties
Once you have installed MoreCSS you can use the properties in the same way as regular CSS properties. In the left menu you will find all currently built in properties and working code examples for each property. With plugins you can include special properties for visual effects and more.

Write your own plugins
MoreCSS allows you to write your own plugins using the Library Functions and using the Core Properties

Example code

 
 
/* HTML */
<table id="example_1">
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
</table>
 
/* CSS */
 
tr.blue td {
	background-color:#D0E3FF;
	color:#FFFFFF;
}
 
/* MoreCSS */
#example_1 tr:every-second-child {
	add-class: blue;
}
 

So here's basic example code, and a few ideas where you can also use this, for example i've used it Gunmetal free WordPress Theme, you can see the demo here.

 
<ol id="nav">
<li><a href="#"><b>»</b>Menu Item</a></li>
<li><a href="#"><b>»</b>Menu Item</a></li>
<li><a href="#"><b>»</b>Menu Item</a></li>
 
        ...
</ol>
 
#nav a {
	display: block;
	margin: 0;
	border: none;
}
#nav a b {
	float: right;
	display: none;
}
#nav a:hover {
	background: none;
	border: none;
	text-decoration: none;
}
#nav a:hover b {
	display: inline;
}
 

As bold tag you can use what ever you want like span or italic... The thing I'm seeing a lot these days is like descriptive headline on menu hover. The idea is the same, you place some tag into your link with empty span that has background image and absolute position and show it on hover. Here's example code.

 
<ul id="menu">
<li id="one"><a href="#"><span></span>Menu Item</a></li>
<li id="two"><a href="#"><span></span>Menu Item</a></li>
<li id="three"><a href="#"><span></span>Menu Item</a></li>
 
        ...
</ul>
 
#menu span {
	display: none;
	position: absolute;
}
 
#menu a:hover span {
	display: block;
}
 
#one span {
	background: transparent url(one.gif) no-repeat scroll 0 0;
	height: 11px;
	width: 111px;
	left: 35px;
	top: -20px;
...
}
 
#two span {
	background: transparent url(two.gif) no-repeat scroll 0 0;
	height: 222px;
	width: 22px;
	left: 15px;
	top: -10px;
...
}
 

And here are some ideas where you could also use this. For example to show that some link has target blank, so you give that link some id and do the same thing here for it with some descriptive icon. Have in mind that if you're using it inside some paragraph rest of text is going to move, so you could add padding on regular state and remove it on hover to fix it.

And here's another example, you can also use this to show a new menu like i am on every post title (those share icons) just i'm using a Javascript for it, didn't think if this when i was coding this Have fun!

Of course i'm talking about Border-radius property for FireFox and Safari 3 (only). And here are some nice examples how to use it.

 
#box {
     background: #eee;
     border: 1px solid #ccc;
     padding: 15px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
}
 

And of course you don't have to make all corners rounded, it can be just top left etc, so the code goes like this (small not, for example you can't make rounded corners on images and stuff like that)

• -moz-border-radius-topleft and -webkit-border-top-left-radius
• -moz-border-radius-topright and -webkit-border-top-right-radius
• -moz-border-radius-bottomleft and -webkit-border-bottom-left-radius
• -moz-border-radius-bottomright and -webkit-border-bottom-right-radius

Update: I've just ran into border radius for opera (example -opera-border-radius: 10px;) but i haven't tested it yes, so i'm not sure it's working, anyway go to know.