1. Write For The Web

Reading on the web isn?t easy. Computer monitors have a low screen resolution, and their projected light quickly makes our eyes fatigue. Plus, many websites and applications are built by people with no formal training in the art of typography or graphic design.

Here are some pointers to consider during the writing process:

• The average user will read at most 28% of the words on a web page, so make the words you use count. The guideline we suggest to our clients at Tuitive is to cut your copy in half, and then cut it in half again. We know this makes your inner-Tolstoy cry, but your readers will appreciate it.
• Use clear, direct, and conversational language.
• Avoid “marketese”, the exaggerated boastful text that fills bad advertisements (“Hot New Product!”). Instead, provide useful, specific information.
• Keep paragraphs short, and limit yourself to one idea per paragraph.
• Use bullet lists
• Use the inverted-pyramid style of writing, keeping your most important information at the top.

2. Organize Your Content With Sub-headers

Sub-headers are very important in allowing the user to disseminate a page of content visually. They divide the page into manageable sections and declare what each section is about. This is important to a user who is scanning the page trying to find what is most important.

Sub-headers also create a visual flow that allows users to move their eyes downward across the content.

Try limiting the main body of your web page (excluding navigation, footer, etc.) to three sizes: page title, sub-header, and body copy. Make the contrast between these styles clear and effective. Too little contrast in size and weight will make the elements clash rather than work together.

When writing, make sure sub-headers condense the point of the text they represent to a handful of words, and don?t assume the user has fully read the section above or below. Avoid overly cute or clever language; clarity is critical. Meaningful and beneficial sub-headers will keep the reader engaged and invite them to continue reading.

3. Communicate With Formatted Text

• Italics: Italics can be used for emphasis, and give your sentences a more conversational tone by implying vocal inflection. For example, the phrase “I told you I saw a monkey” has a different meaning than “I told you I saw a monkey”.
• All Caps: People read by making out the shapes of words rather than computing words letter-by-letter. For this reason text in ALL CAPS is more difficult to read because it disrupts the shapes of words we are used to seeing. Avoid using it for long passages of text or full sentences.
• Bold: Bold can make portions of your text stand out, but try not to overuse it. If you have a large blob of text that needs to be emphasized, try using a background color instead.

4. Negative Space Can Be Oh-So-Positive

The appropriate amount of space between lines of text, between letters, and between blocks of copy can greatly improves reading speed and comprehension. This white (or “negative”) space is what allows people to distinguish one letter from the next, associate blocks of text with each other, and keep track of where they are on the page.

As you?re looking at the page, squint and blur your eyes until the text becomes indecipherable. Does the page divide neatly into sections? Can you tell what the header for each section is? If not, you may need to rework your design.

Learn More

• How Little Do Users Read? by Jakob Nielsen
• How To Write Exquisite Subheads by Brian Clark
• 10 Principles For Readable Web Typography by Matt Cronin

At Tuitive we spend a good deal of time preparing other people?s photography for the web, so here are some quick pointers we?ve picked up along the way.

Please note: the technical instructions below refer to Adobe Photoshop CS4. There are other programs that can perform the same functionality, so if you don?t have access to Photoshop please check the help documentation for your image editing program to see if you can perform these techniques.

Resizing & Sharpening

Oftentimes preparing a photo for your website or blog requires you to make it smaller, especially if it is coming from a multi-megapixel digital camera. It?s important to know that a reduction in size implies a reduction in detail, as Photoshop is ?mushing? together neighboring pixels in order to fit the image to its new dimensions; this gives the photo a blurry look.

In order to ?fake? the detail you have lost you should apply the Unsharp Mask filter (Filter > Unsharp Mask). Nevermind the counter-intuitive name — the Unsharp Mask actually sharpens!

You can notice how much clearer and pronounced the details are in Figure 2 below.

The controls on the Unsharp Mask dialog box may look daunting, but the good news on preparing photos for the web is you won?t have to mess with them very much. I find an Amount of 50%, a Radius of .5, and a Threshold of 0 works almost all of the time.

Crop Images Contextually

In some scenarios, you might want to create a series of thumbnails that link to a larger version of an image. Common scenarios for this are photo galleries or news headlines that have a thumbnail version of a larger photograph.

When reducing an image to thumbnail size, try to crop the image to its essential elements before resizing. This allows users to grasp the content and meaning of the image even at small sizes.

Figure 1 is an image that has been directly scaled to its thumbnail dimensions, but Figure 2 has been cropped to the most important elements of the photo. This allows users to quickly understand what the image is trying to communicate and encourages them to click for more information.

Vibrance & Saturation

An image’s saturation is its intensity of colors. On under-saturated images, skin tones look sickly and skies look grey and dull. To add some life to your images, Photoshop CS4 has a filter I recommend called Vibrance.

If you want to quickly bring some life to your dull photography try the following:

1. Add a new adjustment layer (Layer > New Adjustment Layer > Vibrance)

   

2. Increasing the Vibrance slider (Figure 2) within the Adjustments panel will intensify color while protecting skin tones (preventing them from looking too orange). The Saturation slider will have a similar effect, but will change the entire image, including skin tones.

Conclusion

These tips are just the tip of the iceberg in terms of the rich and powerful features Photoshop offers for correcting and optimizing photography. Please give a note in the comments if there are any other techniques you would like to see explained.