Saturday, July 26, 2008

Webmaster Skillz Go With Photoshop Skillz

Being able to play with Photoshop is really quite fun. It comes in handy for the various things my family wants me to do, like digitally removing food stains on shirts.

But being a Webmaster and being able to edit HTML and CSS? Seriously, if you're a blogger, I think that while you may not need to know how to make them work, you need to know WHY some things work, just so you can avoid trouble.

True, blogger and other blogging programs take care of a lot of problems for you. But do you really want to forever be at the mercy of another company to redesign your blog? You should really get the hang of a few web-based elements that can make your blogging world work better.

Like, learning about posting images. No, you really don't need to know about using the actual HTML commands to link images to your blog post. Yes, you'll do just fine using the tools blogger gives you, and never learning that particular trick.

But just the other day I saw someone doing two things that made me shake my head. I'm not going to link to the blog because I don't want to start a flame war or embarrass somebody who just doesn't know better, but - these were things that no web-savvy person would do, because they have the potential for causing problems later. Yet, not only was she doing them on her own blog and posting about them, she was posting them in an attempt to teach other bloggers how to use them on their own blogs. Very Bad!

Here is my attempt to convince you to learn the right way to do things, which involves knowing a very small bit of HTML.

Error 1) Linking to an image on another person's/company's website. What's wrong with this one? Ok, first of all, it's contrary to web etiquette (it's rude!). That cute image you absolutely must have on your blog is a) probably copyrighted, and b) is hosted by someone else that pays good money to host their stuff on the web. Their hosting company allows them a certain amount of storage space and bandwidth. Every time someone visits your blog post linking to that image, you're draining the other person's bandwidth. If your blog post has so many page hits that it makes them exeed their bandwidth, it may end up costing THEM money because YOU link to their image. Costing somebody money isn't very nice, is it?

Plus (and here's where it can become a problem for you) if that person or company figures out what you're doing, they can simply move their image (best-case scenario: it results in a "broken image" for you), or worst-case scenario replace it with an image you find offensive. Imagine you're a "mommyblogger," writing about something innocent, funny, and child-related, and you link to a random-something image. If your page gets so many hits that the random image causes problems for the owner of that image, he may just decide to replace that image with something pornographic. Suddenly your nice post with the lovely image you "stole" is not so nice!

Lesson: Don't link to someone else's image. It's not nice, and it may come back to bite you in the end. Take the time to save the image to your own photo storage service, and upload it to your blog. You'll avoid problems in the long run.

Error 2) Advocating using the image tag to modify the size of an image. Basically, this person had an ad button that  would not fit on a blog side bar. Seriously? The person making this recommendation had no idea what she was doing. Changing the image by restricting its size in the image tag is the worst way to do it. Imagine you have a square image, 100 pixels wide by 100 pixels high. Now, say your problem is that your sidebar will only fit something that is 90 pixels wide or smaller. So you go ahead and tell the image tag to display this image, but restrict it to 90 pixels wide. Congratulations! Your image is now squished and looks strange, because what you HAVEN'T done is change the image's height. For example:

vs

Again, the solution for this is to not use the image on the other person's server, but instead to actually save the image, then edit it using some basic image editing software (irfanview is a good basic program, and it's free), then upload it to your photo storage service. When you change the image size, you want to make sure you change the image size proportionally. This means that your square image will reduce to 90 pixels wide by 90 pixels high - still a square.

See, these are basic pitfalls of displaying images, which you could easily avoid if you took a few minutes each day to learn a little bit about HTML and how it works. Try W3 Schools.

No comments: