Tales of a Designer

For Writers on the Web

I recently read a post on how little users read a lot of copy on the web (per site) and it’s really cool/important information. It still blows my mind how many writers (on the web) there are that don’t understand this.

On the average Web page, users have time to read at most 28% of the words during an average visit; 20% is more likely.

There is also an interesting chart that shows the average amount of time users spend on a site based on the word count. Very fascinating, yet scary at the same time because if it’s your site, you have to wonder if you’re getting users the information they need, quickly.

Two tips I have when you’re writing for the web. One being to think like your user. Read your own copy and think if you’re conveying the right information. If it’s fluff copy and/or marketing talk, remove it. Users know what is fluff, and what is relevant to them. Second tip, get to the point, and fast. Be clear and concise. If your copy isn’t to the point, your user might not read it……then why have it there?

It is a must to know how to write for the web. If you haven’t been trained, then learn how to, it’s really not that tough. And study how users are actually using your site.

Update: Andy Rutledge has a different take on the article linked above. He raises good points as well. My opinions remain the same. You still need to know how to write for the web, designing that copy is a different issue.

Organizing your CSS

One thing that I’ve learned since first starting to write CSS, that’s extremely important, is organizing your stylesheets. Even the smallest sites can have larger stylesheets, and if you don’t have some sort of structure, it can become a headache to maintain over time as it grows.

There is no right way to organize. I’ve seen and tried many different ways and stuck with the one that works best for me. One thing that’s fairly consistent in all of my stylesheets is putting basic styles and site colors at the top, shown in the example below.

/*
======================================================
COLORS
======================================================
Gray Text: #
Blue Links: #
*/

* { margin:0; padding:0; }
.bn { border:0; }
.fl { float:left; }
.fr { float:right; }
.cl { clear:left; }
.clear { clear: both; }

These are obviously some of the basic classes that I will reuse across the whole site, so it’s nice to get some of those out of the way at the beginning before you get into the more specific id’s and classes.

It’s also important to group sections together and divide it by some sort of separator:

/*
======================================================
>>Site structure (layout)
======================================================
*/

Grouping sections together saves tons of time. It allows you to find sections very quickly through search, especially using the “>>” before the section title to easier flag those sections. In terms of grouping sections, do what feels most comfortable. Here are the groupings that I use, mostly, in my stylesheets:

• Colors
• Basic Styles
• Site Structure
• Navigation
• Headers
• Parapgraphs
• Lists
• Links
• Images
• Forms
• Miscellaneous

Is this the best way? Of course not, but every developer works differently, so the key is trying out different methods to see what works best for your style. The suggestions above have proved to work very well for me, and I’m still finding new ways to improve it. Using shorthand CSS is also a good way to keep your CSS lean, but some find that it’s not too helpful.

I’ve created a stripped down version of a basic stylesheet structure based on what I’ve mentioned above, so for those of you looking for a starting point, feel free to download the one I’ve put together.

What other key tips would you say are useful when organizing your CSS?

Questioning an Idea

I’ve had this thought in my mind the past few days and just felt like writing something out and maybe getting others thoughts on it. One thing that I’ve been thinking about is wondering when to move forward with an idea on the web. How do you know if it’s a good idea, and not just a waste of time?

We read about a lot of mediocre products on the web at sites like Techcrunch, and many of them seem to provide no real value. This seems to be a big challenge on having an idea work on the web. I guess one of the positives is that it is pretty low cost to get something up and running, as compared to other industries.

For the past few months I’ve been thinking on this idea with a colleague, and to us, the idea sounds great. The suggestions going back and forth have been really productive, but again, to us it sounds good but how do we really know if it’s a good idea? Will it provide value to those using it? Is it even possible to measure value beforehand?

After the initial excitement of coming up with an idea, you really start to question everything, and the unfortunate part is that momentum starts to die out a little. Is that normal?

I would imagine others have experienced the same kind of thing, but it’s just something I’ve been thinking about quite a bit lately. Should I be taking more of the attitude to just got for it no matter what, or should I know the value this will provide (if any) to it’s users?