Articles & Notes

ProjectPHP Parser 1.20

In devel­op­ment of our upcom­ing PHP Typog­ra­phy project, it became clear we needed a PHP based solu­tion to parse and reassem­ble HTML and its con­tained text. We were unable to find any­thing that suited our needs, so we built one. When done, we real­ized that what we had built was pow­er­ful, flex­i­ble, effi­cient, and valu­able… even out­side the ini­tial PHP Typog­ra­phy project. So, we are releas­ing PHP Parser as a stand-​​alone project for your use. We hope you find it as help­ful as we have.

Go to the PHP Parser 1.20 project page...

Web Strategies to Grow Your Consulting Practice

At the recent IECA Con­fer­ence in San Fran­cisco, Jeff King pre­sented a work­shop enti­tled “Web Strate­gies to Grow Your Con­sult­ing Prac­tice”. It addresses search engine opti­miza­tion and effec­tive tech­niques to con­vert web­site vis­i­tors into customers.

This pre­sen­ta­tion is now avail­able online via the Web in Focus pod­cast, com­ple­ments of KING­desk Web Design. You may view this pre­sen­ta­tion by:

If you find the pre­sen­ta­tion help­ful, please keep KING­desk Web Design in mind for your future web design needs.

Aesthetics Over Usability

A recent stay at the Hyatt Regency San Fran­cisco pro­vides an excel­lent case study in the con­se­quences of choos­ing aes­thet­ics over usabil­ity. This real world exam­ple high­lights a com­mon pit­fall in web design.

I despise air travel. Ris­ing before the rooster, dri­ven to the air­port, herded through secu­rity, endur­ing flight delays, belted to an under­sized air­plane seat, and couri­ered to the des­ti­na­tion hotel… I avoid this when­ever pos­si­ble. After arriv­ing, my sole desire is to get to my room and put down my luggage.

A Story of Frustration

So, upon my recent arrival at the Hyatt Regency San Fran­cisco, I was amused — in a twisted way — with the miss­ing front desk. After wran­gling my lug­gage through the revolv­ing door, I was greeted by an elec­tronic “Wel­come” sign, and a sin­gle esca­la­tor descend­ing from the upper floors.

con­tinue reading…

From the PortfolioNew Frontier 21

After the hir­ing of a new mar­ket­ing man­ager, New Fron­tier 21 approached KING­desk and asked us to refresh the pre­vi­ous design we pro­vided them. This is an exam­ple of KINGdesk’s pref­er­ence for evo­lu­tion over rev­o­lu­tion. Because the under­ly­ing struc­ture of the orig­i­nal site was sound, cos­metic changes could be made with­out the need for a com­plete redesign. The orig­i­nal invest­ment New Fron­tier 21 made in qual­ity web design greatly reduced the expense of this redesign.

The orig­i­nal web­site design was pur­pose­fully cre­ated with a mono­chro­matic color scheme intended to evoke the urban focus of this edu­ca­tional con­sul­tancy. With the intro­duc­tion of the new mar­ket­ing man­ager, there was a desire to intro­duce live­lier col­ors. At the same time, the focus of New Fron­tier 21 was adjusted so that the orig­i­nal front page — which fea­tured recent arti­cles — was of less impor­tance than draw­ing atten­tion to nation­wide insti­tutes they were host­ing. Con­se­quently, in tan­dum with the color refresh, the front page was reworked to direct users to reg­is­tra­tion for upcom­ing institutes.

New Frontier 21 screenshot

From the PortfolioD.C. Boone

When your job is to sell a dream of how your prod­uct or ser­vice can improve your client’s life, qual­ity pho­tog­ra­phy is an invalu­able resource. Res­i­den­tial remod­el­ers find them­selves pre­cisely in that posi­tion. As such, we worked with D.C. Boone to acquire pro­fes­sional pho­tog­ra­phy of their finest projects. This pho­tog­ra­phy has been inte­grated into every aspect of their website.

