Aller

If you’ve been paying attention, you might have noticed that this is the font I use on the home page of my site. It has a few flavors, including a more blocky display version (also featured on my site).

More information
Download

Qlassik

I first found classic for a project that ended up being scrapped, but I am glad it happened because otherwise this gem may have gone unnoticed. Qlassik is a great font to add a little flair to a simple look. It’s clean, and looks great.

More information & Download

Fontin

I actually found this one when I was designing birthday party invitations. This is definitely the one I have ended up using the most, as it is very versatile and can fit different designs and looks.

More information & Download

Design & Image Editing:

• Adobe Photoshop – $649 or $999 for the extended version

Photoshop is the most expensive program you need- but you will want this piece of software. There are a lot of different image editing tool but this is the industry standard. Sometimes you can get a student discount, or even get your company to buy it for you.

Text/Code Editing:

Mac

• TextWrangler – Free: This is a great piece of software for writing your code if you don’t want to spend any money.
• TextMate – $50: If you are serious about building websites, you should probably invest the 50 bucks in this software. It is highly customizable, can generate basic templates, and has code helpers and bundles to boot.

Windows

• HTML Kit – Free: This is another neat little piece of software that will help you write your code and keep it organized. Not the best there is, but hey- it’s free!
• EditPlus – $35: While I cannot personally testify to the usefulness of this application, I have read some pretty good reviews for this one.

FTP Client:

Mac

• Classic FTP – Free: This is a viable option if you don’t want to spend any money. Works fine, but Transmit (see next) is much faster and more efficient.
• Transmit – $29.95: This is my favorite FTP client for the Macintosh. Definitely worth the money.

Windows

• FileZilla – Free: This is my favorite FTP client for Windows. Quite the bonus that it’s free! It is also available for the Mac, but that version is much too buggy in my opinion.

Domains & Hosting:

• GoDaddy.com – My go-to source for domains. Easy to manage, great customer service, and very affordable. No monthly fees, either. Make sure you get coupon codes before purchasing.

I would not recommend getting hosting from GoDaddy (too many limitations) but from…

• HostGator – My go-to source for hosting. Again- easy to manage, great customer service and very affordable.

I hope that this list can be of help to any other freelance web designers out there. I wish I had found this list when I first got started…

Imagine that you are an architect. Someone asks you to build them an office. You ask, well, what do you want in an office? The equivalent answer to “Attract more clients” is: “I want to be able to put my employees there so they can work.”

As you can see, this is not a helpful answer. How many employees do you have? What kind of resources do they need? What kind of environment should they be provided?

The same goes for a website. The following are some basic steps to designing a better and more focused website that will accomplish the goal of your client.

Step One: Define a specific goal.

Some good example goals are:

• A phone call from the visitor
• An online response from the visitor (email, comments, etc.)
• To answer questions the visitor may have (provide information, thorough FAQ section)

You cannot simply say that the goal of a website is “to generate more clients”. Simply owning a website does not mean anyone will visit. That is a marketing issue. Once you have the potential client on your site, what do you want them to do or what do you want to do for them? That should be the main goal of your site.

This goal will change depending on what kind of organization you are running. If you provide an online service you may want them to Register for your service. If you run a company with an actual store-front, you may want them to visit the store. If you provide consultation services, you may want them to call you, or fill out a feedback or contact form.

Step Two: Define the steps.

Now that you have a goal, you need to define what steps the visitor needs to take in order to reach that goal. Say that you are a freelance photographer and want them to contact you via a feedback form. The following may be an example:

Visitor arrives on site:

• Answer the question: What do you do? (Landing Page or About Us)
• Answer the question: Why choose you? (Portfolio)
• Answer the question: What are my options? (Services)
• Answer the question: How can I contact you? (Contact Page)

You have just determined all of the pages you need! Those should be the predominant pages in the main navigation. Any and all other sections (such as a blog) are secondary, and should be featured smaller in a separate area- they should not distract the visitor from the main goal.

Step Three: Sometimes Less is More

