Michael Doyle | Blog

Web Design – Typography

I've usually just relied on Verdana and eyeballing layouts when taking typography into consideration. At the moment, I'm living and breathing typography for the website I'm currently creating. It's a simple website, but I'm focusing on the rules for typography on the web, web safe fonts, spacing, leading, etc. It's one of my biggest weaknesses when designing websites so I'm researching as much as possible into it at the moment. Some interesting sites I've come across are:

Basic rules for web typography:

http://www.webdesignerdepot.com/2009/02/10-web-typography-rules-every-designer-should-know-2/

Browser safe fonts:

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Fonts bundled with Mac, Windows, Adobe and Office:

http://media.24ways.org/2007/17/fontmatrix.html

Embedding custom fonts with Javascript:

http://typeface.neocracy.org/

Smashing Magazine has a great article on 50 different web typography tools:

http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/

Design – Typographic Desk Reference

The Typographic Desk Reference looks like a very handy reference book for designers.

Some sample pages are included on the site.

http://typedeskref.com/

Web – Modal Windows

Smashing Magazine has a good round up of the different typs of modal windows.

http://www.smashingmagazine.com/2009/05/27/modal-windows-in-modern-web-design/

Web – Graded Browser Support

When developing web sites, how the site works and looks in different browsers should be tested. This can be a time consuming process of creating custom hacks, tweaking code, developing alternate workarounds or even ignoring incompatibility issues.

One of the main problems confronted is the selection of which browsers should be selected to test with. Yahoo developer network has created a list of "A-Grade Browsers". A-Grade Browsers are fully functional browsers which account for 96% market share.

http://developer.yahoo.com/yui/articles/gbs/

Testing time can be greatly reduced when used with browsershots.org

Web Design – Creating the Web 2.0 Look

Even though it's now becoming outdated, sixrevisions.com have a good article on how to create a web 2.0 look in Photoshop using the 960 grid system. It's a two part article that will include how to code it in CSS.

http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-clean-web-20-style-web-design-in-photoshop/

SEO – Internal Linking

Quick summary of it all....

• To internally link pages, keywords should be used for the link and the page it's linking to should have the same title
• Emboldening keywords should be done
• If keywords appear in text paragraphs, try and link them to the associated parts of the website. For example, if there is a gallery of photos, mention it in the body text, link it to the gallery page. The gallery page should have a title of gallery and a heading of gallery. The main body of text should have some mention of it being the gallery and it should be bold.
• This method also counts the internal links as votes.

The way I look at it all, it's just creating good clean metadata. Google indexes your pages so it knows the location of them all. Inserting metadata (title, headings, alt text, etc.) into these locations allows Google to know what it's indexing.

Windows Utility – Nimi

Nimi (freeware)  is a Windows XP visual tweaker, Lifehacker has more information about it.

http://lifehacker.com/5255874/nimi-adds-visual-effects-and-eye-candy-to-windows

XP Skin – Royal Noir

Windows XP has a limited amouunt of skins, Royal Noir is a certified XP Skin. You can read more about it over at www.istartedsomething.com

I uploaded the theme to my server, just as a backup. It can be downloaded here.

Install directions:

1. Extract files to “C:\windows\resources\themes\royale noir”
2. Double click on “luna.msstyles”
3. Select “Noir” from “Color Scheme”

SEO – Case Study: adobe.com

The first result for searching the term "click here" on Google is adobe.com. This seems strange when looking at the adobe web site. There is no mention of that term when looking through the adobe site (title, meta tags, description, etc.). So, on page optimizations is not having any affect, the fact that a huge amount of highly ranked trusted pages link to adobe for products (specifically adobe reader) is putting it at the top of the results.

Many of the sites linking to Adobe are using the terms "click" and "here" to send visitors to access Adobe content. A large majority of these sites have a high page rank.

So, the main point is that on page omptimization is important, but off page optimization is far more important.

CSS – Improving Typography

AisleOne have a great article on how to improve typography on the web using a simple few steps.

http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/