Fur­ther, the D.C. Boone web­site takes advan­tage of the lat­est in web browser sup­port, yet degrades grace­fully in less capa­ble browsers. In Safari and Fire­fox, the bound­ing boxes have rounded cor­ners. Inter­net Explorer does not sup­port this spec­i­fi­ca­tion, so IE dis­plays square cor­ners. IE6 does not sup­port trans­parency, and as such, the back­ground of the con­tent box is opaque. Other browsers, includ­ing IE7 and IE8 incor­po­rate semi-​​transparent back­grounds, allow­ing obscured details of the back­ground image to bleed through while main­tain­ing ade­quate con­trast for leg­i­ble text. This web­site is a won­der­ful exam­ple of how web design can reach beyond the low­est com­mon denom­i­na­tor, yet remain well-​​styled — even in out-​​dated web browsers.

D.C. Boone screenshot

From the Portfolioa.king's note

When a.king’s note approached us to develop brand­ing, logo and graphic design, we fell in love with a won­der­ful project. Fun tex­tures and lay­ered graph­ics con­tribute to the hand­made craft­ing feel cen­tral to a.king’s note’s prod­uct offering.

akingsnote screenshot

From the PortfolioTelematics Weekly

Can a site with­out color or graph­ics be beau­ti­ful? Telem­at­ics Weekly is just that. With a tar­geted user-​​base of Indus­try exec­u­tives and upper-​​management, their time-​​constraints directly affected the design of this site. Qual­ity typog­ra­phy and scannable con­tent make both honor the user’s needs and demon­strate that beauty can be found in simplicity.

Telematics Weekly screenshot

In addi­tion to user-​​interface opti­miza­tions, KING­desk devel­oped an algo­rithm to auto­mat­i­cally dis­trib­ute front-​​page sto­ries to bal­ance mul­ti­ple col­umn lengths. Until now, standards-​​based web tech­nolo­gies did not allow for such pre­ci­sion, but KING­desk con­tin­ues to develop inno­v­a­tive solu­tions to meet our client’s needs.

From the PortfolioWeb In Focus

A web­site with a focus: webin​fo​cus​.net is designed for one pur­pose: dis­tri­b­u­tion of pod­casts. Given it’s sim­ple mis­sion, the pur­pose­fully sim­ple inter­face fits right in.

webinfocus.net screenshot

User test­ing revealed that the pri­mary objec­tive end-​​users is to access the most recent episode of the pod­cast. Given this, and the straight-​​forward archi­tec­ture, the web­site header was greatly min­i­mized — lim­ited to site iden­ti­fi­ca­tion and search. All other func­tion­al­ity was moved to the footer.

Force Alt Text with CSS

Con­tent man­age­ment sys­tems with WYSIWYG edi­tors are great tools, in that they enable easy pub­li­ca­tion by those not famil­iar with HTML. But that same ease of use may enable non-​​valid or inac­ces­si­ble HTML markup. Some CSS rules have been sug­gested by oth­ers to enforce good markup by penal­iz­ing bad markup. For instance, use of depre­ci­ated tags can be forced to dis­play as big, bold and red:

font {
    font-size: 50px;
    font-weight: bold;
    color: red;
}

You may view this as overly con­fronta­tional. But I just con­ceived a way to use CSS (with a bit more con­straint), to enforce acces­si­ble markup. One of the most impor­tant acces­si­ble prac­tices (and eas­i­est to imple­ment) is the inclu­sion of alter­nate text for images. The fol­low­ing HTML demon­strates proper inclu­sion of the required alt attribute.

<img src="/pic.jpg" alt="Jeff's mug" />

If some­one uses a con­tent man­age­ment sys­tem to dis­play an image that is miss­ing this attribute, you can use your CSS stylesheet to sup­press the image from dis­play­ing with the fol­low­ing code:

img {
    visibility: hidden;
}
img[alt] {
    visibility: visible;
}

A few thoughts result from this imple­men­ta­tion. Not every screen reader will ignore hid­den ele­ments, but that is not the point. If an image is not acces­si­ble to every­one (by way of an alt tag), this ensures that the pub­lisher of the con­tent rec­og­nizes that same inaccessibility.

Sec­ond, visibility is used for sev­eral reasons.

  • It does not con­flict with your other display rules that may give images inline or block value in dif­fer­ent context;
  • visibility leaves a void of con­tent, mak­ing it clear to the pub­lisher that the image is not dis­play­ing; and
  • display can be turned off with a value of none, but there is no valid value for turn­ing it back on (with­out con­tex­tual knowl­edge of whether block or inline is appropriate).

