Today I had the chance to work outside. It was a sunny afternoon, a bit warm, but not bad in the shade. After a minute I felt something on my arm—tree sap. The tree was dripping! On me! On my MacBook screen!
I got away, but not before receiving a few ill-placed droplets. Fortunately, I knew the drill. As a public service, here’s my recipe for cleaning a sappy screen.
“Robots” or “spiders” are programs that index online content for search engines. Several have tried to download my free color files many times. Bot or not, every browser that hits my site leaves its tech-ish signature, which makes my site log like a guest book. Last week I found my log full of bot visits.
The 960 Grid System encourages the addition of div elements and class attributes, especially on complicated pages. Is this really an improvement over nested tables? Creating cleaner code means going beyond the framework and thinking about what it really represents.
Underlined text is universal for “this is clickable” in web content. But clogged descenders detract from legibility. How do you fix that? Here are four design solutions.

Conventional wisdom says that keyword-rich links are more productive than “click here.” But are they? I performed an experiment to find out if “click here” affects links in web content.
Most of the trouble with debugging web design comes from differences in not just browsers, but their “engines” that interpret HTML and CSS. But which browser runs what, and how should pages get tested?
On screen, the colors of pixels are a mix of red, green and blue values. A fourth value, opacity, controls how pixels blend with pixels laid over them. In image-editing programs such as Photoshop, changing the opacity of a layer is straightforward: Setting a layer to 50% opacity makes all of its pixels half-visible. If the situation calls for variable visibility, then layer masks are the answer.
The angle gradient tool is an overlooked gem tucked away in Photoshop’s toolbar. Often passed over for its more popular sibling, the linear gradient tool, angle gradients create clockwise blends of color around the point a user clicks. The angle gradients create clockwise blends of color around the point a user clicks. Most people stop there. But when combined with other techniques and some creativity, the angled gradient has some surprising uses.
The ability to tint black-and-white photographs with color has been a staple of photography for decades, and modern image editors make warming and cooling grayscale images a snap. This concept of a steady progression of shades can be used to present information as well.
Setting images into text mixes words’ straightforward communication with photos’ emotional implications. Words state; photos express. But conflicts result when the images get lost or the text becomes muddled. Or both. Images and text can successfully mix—if we follow some guidelines that balance readability in both text and images.
Stately text doesn’t need to hurry. When used well, small caps make a design look stable and reliable. They can appear official or solemn. But like any technique, small caps requires understanding the why behind the how.
When is web design not a product? When it’s a process You can often tell a website whose owner thinks design is a product. They’re the ones with slick edges and generic guts, where paragraphs flow into a given space like gel into a bucket. If the text is well written, you wouldn’t know it [...]
For too many projects, there comes a time when every action taken, every decision and sacrifice made, is spurred on by pressure to finish. Tempers seem to shrink along with the available days, talk about “high standards” gives way to “good enough,” and people realize that deadlines are aptly named. During the last-minute crunch, someone may well wonder, how did it come to this? Could it have been prevented?
When I began working on a one-page web project, my client asked about the process. How do you plan a single page? What leads from raw text to a finished product? Getting from concept to finished draft requires many steps, but each phase shares common traits.
The process of designing a type-based logo is similar to that of designing a shape-based logo. Both logos need to convey a message, do it quickly and appease the client’s taste.
Most web projects require a few common steps, but sometimes the obvious gets overlooked. How do you make sure everything in a checklist gets done? First, have a checklist based on experience. Second, understand that you need more than one.
In the past, I had trouble with vague ideas. Fighting my own limp-wristed attempts to frame content, I discovered that most topics can be phrased as a FAQ. Since questions spawn questions, thinking in FAQs turned out to be a useful mind-mapping-like tool as well.
Sometimes, choosing just the right image for a website that does not yet have a defined visual theme can be daunting. Should you use a drawing or a photo? Should you create it yourself or find stock art? How do you know whether it will set the right tone? Is that the best you can do? When the quest for perfection leads to indecision, you may wind up with a mediocre design.
The bottom of a web page is surprisingly valuable real estate. It’s open, it’s where visitors naturally wander—but it’s often neglected. Here are a few ideas on how to design footers to guide visitors around a website.
Traditionally, organising content into categories has worked well. But for truly massive sites — serious projects that count articles, members or products in the hundreds or thousands — tags provide a better solution to the thorny problem or finding web content.
Contrast is the difference between two or more elements, like bits of text, imagery and backgrounds. Applying more contrast in some areas (or less contrast in others) tells people who visit your site about your priorities, even if they don’t realise it.