When designing, every time you add a graphic or words ask yourself: “Does this benefit the goal?” If the answer is anything but a resounding YES, then take it out. Frills may look nice but if a frill doesn’t specifically benefit the design or goal it should be taken out.

Step Four: Usability Testing

Once you have integrated your new design, take it for a test-run with Internet non-savvy friends and see how easy it is for them to get around. Sit them down to a computer and give them the URL and give them a specific scenario that they can role-play.

Don’t intercept any of their mistakes and don’t interrupt the process. Simply be quiet, offer no help and see where they get confused and perhaps afterward ask them their opinions.

If you found these tips helpful, or if you have any suggestions yourself, please leave them in the comments!

If you don’t have a solid understanding of using lists for navigation, then you may want to review that concept before tackling the single-background-image rollover.

Download the example to follow along.

The concept

You have, for instance, a navigation bar (vertical or horizontal, it doesn’t matter). Very simple. There are only four buttons but you can obviously change and edit this concept to fit your own site.

How is it done?

Well this is what the HTML in the example looks like (using lists, of course):

<ul>
<li id="home"><a href="index.htm">Home</a></li>
<li id="about"><a href="pages/about.html">About </a></li>
<li id="portfolio"><a href="pages/portfolio.html">Portfolio</a></li>
<li id="contact"><a href="pages/contact.html">Contact</a></li>
</ul>

What? Impossible? Not so much.

When I first learned this technique, I was not aware that you can position the background image by location and pixels. It’s all very controllable through CSS. So, moving right along…

The beauty of CSS

So what does it take to make this work? Well this is what the CSS looks like in the example to make this turn out right:

* {
 margin: 0;
 padding: 0;
 }
 body {
 background: #1B78E2;
 }
 ul {
 background: url(nav-sprite.jpg) no-repeat;
 width: 600px;
 height: 50px;
 list-style: none;
 }
 li a {
 display: block;
 width: 150px;
 height: 50px;
 text-indent: -999px;
 float: left;
 }
 li#home a:hover, li#home a:active {
 background: url(nav-sprite.jpg) 0 -50px;
 }
 li#about a:hover, li#about a:active {
 background: url(nav-sprite.jpg) -150px -50px;
 }
 li#portfolio a:hover, li#portfolio a:active {
 background: url(nav-sprite.jpg) -300px -50px;
 }
 li#contact a:hover, li#contact a:active {
 background: url(nav-sprite.jpg) -450px -50px;
 }

First of all, I’ve set the padding and margin to 0 by using the wildcard * command. That way it will be more likely to look correct in every browser.

Then I set the width and height of the entire navigation by setting the ul.

Next, I set the commonalities of every li: display block (allows you to get rid of the text later as well as the width and height), set width and height, as well as using text-indent to move the ugly text off the page so we can see the pretty typography of the navigation images without losing SEO friendliness.

The rest of the CSS simply sets the background and position of the same background images. When setting a background position, keep in mind that the first number represents the way it moves horizontally (negative numbers will move it left, positive numbers will move it right), and the second number sets the vertical position (negative moves it up, positive moves down).

li#home a:hover {
 background: url(nav-sprite.jpg) 0 -50px;
 }

Be sure that you are selecting the correct link and link/hover/active/visited state for full support in all browsers.

Go forth and write navigation

This simple trick will help you develop quick loading sites that don’t jump or hiccup when using rollovers. No need for JavaScript or slicing and saving 25 individual rollover images! Saves production time AND creates better usability for your sites.

Good luck coding!

The HTML

If you are following along with me in your own document, you will need to make a list, much like the one below (depending on your file structure):

<ul id=”nav”>
<li><a href=”index.html” >Home</a></li>
<li><a href=”about.html” >About</a></li>
<li><a href=”contact.html” >Contact</a></li>
</ul>

And that is your basic list for navigation. It looks kind of ugly in the browser right now, but that’s alright because we’re going to fix that in a minute.

Now there are two ways to make navigation: vertical, or horizontal. Because horizontal is the more complicated, I will teach you that one and if you can understand that, creating a vertical navigation will be a piece of cake.