Lastly, this pro­posal breaks in Inter­net Explorer 6, as IE6 does not under­stand attribute selec­tors. This can be resolved with the inclu­sion of con­di­tional com­ments in your doc­u­ment head. For example:

<!--[if lt IE 7]>
    <style>
        img {
            visibility: visible;
        }
    </style>
<![endif]-->

Now images will dis­play as nor­mal in IE6.

Right the Ship — 5 Ways to Optimize Your Website

I’ve had a num­ber of con­ver­sa­tions recently with busi­ness own­ers who are inti­mately aware of the impor­tance of hav­ing a web pres­ence. Hav­ing them explain to me these ben­e­fits (i.e. method of attract­ing new cus­tomers, edu­cate exist­ing cus­tomers about their busi­ness, increase cus­tomer con­fi­dence, cost effec­tive means of pro­mot­ing their books and ser­vices, estab­lish cred­i­bil­ity and trust, sep­a­rate them­selves from the com­pe­ti­tion, etc.) has been impres­sive. Of course this makes sense when you real­ize that in North Amer­ica alone nearly 250 mil­lion peo­ple use the inter­net, this rep­re­sents a tremen­dous pool of poten­tial cus­tomers. But what hap­pens when you fac­tor in a slow eco­nomic envi­ron­ment? Most of the time, these under­stood truths are tossed over­board in a mis­guided effort to store up resources until things pick up. So what is the out­look for today’s inter­net cli­mate? “… the Inter­net should be bet­ter poised to with­stand the storm given its abil­ity to com­bine performance-​​based adver­tis­ing along with broad-​​based brand­ing.” stated David Sil­ver­man, part­ner at Price­wa­ter­house­C­oop­ers LLP. Trans­lated — the answer to increas­ing your busi­ness in a slow econ­omy is not elim­i­nat­ing your mar­ket­ing efforts but, rather, max­i­miz­ing them. Focus­ing on the fol­low­ing 5 ele­ments of your web­site will help you weather this eco­nomic storm. It may even lay the foun­da­tion for grow­ing in these trou­bled times.

Web­site navigation

When a site’s nav­i­ga­tion is intel­li­gent, focused and intu­itive, vis­i­tors have to think less and are able to imme­di­ately find what they are look­ing for with min­i­mal guess­work. There should be a log­i­cal flow of top­ics, subtopics and sub­ject mat­ter within the site. This is vital to con­vert­ing vis­i­tors of your site into customers.

Web­site Design

How the site is devel­oped, its color scheme, archi­tec­ture and under­ly­ing cod­ing struc­ture, plays a sig­nif­i­cant role in con­nect­ing with your audi­ence. Be sure the over­all design is clean and pro­fes­sional. Col­ors and fonts should be easy on the eyes and should enhance rather than dis­tract from the vis­i­tors expe­ri­ence. Appro­pri­ate use of white space will also help focus the user’s attention.

Con­tent

Con­tent greatly deter­mines how vis­i­tors will inter­act with your site. Always write for your audi­ence. Well writ­ten and user focused con­tent allows your vis­i­tors to find out more about your prod­ucts and ser­vices, as well as deter­mine how your com­pany will be able to meet their needs.

Home Page

Your home page is essen­tially your store front. The home page should clearly direct vis­i­tors to the infor­ma­tion they are seek­ing. You only have 3 – 5 sec­onds to make a pos­i­tive impres­sion and turn that vis­i­tor into a cus­tomer. This is where you dif­fer­en­ti­ate your­self. Ref­er­ences, awards, affil­i­a­tions, an updated cal­en­dar of events, etc. all help to accom­plish this.

Vis­i­tor Trust

Your abil­ity to con­vince vis­i­tors that you have a trust­wor­thy, cred­i­ble busi­ness is crit­i­cal. High­light the expe­ri­ence and exper­tise of your orga­ni­za­tion. Be sure that the infor­ma­tion pro­vided is accu­rate, orga­nized and updated fre­quently. Make sure it is easy for cus­tomers to con­tact you and allow for feed­back. This will go a long way as you begin to build a rela­tion­ship with your visitors.