If Only Id Known! (Tips for a new website)

There comes a point in the life-cycle of almost every web-site and blog where the designer, sighs and mutters something like "I wish I had known that when I first started". Here are the things I wish I had known when I had first started my site.

Find a Good Cheatsheet

Today's web pages are 90% Cascading Style Sheets (CSS), and 10% HTML. So one of the very first things you should do is to download IloveJackDaniels.com CSS cheatsheet or Leslie Franke's CSS Cheatsheet cheatsheet. Both will help you navigate using CSS to make your web page look and act exactly the way you think it should look and act.

Awesomely enough, Jack Daniels also has a HTML Cheatsheet as well.

Find a Good Template

Why re-invent the wheel? Other, very talented, people have drained blood from stones to create the most awe-inspiring CSS applications you could possibly imagine. Recently, a most remarkable list of 53 CSS Applications made its rounds on the net and if you're looking to do great things like rounded corners, drop shadows, and 51 other very, very impressive tasks, leverage the internet so you're building on the work of others not starting from the basement.

In addition to the above link, there are a few other sites which have provided invaluable templates, tricks and tips.

• A workaround for IE PNG transparency issues
• 20 CSS Tricks and Tips
• 10 CSS Tricks You May Not Know
• CSS: Getting Into Good Coding Habits

Stay away from site-style templates though. You want your website to reflect your vision and not look like every other blog on the net. Use CSS templates for specific goals, like drop shadows, rounded borders: good. Use third-party CSS templates to dictate the design of your site: bad.

Get Started

Once you have your cheatsheet and templates its time to create the stylesheet which will define your site from start to finish. Quite possibly the worst thing you can do when developing your site is to build your stylesheet as you build your site. Your stylesheet should be mostly done before you ever create a single element of HTML. Get the styles set up and then debug and refine the styles as you develop your HTML. To that end...

Get Classy

You should go absolutely crazy creating your classes. Make classes for bold, underline, special fonts, overline, underline, strikeouts, big, little and everything in-between -- whatever you want, whatever you even remotely think you'll need! You should even set up some styles to show icons like out for external sites, popup for popups and so forth (explained below).

Since you can specify multiple class names, these CSS definitions become your own personal shortcuts for precisely the styles you want. For example, <span class="underline popup"> would give you an underline with a popup icon next to it.

If multiple styles conflict, then the last classname takes priority. So if you have class="nounderline underline", the style will be underlined.

Throw in everything you think you will need and even a few things you think you won't need. Don't worry about the size, you can always compress your stylesheets if they get too big, and after your master stylesheet is loaded it will nearly always be cached by the user for each subsequent page which uses it.

By getting the styles in early and -- just as importantly -- using them from the very first web page, it makes changing and tweaking the look and feel of your site very easy. For instance if you use a class called underline in ALL your pages it's very easy to tweak that in your master stylesheet, but if you didn't add the underline class until half your site had already been built then you'll have to revise a ton of old pages to keep a consistant look and feel across your entire site.

So don't skimp!

You should note that this approach is somewhat controversial. Some call this practice classitis and believe it is bad site-design. Having built a web site and experiencing the unique pleasure of going back and modifying dozens of pages to use a new class I can say that my own personal opinion on this subject is that failing to anticipate classes you will need at the start is far-far worse than having someone accuse you of classitis.

Print Smart

One of the wild and crazy classes you create should be a little gem called noprint.

Add the following lines to the end of your stylesheet:

.noprint     {}

@media print {
                .noprint {display: none}
             }

This defines a class called noprint. When you use it, it will have no effect on anything which appears on the user's screen. But when the user goes to print or print-preview the document, anything with a class of noprint will be stripped from the page, making it trivial to remove navigation elements, advertising, or anything you don't want to waste the user's ink on. Just make sure that noprint appears at the very end of the classes you're using. Here's an example.

<div class="navigation rightFloat noprint">Navigation Box</div>

No print this link required, everything is stripped automagically. This article has been formatted with noprint classes so you can see the effect for yourself by hitting the "print preview" button of your browser. And of course you can tweak and add additional styles in the @media print area to really bling out the printed version of your pages.

You can actually have different external style sheets for the screen, printer, even handheld (like cellphones) and other devices. For a more in-depth look at using device-specific stylesheets check out the Print Smart article on this site.

Adopt Orphan HTML Tags

The big buzz in SEO is semantics, that is, being descriptive with your HTML. This is more than just buzz and hype. Semantics are where the Internet is moving and this was made perfectly, crystal-clear when the Firefox team started discussing micro-formats in Firefox 3.0 which will be released latter in 2007.

