Articles & Notes

CSS Variables

A step-​​by-​​step guide to vari­ables for your stylesheets. Native CSS vari­ables have long been requested by prac­ti­tion­ers of web-​​design. The debate regard­ing appro­pri­ate­ness of native vari­ables has spanned the 14 year his­tory of CSS with­out near­ing res­o­lu­tion. Regard­less, you can use PHP for vari­able han­dling (and more) in your CSS today.

Using vari­ables in CSS sim­pli­fies web­site devel­op­ment and main­te­nance. Con­sider the case of color man­age­ment. Defin­ing your color scheme as vari­ables used through­out your stylesheet will facil­i­tate minor color tweaks or major color refreshes. You can even use vari­ables to man­age spa­cial rela­tion­ships rel­a­tive to font size (with­out the headache of man­ag­ing em based inheritances).

CSS does not directly facil­i­tate vari­ables. To include vari­ables in your stylesheet, you can over­lay a server-​​side script­ing lan­guage (such as PHP).

First, you will need to define your stylesheet as a PHP doc­u­ment. Rather than nam­ing your stylesheet style.css, name it style.php. You can then include this stylesheet in the nor­mal fashion:

<link rel="stylesheet" type="text/css" media="screen" href="/style.php" />

Most browsers assume file names end­ing in .php indi­cate HTML out­put. Con­se­quently we must add a bit of code to the top of your stylesheet to announce CSS out­put. On the first line of your style.php file, enter:

<?php header("Content-type: text/css"); ?>

Now declare your variables:


<?php
	// color scheme
	$mainBG = "#2e0303"; //burgandy
	$contentBG = "#f3e7ca"; //cream
	$textColor = "#333"; //dark gray

	$fontSize = 16;
	$lineHeight = 1.25*$fontSize; //20px
?>

These vari­ables are now avail­able for use through­out your stylesheet. I pre­fer to use short­hand PHP for inline use to increase code read­abil­ity. (Since I con­trol the server on which the stylesheet resides, and the file is not intended for gen­eral dis­tri­b­u­tion, long­hand is optional). Your stylesheet may include state­ments like these:


body {
	background-color: <?= $mainBG ?>;
	font-size: <?= $fontSize ?>px;
	line-height: <?= $lineHeight ?>px;
	}
#content {
	width: <?= 33*$fontSize ?>px;
	margin: <?= 2*$lineHeight ?>px auto;
	border: 1px solid <?= $textColor ?>;
	padding: <?= $lineHeight-1 ?>px;
		//remove border width
	color: <?= $textColor ?>;
	background-color: <?= $mainBG ?>;
	}

Do you want to adjust the font size but main­tain typo­graphic bal­ance? Change one vari­able. Your client called and wants the text to be a lit­tle darker? Now your match­ing bor­der will not be for­got­ten in the update. Use of vari­ables in CSS is easy and worthwhile.

Calligraphy Tutorial

Typophiles nat­u­rally appre­ci­ate cal­lig­ra­phy. Here is a great video series intro­duc­ing the Chancery Cur­sive script.

HTML5 Today

With some help from JavaScript, HTML5 can be used today. Onward!

Horizontal Elements Increase In Importance

As mon­i­tors grow wider, web design must accom­mo­date browser win­dows in excess of 1200 pix­els. Unde­signed white space vis­able on large mon­i­tors can leave an unfin­ished impres­sion on impor­tant users.

As of Jan­u­ary 2008, 38% of all com­puter mon­i­tors exceeded 1024×768 res­o­lu­tion. When updated for Jan­u­ary 2009, expect that num­ber to approach 50%. The growth in mon­i­tors larger than 1024×768 res­o­lu­tion is almost uni­ver­sally wide-​​screen for­mat:

Recently, a great num­ber of wide-​​screen for­mat mon­i­tors have been intro­duced to the mar­ket. Many man­u­fac­tur­ers have prac­ti­cally aban­doned the tra­di­tional 4:3 for­mat, instead opt­ing to man­u­fac­ture 16:10 models.

With 50 – 60% of the exist­ing mon­i­tors at 1024 pix­els wide or less, we can not extend the pri­mary con­tent beyond that limit. But, a sig­nif­i­cant and grow­ing per­cent­age of our vis­i­tors are view­ing expanses of unde­signed white space. This is fur­ther exag­ger­ated with designs opti­mized for 800 pixel-​​wide browser windows.

One solu­tion is to add dec­o­ra­tive hor­i­zon­tal ele­ments that extend the entire width of the browser win­dow. This may be an nav­i­ga­tion bar that stretches the entire width (while keep­ing the actual nav­i­ga­tion links together with the con­tent). It could be color stri­a­tions that are tied into the design of the main con­tent area. Asym­met­ri­cal ele­ments set wide of the con­tent areas may add visual inter­est that breaks up this excess white space.

