Free WordPress Theme: Blue Dock

This theme features a jquery plugin for a super cool expandable hover menu, like the dock menu on a macintosh.

Not only does it look sweet, the theme options give you total control for what goes in the menu.

Copy and paste any url into the form field. Add pages, posts, links to outside pages, whatever you heart desires. You can also decide which icons you’d like to use. I’ve prepared 40 icons for use with the menu from iconedens ‘Bright’ icon set. I’ve also included a photoshop file, so you can prepare your own icons if you wish.

View the Demo
Download: BlueDock Theme (2.37 MB)
Register for Updates to this theme, and to be notified by email
when new themes are released.

Other features:

• Featured Home Page description area (allows html)
• Latest Post Home Page Styling
• 2 Column Home Page Excerpts feed
• 3 Column Widgetized Footer
• Stylized Comments
• Meta tag icons (from iconfinder.net)

Free SEO Theme for WordPress
This layout has been restructured and totally customized for Search Engine Optimization. I kept it very clean, light on code and graphics, with important information at the top where spiders cant miss it. Plus the theme structure lets you use WordPress to keep your keywords organized… Less planning, more writing.

View the Demo
Download: SEO Theme (121.13 kB)

What Was Done:
I moved the H1 tag to the top where it belongs, using the Category to automatically fill it. Similarly, post Tags automatically fill your H2 tags. I took the weight off the post title, so now you can write awesome headlines for your readers, and not for search engines. Your content immediately follows very close to the top of the page.

The page menu was moved out of the spiders way with CSS Positioning, and I added some cool drop down CSS. Finally, I added breadcrumb navigation to the bottom of the page, so your keywords are not only read first, they’re also read last.

The layout is built to fill the screen and look good at all resolutions. Sticky posts have additional styling to give your featured posts some pop. Images for sticky posts are automatically inserted using the first image in your post.

How To Use This Theme:
WordPress is a very handy tool for recording keyword research. As you find good keyword phrases, enter them as Categories. (I also use the category description area to record keyword data since the theme is not coded to show a description, the data remains private.) Categories  do not show up in WordPress until you use them, so its a good way to save data while keeping organized.  Now as you write your posts, you will have categories available to you. This way you can reference your keywords while writing… sort of a set-it-and-forget-it method. Choose your category, and your H1 tag is complete.

Its done with positioning in CSS. I never really did FULLY understand positioning in CSS. I was working on my SEOd like Crazy Theme for Wordpress where I wanted to use this trick, and had to get to learning… BarelyFitz made a neat tutorial to learn CSS Positioning that helped me figure it out.

I knew to set my positioning on the menu to absolute, but was running into a problem: My layout was a fixed width, centered on the page.  The menu needed to stay inside my layout, not just stick to the top right of the page… Different screen resolutions will throw this layout completely out of whack… such a long explanation for such an easy fix!

Put the menu div inside another div (in this case my page wrapper) and set the wrappers position to relative.

After reading Smashing Magazines article on CSS Floats I was surprised at how SIMPLE the fix is. Two little words were the key to ending my frustration. overflow:auto. remember them well.

Here’s example code for ending your float woes:

Build your columns inside of a container and assign the overflow to auto…

<div style="overflow:auto;">
<div style="float:left;">left</div>
<div style="float:right;">right</div>
</div>
<div style="border:1px solid #cccccc;">footer</div>

Heres the result:

And with little extra styling:

<div style="background: #555555 none repeat scroll 0% 0%; overflow: auto; width: 100%;">
<div style="padding: 1%; background: #cccccc none repeat scroll 0% 0%; float: left; width: 86%;">
       Left
 
       Content</div>
<div style="padding: 1%; float: right; width: 10%;">
       Right</div>
</div>
<div style="background: #333333; color: white; text-align: center;">
   footer</div>

Heres the result:

Happy CSSing!

My searches have been missing something since the live PageRank addon became incompatible. It feels like forever. After a bit of searching I found a great addon with live google PageRank and so much more.

SearchStatus for Firefox has an impressive bag of features. Choose where in your browser to display live Google PageRank and Alexa rank. Highlight NoFollow links on the page. Theres a keyword density analyzer and backward/related links. Also includes a link to show indexed pages for Google, Yahoo and MS Live shows you all of the pages on your site, or any site that have been indexed.

In this video Oleg goes through all the features.

SEO Quake has been a popular free webmaster resource for a while, becuase it has stood the test of time. Gives a quick SEO snapshot for your keyword searches. When you’re searching for keywords, get a quick overview of your competitors Page Rank, number of pages indexed, number of links pointing to the page (for google, yahoo and MSN) Plus Digg, Del.icio.us and Technorati history and more. Toggle it on and off from the bottom of your firefox browser for easy access.

Heres a screenshot:

For researching keywords to optimize your site, these two tools should really cover it.

Happy SEOing!

If you’ve been tooling around web design and developer sites lately, you may have noticed a strange phenomenon. Nice fonts. Much nicer than the default web fonts, and no, they’re not images. I know from the 100 times I’ve selected the text muttering ‘wow thats cool’. We’re no longer stuck in what I’ve heard humorously termed as ‘arial hell’.

Until now, this was about it for web safe font usage:

Enter @font-face

@font-face is an actual css rule created years ago to embed fonts on a web page. It wasn’t supported by browsers until recently. Now Mozilla and IE support font embedding. I’ve tested in FireFox 3.5 and IE7. It works in both, though I feel IE’s a tad sluggish.

This is a huge step for online typography. Now when clients ask ‘Can we do something about those ugly fonts?” you can say, YES! yes we CAN! It’s a bright day in the web design world. To embed beautiful fonts, all you need is the right font formats and the CSS to get it done.

I’m all about handy tools to make life easier, so let’s head over to FontSquirrel where they have prebuilt ALOT of @font-face kits. This way we know the fonts are legal for your site (check the license for other uses) and the code is already written.

A peek at just a few of fontSquirrels font-face kits.

Since they provide little how-to, I’ll give you a quick walkthrough.
(W3 Documentation for @font-face)

The files.

-Your kit comes with all the fonts needed, in the following extensions:

• .woff  Web Open Font Format (mozilla)
• .eot Embedded Open Type (microsoft)
• .svg Scalable Vector Graphics (XML web graphics iphone)
• .ttf   standard TrueType font

-It comes with an external style sheet which defines your fonts for the browser. (stylesheet.css)

-And it comes with on-page example classes to control the size and line height. (in demo.html)

Lets plug it in.

1. Extract the files into a folder and upload them to your server. I called my new folder ‘fonts’ and put it inside my wordpress themes folder. I kept it simple and left stylesheet.css in the same directory as the fonts.
2. Open the file that contains your websites <head></head> tags (index.html in most cases… header.php in your wordpress themes folder)
3. Include the following code inside the head tag (given in demo.html – make sure to use the correct path to the file)
   <link rel="stylesheet" href="http://yourdomain.com/correct-path-to/stylesheet.css" type="text/css" charset="utf-8">
4. Style your new font with CSS. (example classes given in demo.html)
   its a simple switch.
   say my h1 style was written this way…
   h1 {font-family: Arial, sans-serif;}
   Add the font-family defined in stylesheet.css like this:
   h1 {font-family: 'DroidSansRegular', Arial, sans-serif;}

Thats all there is to it. Do it once and you’ll be a pro! And you can download them all, they’re free!

Other options and some history:
Replacing fonts for the web used to require much code. sIFR has been around for a while and I give them serious props for making it work. Looking into the code, I had to pass because frankly, its complicated. It uses javascript to call flash to redraw the fonts. And with all that code, page load time suffers. If the visitor doesnt have javascript or flash? They see the default.

Cufon is much easier to understand and implement and does a nice job. Their generator converts fonts to the correct format and there’s a nifty wordpress plugin. Less code means faster page loads but be aware of where your fonts are coming from and if you’re allowed usage on your website. Wouldn’t want license violations. You might even want to do some of your own comparison testing to see which loads faster, cufon or @font-face

Happy TypeFacing!

watch the high quality, full screen version on vimeo.

Here are the plugins:
All In One SEO Pack
Google XML Sitemaps
Related Posts by Category
UPDATE: heres another related posts that might work better
Contextual Related Posts
WP Easy Archives is no longer available. If it is, i cant find it.

Comment with questions and I’ll explain in more detail

Happy SEOing!

Ok, so people have been asking about web design services. I figured I’d take a shot at writing a sales page. Im no writer and thats fine, but a little help getting my point across would be helpful…  I started looking into it.

If you want to learn something, you try to learn from the best,  right?

