I may be a professional web designer, but between my agency job and freelance work, I have long neglected my own website. I finally decided that I’d rather modernize my site and use a pre-made theme (for now) than continue to have a personal website that had gotten a little dated.

So here it is, my new site. It’s using a pretty standard version of the Writer theme from ThemeFuse. What drew me to the theme were the colors and typography — and the fact that I had gotten a code for three free ThemeFuse items in a recent BundleHunt package. It also had a pretty nice looking layout for a portfolio page, so I’m pretty happy with it overall.

I do hope to design and code something from scratch soon, though.

You can see it in action on my website, which uses the Lobster font in the headers.

Traditionally, a designer putting together a website has been limited in font choices to what is installed  natively on end users’ machines. I could tell a browser to display a headline in any font I want, but if the person viewing it doesn’t have that font on their computer, they’ll see a common font like Times or Arial. So that’s not a lot of variety in the fonts chosen for site design.

I could choose to let users load the font from my server, but that gets into legal issues with licensing. Plus, it can be complicated and confusing to get a system like that set up.

Google has made embedding pretty font super easy. It’s literally a two-step process.

To get started, visit the Google Font API website. Then click on “Font Directory” to see a list of all the fonts available. There’s not a lot to choose from right now, but everything there is open source and can be used freely in your projects. Just find a font you like, and click “embed font.”

Google will give you a short snippet of code to insert into your site’s header,and then you just use the font name in your CSS as you would any other font. The API generates the necessary CSS to display the font on the user’s browser.

While the task was not complicated or difficult, it did surprise me how much there is to think about when you’re making a theme from scratch (before, I’ve always started with at least a basic framework). You have to style the comments, make a search results page, decide what regions to “widgetize,” label those regions, style the search box, decide how to display metadata, the list goes on. And several times I broke the whole dang thing by forgetting to close a <div>.

However, it was totally worth it, because now I have a WordPress-powered Web site that acts exactly as I want it to. If you’ve seen my designs, you know I like simple, easy to navigate design. And I’m in love with the “cute critters” icons from Tutorial 9, which I used on my old site and definitely had to include here. Plus, I prefer the “excerpt” function for the index page, rather than using a manual “more” tag, so I could do that too.

Since I’m using WordPress 2.9, I also made use of the new thumbnail feature. It eliminates the need for a custom field to display a thumbnail on your index, search results, etc. pages. Once you activate the feature in your function file, you can set the thumbnail from your media library, or upload an image specifically for that use.

As usual, I figured all of this out as I went along, with the help from some great Web sites, including:

• Web Designer Wall
• WordPress Codex
• WPCandy
• CSS Newbie

Of course, now that my blog is also my home page, I’ll have to blog more often. (Damn you Twitter!) Can’t have months-old content pop up when a potential client finds my site.

Hope you enjoy the new site, and if you find anything broken, please let me know!

She’s already blogging on WordPress.com, so I suggested she use a self-hosted WordPress installation as her portfolio site. It will be easy for her to update, she can add functionality as her site grows and it’s much, much more search-engine friendly than her old Flash site.

One of the easiest ways to get started with WordPress is to customize a pre-made theme or template. I pointed Tricia to ThemeForest, which I’ve used before, because the themes there are inexpensive and high quality. She chose one called PhotographerDream.

It features a nifty rollover effect on the home page, where it automatically displays the most recent images added to the portfolio. The top navigation displays a lits of categories, as well as pages and a link to Tricia’s blog.

The theme as purchased was purple and pink, but Tricia preferred a more understated black and grey scheme. I showed where to edit the stylesheet to make the changes, but being tech-savvy, she did all the customization herself.

The whole thing was completed in a weekend.

Convert videos to FLV
SoThink Flash Video Encoder
One of the few things the client had to purchase to make the site work, encoding software not only makes the video viewable online, it also drastically reduces file size. SoThink’s video encoder is $45 and is designed for Windows. But if you have a Mac, try iSkysoft Video Converter.

