permalink
© Copyright KINGdesk, LLC, some rights reserved.

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:

1. 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.
2. 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.
3. 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.

permalink
© Copyright KINGdesk, LLC, some rights reserved.

permalink
© Copyright KINGdesk, LLC, some rights reserved.

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>.

permalink
© Copyright KINGdesk, LLC, some rights reserved.

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.

A screenshot of the wp-TrackbackPopup Admin interface:

The standard format trackback popup window:

An example of a custom formatted popup window:

Click the “trackback url” link below for an example of how this plugin works.

permalink
© Copyright KINGdesk, LLC, some rights reserved.

wp-Hyphenate includes tremendous ability to customize its application of hyphenation and adds features aid browsers to properly wrap long urls and keep widows company (a widow is the last word of a block of text that stands alone on the last line).

A screen shot of the wp-Hyphenate admin page:

FAQs

Why hyphenate?

Hyphenation increases the visual appeal of your website. When justifying text without hyphenation, word spacing is distractingly large. With left-aligned text, the right edge will be unnecessarily ragged.

How does hyphenation work?

The soft-hyphen is an invisible character that communicates to web browsers allowable line breaks within words. When a web browser wraps a line at a soft-hyphen, a hyphen is shown at line’s end.

Similar to the soft-hyphen, the zero-space character communicates allowable line breaks within strings of text. But unlike the soft-hyphen, it does not show a hyphen at line’s end. This is ideal for forcing consistent wrapping of long URLs. It also can be used to force line breaks in uncooperative web browsers after hard-hyphens in words like “zero-space” and “soft-hyphen”.

Which browsers support hyphenation?

Not all browsers support online hyphenation. Notably, before version 3, Firefox did not support hyphenation. Fortunately, it failed gracefully — hyphenated text displayed as if it was unhyphenated.

That is more than could be said for early versions of Safari (1.2 and earlier). Those versions of Safari displayed a hyphen at every possible hyphenation point — even if it was not at line’s end. wp-Hyphenate includes an option to strip all hyphenation from early version of Safari using JavaScript.

Starting with Internet Explorer 6, Firefox 3, Safari 2, and Opera 8, all major web browsers have offered full support for online hyphenation.

Does hyphenation effect search?

It depends on the search engine. Google and Yahoo properly handle the soft-hyphen character without penalty. Microsoft and Ask improperly treat soft-hyphens as word breaks. Fortunately, Google and Yahoo comprise more than 90% of the search market.

Can I control how a specific word is hyphenated?

Yes. The administrative panel for wp-Hyphenate includes an editable exceptions list.

What are widows and why protect them?

A widow is the final word in a block of text that falls to its own line. Especially if the widow is only a few characters long, she can get lonely. wp-Hyphenate will try to protect widows by bringing them company from the previous line.

There is danger that the widow’s company will leave the previous line with less than optimal word spacing. The risk is less if your text is left-aligned, but if it is justified, tread carefully. The protection of widows is completely customizable in the administrative options.

Is there any other implementation of this HTML hyphenation technology?

Yes. KINGdesk has also implemented this same technology as a simple web app at http://hyph-n.com. Submit your static HTML in the provided web form, and it will return hyphenated results for your use.

Does wp-Hyphenate work with the Typogrify plugin?

Yes. However, they will both try to prevent widows. Widow handling should be turned off in the Typogrify administrative options. The wp-Hyphenate handling of widows allows for more granular control, allowing the user to balance widow handling with the additional word-spacing created on the previous line.

What hyphenation algorithm is used in wp-Hyphenate?

The hyphenation algorithm used by wp-Hyphenate is based on the 1983 Stanford Ph.D. thesis of professor Frank Liang: Word Hy-phen-a-tion by Com-puter. Liang’s PatGen algorithm was updated in 1991 by Peter Breitenlohner. The resulting algorithm finds 90% of all allowed hyphenation points identified in the Webster’s Unabridged Dictionary with a 0% error rate.

What language patterns are included with this library?

