Articles & Notes
wp-Hyphenate 1.05 beta Available
Content Emphasis in Balance
I was asked to review a website for a real estate agent in Arizona. Upon visiting the site, I was immediately confused and overwhelmed. It is not an exaggeration to say there were 50 messages on the front page, all screaming for attention. The result was a site where every piece of content was minimized.
This is a common mistake. We have a lot to say, and most of it is important. As business owners, we offer many services; we want to sell them all. But visitors to your web site do not care. If you overwhelm them with information, they will not know where to start, they will not expend the energy to figure out where to start, and they will leave your site with malice.
As you consider your website, these three observations will help you identify what changes will increase your website’s ability to meet your business objectives:
- There is a phenomenon called banner blindness. As consumers of web content, we train ourselves to avert our eyes from anything that looks like an advertisement. Jakob Nielsen wrote a must-read article illustrating the ineffectiveness of fancy formatting.
- Suppose a website visitor’s attention could be given a point value of 10. You have these 10 points to distribute to different parts of your site. You should identify your core objectives and distribute these 10 points in proportion to their importance. The site design should give prominence in scale with the distribution of points. Your front page will be loose content, but what remains will be effective.
- Ultimately, what is described in the two points above are aspects of a philosophy called “user centered design”. You must look at the site from the users perspective. Users determine whether they think a site will provide for their need within the first 2 seconds of their visit. If they don’t see immediate hope, they quickly click the back button. What is it that your users are looking for? This is very different than what you want to tell your users. Unless you first answer your user’s questions and build credibility in doing so, they will not care what you have to say.
If you consider these points, you will realize that they are applicative to much more than your web design. They require a rethinking of your business model. Ultimately, your website is a reflection of your business. If your website is unfocused and ineffective, perhaps it is because the business it is representing needs purposeful direction.
wp-Hyphenate 1.04 beta Released
Choosing Your <h1>
HTML 4.01 defines 6 levels of headings: <h1> - <h6>. These headings are hierarchical in nature, indicating the importance of their content from most important to least. It is a matter of best practice to label the title of each page with the <h1> tag.
Semantically, it is important the <h1> tag identify the core essense of the subject page. Such practice is also beneficial to the accessibility and search ranking of your site.
Yet in practice, many web designers consistently wrap the site identification (i.e. company name or website name) in the <h1> tag, leaving the remainder of the content to share the <h2> - <h6> tags. Now, it is completely appropriate to wrap the site identification in a <h1> tag on the homepage, but this practice should be resisted on subpages. But out of laziness, this is often done.
Let’s remove excuse for the lazy, and provide code to properly use the <h1> tag.
The following HTML and PHP code provides the logic to wrap the site identification in a <h1> tag on the home page, and in a simple <div> tag on the remainder of pages:
<?php
function isHomePage() {
if( ($_SERVER["REQUEST_URI"] == "/") || (substr($_SERVER["REQUEST_URI"], 0, 7) == "/index.") {
return TRUE;
}
return FALSE;
}
?>
<?php if( isHomePage() ) { ?>
<h1 id="siteID">Company Name</h1>
<?php } else { ?>
<div id="siteID">
<a href="/">Company Name</a>
</div>
<?php } ?>
Of course, some content management systems have built in functions that do the job of isHomePage(). For example, with WordPress you can use is_page('Home').
The following is an example of CSS for styling your <h1> and site identification:
h1 {
clear: both;
margin: 36px 0 18px;
font: 54px/54px "Palatino Linotype", serif;
text-align: left;
color: #333;
text-shadow: #ccc 3px 3px 3px;
text-transform: capitalize;
}
h1#siteID, div#siteID {
clear: both;
float: left;
height: 90px;
width: 400px;
margin: 0;
padding: 0;
text-indent: -9999px;
background: url('images/logo.png') no-repeat;
}
With this handling of the site identification, you are now free to identify the title of each subordinate page as <h1>.
Projectwp-TrackbackPopup 1.0
In the default WordPress theme (and many others), a trackback link is included in each post’s meta data. Knowledgeable users right-click on the link and copy the link location. But the vast majority of users click the link, only to be redirected back to the very page they were on. All they want is to be able to copy the link, but the standard implementation does not provide the expected result. wp-TrackbackPopup resolves this issue. It uses unobtrusive JavaScript to cause a popup when someone clicks the trackback link. The popup provides a text version of the trackback url for easy copying and pasting.
Projectwp-Hyphenate 1.05 beta
Hyphenation is finally available for the web. The addition of hyphenation is a significant step forward for the state of web typography. With it your left aligned text will be less ragged, and your justified text will avoid the ghastly word spacing that has prevented serious web designers from using it.
From the PortfolioHyph-n
For accessibility reasons, we have also provided a high contrast version of the design.

From the PortfolioNew Frontier 21
Dr. Anthony Muhammad approached us with a web site that woefully underserved his educational consulting business. The original site did not match the professional reputation he had so carefully crafted. Working hand in hand with Dr. Muhammad, we developed a site with a simple usable interface, reflected the urban educational culture he had set out to transform, and incorporated an online store.
Compare this to the previous design:

5 Principles And Ideas Of Setting Type On The Web
Smashing Magazine: 5 Principles And Ideas Of Setting Type On The Web
Optimal Line Height
The theory and the application of optimal line height — called leading in typographic circles — varies greatly in web design. Typography references consistently put ideal line height at 1.2 ems (a measure of type equivalent to the the letter height or point size of a typeface).
Yet, premier web designers (and typography affectionatos) regularly set line height to 1.5 ems or more. That is a 33% overstatement of the preferred height. This creates a striping of text, rather than the desired greying. When Jason Santa Maria crafted the current A List Apart design, he set the line height to a whopping 1.8 ems. Why is this done?
This is partly explained when one considers the line length of the subject designs. The designs require line lengths (or measure) notably longer than those recommended in typographic references. The increased line length demands increased line height to aide eye tracking. This does not make for ideal type, but it does make for the best typography for the subject design. James Felici says it well in his book The Complete Manual of Typography:
An axiom of computerized type is that leading should generally be 1.2 times the point size of type. This isn’t a terribly useful guideline, because it’s clear that leading must increase along with the measure.
One consequence of this is other web designers look at what the elite are doing, and apply that line height regardless of line length. This leads to line heights that are unnecessarily out of proportion.
So as a general rule, an optimal line length is 60 to 65 characters, or 30 ems. At that measure, the ideal line height should be approximately 1.2 ems. As line length increases, line height should follow proportionately. The body text in the KINGdesk design is set to a measure of nearly 27 em and a line height of 1.2 ems.
