Website Designers and Webmasters

Search Engine Optimization is fairly easy to understand. All you need to do is put your self in a Search Engines Shoes.

Let’s start with Google’s Mission:

“Google’s mission is to organize the world’s information and make it universally accessible and useful.”

-http://www.google.com/corporate/

Nice and Simple. But it gives you a good understanding of what you are working with and helps us to realize some very basic truths about Search Engines.

Search Engines Truth:

Search Engines want to find useful, informative sites for every search term.

Duh… And they do that by using robots (or bots) that are programmed to “index” websites and decide how useful/informative they are. So our job as Search Engine Optimizers is to make it obvious to search engines that your site is useful and informative. Here are some basics to Search Engine Optimization:

Use Valid Code: The search engine bots don’t have eyes, so they can’t see your website, but they can read the code that makes your website, and they do know how to read valid HTML. But if your code isn’t valid, the bot can get confused and ignore parts of your site.

Content is King: Anyone can make a site that says, “Hello World!” Search engines don’t value sites that don’t have any content. You need to have relevant content on your website. If your site is about fixing Race Cars, but you never say race cars on your site, don’t be surprised when you never find your site under the search term “race cars.”

Don’t Hide Text: An old search engine “cheat” was to have white text on a white background. This would allow you to have lots of keyword heavy content on your site without actually having to bug your visitors with the large amount of text. This will damage your rankings much more than it will help.

Basic Principles: Google recommends that you don’t do anything solely for search engines, which isn’t to say that you shouldn’t get your site search engine optimized, but rather, don’t waste time and money trying to develop tricks to deceive the search engines. Just make a good, quality site that people will find informative and useful.

Links:If someone likes your site enough, they’ll link to it. Duh. So if your site is extremely useful, and a lot of people like it, you’ll have a lot of links to it. The number of links you have to your site is one of the biggest things that the search engines will judge your site on.

That’s a nice overview of how search engines think, and the basics of search engine optimization.

-Use it wisely
-Ashton Sanders

About a year ago, I ran into a fatal error with my PhotoShop 7.0, and I could not figure out how to fix it.

Whenever I opened my Photoshop, I got this error:

“Unable to continue because of a hardware or system error. Sorry but this error is unrecoverable.”

And the program would just shut down. I couldn’t even open it. For the life of me I couldn’t figure out the problem. Finally, after almost a year of checking for solutions, I found a solution!

The problem is that PhotoShop 7.0 can’t handle more that about 1000 Fonts! Why that would cause the entire program to crash and burn… who knows. I hope they fixed up the newer versions so I don’t have to worry about that. (I have over 5000 fonts.) So because of this stupid Error: “Unable to continue because of a hardware or system error. Sorry but this error is unrecoverable.” I had to delete 4000 fonts off of my machine. (Of course I have a back up, but still…)

Now that I have my PhotoShop Operational again, I’m going to be spending a lot of time learning all the tricks of this “awesome” program. Any designer I talk to says that PhotoShop is the best, period. But from what I’ve seen so far, it’s got a lot of annoyances that Fireworks has already streamlined. (Yes, I realize that my PhotoShop is five years old, and I’m taking that into consideration.) But I should be putting together a Product Comparison between Adobe PhotoShop and Macromedia FireWorks. That will probably end up being 3 or 4 posts.

-”Unable to continue because of a hardware or system error. Sorry but this error is unrecoverable.”
-Ashton Sanders

There is a very common problem when trying to upgrade sites made by “newbie” website developers or when you realize that html isn’t the only language on the internet, and you need to upgrade your site.

Problem:

You have a site where every page has a *.html or *.htm extension, and you want to add a dynamic, server-side programming language like PHP.

Solution #1:

Go through your entire site, and change every file name to a *.php extension. Then go through every page and correct all of the hyper links. Then do testing on your entire site to ensure that you haven’t missed any links. Also, if you know anything about search engine optimization and websites, you’ll know you need to create 301 redirects from your old pages to your new so that you don’t lose any Rankings you may have gained. Then you have more testing to do to make sure all of your 301 redirects work….

Solution #2

Add this one line of Code into your .htaccess:

AddHandler x-httpd-php5 .php .htm .html

That’s all it takes to add PHP to my html files?

Yep, that’s it. That little line of code has saved me hundreds of hours of work, and I’m sure it’s not as commonly known as it should be.

-Spread the Wealth
-Ashton Sanders

Cascading Style Sheets (CSS) make it very easy to replace text with an image. Here is the whole process described in as few words as possible:

Background Information

In CSS, “display:none” will cause that element and every child in it to disappear. There is nothing you can do to make one of the child’s element.
“background-image” give an element a background. This can be applied to just about every element.

Create the Elements in HTML

In your HTML, write this:

<h3 id=”title”>
<span>Here is the Title!</span>
</h3>

Create the CSS to replace the text with an image

In your CSS, write this:

/* Remove the Text */
#title span {
display:none;
}

h3#title {
background: url(“image/url.jpg”) no-repeat top left;
height: 20px;
width: 100px;
}

And Bam! Your text has disappeared off of the page, and the H3 element is 20 pixels wide and 100 pixels tall. It also has an image for a background that is aligned in the top left corner.

I’ve seen that CSS Text Replacement technique described with two pages, so I thought I’d see how short of a blog I could make out of it.

And Now you know how to replace text with an Image!

On a side Note, I’ve also seen this done with: “text-indent: -5000px;” or “visibility:hidden”. These work, but I would stick with display:none. It’s the cleanest way to do it.

-I hope that helps you out with your CSS and Design Needs.
-Ashton Sanders

Absolute Positioning with CSS can be a very useful thing.

I’ve been working a lot with CSS over the last year, but I’ve just recently discovered the secret to absolute positioning.

Absolute Positioning in CSS

Absolute positioning will allow you to move an HTML item from anywhere in your code to the same spot. For Example: The side bar on this page (Top Horse Connection) is at the very bottom of the HTML code. But the CSS absolute positioning tells the side bar to be positioned 170 pixels from the top of the page. Here is the CSS Code:

#sidebar {
position:absolute;
top: 170px;
left:0;
}

As you can see, it’s very simple. And it’s very useful when you want something to align along the right or left side of the screen. But what if you want a sidebar to be positioned in the middle of your screen (lets say 300 pixels to the left of the exact middle)?

You could do:

#sidebar {
position:absolute;
top: 170px;
left:400px;
}

On a 1400 pixel-wide-screen, that would work perfectly!, but what if your screen was 800 pixels wide, then the sidebar would be 100 pixels to the right of the middle… So what now?!?!

This is what would you do:

#sidebar {
position:absolute;
top: 170px;
left: 50%;
margin-left: -300px;
}

And Wala!

-More on the way
-Ashton Sanders