A lot of people are curious as to what CSS reset I use (most of those people are in my Intermediate Web Design class that I teach on Tuesday nights).  Fear not, for i am posting my favorite reset template here!

@charset "utf-8";
/* CSS Document */

/*--------------CSS RESET-------------*/

/* Global Defaults */
html, body {
  margin: 0px;
  padding: 0px;
  border: 0px;
}
body {
	font: 1em/1.25 Arial, Helvetica, sans-serif;
}

*{
outline: 0px;
}

/* Headlines */
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
	color: #545049;
}

/* Text Styles */
p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {
	margin: 0;
	padding: 0;
	font: normal normal normal 1em/1.25;
}
blockquote {
  padding: 0 1.25em
}
q {
  font-style: italic;
}
acronym, abbr {
  cursor: help;
  border-bottom: 1px dashed;
}
small {
  font-size:.85em;
}
big {
  font-size:1.2em;
}

/* Links and Images */
a, a:link, a:visited, a:active, a:hover {
	text-decoration: underline;
	color: #FFF;
}
img {
  border: none;
}

/* Tables */
table {
	margin: 0;
	padding: 0;
	border: none;
	text-align: left;
}

/* Forms */
form {
  margin: 0;
  padding: 0;
  display: inline;
}
label {
cursor: pointer;
}

/* Common Classes */
.clear { clear: both; }
.floatLeft, .alignleft { float: left; }
.floatRight, .alignright { float: right; }
.textLeft { text-align: left; }
.textRight { text-align: right; }
.textCenter { text-align: center; }
.textJustify { text-align: justify; }
.blockCenter { display: block; margin-left: auto; margin-right: auto; } /* remember to set width */
.bold { font-weight: bold; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }
.noindent { margin-left: 0; padding-left: 0; }
.nomargin { margin: 0; }
.nopadding { padding: 0; }
.nobullet { list-style: none; list-style-image: none; }

ul ,ol{
	margin-left: 25px;
}

.post ul, .post ol{
margin-bottom: 10px;
}

I have clients all the time ask, “How is the new design going to help my traffic?”  Honestly, since design and content are supposed to be separate, a new design shouldn’t affect traffic in its purest sense.  But, a good designer can implement techniques that will affect Google’s view of a website, without even messing with the meta data or content.

This sort of “natural SEO” starts at the core of the site, in the code itself.

Use Proper Tags

Typically, your H1 through H6 tags are saved for the most important parts of the site. But proper positioning can guarantee that the most important content in the site is how the search engines index.  H1 tags are the most important, with H2 through H6 following closely behind.

Structure may vary from designer to designer, but mine typically goes like this for a corporate site (blogs, of course, have a different need):

The H1 tag gets put onto the logo, with the name of the site.

H2 tags are reserved for page titles, post titles, and search results.

H3 tags are sub headings (like the one above).

H4 tags are used for special points or callouts.

If I needed them, the H5-H6 tags would be used accordingly, but I honestly rarely use them unless I’m doing an outline.

Once the tags are implemented into the design, the process is automatic – as you add content, the tags work automatically.

OK… so let me say first off that it’s not totally my fault that I didn’t get to finish my session last week.  The internet access in the condo we were staying in was nothing less than horrible (it was a great condo otherwise, but let’s just say that if it was online it didn’t get done very fast).  Mount on top of that the fact the nearest Starbucks was 25 minutes in either direction and you have yourself a 100 percent valid excuse as to why I didn’t post last week.

Yeah… So… sorry about that.

At any rate, I’m back in the land of Wi-Fi with my in-laws in Alabama and wanted to continue the vacation atmosphere a little bit.  Therefore, the posting series will continue as warranted!

The last post was a sure-fire way to make sure your blog was up to date with the latest patches (which, before the post and during my vacation, I was victim of a useless [but still annoying] bug that caused my password to be able to be reset from anywhere).  Needless to say I upgraded as soon as I could.

Today I’m going to be talking about 3 plug-ins that rock my world – ones that go on 95% of every WordPress installation that I do.  Well, actually there’s at least 6 to 10, but this is the short list.  Also, there’s one I’ll be going in depth about – All In One SEO (but that’s another post altogether).

So, without further ado, let’s get to it! These plug-ins are in no particular order, so don’t think I’m playing favorites – they all serve their purpose!

Plugin 1: WP-GreetBox

WP-Greetbox is a fun little plugin that does what every good blog should: calls the user to a specific action.  But, it’s hard to call people to action when their situation (or referring website) is different.  WP-GreetBox fixes that problem by detecting the site a person comes from, acknowledging their visit, and giving them a specific call to action based on that referral.  Coming from digg?  “Digg this site!” Visiting from StumbleUpon? “Be awesome and click the thumb-up button on your way out!”  Coming from anywhere else?  “Hey, welcome, subscribe to the feed”.  You can see it in action on this very blog at the top if you’ve come from a referring site such as Twitter or Google.