The CSS

Okay! Let’s add some style. I would recommend using either embedded or external CSS, which you can read about in my previous post.

First of all, let’s get rid of those ugly bullets! To accomplish this, your CSS will look like this:

ul#nav {
list-style: none;
}

Very cool! Well, you say, they’re all still stacked on top of each other. Now there are two ways to fix this. If you want to define a specific width for each menu item, you will need to use the following code (editing the width to your size):

ul#nav li {
float: right;
width: 100px;
}

If the specific width isn’t important, but you want them to be evenly spaced apart, here’s the switched version:

ul#nav li {
display: inline;
padding: 0 10px 0 10px;
}

That version will cause them to display on the same line, but adds padding to the left and right side of each item so that they are evenly spaced apart. Confused? Comment this post or otherwise contact me and I’ll try to address your specific situation.

Don’t forget to style the links from the default color! The following CSS would apply the unvisited and visited state to be black with a light gray background, the hover and active to white and a dark gray background, a 2px black border to the right of each menu item, padding to the left and right of 10px and top and bottom 5px, font 10px, bold, Verdana.

ul#nav {
list-style: none;
}
ul#nav li {
display: inline;
font: bold 10px Verdana;
}
ul#nav li a {
padding: 5px 10px 5px 10px;
color: #000000;
border-right: 2px solid #000000;
background: #CCCCCC;
text-decoration: none;
}
ul#nav li a:hover {
color: #FFFFFF;
background: #333333;
}

The result is something like this:

What are the benefits of CSS?

The benefits of CSS are phenomenal and I could never possibly list them all here. The main reason that CSS is so great is because of the power it gives you to control the entire site with one document (to be elaborated on).

Three ways to implement CSS

There are three ways to make the CSS communicate with the HTML: inline, embedded, and external. The best, most powerful way is external, for several reasons- you only have one fileto edit CSS. If you have all your CSS inline and embedded, you are almost defeating the purpose. You want your site to 1) load quickly so 2) you have less code on each page, therefore 3) instead of extra CSS on every page, each page simply links to your CSS document. And voila! Your problem is solved!

I would try to explain the difference between the three but it would probably be easier to just show you.

Example of inline CSS (placed within tags on the page):

<p style=”font: 10px Verdana, Arial, sans-serif; color: #333333;”>

Example of embedded CSS (placed within the header of the document):

<style type=”text/css”>
 body {
 background: #CCCCCC;
 font: 10px Verdana, Arial, sans-serif;
 color: #333333;
 }
 </style>

Example of a link to an external file sheet (placed in the header of the document):

<link rel=”stylesheet” type=”text/css” href=”format.css” />

How is CSS written?

CSS is written using what we call selectors. There are a number of selectors, but the most basic are:

• Tag- ex: body { background: #FFFFFF }
• ID- ex: #header { font: 24px Verdana, Arial, sans-serif }
• Class- ex: .footertext { font: bold 10px Verdana, Arial, sans-serif }
• Pseudo- ex: a:hover { text-decoration: none }

Using these basic selectors can do almost anything you need. There are more advanced selectors but those usually aren’t used except for those rare occasions that you just can’t select what you need with these.

Down and dirty: writing CSS

We’re going to work on the premises that you are writing an external CSS file. (When you save, the extension is .css)

Supposing you were creating a simple web page using the following structure:

<body>
 <div id="wrapper">
 <div id="header">
 <h1>Your main page headline with keywords</h1>
 </div>
 <ul id="navigation">
 <li>Home</li>
 <li>About</li>
 <li>Contact</li>
 </ul>
 <div id="content" >
 <h2>Page Title</h2>
 <p>Some paragraph content</p>
 </div>
 <div id="footer">
 Anne © 2007
 </div>
 </div>

You want the site to be centered in the browser, with a width of 760px, and a background color of light gray. What does that look like in your CSS document?

body {
 background: #CCCCCC;
 }
 #wrapper {
 width: 760px;
 margin: 0px auto 0px auto;
 }

