Article archive
Articles
When trees cry, MacBooks suffer
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.
HTML & CSS
My site is crawling with bots
“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.
Fight Div-itis and Class-itis With the 960 Grid System
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.
How to clean messy underlines in linked text
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.
Does “click here” count against link text?
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.
Testing web pages means knowing browsers and their engines
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?
Imagery
Editing Opacity With Layer Masks
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.
Exploring Photoshop’s angle gradient tool
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.
Thoughts on applying duotones to data
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.
How to manage a controlled collision of type and imagery
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.
Big stature, small caps, good technique
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.
Process
When is web design not a product? When it’s a process
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 [...]
Passing The Holy Milestone: How To Meet Deadlines
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?
From zero to layout: A redesign process
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.
Creating a logotype depends more on the means than the end
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.
Preparing a site: The preflight checklist… and more
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.
Content
Using FAQs as content launchpads
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.
Signposts: Helping users navigate content
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.
How to build a footer that doesn’t stink
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.
The benefits of organising content with tags
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.
Harnessing contrast to draw attention
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.