Here are some exam­ples of web­sites that imple­ment these prin­ci­ples and dis­play well in very wide browser windows:

These hor­i­zon­tal ele­ments should be lim­ited to non-​​content ele­ments. Here are exam­ples of what not to do:

This may be fine in some out­lier con­di­tion (like when a sub-​​element of a page scrolls hor­i­zon­tally to show expanse of prod­uct offer­ing), but it is gen­er­ally ill-​​conceived. Most mouse scroll wheels do not scroll hor­i­zon­tally, and users of the web hate hor­i­zon­tal scroll.

5 Lessons From Converse

chucks This week, I found unex­pected insight from a pair of Chucks. Con­verse All Star’s have never been known for their qual­ity of con­struc­tion, but the pair I bought has sur­prised me with excep­tional design. They are beau­ti­ful — please do not waste your entire day enrap­tured by the pic­ture above. Here are some design lessons I was reminded of by these kicks.

Les­son 1: Don’t For­get Your Value

Why do peo­ple buy Con­verse shoes? Off the top of my head:
  1. They are inexpensive
  2. Retro Fash­ion
  3. Nos­tal­gia
  4. Brand Loy­alty
When look­ing to refresh a design, you do not want to aban­don core value. These sneak­ers honor their value. They remain rea­son­ably priced. They incor­po­rate mate­ri­als from the era they reflect. They main­tain the same form fac­tor of designs past. They are unques­tion­ably Chucks. What are your core val­ues, and how do you defend them?

Les­son 2: Free Your­self From Constraints

The design of this par­tic­u­lar pair of shoes cen­ters on the main mate­r­ial choice (design is always bet­ter when inspi­ra­tion for the whole is drawn from a uni­fied source). Gone is the can­vas that is com­mon to every other pair of Chucks. In its place is a won­der­ful tweed; soft to the touch with delight­ful tex­ture. This is not just a new color or pat­tern on the old con­struct. Addi­tion­ally, the All Star logo at the inside ankle is notice­ably mod­i­fied. It is now a mono­chro­matic embossed leather badge. This was a bold choice, but nec­es­sary as the next les­son will detail.

Les­son 3: Details Matter

The main mate­r­ial choice embod­ies a sub­tle qual­ity. It would have been out of place to cre­ate a strong con­trast with the stan­dard white rub­ber on the toe and around the sole. Instead, a light brown tint has been intro­duced to lessen the con­trast. It has also been incor­po­rated into the shoe laces and lin­ing can­vas. The same rea­son­ing must have moti­vated the above men­tioned logo mod­i­fi­ca­tion. As you seek to build cred­i­bil­ity with your cus­tomer base, indi­vid­ual details may go unno­ticed. But the sum of care­fully con­sid­ered par­tic­u­lars will speak to the qual­ity of your ser­vice or product.

Les­son 4: Evo­lu­tion, Not Revolution

This design works because it built on a good foun­da­tion. It did not for­get where it came from, but still found ways to sig­nif­i­cantly improve. As brand own­ers, as we grow weary of our logo, or web­site, or brand’s name — we may be tempted to start over. This may be war­ranted if our cur­rent brand was poorly con­ceived. But be care­ful in doing so. If pos­si­ble, it advis­able to evolve your brand.

Les­son 5: Know Your Audience

Who buys Con­verse All Stars? Gen­er­ally, peo­ple who’s fash­ion sense leans toward sim­ple earth­i­ness. Although this shoes roots are in bas­ket­ball, today’s prin­ci­ple patron are not fre­quent read­ers of Manolo’s Shoe Blog. Every design deci­sion was prop­erly made to appeal to the tar­get demo­graphic. The result­ing shoe is one that will suc­cess­fully sell. Suc­cess is rarely found in absence of under­stand­ing your cus­tomer. When you under­stand their moti­va­tions, you can deliver value that will be desired and appreciated.

wp-Hyphenate 1.06 beta Now Available

wp-​​Hyphenate 1.06 beta is now avail­able for download.

wp-Hyphenate 1.05 beta Available

Ver­sion 1.05 beta of wp-​​Hyphenate is now avail­able for download: http://​king​desk​.com/​p​r​o​j​e​c​t​s​/​w​p​-​h​y​p​h​e​n​a​te/

Content Emphasis in Balance

Shout­ing for atten­tion just cre­ates noise. Web­site own­ers and web design­ers can fall into the trap of empha­siz­ing too many mes­sages on the home­page. An effec­tive web­site requires clar­ity of pur­pose and a strong edi­to­r­ial hand.

