In a previous post I showed how to use CSS3 to add a background color to every other row in a table, a technique called “zebra striping”. While this is a great technique, it doesn’t work in browsers that don’t support certain CSS3 features, such as Internet Explorer. By using a little jQuery we can make sure that every other row will have the background color, regardless of what browser the website user is on. Check out the demo and then grab the code for your project.

View Demo

Copy and paste the following code into the head of your HTML file. Then add a table with multiple rows and you should see your table have different colors in every other row, just like the demo.

The code below is doing 3 things. First it is calling jQuery to be attached to the file. Second, we are assigning a background-color to the CSS class “odd”. The last step is using jQuery to automatically add the class “odd” to every other row. Pretty simple trick that works across browsers.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<style type="text/css">
<!--
.odd {background: #caf2fe;}
-->
</style>

<script type="text/javascript">
 $(document).ready(function(){
 $("tr:odd").addClass("odd");
 });
</script>

When you have a table on a website with a lot of rows it looks nice to add a background color to every other row. Just a subtle color change in every other row can help the human eye keep it’s place as it looks both across the row and down the page across the rows vertically. This technique is called “zebra striping”.

Sure you can add a CSS class to every other row manually, but what happens if you need to re-arrange or delete some rows? Having to go back and manually make sure every other row has a class so the zebra striping is on every other row is no longer a suitable solution. Luckily with the power of CSS3 this is no longer necessary. Check out the demo, and then grab the CSS code for your project.

View Demo

All you need to do to add a background color to every other row in your table is add the following to your CSS file. This won’t work in Internet Explorer (big surprise), so if you really need to support every browser including IE, then check out how to use jQuery to apply zebra striping to a table.

tbody tr:nth-child(odd) {
   background-color:#a9cdeb
}

In a previous post I explained why it is important to keep an updated copyright in the footer of your website. You want your website to be up to date, but you don’t want to have to manually change the copyright date every year. In that example I gave you the code to use Javascript to output the year. Well in some cases it may make more sense to use PHP to output the copyright year instead, so that’s what I’ll do in this post. Check out the demo, and then grab the code for your website or WordPress blog.

View Demo

All you need to do is paste the following code right into the XHTML where you want the copyright to show up, PHP does the rest!

You know you need a sick graffiti style desktop background image for your computer. Don’t worry, I got ya covered. Download any of these desktop backgrounds, created by yours truly. I’ve created them all for 3 common resolutions. If you want another specific size hit me up and I’ll hook you up.

Click resolution size to preview, right click and “save link as” to download image to your desktop.

Resolution:
1900 x 1200 | 1440 x 900 | 1024 x 768

Resolution:
1900 x 1200 | 1440 x 900 | 1024 x 768

Resolution:
1900 x 1200 | 1440 x 900 | 1024 x 768

Resolution:
1900 x 1200 | 1440 x 900 | 1024 x 768

Resolution:
1900 x 1200 | 1440 x 900 | 1024 x 768

Resolution:
1900 x 1200 | 1440 x 900 | 1024 x 768

Well that was a long title! Here’s the deal. I finished up a website for a client yesterday and was doing a last minute check in Internet Explorer to make sure there were no problems. Well that would be too easy, wouldn’t it?! Unless you’ve been under a rock the last few months you know about the Google Font API. They host fonts and give you the code to embed them onto your website. A great solution, and free, unlike Type Kit.

Well since it’s a Google product I figured it was obviously cross browser safe. So I was surprised (and not pleasantly) when I opened my clients site in Internet Explorer and saw that instead of the font Josefin Sans Std Light showing up, (I am using it for headings and navigation items on the website), the browser was showing Arial. WTF? Popped open Safari, no problem. Looked in Chrome, and again, Arial was showing! So I went to the source, the page right on the Google Font API website where you can preview the font. And after looking at that page in the browsers, I realized something important: The fonts in the Google Font API are NOT cross-browser compliant! Keep reading to see what I’m talking about (screenshots), and the solution I came up with to solve this problem.

If you open the preview page on the Google Font API site for the font Josefin Sans Std Light in different browsers, you’ll see the following. Firefox displays the font correctly, while Internet Explorer (I tried 7 & 8), and Google Chrome don’t display it correctly. YES, you heard correctly, the font in the GOOGLE Font API doesn’t work in the GOOGLE browser. Sweet.

And in case you’re wondering if it was just this one font that is having a problem, it isn’t; I checked and found that other fonts aren’t displaying properly either.

Enough bitching, what’s the solution? I am ready to launch my client’s website and she already approved this font, so I’m not about to waste time or compromise the design of the site by picking a different font.

Font Squirrel to the rescue!!

I’ve seen this site before and honestly never had a reason until now to use it. But what a life saver it was today.

First I went to the page on the site for the Josefin Sans Std Light font. Hit the button to download the font to your desktop.

Next, go to the Font Squirrel @font-face Kit Generator. Hit “Add Fonts” and choose the font you just downloaded. Once it’s uploaded hit “Download Your Kit”. This will give you a zip file with everything you need to embed the font on your website. I popped open the demo HTML page they give you, opened it in the browsers, and voila:

So now I’ll pop that code into my client’s site and problem solved! Now that being said, it doesn’t make much sense to go to the Google Font API to pick a font just to embed it with a different technique. I probably wouldn’t have chosen this font except that I liked the simplicity of the Google embedding system. I’m sure they’ll work it out in the future; but if you’re like me and need a quick solution to this problem NOW, Font Squirrel and embedding fonts with @ font-face might be the answer for you to.

A 404 error is what happens when you try to access a page on a website that doesn’t exist. We’ve all gotten them; due to typos, a moved file, whatever the case. As designers / developers we need to make sure we help the users of our websites should this happen to them. The last thing we want is for them to get an ugly 404 error, get discouraged, and exit your website.

Instead, you want to create a custom 404 webpage, and redirect the user to this page should the error happen to them. This is done by uploading a .htaccess page to the root of your website.

Simply create a text document named htaccess in any text editor, and copy past the following code.

What that code is doing is redirecting the user to 404.html. Obviously you can name the page anything, just make sure to change the code. Upload the file, put a dot in font of the name ( so it’s .htaccess ), and you’re all set. Go to your site and type in a page that you know doesn’t exist. You should be re-directed to your new 404.html page.

Speaking of your new 404.html page, make sure when you create it you help the user along. Check out the 404 page I made for my website, BeantownDesign.com

Beantown Design 404.html page

You can see it’s rather simple, but I point the user to the three things I consider to be the most important on my site: my home page, my portfolio, and of course my contact page. You can do whatever you want, just make sure you are making your user’s life easier.

Here is a htaccess file you can download and use.

Download File

Designing a realistic stainless steel background in Photoshop for use in print or web design is a rather painless process. In this tutorial I’ll show you how to make your own stainless steel effect in a few simple steps.

In Photoshop, create a new layer and name it Stainless. Select this layer and fill with a gray color. I used RGB #bebdbd

With the Stainless layer still selected, select Filter > Noise > Add Noise

Use the following settings:
Amount:15%
Distribtion: Gaussian
Monochromatic

With the Stainless layer still selected, select Filter > Blur > Motion Blur

Use the following settings:
Angle: 0
Distance: 30 pixels

At this point you should have a pretty realistic looking stainless steel layer for your design. I wanted to go one step further. I created a new layer called Gradient. In this layer I made a gradient using white.

I changed the layer blend mode to Soft Light, and I called it a day!

Below are a few examples of what can be created using this technique by simply choosing a different color at the beginning to fill the layer with.

Need a nice looking product slider for you website?

Introducing FancyMoves, a new jQuery Product slider for your website or blog. This slider is built off the Moving Boxes slider, with FancyBox for expanding images.

View Demo

FancyMoves is a great slider to show off services, products, or whatever you can dream up. The main image is enlarged to attract your focus. There are three ways to navigate to the next / last item: using your keyboard arrows, using the left and right arrows on the sides of the slider, or simply clicking on the next or last item in the slider.

FancyBox is built in so you can have images enlarge with an overlay effect on the screen. Hovering over the enlarged photo shows arrows, allowing you to navigate to other images within the group. Any of the FancyBox features can be added to the code of course, for different effects including: speed, overlay styles, expanding transitions, etc.

This slider is brought to you for free thanks to good old open source on the web. If you use it, shoot me a message and I’ll link your site here for others to see.

Don’t forget to check out Ugmonk, where you can actually buy the products from the demo slider.

Want to set the slider to autoplay? Check out my demo here for info.

Download FancyMoves

If you’re going to use PHP on a website the server needs to be running PHP right? Well duuh! If you work on a variety of websites for a lot of clients, you’re going to deal with different hosts and servers. Before you hook up a form to PHP or whatever else you are planning on doing, you better make sure the server can run PHP if it isn’t.

The quickest way to test servers for PHP is to create a testing PHP file that you can upload to a clients website to see if PHP is running. The good thing about this is you can reuse it for every site. You simply upload this to the server, and try to open it in your web browser. If it works, you’ll see an html page with the info about the PHP running on the server. If it isn’t running PHP, well you won’t see anything!

Keep reading for the code to make your own. I also provide mine as a download to save you time.

If you want to create your own, just create a document called info.php. Within this file paste the following text:

Once you upload that, try to open it in your browser. If it works, it’ll show the info about the PHP running on the server. If it doesn’t work…well you better call the host.

Speaking of hosts, here’s the host I recommend to all my clients, and use for all of my personal websites, including WebDesignAndSuch.com and BeantownDesign.com

Anyway, back to the PHP topic, here is a info.php file like I mentioned above. Figured I’d save you some time. Happy coding!

Download info.php

Ever wonder how to take a screenshot on your iPhone? This feature is actually built into the iPhone, keep reading to see how!

Want to make a custom iPhone icon for your website? See how here.