Plugin 2: Redirection

This is one of those “plug-ins in disguise”.  It’s actually a 3-in-1 plug-in that serves many purposes.  It’s main purpose is to redirect permalinks from an old blog or to funnel traffic through to a mis-wired connection.  Example: You change your permalink structure but one post is still getting traffic to its old permalink, and it’s throwing a 404 error.  The plug-in will tell you its logging the 404 error and will allow you to set that permalink up to redirect to the right place.

Of course, this also means it’s a built-in URL shortner.

http://www.studionashvegas.com/twitter/ for example – click on it and see where it goes

Plugin 3: TweetMeme Button

TweetMeme’s retweet button is the new Digg button for blog posts.  It not only puts a really handy way to tweet out a site’s name and post link, but it shows you how many have been placed using said button (or any that turn up on the URL shortening service you set up).

If you didn’t figure it out from my tweets or last post, I am currently relaxing in Destin, FL (and at this moment, horribly sun-burnt – this is why geeks don’t get in the sun!).  I told myself I would do a blog post a day because I wanted to get into a daily routine of posting again, but then I asked myself… Why would I want to “work” on stuff like that while I’m on vacation?  It’s fun for me, and one of the problems during my day job is that I don’t get a lot of time otherwise to do it.

So, to me, this is a vacation: sitting at a Starbucks, relaxing, and working on a blog post.

And that’s when it hit me: I wonder how many other people have the same problem I have?  How many people have neglected their blog because they don’t have time to maintain it?  How many people have old WordPress installations that need upgrading, or are still running plugins from last year because they don’t have time to look up new ones?

Well, this week I’m going to take 6 days (today + this week, until Saturday, when we leave the beach) to share a little of my vacation with you, and help you get your blog into the shape it needs to be in.

And it starts with an upgrade.

If you aren’t running WordPress 2.7, we’ll start with you (you poor souls – you don’t know what you’re missing). You want to FTP the following plugins into your installation:

WP-DB-Backup

WP Automatic Upgrade

If you’re running WordPress 2.7 or later, then install WP-DB-Backup from the plugin installation menu on the left sidebar (plugins > add new).

Once it’s installed, head to Tools > Backup.

You’ll see a list of all of your tables.  For time sake, check the two on the left, and the important ones to you on the right.  Usually it tells you want the plugin is before it tells you the data (lifestream_event), so pick the important ones.

In the backup options, download the backup to your computer and hit Save once the dialog box comes up.  While you’re at it, head back in and schedule a weekly backup to be sent to your email account.  That way, if something happens, you’re covered.

Once that’s done, WP 2.6 users need to activate the automatic upgrade plugin and follow the instructions on screen.  It’ll walk you through the entire process, and will tell you exactly what to do.  I don’t have a blog running WordPress 2.6, or I would show you screenshots, but rest assured that backup you made can help if things go haywire.

For you 2.7 people, just hit the upgrade button at the top, and choose to upgrade now.  Everything will run in the background.  You really have no excuse not to upgrade if you’re running anything above 2.7

Those are actual upgrade screens from when I wrote this post.  I did it, while I was writing a post.  Was that really so hard?

Tune in tomorrow when I go over a few new plugins that have been release that will change the way people look at your blog.  Wednesday is SEO day as I talk about All-in-one SEO.  Thursday and Friday… well, why don’t you tell me?

I want to know what things on your blog go neglected because you don’t have time to fix it (or you don’t have time to learn how to use it/fix it).  The top comments on here and on Twitter will be covered Thursday and Friday.

Good luck with your upgrade, and have a happy fun time at the beach.  I leave you with… the Sand-Gator!

No, it’s not night – the sun was SO bright my iPhone took a bad picture.  We made this gator this afternoon out of Sand – that’s why my legs are so sunburnt (kneeling down in the sand to sculpt it).

A lot of people have commented on my new design how they love the comment bubble next to the post title.  It’s a great way to foster communication and showcase how many people are talking on your site.   So, if you want to add the same functionality to your site, here is the fastest way to do it!

First, you should note in your “index.php” file some code that looks something like this:

<h2 class="posttitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

To break that down, this is a H2 that inserts an automatic link to the post (<?php the_permalink() ?>) and automatically grabs the title from the post (<?php the_title(); ?>).

To put this in your own blog, ou can either start with your own comment bubble design or grab this one:

[link to comment bubble]

I’ve included the PSD so you can change the color as you need to.  You can either add in a background color or save it as a PNG file with transparency – it works either way. Save and upload your comment bubble (JPG, PNG, or GIF only!) either via FTP or the Media Uploader and save the hyperlink – you’ll need it in a second. Head into your theme editor and look for the above code.  Right above it, insert this code:

<div class="commentbubble"><?php comments_number('0', '1', '%'); ?> </div>

To clarify, this adds a div container with the “commentbubble” and inserts the code to call the comments.  The ‘%’ is a variable number that calls any number that’s not 0 or 1.