This is the CSS formula: SELECTOR :: OPEN CURLY BRACKET :: CSS COMMANDS :: CLOSE CURLY BRACKET

So what I did was use a tag selector for the body to make the whole HTML document background gray. Then I used an ID selector to choose the wrapper of the site and set it’s width and centered it by using the margin-auto feature. I used shorthand- which you have to make sure you’re using the right kind before expecting it to work. In this case, margin works from the top and moves counter clockwise. The first number determines how many pixels away it will be from the top, the next number determines the distance on the right, the third number determines the bottom, and the last number represents the left side.

It may seem a little overwhelming at first but if you chew over it long enough it will make sense.

In conclusion

There are a number of CSS commands you can use, like margin and background. There are a lot of ways to figure these different commands out. Searching the web and research other sites CSS files is one of the best ways to teach yourself. See how others are doing it! Learn from them. There are also books available as well as classes you can take to learn. I encourage you to do some research on it. I hope that this will aid you in your understanding of reading and writing CSS.

Thanks for reading! Please leave a comment if you found this article helpful or ask questions if you didn’t understand something. Be sure to pass on the article to your friends if you think they could benefit and learn from reading.

If you don’t know any HTML, I suggest you go do some research before this article will be of help to you. If you know the basic idea of HTML and the tags then read on!

First things first- semantic code. The concept is simple, and the results benefit not only you but also anybody who will inherit your site should it ever be passed on.

What is semantic code?

Semantic code sounds easy to write, but so many people pass it by. Suppose you’re writing a simple web page. What does the code look like to begin with? Well something like this:

<body>
<h1>Heading 1</h1>
<p>Some paragraph content.</p>
<h2>Heading 2</h2>
<p>Some sub-paragraph content</p>
</body>

See how it’s in order? The h1 tag comes first, and then some content, followed by the h2 tag and some more content that is probably not as important. It’s just like the newspaper- the biggest, most important headline is big on the top and the rest of the headings section off the articles but they aren’t as important.

For every h1 tag, h2 is a subheader. The subheader for an h2 would be h3, and so on down the line. Got it? Good.

HTML is structure!

The difference between HTML and CSS is the that HTML is the structure and content, while CSS simply styles the look and feel. If you view an HTML document structured correctly without its CSS, the content should be in semantic order viewed as plain text in the document with no images other than what you would want a user to see in the content. Images for backgrounds shouldn’t be showing up.

How do you structure a site? Using div tags! I may go on about div tags later but for now just work with me. Tables are of the past, and while they may have their uses, it is NOT for structuring the layout of a site.

Example of creating a web page with div tags:

<body>
<div id=”wrapper”>
<div id=”header”>
<h1>Your main page headline with keywords</h1>
</div>
<ul id=”navigation”>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<div id=”content”>
<h2>Page Title</h2>
<p>Some paragraph content</p>
</div>
<div id=”footer”>
Anne Dorko © 2007
</div>
</div>

You have to remember that when you open tags, you must think of them like putting smaller boxes into bigger boxes. If you have a large box and arrange four boxes inside, that represents the div and ul tags for header, navigation, content, and footer. In each of those you place the smaller boxes (h1, h2, p, a, etc.) and in each of those boxes you place your content. You can’t overlap boxes, it just wouldn’t work. In other words if you open h1 and put a link inside, you need to close the link before you close the h1 tag.

Other thoughts and tips

This post is not meant to help you create a website, it is simply here to make you aware of the need to write good code. There are so many good reasons to write HTML the right way- as you will read in a later post, it will be so much easier to write CSS and style your HTML. It is also important that your content is written right so that Google and everyone who views your site to get the right information in the right order. If you can view your HTML file in plain text in a browser and still be able to understand what is going on, then you know you have done a great job.

There isn’t much to writing semantic code, it’s just that most people aren’t even aware of how it’s done. Using lists for the navigation is important too, but I’ll be writing a whole separate post on that in and of itself so keep your eye out if you want to learn.

So, thank you for reading, feel free to comment if you found this helpful, or ask questions if you feel I didn’t cover everything, and if you liked it be sure to pass it on as well!