I was asked to review a web­site for a real estate agent in Ari­zona. Upon vis­it­ing the site, I was imme­di­ately con­fused and over­whelmed. It is not an exag­ger­a­tion to say there were 50 mes­sages on the front page, all scream­ing for atten­tion. The result was a site where every piece of con­tent was minimized.

This is a com­mon mis­take. We have a lot to say, and most of it is impor­tant. As busi­ness own­ers, we offer many ser­vices; we want to sell them all. But vis­i­tors to your web site do not care. If you over­whelm them with infor­ma­tion, they will not know where to start, they will not expend the energy to fig­ure out where to start, and they will leave your site with malice.

As you con­sider your web­site, these three obser­va­tions will help you iden­tify what changes will increase your website’s abil­ity to meet your busi­ness objectives:

  1. There is a phe­nom­e­non called ban­ner blind­ness. As con­sumers of web con­tent, we train our­selves to avert our eyes from any­thing that looks like an adver­tise­ment. Jakob Nielsen wrote a must-​​read arti­cle illus­trat­ing the inef­fec­tive­ness of fancy for­mat­ting.
  2. Sup­pose a web­site visitor’s atten­tion could be given a point value of 10. You have these 10 points to dis­trib­ute to dif­fer­ent parts of your site. You should iden­tify your core objec­tives and dis­trib­ute these 10 points in pro­por­tion to their impor­tance. The site design should give promi­nence in scale with the dis­tri­b­u­tion of points. Your front page will be loose con­tent, but what remains will be effective.
  3. Ulti­mately, what is described in the two points above are aspects of a phi­los­o­phy called “user cen­tered design”. You must look at the site from the users per­spec­tive. Users deter­mine whether they think a site will pro­vide for their need within the first 2 sec­onds of their visit. If they don’t see imme­di­ate hope, they quickly click the back but­ton. What is it that your users are look­ing for? This is very dif­fer­ent than what you want to tell your users. Unless you first answer your user’s ques­tions and build cred­i­bil­ity in doing so, they will not care what you have to say.

If you con­sider these points, you will real­ize that they are applica­tive to much more than your web design. They require a rethink­ing of your busi­ness model. Ulti­mately, your web­site is a reflec­tion of your busi­ness. If your web­site is unfo­cused and inef­fec­tive, per­haps it is because the busi­ness it is rep­re­sent­ing needs pur­pose­ful direction.

wp-Hyphenate 1.04 beta Released

wp-​​Hyphenate 1.04 beta is now released. This lat­est ver­sion of the Word­Press hyphen­ation plu­gin fea­tures sup­port for over 40 lan­guages. Down­load it at http://​king​desk​.com/​p​r​o​j​e​c​t​s​/​w​p​-​h​y​p​h​e​n​a​te/

Choosing Your <h1>

Choos­ing the proper text to des­ig­nate as your top level head­ing can improve your site’s acces­si­bil­ity and search engine rank­ing. This arti­cle shows you how to prop­erly bal­ance indi­vid­ual page names and over­all site identification.

HTML 4.01 defines 6 lev­els of head­ings: <h1> – <h6>. These head­ings are hier­ar­chi­cal in nature, indi­cat­ing the impor­tance of their con­tent from most impor­tant to least. It is a mat­ter of best prac­tice to label the title of each page with the <h1> tag.

Seman­ti­cally, it is impor­tant the <h1> tag iden­tify the core essense of the sub­ject page. Such prac­tice is also ben­e­fi­cial to the acces­si­bil­ity and search rank­ing of your site.

Yet in prac­tice, many web design­ers con­sis­tently wrap the site iden­ti­fi­ca­tion (i.e. com­pany name or web­site name) in the <h1> tag, leav­ing the remain­der of the con­tent to share the <h2> – <h6> tags. Now, it is com­pletely appro­pri­ate to wrap the site iden­ti­fi­ca­tion in a <h1> tag on the home­page, but this prac­tice should be resisted on sub­pages. But out of lazi­ness, this is often done.

Let’s remove excuse for the lazy, and pro­vide code to prop­erly use the <h1> tag.

The fol­low­ing HTML and PHP code pro­vides the logic to wrap the site iden­ti­fi­ca­tion in a <h1> tag on the home page, and in a sim­ple <div> tag on the remain­der 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 con­tent man­age­ment sys­tems have built in func­tions that do the job of isHomePage(). For exam­ple, with Word­Press you can use is_page('Home').

The fol­low­ing is an exam­ple 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 han­dling of the site iden­ti­fi­ca­tion, you are now free to iden­tify the title of each sub­or­di­nate page as <h1>.