Journalists' Toolkit

The latest updates here:

Design Resources: Links for typography, color, Web browser statistics, screen resolution, page layout and usability.

HTML Basics: Essential tags to know, tutorials, HTML5.

CSS Basics: Shortlist of need-to-know items. “Reset” stylesheet. CSS3 information. Tutorials.

This resource — Page Design Basics — provides a very simple overview of how to lay out a Web page.

Students new to using CSS often make a mess of it because they do not grasp the utility of DIVs. By introducing these four regions of a Web page, an instructor can help students understand a basic structure that can be created with four DIVs. Font families, colors, and other design elements can be specified independently for each DIV.

For more information about CSS, see the the HTML and CSS Resources page.

What’s the quickest way to whip up a beautiful color palette for a new website?

1. Start with Kuler, a free online tool from Adobe.

2. Register and sign in so you can download a color swatch for your chosen palette(s). Not signed in? Then you can’t download. (Pay attention to WHERE you save the file!)

3. Open Photoshop and find the Swatches panel.

4. Open the Swatches panel menu and select Load Swatches.

5. Find that file you downloaded in step 2 and select it.

6. The last colors in your Swatches list will be the new ones from Kuler (open the Swatches panel menu and select Small List to see the hexadecimal color codes as shown below).

There you have it! To learn more about using Kuler, watch this video at Adobe TV (6 min. 34 sec.).

It’s useful to finalize a color palette in Photoshop before you start coding your CSS. Test all text and link colors against the background colors where they will appear to ensure that the contrast is okay.

Smart Tip: Save the palette as a PNG-24 file and upload to a Web server or Dropbox. Then test it by opening that file on every computer you can get your hands on. Hues and contrast can vary widely on laptops and desktops, Mac and Windows. Make sure your palette will work for all users!

Learn more about Web color and Photoshop: The Mysterious “Save For Web” Color Shift, by Doug Avery.

Most journalists do not need to become code jockeys — but it can be quite useful to know the basics of the language of the Web: HTML. It’s not hard at all to learn a few basic tags, and with those few you can have the ability to create and format hyperlinks, fix silly errors in a CMS in the newsroom, and understand the underpinnings of a technology you use every day.

I have updated the HTML and CSS Resources page here, with an eye toward keeping it short and simple.

Why not take a moment to look under the hood and see the engine of the Web? Oh, and I have some links to get you up to speed on HTML5 and CSS3 too.