wp-Hyphenate now has multi-language support. Pattern libraries are included for Basque, Bulgarian, Catalan, Chinese, Pinyin (Latin), Croatian, Czech, Danish, English (United Kingdom), English (United States), Estonian, Finnish, French, Galician, German, Greek (Ancient), Greek, Modern Monotonic, Greek, Modern Polytonic, Icelandic, Indonesian, Interlingua, Irish, Italian, Latin, Lithuanian, Mongolian (Cyrillic), Polish, Portuguese, Romanian, Russian, Sanskrit, Serbian (Cyrillic), Serbocroatian (Cyrillic), Serbocroatian (Latin), Slovak, Slovenian, Spanish, Swedish, Turkish, Ukrainian, and Welsh.

Can I port this plugin to another CMS?

Yes. wp-Hyphenate is licensed under the GNU Gen­eral Public License 2.0. If modify it, you must retain the KINGdesk, LLC copy­right infor­ma­tion, the request for a link to http://kingdesk.com, and the web design ser­vices con­tact infor­ma­tion unchanged. If you redis­trib­ute this soft­ware, or any deriv­a­tive, it must be released under the GNU Gen­eral Public License 2.0.

Will this plugin slow my page loading times?

Yes. There is a fair amount of processing that takes place every time a post is called from your MySQL database. In our internal tests, we have seen one-half a second added to single post pages, and over 1 second added to multi-post pages. While page load times will likely remain acceptable to your users, it is still recommended that you use a caching plugin (like WP-Cache or WP Super Cache) with wp-Hyphenate. There is no delay in the serving of cached pages.

Can I make a donation to support this plugin?

No. We don’t want your money. If you want to show your support, we would greatly appreciate a link to kingdesk.com from your website — perhaps in a nice review of this plugin.

This site is damn sexy. Can I hire KINGdesk to design a website for my company?

Yes. Please contact us.

Version History

Version 1.05 beta, November 10, 2008

Inserted actual soft-hyphen and zero-width space characters, rather than their HTML representations. This cleans up the appearance of the source code.

Removed errant auto-linking of URLs in the HTML title attribute

Excluded hyphenation, URL wrapping and widow protection from feeds

Corrected error to allow zero-width spaces to be stripped from IE6 via JavaScript

Forced wrapping after underscore characters in the midst of words

Corrected hyphenation of words containing select non-Latin characters

Version 1.04 beta, November 16, 2008

Shortened the default string length for the hyph_chunkSubject function from 4000 characters to 3000. This cured an issue where some text was being dropped (depending on server configuration).

Unlinked urls now link automatically when the “Always Link URLs” option is selected in the Admin options.

Version 1.03 beta, November 9, 2008

General code clean-up to separate core functionality for easy porting to php based content management systems

Added simple validation for user defined list of tags whose content should not be hyphenated

Updated all calculations to properly handle multibyte characters as required for multi-language

Added multi-language support and hyphenation patterns for the following languages: Basque, Bulgarian, Catalan, Chinese, Pinyin (Latin), Croatian, Czech, Danish, English (United Kingdom), English (United States), Estonian, Finnish, French, Galician, German, Greek (Ancient), Greek, Modern Monotonic, Greek, Modern Polytonic, Icelandic, Indonesian, Interlingua, Irish, Italian, Latin, Lithuanian, Mongolian (Cyrillic), Polish, Portuguese, Romanian, Russian, Sanskrit, Serbian (Cyrillic), Serbocroatian (Cyrillic), Serbocroatian (Latin), Slovak, Slovenian, Spanish, Swedish, Turkish, Ukrainian, and Welsh.

Version 1.02 beta, November 5, 2008

Resolved problem where occasional character was dropped in long posts.

Version 1.01 beta, November 4, 2008

Removed all new php5 functions and replaced with code that is php4 compatible.

Version 1.0 beta, November 1, 2008

Original Release

Your feedback is much appreciated. How can we make this plugin better?

permalink
© Copyright KINGdesk, LLC, some rights reserved.

permalink
© Copyright KINGdesk, LLC, some rights reserved.

Compare this to the previous design:

permalink
© Copyright KINGdesk, LLC, some rights reserved.

permalink
© Copyright KINGdesk, LLC, some rights reserved.

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.

permalink
© Copyright KINGdesk, LLC, some rights reserved.