Yea, “perfectest”. It’s a word. Anyway, I’ve been meticulously scouring the web for a perfect reset stylesheet. Something that will make the starting point for each project somewhat uniform. I’m pretty sure I’ve come pretty damn close and decided to post my findings here for your benefit. So take some time to check out what’s inside the file or skip down to the bottom and download it. Enjoy!

Right off the bat, you’ll notice alot of the common stuff you’ll find in almost every reset stylesheet:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0;padding: 0;vertical-align: baseline;border: 0;outline: 0;background: transparent;}

ol, ul {list-style: none;}

blockquote, q {quotes: none;}

:focus {outline: 0;}

table {border-collapse: collapse;border-spacing: 0;}

I’ve also added a little gem (thanks to @hugsformonsters for the tip) to clean up Safari’s text rendering:

html {-webkit-font-smoothing: antialiased;}

As well as something to help clear floats (thanks to @simplebits).

.clear:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}

Underneath this, you’ll find a few bonus styles that are commonly used on almost every site. You can change them up to suit your needs, but they are really useful and it’s a no brainer putting these in your reset stylesheet since you’ll always have a need for them.

/* text alignment */
.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}

/* text formatting */
.small-caps, abbr {font-variant: small-caps;letter-spacing: 1.7px;}
.uppercase {text-transform: uppercase;letter-spacing: 1px;}
.lowercase {text-transform: lowercase;}
.strike {text-decoration: line-through;}
.underline {text-decoration: underline;}
strong, .strong {font-weight: 700;}
em, .em {font-style: italic;}

/* alignment */
.left {float: left;}
.right {float: right;}

/* images, videos, and more */
img, object, embed {display: block;}

/* code and pre blocks */
code, pre, .code { white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word; }

So by now you should see what i’m starting to get at. There’s no need to duplicate these styles now in your main css file. You can just create a pretty nice string just using these default styles.

Underneath these you’ll find some h1′s-h5′s each followed with a class to make styling text alot easier.

/******************************************************************
H1, H2, H3, H4, H5 STYLES
******************************************************************/

h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a { text-decoration: none; }

h1, .h1 { font-size: 3.6em; line-height: 1.33em; }

h2, .h2 { font-size: 2.4em; line-height: 1.5em; }

h3, .h3 { font-size: 1.8em; line-height: 1.66em; }

h4, .h4 { font-size: 1.4em; line-height: 1.7em; }

h5, .h5 { font-size: 1.1em; line-height: 2.09em; }

Again, you can change these to your liking, but with all these default settings, your page should be off to a great start.

So here’s the whole thing. Just copy and paste it or you can download it here.

If you’ve got any suggestions as to what else I should put in here or if you see something that I’m missing, feel free to drop me a line on Twitter. You can follow me here.

When the buzz about HTML5 started, the one thing I was most excited about was the video tag. It was going to make video easy to embed in any situation and it was going to have fallbacks just in case a device or browser (ahem IE) didn’t support it. Perfect, I thought. Well, fast forward a few months and we’re still not quite there. Yes, it’s easy to use and works fairly well, but there’s one problem: Codecs. There’s a lack of unity when it comes to codecs so we have to encode our videos in a few formats. Luckily, you really only need to worry about one codec. I’ll explain why.

Explaining the Code:

This is the HTML5 Video Tag. With this code, videos can play in the browser without the need to use Flash. Since IE doesn’t support HTML5 yet, this example has a Flash fallback. When you load this page in IE, you’ll see the Flash player. With this video tag, we can now display videos on the iPhone and iPad!

Each browser has it’s own set of controls so the video will not have the same control panel in every browser. It’s ok though, since they will all look pretty similar and will seem familiar to the user.

<video width="640px" height="360px" poster="images/thumbs/sample-thumb.png" controls autobuffer>
    <!-- safari / chrome / ie9 -->
    <source type="video/mp4" src="files/sample-vid.mp4">

    <!-- firefox / opera -->
    <source type="video/ogg" src="files/sample-vid.ogg">

    <!-- flash default -->

    <!-- image default (if NOTHING is supported) -->
    <img src="images/no-video.gif" alt="Video is not supported" />
</video>
	

Additional Arguments

<video width="640px" height="360px" controls>
	

Adding the controls argument adds controls to the video player. Without this argument, no controls will show. This is probably only useful for autoplay videos.

<video width="640px" height="360px" poster="images/thumbs/sample-thumb.png" controls>
	

Adding the poster=”…” argument adds an image. It acts differently in every browser and is still experimental. In Firefox it acts as the video thumbnail. In Safari & Chrome it displays behind the actual video. Hopefully this gets worked out before the final working version of HTML5.

<video width="640px" height="360px" poster="images/thumbs/sample-thumb.png" controls autoplay>
	

Adding the autoplay argument makes the video start playing on page load.

<video width="640px" height="360px" poster="images/thumbs/sample-thumb.png" controls autobuffer>
	

Adding the autobuffer makes the video load as soon as the page loads. You obviously don’t want to add this on alot of the videos since it will pull all the videos with this attribute.

How to Simplify It

