Headsetoptions.org Web Design, SEO, WordPress, Etcetera

eMagazine is a back to the basic theme with emphasis on visual presentation and with plenty of room for future development. This version 0.8 is fixed width and with 2 fixed right sidebars. Future version will have options to move sidebars to the left (or on both sides of content) and other advance functions such as touchless CSS edits, content placement and Javascript tabber.

Just like our other free premium advanced WordPress themes, including the most recent PointSpace and WExp, this (beta) theme does the job as is and works will all versions of WordPress up to 2.5.x.

Here are a few features of this early version:

Adding a category called Featured (with a capital F) activates the featured post option.
Both sidebars are widget ready.
Posts and sidebar are adsense styled - easily add your adsense code located in separate files.
Search engine optimized - use without worry of duplicate posts or rearranging title tags.
XHTML validated.
CSS 3 validated (will show opacity error in CSS 2.1).

Using images in place of text can be tempting especially since an image can offer you more visually than just text does. However, most of us end up using text for the simple reason that Google and Yahoo’s search engines are not able to read your images effectively (even with alt text?). Here’s a quick, simple, tried and tested SEO friendly CSS only Javascript free fix for one such scenario; replacing your navigation menu text with SEO friendly images:

Let’s start with making our images that will be used in place of menu text, in this example I am using images 30px tall and of varying width. I make two images for each menu item, one for mouse-over or hover and second for all other conditions.

For good SEO, it is preferential to open your comment authors URI in a new page. Why you might ask? Google and other search engines track sites you visit, they can tell what that site contains (obviously), how long you stayed there and where you went next. The intended use of this information is to find if the sites you visited were relevant to your search keyword and/or if all the sites you visit are related. That could also work against you if your site get a lot of spammers commenting on it. Here’s how.

Let’s say you get a comment on your site that look legit, so you want …

If you are a frequent visitor, you will notice that the site was rebooted over the weekend using a fabulous design by WP Designer.

For the sake of comparison, I have included an image (linked to demo) of the original theme Gluttony along with a screenshot of the current version.

Of course the design is more than just CSS hacks, we added numerous conditional statements to make the experience more user friendly. The design itself …

I gave up on Notepad a while ago and switched to Notepad++, which among other things allows one to format a file in UTF-8 without BOM, in turn cleaning up your XHTML files for validation (no “Byte-Order Mark found in UTF-8 File” warnings).

A YUI grid based design that actually works across all browsers and validates now skins ManadrinMusing. The total design time was less than 12 hours and most were hand coded from scratch (except the YUI grid part that was corrected for validation). Check it out!

For those making the final submission of your CSS designs for the competition either tomorrow or the day after, I compiled this quick (should take less than 15 minutes) and a short checklist to help ensure your theme gives the rest a run for the money. At the risk of being called “Captain Obvious”, here it is:
Style
Hierarchy: Make sure your h1, h2… are all styled using commonsense formats to create a meaningful visual hierarchy. Sandbox does not use h2 in the sidebar like the Widgets do, so think about both scenarios, that is, users using your theme as is and those using sidebar widgets. (Time: Should take you less than 1 minute for this)

Dropdown menu usage: If you plan on using the default dropdown in Sandbox, leave the pages list intact for IE 6 users. If you plan on hiding the sandbox_globalnav, the div id is “menu”, make it “display: none;”. (Time: Again, should take you less than 1 minute to check)