Upload the videos to the server
FileZilla
Each video file was at least 50 MB, so transferring files with FTP was the logical choice. There are any number of free FTP clients available. Though I use FireFTP on my own computer, it’s a FireFox extension and the client uses IE. So I recommended FileZilla, which is a great free FTP program.

Display the videos on WordPress
Wordtube plugin
I tried several different plugins for displaying the FLV files. I finally settled on this because it has an easy user interface that makes it simple to add videos to the backend, and places an “insert Flash video” button in the post creation window. It works in conjunction with the JW FLV player from Longtail Video, which is free for noncommercial sites.

Keeping it private
WordPress Password plugin
This plugin protects your entire WordPress site with a universal password. Just give it to anyone who you want to access the site. You still have to enter your own password to get into the admin pages. It’s also easy to change the password if you ever need to.

What it looks like:

Your table may look a little different because of the styles on this page, but it’s pretty much what you see above. Obviously, this can be used for any table you need, and to make more categories, just copy and paste. And now for the code:

<table style="border-collapse: collapse;" border="1" cellpadding="5" width="300" bgcolor="#ffffff">
<tbody>
<tr>
<th colspan="2"><span style="color: #000000;">xx of xx precincts reporting</span></th>
</tr>
<tr>
<th colspan="2"><span style="color: #000000;">Office 1</span></th>
</tr>
<tr>
<td width="240"><span style="color: #000000;">Candidate 1</span></td>
<td width="60"><span style="color: #000000;">xx</span></td>
</tr>
<tr>
<td><span style="color: #ff0000;">Candidate 2</span></td>
<td><span style="color: #ff0000;">xx</span></td>
</tr>
<tr>
<td><span style="color: #000000;">Candidate 3</span></td>
<td><span style="color: #000000;">xx</span></td>
</tr>
<tr>
<td><span style="color: #000000;">Candidate 4</span></td>
<td><span style="color: #000000;">xx</span></td>
</tr>
<tr>
<th colspan="2" width="300"><span style="color: #000000;">Office 2</span></th>
</tr>
<tr>
<td><span style="color: #000000;">Candidate 2</span></td>
<td><span style="color: #000000;">xx</span></td>
</tr>
<tr>
<td><span style="color: #000000;">Candidate 3</span></td>
<td><span style="color: #000000;">xx</span></td>
</tr>
<tr>
<td><span style="color: #ff0000;">Candidate 4</span></td>
<td><span style="color: #ff0000;">xx</span></td>
</tr>
</tbody>
</table>

I worked on MagnoliaWoman.com, a Web site for a new woman’s magazine, for several weeks. One of the last things I did was design a page for the “She Said” feature, which uses quotes and photos of local women. My editor wanted to use all the quotes and all the pictures on the Web site, so I had to find a way to package them attractively.

I think this CSS styling worked nicely. It’s very customizable for colors, etc., and the empty div at the end ensures that it will work even if you have a short quote that doesn’t take up the whole box.

In my example, I’ve used a Homer Simpson quote, because nobody gives good quote like Homer.

Here’s the CSS and HTML:

quotebox {
width:500px;
display:block;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
padding: 10px;
border:3px double #CCC;
border-width:3px 0;
color:#333;
background-color:#f0f0f0;
font-size: 16px;
font-family: Georgia;}
.quotebox img {
 float: left;
margin: 8px;
width: 50px;
border: 5px solid #fff; }
.after { clear:both;}

<div class="quotebox">
<img src="photoURLhere" alt="alternatetexthere" />
<p>Quote quote quote quote quote quote quote quote</p>
<div class="after"></div>
</div>

The main things I check as I go along are cross-browser compatibility, markup validation and resolution. My favorite tools to make that easier include a resolution tester, the W3C markup validator, Browsershots and a couple of Firefox extensions. All of these tools are free.