Copyblogger.com tipped me off to John Carlton who is proclaimed to be the best in copywriting. I’m following his  material now. So far it looks like winning stuff.  He’s teaching his 17 step system that one of his students says is  “freaky” how well it works.  Id like to see more and try it out before I recommend anything to spend real money on.

In the meantime, I found you guys some free videos.   Not as much finesse as John Carlton’s, but the basics are there.  It’s Copywriting for Promotional Emails, but it translates easily to salespage copy.  The site requires a sign up (sorry), but i think its worth it. they’re pretty good videos.

you know they say just a little copywriting know-how can make a big difference!

best of luck
and happy writing!

I’ve been researching open source social network platforms trying to find, well basically the next wordpress of social apps… It’s not very apparent to me which is the most popular platform.  Even with wildly popular social sites like myspace, facebook, social networking is still in its infancy in the open source. But where theres a demand, there is supply… and people talking about it.

I’ve been looking at new platforms along the lines of membership, classroom and/or social networking. I dont know if you’ve been through the internet marketing guru slam, but it’s interesting to get inside their programs and see how they have things set up. I just finished up a month with PPC Classroom, a go-at-your-own-pace online course to learn the in’s and outs of Pay Per Click. A very viable internet marketing method, but somewhat risky for the little guy.

A look inside this bad boy had my mouth watering to learn programming once again.  They had segmented learning modules according to a course plan, with embedded video for better understanding. At the end of each segment, they integrated quizzes, where a passing score was required to move on to the next segment. It was automated and also saved student data. Way sheik. And to add the finishing touch, as soon as the forum opened up, it really started to feel like a community very quickly. If you wanted to learn pay per click, you couldn’t have asked for a better learning environment.

Justin Brookes SiteFlipAcademy, sadly no more, had an excellent 2.0 style membership platform. (I stand corrected, read Justin’ comment below) This was a video learning environment with a super user friendly interface and ultra fast page loads. His info was easy to learn, quick to put into action, and it actually worked. I made money flipping websites and templates. The marketplace for mere templates kinda ebbed right now, but Justin Brooke is the man! I highly recommend getting on his list. His site is at sitefling.com

SiteRev5 is a community driven free membership networking site. I found it when I was flipping sites. One thing I dont like about social sites and blogs is that they’re so cluttered and difficult to use. No so with SiteRev5. Their layout is easy to navigate with a lot great information, submitted by knowlegable  members. If the market returns for siteflippers, I’ll be the first one back to this site.

So while considering a new platform, I wanted to integrate the following things. A way to present information in the fast loading 2.0 style platform with uncluttered pages. And I want people to be able to sign up, with an easy way to communicate with those subscribers.

WordPress a fantastic way to present info, and communicate with feeds, but it gets confusing at the subscriber stage. Also, any social abilities outside of commenting would require a forum. Not a big deal, but I’ve seen better ways to put it all together.

I’ve also looked through straight social networking platforms and picked the top 3 most talked about.

Elgg.org winning the BOSSIE award for “Best Open Source Social Networking Platform 2008″ comes in on top. Seems to be the easiest to use as well.

PHPizabi.net is a close 2nd. Seems more powerful, but looks much harder to work with.

People Aggregator is probably the best all in one solution. Easy to use, with more power. To me, it looks difficult to customize. As a designer, that’s kind of important to me.

I’ve also looked into content management with membership and communication ability. Joomla immediately comes to mind, but after a week inside Joomla I never wanted to look at another CMS again.

Since Pact publishing announced Drupal as the winner of the 2008 Open Source CMS Award, its time to dig a little deeper. Drupal known for community building capabilities. Its easy to install, set up and create content with. Templates are clean and easy to customize. Member signup and user control is rock solid. And there’s a lot of documentation if I have questions.

Some things out of the box that I dont see: Nicely optimized urls for SEO (default story is http://site.com/node/1) Drupal says URLs can be customized. Also, I’d like a way to contact my subscribers, preferrably by email. There are a few mail modules to add on which should do the job. All in all this is a great solution for a membership and community sites.

With a little help, Drupal goes all the way. Im learning to custom design better navigation and also learning the taxonomy. Will have some more info on that soon. In the meantime,  Acquia has a great modules for drupal including an rss aggregator, forums, comments, contact forms, user profiles, polls, and also fixes the SEO problem for urls.