Any web designer can create a division and make it look and act like, well, anything. The web designer and the visitors to the site may know what that division means but the search engines have a harder time with it. So the recommendation is: instead of using images and divisions for things like headings you actually use the heading tags themselves <H1> ... <H6>. They're a little harder to style but the search engines pay attention to them.

Beyond this, however, are a whole host of little used HTML tags that are just waiting to become a permanent part of your style library. These are HTML tags that will validate with the validation services and which are eagerly seized upon by the search engines and the people who have to maintain your site.

Here are a few examples of some little used HTML tags and how you can use them to create an interesting effect for your site and make your pages more search engine friendly:

ABBR and ACRONYM

Two orphan tags experiencing a resurgence in popularity are <abbr> and <acronym>. These are two sides of the same coin, but you can use that to your advantage when it comes to making your style sheets. Most websites have settled on a dotted underline and a "help" cursor to indicate an abbr or acronym. When given a title attribute, the browser will pop up whatever is in the title when the user hovers his or her mouse over the abbreviation.

I like to give that effect to both <abbr> and <acronym> but for acronym I like to automatically expand the title of the text inside the document itself while the user hovers. Here's the base css.

acronym             {  /* default style for acronym */
                      border-bottom: 1px dashed black;
                      cursor: help;
                    }

                      /* default mouseover style for acronym */
acronym:hover:after { content: " (" attr(title) ") "; }

abbr                { /* default style for abbr */
                      border-bottom: 1px dashed black;
                      cursor: help;
                    }

This sets up <abbr> and <acronym> to both have a dotted underline effect and change the cursor to a help cursor when the mouse is over the abbreviation but acronym will go a step further and expand out the title attribute inside the document itself while the mouse is over the text. Here, can see the effect of <abbr> and the effect of <acronym>.

And here's the HTML for the above examples.

<abbr title="This is the default browser title tag"><abbr></abbr>
<acronym title="This is the title text inserted into the document durring the mouseover"><acronym></acronym>

BLOCKQUOTE, CITE and Q

<blockquote> is a popular tag that's been around forever. It's used to denote a block of text that you are quoting from another source. A common practice here is to assign a deep left and right margin to clearly indent the block and give it a dotted or dashed border, usually with a graphic quotation element inside.

If <blockquote> is the semantic version of a division then <cite> is the semantic version of <span>. That is, <blockquote> will create a box, and <cite> will create an in-line element. Most all <blockquote> will contain some reference as to where the quote originated from, <cite> is a great way to give a meaningful semantic tag to that information as well as to provide a common, unique style.

A great thing to do is to take the <cite> tag and position it just on the border of the blockquote itself, making it stand out a little and giving the block a little flair. Here's the styles for this page and a sample quote.

cite a              {
                       float: right;
                       margin: 0px;
                       margin-right: 15px;
                       margin-top: -10px;
                       padding: 0px;
                       padding-left: 10px;
                       padding-right: 10px;
                       background-color: #ded7c6;
                       border-bottom: 2px dashed black;
                    }
