Articles & Notes

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.

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:

• État de Sièges
• Leg­endary Aircraft
• Riss­ing­ton Podcast
• Sil­ver­back

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:

• Ricardo Arce
• has­rimy
• LoveBento

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.

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.

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.