home > contact us > join our mailing list > previous issues > february 2002 -- issue 1

february 2002 -- issue 1

Welcome to the first issue of Jessett.com's monthly newsletter!

I'd like to thank everybody for signing up and hope you all find the newsletter useful. Please continue to be as enthusiastic with your questions and responses.

We encourage you to forward the newsletter to others, but ask that you copy it in its entirety.

There's been an obvious pattern in the questions this week, so the two main topics are special features and the others are open questions for everybody to think about.

Until next month!

Jessie Editor in Chief http://www.jessett.com/

Post new questions -- mailto:mailing@jessett.com?subject=New

in this issue

Special Features:

-- Borders (using css, includes Dreamweaver tips) -- Link Styles (includes Dreamweaver work-around)

Questions Posted this Month:

-- How do you decide compatibility with browser flavors and versions?

-- How do you choose your color schemes?

-- How would you reduce page scrolling with numerous text entry boxes and options, without using extra pages as a solution?

-- How do you personalize your site to the max?

site of the month

-- Bento Box

borders

There are many effects you can achieve by using borders in your css style sheets. These can be applied to most html elements, such as tables, table cells, paragraphs, layers and images. Unfortunately, Dreamweaver 4 does not handle border attributes very well, especially with layers. Therefore, it is best to edit your external css style sheet in a text editor, such as NotePad.

n.b.: This is only applicable for elements with borders, Dreamweaver copes well with most other style sheet definitions.

Open your text editor and find the .css file. Either edit the css attributes for an existing element, or create a new definition or class. For example:

TABLE { border: solid 1px #000000; }

This will put a solid black border of 1 (one) pixel around all your tables. (Make sure that border is not set to "0" in the html.) This doesn't put a border round all the table cells inside the table though. To do this, you'll need to use the following in your css:

TABLE { border-top: solid 1px #000000; border-right: solid 1px #000000; }

TD { border-left: solid 1px #000000; border-bottom: solid 1px #000000; }

Use the following html for a two column, two row table (or add a 2x2 table with no border in Dreamweaver):

<table cellpadding="5" cellspacing="0"> <tr> <td>Table cell content</td> <td>Table cell content</td> </tr> <tr> <td>Table cell content</td> <td>Table cell content</td> </tr> </table>

There's loads more information about borders in a new article at: http://www.jessett.com/web_sites/css/borders.shtml

There's also information about css and dreamweaver at: http://www.jessett.com/web_sites/css/css_dreamweaver.shtml

Respond -- mailto:mailing@jessett.com?subject=Borders

back to top

link styles

In order to have a variety of link styles on your web site, you will need to use css. Unfortunately, Dreamweaver won't allow you to add new link styles as classes to your style sheet and you will have to use a text editor, such as NotePad.

Open up your .css file in your text editor. Copy the following (keep the dots in), and edit according to your requirements:

.speciallink { font-family: verdana, arial, helvetica, sans-serif; color: #000000; }

.speciallink A:link { color: #0099FF; text-decoration: underline; }

.speciallink A:visited { color: #9933FF; text-decoration: underline; }

.speciallink A:hover { color: #CC0000; text-decoration: none; }

This will create a link style which is blue on unvisited links, purple on visited links and turns red with no underline when someone mouses over the link.

Save the .css file.

In the html, you will need to make sure that the text you want to apply this style to has the above class specified:

<p class="speciallink"><a href="http://www.website.com/">text to be linked</a></p>

In Dreamweaver, simply highlight the text and apply the style "speciallink". To view the styles, go to Window > CSS Styles from the top toolbar. You may need to close the web page in Dreamweaver and re-open it to see the new styles you have created appear in the CSS Styles list.

When you make any text that is in this style a link, it will display as you specified in the .css file.

More information about link styles and css style sheets can be found here: http://www.jessett.com/web_sites/css/link_styles.shtml

Also, be careful about usability issues, and not confusing your visitors by having too many link styles - it still needs to be obvious to your visitors which bits of text are links.

More information about usability can be found here: http://www.jessett.com/web_sites/usability/

Respond -- mailto:mailing@jessett.com?subject=Link_Styles

back to top

how do you decide compatibility with browser flavors and versions?

This is a tricky one! And such a heated topic - people are so often in one camp or the other! I try my hardest to make my site look nice in all main browsers - IE 4+, Netscape 4+ and Opera 5 both on Windows and Mac.

Here's a few sites with stats on the percentages of browsers people are using:

http://browserwatch.internet.com/stats/stats.html http://www.upsdell.com/BrowserNews/stat.htm http://www.w3schools.com/browsers/browsers_stats.asp http://www.cen.uiuc.edu/bstats/latest.html

How do you decide which browsers to cater for?

Respond -- mailto:mailing@jessett.com?subject=Compatibility

back to top

how do you choose your color schemes?

My favorite method for choosing colors for a web site is to decide on one main color and up to 4 accent colors. This may sound alot, but one accent color could just be used for visited links, say. I think 3/4 main colors is probably enough, more could be overkill. Sometimes the decision of the main color and even a couple of accent colors may have been taken out of my hands by the existing branding, but you can always find a couple more colors to complement the palette.

I usually do this in PhotoShop by creating a new file about 200x300 pixels and make the main color a stripe taking up about a third of the width and the full length. Along this vertical stripe, I match 4/5 accent colors widthways.

In choosing the accent colors, I usually go for similar tones or complete contrasts - my particular favorites are blue/orange/yellow and purple/green combinations. It's important to check that there is no "noise" between adjacent colors and that people with color blindness won't be affected by certain color combinations, such as red/green together. As with other forms of design, the traditional primary/secondary color wheel always comes in useful - use colors that are next to each other, or opposite on the color wheel. The web safe swatches palette in PhotoShop is also useful to see which colors go well next to each other, as is the color picker in web safe mode.

Anyway, that's my way and it tends to work for me. I'm sure other designers have other methods of choosing color and I'm looking forward to reading them!

Respond -- mailto:mailing@jessett.com?subject=Color

back to top

how to reduce page scrolling with numerous text entry boxes and options, without using extra pages as a solution?

Unfortunately, there's no quick answer to this and the best way to write any form is to do it as simply as possible, for the sanity of your visitor. Perhaps a few small pop up windows for specific question areas, where the main page gets updated by the pop up window's information with JavaScript? This is one of the only valid uses for pop up windows, as long as they're significantly smaller than 640x480, so even visitors on small screen resolutions are aware of what's happening!

There's a good article of form usability here:

http://wdvl.internet.com/Authoring/Design/Basics/form1.html

I'm sure other designers may have some alternative ideas...

Respond -- mailto:mailing@jessett.com?subject=Scrolling

back to top

how to personalize your site to the max?

On Jessett.com, we've found our own style by choosing a color scheme that reflects the personality of the site and developing a simple, semi-informal style of writing. Of course, there's also the edited photo of Jessie on the home page!

I suppose personalization for a personal site is what branding is for a commercial site.

How do you personalize/brand your sites?

Respond -- mailto:mailing@jessett.com?subject=Personalization

back to top

site of the month

Sites of the month don't necessarily get picked because they're the best design we've seen, but because they've got something unique about them we feel would be inspirational to others.

bento box

http://www.bentobox.net/index.html

Bento Box was picked for its calm, sophisticated color scheme and subtle use of Flash. The random loading image on the home page was a particularly nice design feature - each time the home page is launched, a different picture emerges (and they kindly tell you how big the file is you're waiting for). Look out for the koi carp one! Nice! They have some nice imagery across the site, as well as some cute people icons in their "scraps" section - I wonder if that's what their folks really look like?

Submit a possible site -- mailto:mailing@jessett.com?subject=Site

(Please say why you like it and why it should be site of the month)

back to top

Post new questions -- mailto:mailing@jessett.com?subject=New

To unsubscribe - mailto:mailing@jessett.com?subject=Unsubscribe

To subscribe - mailto:mailing@jessett.com?subject=Subscribe