WHen you think about it, you really only need to make sure people can see your videos on iPhones and iPads. Any other decide should allow your flash video player to be viewable. So, with that logic, all you have to do is encode your video using the .mp4 codec, drop it in the video tag, and use the flash fallback for everything else. This negates the step of having to encode it for Firefox. Simple.

The recent announcement that Google has added site speed as a ranking factor has people running to find quick-fix solutions. Most people will drop a plugin or two into their WordPress install or follow a simple tutorial they found doing a quick search for “improving site speed” and assume that will get the job done. Yes, a simple way to increase your site-speed (especially with WordPress) is to use a caching plugin. What most people don’t think about is, as time goes on and your content expands and grows, it get’s harder and harder to maintain that initial speed burst these plugins will give you.

It’s not a race, it’s a marathon.

So how do you plan for content you haven’t even thought about yet? Well, you can’t. What you can do is lay a solid foundation so that when you do bring out the new stuff, it won’t cause a hiccup. It’s actually alot simpler to do this than people think and it all starts with how your site is coded.

Valid Code runs faster. It’s Science.

Your web browser is not a human. It can’t guess what you meant when you wrote <p.> instead of <p>. It can sometimes figure things out on it’s own and display things the right way, but you’re making it think. Web Browsers don’t like to think, they just want to do. Everytime a wrong or misplaced piece of code is parsed it takes just a little longer for that page to load. Sloppily written code will slow your site down. One or two incorrect lines may not mean much, In fact I doubt you’ll even notice it. The real harm comes when you get accustomed to writing messy and invalid code. One or two unclosed <img> tags won’t do much, but imagine what a couple hundred of them will do. If you learn to do it right from the very start, you won’t have to ever worry about it again.

Validate your code with W3C Markup Validator or Validator.nu.

An Extra Step will do your Images Good.

I love sites with tons of images. When done properly, it really makes the whole experience more interactive. When overdone though, it can bring your loading time to painful crawl. So what if you have a really image heavy site? How do you keep it from doing that unattractive 1980′s printer-like loading of your large images? Shrink ‘em ya dummy!

There are a few tools that make compressing images easier. Yes, they add an extra step to your process, but they can save seconds from your load time. I’ve cut as much as 80% of the file size of an image just by compressing it. Best part? You won’t even be able to tell a degradation in quality. That’s a win-win if you ask me.

Download and compress your images with ImageOptim (OS X only) or use the Smush It Plugin for WordPress.

Quit putting your database to work!

Everytime you add a chore to your database’s list of things to display, it’s going to take longer for it to get the job done. Be good to your database and it will be good to you. Any easy way to lighten it’s workload is to make it stop doing the mundane stuff no one likes doing anyway.

A happier WordPress Database in 2 simple steps

1. Open your header file and replace all the <?php bloginfo(‘…’); ?> with your site’s actual information.
   For example, change “<?php bloginfo(‘name’); ?>” to “My Site Name”. Do the same thing in the footer and any other area where the content isn’t dynamic.
2. Hardcode every link in your navigation (if you can). Do the same think for your footer links.

These may seem like common sense to some people, but alot of people forget that every single one of those <?php bloginfo(‘…’); ?> queries is another chore the database has to perform. You’re probably not going to be using this theme on another site so there’s really no reason to leave those in. Just ensure, that you’re directories won’t change!

I learned something today…

You can see how a few small things can really help clean up your code and make your site smoother. As time goes on, your files can get cluttered and messy. If you start doing it the right way now, when the content starts rolling in you’ll be in a much better position. There will be less broken elements, misplaced tags, and your code and database will perform better.

In my experience working with WordPress and a few other blogging platforms, I’ve found it’s tough to find really easy to use and content friendly themes. Yea, they may look good with the temporary demo content but it’s supposed to look that way. The fact is when you plug-in your own content, it bites. Some themes just aren’t flexible and tough to customize. That’s where Themble comes in.

Themble is designed to help you make your site yours. It may sound like a simple idea, but think about it. When people are looking for an authoritative site, they have to weigh a few factors in their head as to which site they want to believe:

• Search Engine Ranking
  Let’s face it, these days, people aren’t looking on Page 2 of their Search Results. If they can’t find the information they’re looking for on the first page, they try their search again.
• General Site Design
  If the content doesn’t look clean or the page is littered with messy advertising blocks and un-aligned images, most readers discredit it’s content instantly. Why would an “authoritative site” have a messy and lazily designed website? It wouldn’t.
• Easy to Understand Navigation
  When you reach a site for the first time, it’s rare you land on it’s home page. You most likely land on an article with the content you were looking for. If a reader can’t even understand where on their site they are, how do you expect them to come back? If you entered a store and couldn’t find which isle the item you were looking for was in, would you return to that store?

Obviously there’s much more to it than those basic items, but it’s a good start. On this site, we’re going to strive to make each site unique in it’s own right.

This is why choosing the right theme is crucial to your site’s success. Downloading and using a free theme is perfectly fine, if you want your site to be good enough, but chances are good that there are several sites out there that are going to have that same exact theme on their site. That doesn’t really make you look like an authoritative source, it just makes you look lazy.