There is a myth…about 72 ppi

March 19th, 2010

I was browsing through my rss reader trolling my favorite sites when I came upon an article that interested me. Then I found another link on that site to something else…20 clicks later…only God knows where I ended up, but it had me engrossed for quite a while. I wish I could remember where, cause I would post the link, but I was on a different computer.

Anyway it was an article about saving images for the web at 72 dpi. The funny thing is, dpi is what most of the web designers I know refer to it as, but that is a printing thing (dots per inch). PPI is the one dealing with screens. Pixels per inch, and that is the one that matters.

Now, I am not sure if there is a way, once a photo has been taken, to adjust the number of pixels per inch in Photoshop. What I do know is that most web designers save their images at the 72 resolution. You could very well be one of them. Well…so am I. And even knowing what I know today, I doubt I will change that habit. Why? Because it doesn’t matter.

I would like anyone reading this that is actually interested now, to do something. Open an image in Photoshop, and go to Image>Image Size. In that window, make sure the Resample box is UNCHECKED. Now, if it isn’t already at 72, change it to that, and then save it as a jpeg. Then do the image size again, and change the 72 to say…3000. Notice with the Resample box unchecked, the pixel width and height stay the same, they are locked in. Save that also as a jpeg.

Now place both of those images into an html file, and preview it in a browser. What do you notice?

Not a damn thing, right? They both look the same. Now right click on both of the image files, where ever you saved them, and check their properties to see each’s file size.

What do you notice? They BOTH have the same file size. So what does this tell you? That for people in web development, that whole 72 thing is a bunch of bull. That resolution means NOTHING in the web world. It does however matter if you printed them. Cause you probably noticed that the Inches size changed. But screens don’t go by inches.

So what this means is, what you really have to pay attention to is the Pixel width/height. That and the compression you use when you save for web in Photoshop (or Fireworks, or whatever it is you use) is what matters for the file size.

I know, that just blew your mind, right? Feels like you just found out that what you believed in was all just a big fat lie.

So, will this change how you save images? I’m guessing not. It IS interesting though. Next time someone pulls the whole 72 whatever-p-i…you can tell them they have no idea what they are talking about and pull out your new found knowledge, and look like a super smarty pants.

jQuery Slider Tutorial for beginners/dumbies….how I did mine

March 18th, 2010

I have only been able to write javascript using the jQuery library for about 2 months now. I started with a great book: Javascript The Missing Manual by David Sawyer McFarland (published by Pogue Press/ O’Reilly). Highly recommend it. It starts with a crash course in basic javascript, and then goes on into using jQuery.

I am going to assume that you have at least a little knowledge of it, and you googled for jQuery slider tutorial, or you found a link to my blog through one of my posts at other popular design blogs. Why am I writing this? Good question, and I have a good answer. At least it is the answer I wanted when I searched for the same thing.

I really like jQuery because of the stuff it lets me do without relying on Flash (overused in my opinion, but that is a different topic for another day…maybe tomorrow!). One thing really freakin’ sucks about it though. If you did what I did, and googled for something like this, then you will understand. Every damn search came back with a list of plugins. Yes, yes, plugins are cool, and I agree there are a lot of good ones. But I am not a pro yet and I actually want to learn how to do this stuff myself. There are very few good tutorials out there, and the ones that are, are seriously over complicated. So I am going to show you how I built mine and explain on the way what is going on. Sorry for the long intro, but hopefully you are still with me and will read on!

Read the rest of this entry »

Best feature in upcoming WordPress 3.0

March 16th, 2010

Wordpress 3.0 menu manager screen shotA menu manager. Thank you. This will make developing themes for sale on themeforest MUCH easier. Really they could have added just that, and I would have been happy. I am not a php genius (yet!), so creating a back-end menu manager myself is out of the question at the moment. One day though…I will do it. Until then, this solves a lot of problems. It’s developed by WooThemes’ WooNav, which I have taken a look at before, just never tried. Looks pretty intuitive. I can’t wait for this to come out!

CSS-Off contest results are in over at CSS-Tricks.com

March 15th, 2010

Soooo….first, here is a link to the results page. Hats off to Chris Coyier for setting it up, and for him and Doug on the judging. I know that must have taken a ton of work. Seriously, deciding on those would have driven me nuts cause they all pretty much look the same.

With that out of the way, let me say that I have learned I do NOT have the time to actually try and compete in a contest like that. There was way too much detail that they were looking for, which I deemed not really important when I created mine, and I was not willing to put in the time that the winners were. I didn’t pay attention to line-height in the paragraphs, I didn’t add the CSS3 styles for text shadows…and a few other small things like that. What I DID do, is make sure I used text instead of images, it didn’t break in any browser (more important to me), used SOME CSS3 properties, it scaled if you added more text to anything, and used @font-face for the unsupported fonts they used in the psd file.

So if the winners come here, bravo to you guys. You obviously did a great freakin’ job.

Read the rest of this entry »

Color Scheme Designer

March 12th, 2010

Color SchemeAnother cool link for you. A web app that will do a color palate for you. Pick a color, and it will create a color scheme in mono, compliment, triad, tetrad, and more. I struggle sometimes choosing colors for a design, and I think this will help a lot.

So check out Color Scheme Designer, and try it out. Very easy to use, and extremely well done.