blockquote          {
                       border: 2px dashed black;
                       padding: 5px;
                       margin-right: 50px;
                       background: url(http://www.hunlock.com/images/open_quote.gif) top left no-repeat;
                       font-family: Trebuchet MS, Helvetica;
                       background-color: #ded7c6;
                       text-indent: 30px;
                    }

And the result...

It was only when I got thus close to it that the strangeness of this object was at all evident to me. At the first glance it was really no more exciting than an overturned carriage or a tree blown across the road. Not so much so, indeed. It looked like a rusty gas float. It required a certain amount of scientific education to perceive that the grey scale of the Thing was no common oxide, that the yellowish-white metal that gleamed in the crack between the lid and the cylinder had an unfamiliar hue. "Extra-terrestrial" had no meaning for most of the onlookers.

"War of the Worlds", H.G. Wells

One of the really nifty HTML tags is the quotation block -- <q>. It basically gives you nicely curved, and stylable, quotation marks without needing to use images. The problem, of course, is Internet Explorer which doesn't natively support the <q> tag. There is, however, a workaround using Microsoft's own proprietary extensions. (Don't worry, if you're a slave to the w3, it will still validate).

The first thing you need to do is create a new file named IEquotes.htc and insert the following code.

<public:attach event="oncontentready" onevent="fixQuotes();">
<script>
function fixQuotes() { element.innerHTML = '&#8220;' + element.innerHTML + '&#8221;' }
</script>

Then in your document insert the following code block.

<!--[if lte IE 7]>
   <style type="text/css">
      q {
           behavior: url(IEquotes.htc);
        }
   </style>
<![endif]-->

IEquotes.htc is a script which will insert the character code for the nicely curved quotes at the beginning and end of the selected HTML element. The second block of code uses Internet Explorer's unique conditional comments to select all versions of Internet Explorer prior to version 7 and apply the IEquotes script to the <q> tag. This stylesheet is only applied in internet explorer, all other browsers see this block, correctly, as an HTML comment.

The gotcha here is that you can't have the conditional comment block in your external stylesheet, you will need to include this little block of code in your actual web pages, on each and every web page you will be using the <q> tag on. Since IE has so many idiosyncrasies you may find yourself adding other fixes to this block, after a certain point it may be desirable to give the IE block it's own external file and simply include it conditionally as such:

<!--[if lte IE 7]>
   <link rel="stylesheet" type="text/css" href="IEworkarounds.css" media="screen">
<![endif]-->

The Other Orphans

In addition to the orphan tags already discussed, the following HTML tags are available for you to exploit with a well designed stylesheet.

ABBR:      Indicates an abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.).
ACRONYM:   Indicates an acronym (e.g., WAC, radar, etc.).
ADDRESS:   An area designating a postal address -- VERY stylable.
CITE:      Contains a citation or a reference to other sources.
CODE:      Designates a fragment of computer code.
DFN:       Indicates that this is the defining instance of the enclosed term.
EM:        Indicates emphasis.
H1..H6:    Headers, section headings, etc. 
KBD:       Indicates text to be entered by the user.
SAMP:      Designates sample output from programs, scripts, etc.
STRONG:    Indicates stronger emphasis.
VAR:       Indicates an instance of a variable or program argument.

There are other tags as well. A complete list of the official tags can be found At the w3 consortium. Some of the more obscure and browser specific oddities can be found at obscuretags.com.

In addition to the above, HTML 5.0 -- the next generation of HTML -- will only increase the semantic options available to the web programmer.

Icons with anything

One of the most useful tricks of CSS is the ability to attach icons to pretty much any element you want. This little trick should be a part of every CSS toolbox. Adding an icon to anything is as simple as using the following styles:

.pdfRight { 
             padding-right: 18px;
             background: transparent url(icon_pdf.gif) no-repeat center right;
          }
.pdfLeft  { 
             padding-left: 18px;
             background: transparent url(icon_pdf.gif) no-repeat center left;
          }

This simple code attaches a tiny pdf icon to the left or right of your element. So you can add the icon as easilly as adding it to your class names. (You can find out how to add them automatically and conditionally with newer browsers on the Attach Icons to Anything with CSS article). Here is a snippet of HTML showing the usage of our example styles.

<a href="someurl.com/somepdf.pdf" class="blue underline pdfRight">somepdf.pdf</a>
<span class="pdfRight">Adobe's pdf icon looks like this</span>

You will of course need to supply your own icons but there are plenty of free (and wonderful) libraries out there. Here are a few to get you started.

• Sweetie Icons
• Brandspanking New Icons
• Two-Tone Icons

Lists -- ordered, unordered, definition, and apart.

Lists are an incredibly useful tool for displaying data in a "tree" style format. A list Apart manages to morph simple lists into full blown menu applications that degrade gracefully all the way back to the first browser ever made. But for your average web page, lists are a great way to convey structured data in a way both your visitors, and just as importantly, the search engines, can understand.

There are three kinds of lists:

Unordered Lists <ul>:

• <li>
• <li>
• <li>

Ordered Lists

.somestyle { font-family: Palatino Linotype, Book Antiqua, Palatino }

function setStartingFontSize() {
   if (screen.width) {
      if (screen.width<600) {
         _baseSize = .8;
      }
      if ((screen.width>=600)&&(screen.width<=800)) {
         _baseSize = .8;
      }
      if ((screen.width>=800)&&(screen.width<=1000)) {
         _baseSize = 1;
      }
      if ((screen.width>=1000)&&(screen.width<=1100)) {
         _baseSize = 1.2;
      }
      if ((screen.width>=1100)&&(screen.width<=1300)) {
         _baseSize = 1.5;
      }
      if ((screen.width>=1300)&&(screen.width<=1500)) {
         _baseSize = 1.7;
      }
      if (screen.width>=1500) {
         _baseSize = 2;
      }
      document.getElementsByTagName("body")[0].style.fontSize=_baseSize+'em';
   }
}
setStartingFontSize();