Ternstyle

Most every site has buttons, navigational items, styled links and/or lists of links all throughout its document structure.

They exist in the header, eyebrow, sidebar, body and footer and they can appear both vertically and horizontally. As there is no standard of practice for how to style these items it’s hard to know what measures to take to ensure that they are both intuitive for your users and cross browser compatible. Below are just a few principles to consider when styling these items.

Make a button or link as easy to click as possible.

The easier something is to click the easier it is to funnel your users where you want them on your site. Your users shouldn’t have to be precise when clicking on something you want them to click on. Notice in the example below the image to the left has a small clickable area and the area to the right has a large clickable area.

Use space to make menus and lists of links easy to read.

Proper spacing between links and navigational items is imperative when it comes to the usability of your site. If links are too close together the eye has a harder time distinguishing between items. This will cause a delay in the time it takes a user to get where they want to go or more importantly where you want them to go. Notice in the image below how much easier it is to read the second menu. Your eye can skip things it knows it doesn’t want immediately.

Make CSS work for you. Don’t use images as buttons or navigational items.

Let CSS do the work for you. Instead of creating graphic buttons and navigational items as jpegs, gifs or pngs (unless using the images as a CSS background image), make them text based and use CSS to align and style. Text based navigation is good for SEO. Also, your CSS rules are mathematic which means your spacing and alignment will be uniform. No sense eyeballing it when CSS will get your padding (for instance) right every time.

Apply CSS styles directly to the button or navigational element (if you can)

It is best practice to apply the majority of the CSS rules that make a link a button or a navigational item directly to the link itself as opposed to it’s parent elements. You can’t always accomplish this but for many reasons it’s helpful. For instance, if you have an unordered list of elements with your links contained in the <li>’s applying the padding which spaces the links directly to the links (<a> tags) expands the links by the amount of padding thereby expanding the clickable area. When the padding is applied to the <li> it decreases the clickable area of each link. Notice below. The clickable area is in green and the width and height of the <li> are in red.