Finally, add the CSS into your stylesheet:

.commentbubble {
    background-image: url(URL-GOES-HERE);
    height: 37px;
    width: 49px;
    color: REPLACE WITH COLOR;
    font-size: 30px;
    text-align: center;
    padding-top: 5px;
    margin-right: 13px;
    float:left;

}

Save the edits, and preview.  It should put the comment bubble right next to the title.  If you are having trouble having your content text or pictures wrapping around the bubble with the title, right after the commentbubble div, put this code:

<div style=”clear:both”></div>

This is a clearing div that will stop the text-wrapping.

So am I.  I  make changes a lot live on the server (using the Web Dev Toolbar), and I have to hard-refresh every time I make a change.  Doesn’t sound like a big deal, but it cuts down on valuable time that could be done… well, not refreshing a page.  There is a way; versioning your CSS file.  The upside: it makes changes go live automatically without having to clear the cache.  The downside: it’s difficult to do, because the correct way to do it is by adding v=XXX manually every time you make changes.

Unless… you can find a way to do it automatically.  And Mark Jaquith has done just that.

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css?v=<?php echo filemtime(TEMPLATEPATH . '/style.css'); ?>" type="text/css" media="screen, projection" />

So what does the ‘filemtime’ function do?  From the PHP website:

This function returns the time when the data blocks of a file were being written to, that is, the time when the content of the file was changed.

So everytime you change the file, the new change time gets parsed in using PHP and you’re able to have a new version every time.

Thanks to Mark for this great (and really clever) tip!

Using images on a design is pretty well necessary in today’s visually stunning web.  However, while images look great, there’s no substitute for text when it comes to Search Engine Optimization.  But is there a way to get the visual effect of an image while still having the SEO benefits of text?

With CSS, there absolutely is.

Social Media

See this image above me?  Look like a standard image, with a standard <img> tag doesn’t it?  Well, if you were disable the stylesheets, all you’d see is this:

Social Media

Just text.

So, how can we achieve this?  By using a technique called the Revised Phark Method, with a bit of a twist to make sure that things work no matter where they are.

First, the code (simplified from above because the styles are inline for less “stylesheet bloat”)

<p class="socialmedia">Social Media</p>

Next, the CSS.  First we give it a definitive height and width:

.socialmedia{
height: 277px;
width: 101px;
}

Next, we need to set the display to “block” in order to give it the properties of other “block” elements (like H1, H2, and other similar tags):

 .socialmedia{
height: 277px;
width: 101px;
display:block;
}

After that, we need to set the background image:

 .socialmedia{
height: 277px;
width: 101px;
display:block;
background-image: url(http://www.studionashvegas.com/wp-content/themes/juicy/images/socialmedia.png);
}

Social Media

That’s starting to look right, but the text is still overlaid on the image.  To get rid of it, we simply indent the text –9999 pixels to the left, removing it from view:

.socialmedia{
height: 277px;
width: 101px;
display:block;
text-indent:-9999px;
background-image: url(http://www.studionashvegas.com/wp-content/themes/juicy/images/socialmedia.png);
}

So, what is the benefit of doing this?  Number one, browsers that don’t support images will show text, so you don’t lose the effect just because the image can’t be shown.  Also, the SEO benefits of using an H1 tag with text far outweigh those of using an H1 tag with an image and alt text.  Finally, it allows you to write your markup first without having to worry about jamming items into the design; write the markup, then style the elements in order from top to bottom, which saves time in the long run.

Whoops – it would be nice to actually have an article here, huh?

I just finished Jeremiah Owyang’s new blog design, and I have an article on his blog detailing the process and why I did some of the things that I did.  You can check it out here!

If you do like I do and schedule posts ahead of time (especially on the podcast), there’s a way inside of WordPress to show your readers what posts are coming up next:

<?php
$my_query = new WP_Query('post_status=future&order=DESC&showposts=5');
if ($my_query->have_posts()) {
    while ($my_query->have_posts()) : $my_query->the_post(); ?>
        <?php the_date(); ?> - <?php the_title(); ?>
    <?php endwhile;
}
?>

This will display up to 5 “scheduled” posts wherever you drop in the code.  Add a headline <h2> tag if you want to give it a title (should you want to use it as a widget).

Want to see this code in action?  Check the WordPulse podcast page’s sidebar to see it working!

So, you’ve got a personal blog and want to integrate your iTunes playlist into WordPress, but don’t just want to say that you’re listening to a CD – you want to display the album art too? WordPress has a few solutions that work great.  The easiest way to do that is by utilizing the “scrobbler” built into last.fm – on which an API can export just about any data you need.  Cue last.fm records and last.fm recent album artwork.

These plugins will take your last X number of CD covers from last.fm and displays them.  last.fm records has a nice caching system, and it’s one I’ve used personally, but recent album artwork has gotten a lot of positive reviews.