As a web designer, I do my best to make my websites hit the top of the search engine results. Let me tell you, it is a battle, especially when the rules are always changing! It used to be that all you had to do was input a “title”, “keywords”, and a “description” in your meta tags of each of your web pages. It’s not that way anymore. Of course, the meta tags are still important… don’t leave them out! Some of the larger search engines are not using them as they used to but the smaller engines do. Now, search engines such as Google, read the content of the pages we write and the bots bring that content back and disseminates. This allows for better results when you do a search. 

I already use the rel=”author” in my meta tags, but found out recently that it can also be used in sharing links too. Use the rel=”author” attribute in your content. That’s right! Apparently, this “rel” attribute is part of the open HTML5 standard, so we’ll see more about its uses.

Ok, let me tie this together.

Have you gone to Google Search, typed in your search parameters, and when the results get back, you notice someone’s picture next to some of the results? And, as you sit there, “Oooing and Ahhing,” you begin to wonder, hey… how did they get their picture there beside the search results! They did it by using the rel=”author” attribute within their links. When used properly, the result shows your profile beside the articles and blogs that you author.

How do you do that?

Well, I’ll do my best to help you understand, because unfortunately, it can be a bit of a hit or miss as to whether your content gets accepted or not.

Google is piloting the display of author information in search results to help users discover better content. To identify the author of a blog or article, Google checks for a connection between the content page, an author page, and a Google Profile. Pretty cool, don’t you think!

So, what’s the advantage?

If you or your client is a content creator, this is a very important feature. It allows you indirectly to claim authorship or your own content in Google search results.

Personally, I enjoy seeing the profile pictures of the author who wrote an article that I have read.

Now here’s the kicker! In order for this to happen, you need a Google Profile. Make sure that your profile has a good, recognizable headshot as your profile picture. Add all your statistics that you want the public to know. From there, you must then verify authorship of your content by associating it with your profile. Of course, as with everything Google, there are no guarantees that your profile will show in web searches and news results. As I said, they are just beginning this process, but I’m already beginning to see results.

Ok, so show me how already!

There are two ways to link to your Google Profile.

The first method is using the rel=”author” attribute and it’s a two step process.

Note: With websites or blogs that I build, I insist the client MUST HAVE an “About” page! If you don’t have one, Shame on you! Now create one and all will be forgiven! Once this is done, link the “About” page of your blog or website to your Google Profile.

Here is one example taken from Google Webmaster’s Pages:

1. You write an article for a website, which also has an author page on the same website.

• The article should link to your author page on the same site using rel=”author”, like this example:

<a rel=”author” href=”http://www.hafnerdesigns.com/about/”>Heidi Hafner</a>

• Your author page should link to your Google Profile using rel=”me”, like this example:

<a rel=”me” https://plus.google.com/114132316683908733932 “> <img src=”//www.google.com/images/icons/ui/gprofile_button-16.png”> </a>

Your Google Profile should link back to your author page on the website. When you add this link to your profile, be sure to check the “This page is specifically about me” checkbox. This creates a rel=”me” link to that author page.

 2. You write an article for a website, and you have no author page on that domain.

• The article should link to your Google Profile using rel=”author”, like this:

Check out <a href=”https://plus.google.com/114132316683908733932″ rel=”author”>Heidi’s Google+ profile</a>.

• Your Google Profile should link to back to the website’s home page.

Lastly, Google gives us a link where we can test our markups. This tool only does a single page at a time.

Now, let’s go set up our Google Profiles!

… more later!

So, I have been testing out the <audio> tag and am having some trouble. I see Remy Sharp’s shiv (http://html5shiv.googlecode.com/svn/trunk/html5.js) which helps quite a bit for Firefox, Chrome, etc. However, I am having trouble getting the tag to work in older versions of IE. I’ve found that if I use the <embed> tag, it works just fine in IE, but then there’s the problem where the embedded player is visible in other browsers as well. What can you advise for a scenario like this where only one player shows?

<section>
<h2>Audio Control Test</h2>
<audio controls=”controls”>
<source src=”tracks/song.ogg” type=”audio/ogg” />
<source src=”tracks/song.mp3″ type=”audio/mpeg” />
<embed src=”tracks/song.mp3″ type=”audio/mp3″ autostart=”false” loop=”false” />
Your browser does not support the HTML5 audio element.
</audio>
</section>

Let me know if you’ve found a workaround for  the <audio> tag to work in IE 7 or IE 8, by leaving me a comment.

So, you’re thinking of building a website, right. Perhaps you already have a website and you want to make some improvements. You should consider some very essential things before you go designing your website. Let’s discuss a few very important rules about designing a website that performs well.

1. DO NOT use splash pages!

A splash page is that first page, also called a landing page, that you see when you first load a website. They may contain just a logo, or a flash video, or perhaps just a picture with a link on it that says, ‘Enter’, or ‘Click Here to Enter’, or just ‘Welcome’. There is NOTHING on this page, NO CONTENT! As a visitor to your website, I’m inclined to hit the back button and return to my search criterion because I have preconceived ideas of what your website is all about. If I am on a dialup connection and I hit that slow-loading splash page, I’m going to bail out right away because I don’t have the time to wait for your page to load. DO NOT let your visitors have a reason to hit the back button! Create a landing page that offers purpose! Chuck the splash page!

2. DO NOT use excessive banner ads!

Across the Internet, you will find differing opinions about banner advertisements. These are those flashy colorful advertisements created to draw the eye and cause a visitor to click on it. First off, when you have a visitor on your site, you want to keep them there to learn more about your business. Remember, that each page of your website is valuable web real estate so be sparing with banner ads. Make your pages POP with YOUR content first! Then you can choose to weave RELEVANT affiliate ads throughout your content. Make your visitor feel welcome on your site instead of assaulting them with ads that may or may not have anything to do with your business.

3. Avoid using audio on your site!

Nothing is more annoying then to land on a web page that has blaring music set to loop forever while you are trying to read content. If you feel that your site MUST have audio embedded in your pages, make sure the user has some control over it. Allow them to adjust the volume or mute/stop the audio.

4. Avoid excessive pop-ups and pop-unders!

A pop-up is a browser window that appears out of nowhere, as you are viewing content on the web. A pop-under is similar to a pop-up except that it displays windows behind your web browser window. Both of these are annoying and intrusive.

There are three primary types of pop-ups:

1. Those that appear when clicking something on a web page
2. Those that appear at random
3. Those that appear without user intervention, (This being the most aggravating variation)

There can be legitimate reasons to want pop-ups on your website. For example, you want to capture users for newsletters and you don’t want them to forget to sign up. Pop-ups can be useful…or should I say, the idea of capturing an audience for a newsletter can be useful. Current browsers now have pop-up blockers built into them. Most users turn the setting on in their browsers to BLOCK pop-ups, so putting pop-ups or pop-unders into your web pages will be hit or miss at best.

Instead of adding annoying pop-ups or pop-unders to your pages, use your web real estate carefully and place your signup forms or ads on the pages or create a page just for signing up. If you MUST have a pop-up or pop-under, DO NOT put it on your landing page!

5. Create simple and clear navigation!

Provide simple, clear, very straightforward navigation on your website. Make sure it makes sense! It is advisable to stay away from Flash based menus or complex multi-tiered dropdown menus. Sub menus must make sense too. Categorize sub menus under the correct main navigation button.

Also, as your visitors are reading and enjoying your website, make sure they know where they are on your website. You want your visitors’ to be able to browse all relevant information. If your navigation is confusing or simply doesn’t make sense, they will “bail out” and you will lose traffic!

In this day and age where hackers seem to be a dime a dozen and account information is lifted from various companies that we think should have great security measures, companies like Sony or Epsilon, do you consider how you can keep your own data safe? I’ll admit, I need to follow some of my own advice, and follow it more frequently.

How often do you change your passwords? Yes, changing passwords is a massive pain, especially if you have as many as I do. You have dozens, you want them all to be strong, and you want to remember them all. Finding passwords for all your accounts, then changing them frequently really becomes a task. You have to think of something that you can remember easily but you don’t want it easily guessed. You do not want to pick your pet’s name, your mother’s maiden name, your child’s name, or a special date. These are all “public information.” That means that your friends, your spouse, your significant other, all know this information. You should NEVER use your social security number or your driver’s license number either! Again, these numbers are to remain private and NEVER be a consideration for a password.

Here are some more do’s and don’ts to creating a password.

Information used from McAfee

So, how do I pick passwords? Well, I’m glad you asked. Here are some ideas that I would like to share with you.

Use phrases

I read many books and watch many movies. Many whimsical quotes or comments are made in books and movies. Some are very popular or cliché and others are just something a character said that is meaningful to you. Take that quote or comment from your story and summarize it into a word or phrase that is eight or MORE characters long. The more characters the better.

Example:

“To be or not to be?” This quote comes from a book written by William Shakespeare. It can be condensed into a nice memorable password like this, 2B-or-Not_2b? I’ve used numbers, capital and lower case letters, and symbols. This is a very strong password.

Be careful that you change your password/passphrase often and don’t use the same story every time. Also, break out of your usual reads and movies. Don’t stay within one genre. If you do, then any one can figure out your “dictionary.” Do NOT create your own personal dictionary. What I mean by this is, don’t use only one book, or one movie, or one author, etc. I used to do this. I used to use Bible addresses to my favorite scriptures. It was just a matter of time where someone figured out what I was using to create my passwords. Soon, my account was indeed hacked. Change your sources.

Use your own memories

Remember back over the years to a favorite time, or perhaps a more hurtful time. Personally, I don’t like to dwell on negative memories, but the moment can inspire a great password.

Example:

Perhaps a loved one passed away, ):d4d-D13d here I’ve used a sad face (For the blog, I’ve used a backwards happy face. Otherwise you’d see and emoticon in this post.) at the beginning, capital and lower case letters, and numbers. It says, ):dad-Died.

State your opinion

Perhaps you have a strong opinion of someone or something. Mix it up and create a word or phrase that is memorable to you.

Example:

Perhaps you have a strong opinion of politics. 0b4ma=Jack4s$ Here, I remind myself of my opinion of my current president. Everyone is entitled to their own opinion and if you are one who doesn’t really speak out your opinions, this can be a good way to voice your opinions.

McAffee, a well-known company for antivirus software, makes some other suggestions. For instance, if you’re a visual person, use your keyboard to make a visual pattern for your password.

Example:

On your keyboard make your first character from the number line, then from each line of letters below the numbers pick a letter, either lower case or capital, and chose one key per line in your pattern. Try this password, for example: %tGbhU8iK<Ip- If you follow these characters and numbers on your keyboard, you will see the letter ‘W’ form.

We’ve always heard in the past that we should NEVER EVER write our passwords down. However, in our busy schedules, our brains become sieves and we never seem to remember our passwords. So, we chose to use one really awesome password for all our accounts. That is a really, bad idea too. Admittedly, I’ve done this before because I do forget, but this is a very bad habit that you need to break! Instead, write all your passwords down. It’s really OK! However, do not store them near your computer. Put the paper in a safe place and make sure you do not label the page ‘Passwords.’ In fact, use this list for other things too, like phone numbers. Most smart phones, like iPhone, have vaults that you can store files, photos, and videos. One really, great app for the iPhone is Stash Pro. This app will store photos, videos, and files. This allows you to create a file on your phone and store it in your vault program.

McAfee has announced a new password analyzer that can give you helpful tips about your password choices. Check it out here McAfee Password Analyzer.

Now, I started this post by mentioning other companies and their privacy issues with your information. My best advice is simple. Never trust anyone with your information.

Ultimately, you are the one who suffers when you trust someone with your information. If I purchase from particular companies on a regular basis, I tend to allow them to keep my name, address, and email address. This is all public information. However, many companies ask you to store your credit card numbers. NEVER allow them to save or store your credit card number! Always re-enter the number whenever you make a purchase.

Another fact, most credit card companies, like my favorite Citicards, allows you to create “Virtual” credit card numbers. Their purpose is for situations like this, where you buy from a vendor on a regular basis. Create a virtual number for each vendor. Use it whenever you place your order. I like this option because you can never be certain of what information your vendor saves. If their database is compromised, you only need to have that number removed from your account. It’s simple. You don’t have to wait for your credit card company to send you new cards.

Now, something we all NEVER think about when creating our passwords. Most web sites have you create some “secret” questions. Well, have you ever seen the list they give you of secret questions? It’s laughable.

• What’s your mother’s maiden name? <–Duh! Public!
• What’s your father’s middle name? <–Duh! Public!
• What’s your first pet’s name? <–Duh! Public!

I love those web sites that allow you to create your own secret question. Now that’s a better angle. However, not all companies’ web sites offer this as an option. Therefore, you’re left with their choices.

Here’s what I do. Pick any question that you find easiest to remember. Then choose someone else in your life, or a character from a story you like, and make your secret answer that person’s fact.

Example:

• Secret Question: What is your first pet’s name?
• Secret Answer: Dean: (In the Sookie Stackhouse series of books, (aka True Blood) written by Charlaine Harris, Sookie picks up a stray dog and names it Dean. Later we find out that Dean is really Sam who is a shapeshifter.)

Now, I don’t have a pet named Dean and never have, but it was a memorable point in the series.

Use your imagination! When you’re asked what your mother’s maiden name is, use another name that is not connected to you on a first level. If creativity baffles you, then choose your father’s, mother’s maiden name. Alternatively, choose your spouse’s mother’s, mother’s maiden name. Never chose something directly connected to you.

Last important point…promise! Change your Secret Answers frequently too! Yes! If you’re password gets hacked, what’s to keep a would be hacker to do it again? Change your secret answers using a new source for your new answer! If you can’t remember your secret answer, write it down too. Like your passwords, store it in a safe place!

Never go lax when it comes to your privacy! Teach your children the same thing! Safety should be first in everything!

Technorati Tags: Passwords, Privacy, Security

October marked the time when life, my life that is, turn upside down. Well, o.k. not really upside down, but it sounded good in my head. Can’t you hear the symphony in the background? Music is swelling… *looks around* You can’t? Oh dear… Well, turn your volume up! … still can’t hear it… er… it must be in my head then. Oh GAWD!

Ok, actually let’s step back in time just a little tiny bit more. We had a BIG, MONSTROUS move back in December of 2008. We moved, or were moved, from Idaho to Arizona by my husband’s new company. I must admit the move package was awesome! They packed us, moved us, and unpacked some of us. We figured the home we were renting would be very temporary so we only unpacked what we thought to be essential.

There are pros and cons to this method of moving. First, if you don’t unpack everything, then when its time to move again, you don’t have so much to pack. However, if you don’t unpack, you end up either buying what you need, even though you know that somewhere in one of the hundreds of boxes, you own said item, OR you end up digging through said boxes trying to find that one item… and then another item… and another. Ok, I think you get the point. Now, you’ve unpacked another box.

A 6-month rental turned into more & more. Finally, in September of 2009, our house in Idaho sold! Yay! We lost money overall in that sale, but we were able to pay the loan off with enough money to buy a cup of coffee when all was said & done. Ok, ok… Coffee is not that expensive! However, the amount of change we received was not enough to put a down payment on another house. So, I tucked it away for another day.

Now, we roll into October 2009. My Realtor here in Arizona takes me through about 5 different homes to chose from here, encouraging me every step of the way… assuring me that she is confident that even though we have NO DOWN PAYMENT, we can still buy a home. *Yeah, right* What are you smokin’ Wendy?! Ha!

I found 2 homes I thought were nice enough & inexpensive enough, so I showed my husband. He felt the same way … but he looked anyway. He liked my choices & after a very short articulation between the two of us *the amount of time that it takes to fall asleep* we’d made our decision. The following morning, my Realtor got the ball rolling to purchase a house.

Everything went so smoothly. The sellers were desperate to sell so they agreed to EVERYTHING, including repairing every little thing we asked to be fixed. I have NEVER had a deal go so fast & without SNAFUs from the seller (or buyer). This must be a gift from God, right?

My Realtor contacts the lender & tells him about our serious lack of finances. He in turn says, “HEY, NO PROBLEM! In fact, they’ll end up getting change back when all is said & done.” *oh boy, oh boy!*

Lender sets us up with a “Rural” loan & sends our paperwork to the underwriter of the first investor. We get turned down. Wanna know why? The company’s move package put us earning too much! Yeah… I’m deflated now. My lender pats us on the shoulder & assures us that he will continue to press because he feels they are considering the package as continual income when it is only a one time thing. We press on.

In very short order, the lender sends our paperwork to a second investor. Again, the extra finances are the issue and were turned down again. At this point, we’re doing the *Midas shrug*… Two down, what’s left? Our lender informs us that come the first of December, his company will be licensed to do this kind of loan & he’s certain he can work miracles for us at that time.

So, we all agreed, sellers & buyers, let’s see what happens. So we wait for Thanksgiving to pass. December rolls in…The paperwork is processed… Yep, you guessed it… income is again the issue. But this time, the underwriter listens to my lender and agrees that the said move package should not be included. Yay! But wait… my husband just received TONS of OT at work and hey look, he’s also received a bonus from his company for spending more time at work than at home.

Our lender sat in the underwriter’s office explaining every penny of our “added” income. The underwriter finally agreed with my lender so, my lender sent all files to underwriter to sign. Ok… so WTH was she still not signing? WTH did we miss our closing date? Apparently, closing dates don’t mean anything here. We missed our closing date! Yep… So the lender contacted seller to let them know more of what’s going on! Seller, although I’m sure very uptight at this point, agrees to hang just a bit longer. I mean, what are they going to do, put the house on the market again? Sheesh!

The day before Christmas Eve, we receive an email! The underwriter has signed off, now we send to the Rural loan people to get your money! Yay?!?! Can they still reject us? Yes, they can!

Christmas was very stressful. Not only are we waiting to finalize our house, but my parents were here the whole week before Christmas. So we were trying to be hospitable as well. We waited to hear, but we were told we wouldn’t hear until after Christmas. *obviously*

On December 28, 2009, we were contacted at 3 pm in the afternoon. “Get your butts up to the title company! If you sign today it will record tomorrow…” Both my husband & I take off from our separate locations to race to the title company before they close. It took 45 minutes to drive there, but of course, I’m out of gas… Ugh! I finally arrive shortly after hubby, its now about 4:15 pm… But we get in, & find they are waiting for us. Even the receptionist looks at us & says, “You must be the Hafners” we nod, sheepishly!

Rural loans have a lot of extra paperwork that you have to go through. It took an hour to sign all papers.

You’d think that the “recording” part would be fast… right? Maybe we’d get the keys by noon?? HELL NO! We almost didn’t get the keys that next day. But my Realtor & our Lender both did a lot of pushing! By 3 pm, December 29th, my Realtor calls me… “Are you home?”

“Yes…” are respond, “of course where else would I be… I want my keys.”

“I’ve been knocking at your door & you’re not answering,” she says.

OH CRIPES! I run downstairs & she’s standing at the door holding my house keys up in front of me with a giant grin on her face!

We are now proud owners of this beautiful home!

We are so excited to FINALLY be done with this very stressful chapter of our lives. However, this has imposed other stressors too. My business has had to take a back burner because so much was unknown. We weren’t sure when we would be moving. All projects had to be delayed. So, my clients are not too happy for those delays. Thank you! Now my clients are all thrilled that I now have a new house… but they wish the move would hurry up so we can focus. I can’t blame them! So, I want to thank all who have been patiently waiting on my life to settle down. We’re almost there!

This week I have been working on a redesign of one of my web sites. The design of the website was acceptable by my client, but the desire was to maintain the same look of the page but make the pages more fluid. What this means is that the web page will shrink or expand based on the size of the monitor. The only limitations would be  the images themselves.

With this website, the frame looks kind of like an iPod… there are raised and rounded edges all around the header, navBar, mainContent, and footer.

So, on a screen set for 1280 px across, the mainContent was fixed at about 830px. This was driven by the top and bottom images of the frame or box.

So, with the new layout, there are several challenges.

1. Client wants a horizontal drop down navigation system, as well as a left, vertical, sidebar to carry an open navigational system.
2. Client needs a wider window for the mainContent.
3. Client wants to keep the same rounded corner look.

Ok, so I now know where my challenges are. This little tutorial does assume that you know a little about HTML and CSS. If you don’t, you can email me or you can go to the bookstore and get yourself books that can enlighten you. I will post some good titles in another post.

My first challenge is to create a page with a liquid or fluid layout. This kind of a layout is done in percentages. The only fixed items should be your images and an occasional table data that you need tight. All this is done primarily with div tags.

1. First I have to start with my container div that will hold my header, navBar, sidebar, mainContent, and footer divs. This is done with two different files, your css file, and your html file.
2. In my header div I created a table that holds my clipped images of the frame AND the logo or header art.
   1. First, you need images. I started with this:

Now, I set my Rectangle Marque tool to a fixed measurement. In this scenario, The corners are 40px X 40px & the edges I put as a thickness of 10 px and depth of 40 px.

Now here’s an image of the HTML in my #header. Because of how the different browsers work, you need to insert your images a couple of different ways. For instance, in this table data, we not only insert the image piece, but we also make it as a background image.

<td background=”images/design_elements/top-shadow.jpg” valign=”top”><img src=”images/design_elements/top-shadow.jpg” width=”10″ height=”40″ alt=”Design Element” /></td>

I found that if I d0n’t write it this way, the image won’t stretch all the way down the sides or across the top or bottom. NOTE: You don’t want to put this image in the CSS #header because you have the corners to worry about. Remember the rounded corners? If you place these images into the CSS file it will knock out the corners and make them square.

**Also this has to be written this way here otherwise your alignment to all other images will not match up.

If you have several table rows in your header, like I do, then you’ll have to make sure that your edge pieces are inserted on either side of that image. See here.

<tr>
<td width=”28″ background=”images/design_elements/lt-side-shadow.jpg”><img src=”images/design_elements/lt-side-shadow.jpg”   width=”40″ height=”10″ alt=”Design Element” /></td>
<td valign=”top”  bgcolor=”#11396a”>
<table width=”80%” border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ summary=”logo”>
<tr>
<td align=”center”><a href=”?content=home”><img src=”images/design_elements/Jeri-head.png” alt=”Headshot” width=”96″ height=”125″ border=”0″ /></a></td>
<td align=”center”><a href=”?content=home”><img src=”images/design_elements/title-header.png” alt=”Header Title” width=”500″ height=”160″ border=”0″ /></a></td>
</tr>
</table>
</td>
<td width=”28″ background=”images/design_elements/rt-side-shadow.jpg”><img src=”images/design_elements/rt-side-shadow.jpg” width=”40″ height=”10″ alt=”Design Element” /></td>
</tr>

Once you have that all written inside the #header tag make sure to close your table.

Now, the CSS file (which is external) has the #container set to 95%. My client wants as much white space that she can get & still be able to have some definition in the page. Of course, I don’t want this page to look flat or plain either. So we left just a little margin on the sides.

My next hurdle came with the horizontal drop down nav bar. My client wants this nav bar to be over on the right. However, this is not a FULL nav bar. So I had some maneuvering to do. This nav bar is made with javascript and images. So, after getting it to the right, I also had to insert my side edges. I did this by putting a table around it just like the logo/banner mentioned above. I did have to create fixed widths for the <td> around the side edge images. This helped to keep all lines and the navigation pushed over to where they need to be.

My biggest hurdle was the #sidebar and #mainContent section. I couldn’t figure out how I was going to create that edge with just these two “boxes.” Easy peasy … right? Well, not really. The problem I found was that I could build a table inside each div area that would allow for the edge, but what happens if one div area goes on and on… and the other stays small? You have a problem because one side will connect to your footer seamlessly and the other won’t. So, I had to figure out a way where ALL browsers could handle this dilemma. I am still young when it comes to CSS, I had to think outside my “table” box and think of a way that I could stretch both sides no matter if one went longer than the other. Normally, I would slap another table in there… but not sure where. I’d end up making tables inside of tables to get what I wanted… That is NO FUN…trust me!

So, here’s what I came up with. First, remember we have a #container that holds all of our other elements. SO, why not create another container (#container2) that only contains your #sidebar & #mainContent divs and is within the main #container tag? So I set up this script inside my CSS file.

#container2 {
width: 100%;
margin: 0;
padding:0;
background:#11396a;
background:url(../images/design_elements/lt-side-shadow.jpg) repeat-y left;
background:url(../images/design_elements/rt-side-shadow.jpg) repeat-y right;
}

So what I’ve done is created my container at (#container2), inside the main #container tag.I have set the width to 100% of the #container with no margins or padding. What I had thought about was how to get the images in there to stretch.. So I did a background: url() of each image, telling it to repeat-y and where to put it, right or left. When I ran this through all the browsers, the only one that did not like this syntax was Microsoft IE. So what I had to do then was to go into my HTML file and create a table inside the #container2 tag.

<div id=”container2″>
<table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td background=”images/design_elements/lt-side-shadow.jpg”><img src=”images/design_elements/lt-side-shadow.jpg” border=”0″ width=”40″ height=”10″ alt=”Design Element” /></td>
<td>

<div id=”sidebar”>

I found that if I created a table with a <td> for my left edge, and then a second <td> for my #sidebar and #mainContent and a third for the right edge, closing the #container2 div after my #mainContainer div, then IE could complete itself!

By doing it this way, you allow more flexibility in you #sidebar & #mainContent divs. You don’t have to worry about putting a height tag in there. (Not all browsers understand the ‘height’ variable in a <table> tag.)

The #footer div should be laid out just like the #header div.

Now, I found that in most cases here, I had to remove all padding and margins for this to work. If I need padding for this project, I will add it to the HTML of each div later.

Here is what the final page looks like.

Good Luck on your project. I hope this tutorial help you. Please leave a comment and let me know.

– More Later

Technorati Tags: Tips & Tricks!, Web Design, Web Pages

The other day, I received a very courteous email from a webmaster looking to increase the rankings of his web pages. I have spent the last few days contemplating his request.

First, what are Link Exchanges & Link Farms?

Link farming is the process of exchanging reciprocal links with web sites in order to increase search engine optimization. The sole purpose of any link farm is to get search engine rankings. They typically have web pages that consists of 50, 100 or even more unrelated links on it.

Link Exchanges (also known as a banner exchanges) are a confederation of web sites that operates similarly to a web ring. It is a  method of exchanging links on a large scale (usually automated) specifically for the purpose of improving search engine rankings, not user-experience.

It used to be common practice to exchange your links like this. Typically exchanges & farms involve either manually or automatically setting up pages or directories of links to other sites and partners that link back to your site. These types of spam-filled pages or directories often have no value to the visitor.

I had a client, several years ago, who had links from anyone who asked to be linked to their site. When I went through all the links I was surprised to find dead links, links that lead down bunny trails of pop up ads, & even pornographic pages. When we found this, we immediately took the page down. Why would anyone want to read a page of links?

Personally, I practice what I like to call, “Organic Exchanges.” An organic exchange is posting links on your web site that pertains to your web site. For instance, I surf the net often, looking at tutorials, or gaining advice on subjects just like this that I am writing about. I have blogs I love to read daily… So, what I do is put a link on my web site or my Favorite Web sites over on the sidebar so that you too can enjoy some of my favs. There are no strings attached. If I list you, you don’t have to list me.

You say I’m shooting my page ranks down? No, I don’t think so. You see, search engines like my fav, Google are changing every day. They are smart to our ways of trying to get high page rankings. So, I want them to see that all my external, as well as internal links go hand in hand with my business.

Keywords are very important to have for all web pages. Search engines put a high value on external links that link to pages that have keywords that are pertinent to the web site. So, if you do choose to put my web site URL on your web site, make sure you list me under web design, web hosting, or something along those lines. That way I get an honest page rank.

My point is this; exchange links organically, naturally. Make sure they are meaningful to your business. Don’t go for those automated exchanges or farms that don’t know you. They don’t know your business. All they will do is get you removed from Google. That is not a good thing.

The main reason for avoiding link exchanges, is because search engines like Google consider it a manipulative technique for gaining page ranks. Google has been known to remove sites for trying to artificially inflate their rankings. Google’s Webmaster Guidelines state that spam link exchange tactics are deceptive or manipulative behavior. You can read more here.

So, don’t write me & ask me to post a link to your web site. I won’t do it unless I actually use your site and find it useful. Don’t send me to your web page where you’ve listed my web site in amongst other links that you’ve farmed. It isn’t help either of us!

– More Later

Technorati Tags: Marketing, Search Engines, Tips & Tricks!, Web Design, Web Pages

I really like glass buttons, also known as plastic buttons or jelly buttons. I think they help to add a little glint of color or newness to a web page.

I have used several programs in the past to make these buttons. I think my favorites were made with Adobe Adobe Photoshop Elements and Corel Paintshop Pro. But I grew up and finally bought PhotoShop CS3 a couple years back & I have had some learning to do. Adobe Photoshop Elements & Corel Paintshop Pro both simplify the process of making glass buttons. There are really good pre-made styles or buttonizers built into those products. However Adobe Photoshop CS3 didn’t come with those. Yes, there are lots of styles and brushes that come with Photoshop but nothing that looked as spectacular as the other buttons.

Today, I did more work on perfecting my button & I think it turned out pretty nice. Here’s how I did it.

Step 1: Create a new image. I started with 160 px by 35 px with transparent background.

Using your Rounded Rectangle Tool and the color of your choice, create your button stage.

Use Rounded Rectangle Tool

Step 2: Use your Magic Wand to choose the colored shape. This step is done to reduce the amount of cleanup that you would have to do for the next layer.

Use Magic Wand to Choose Shape

Step 3: Add a new layer (Ctrl-Shift-N) & pick your gradient tool. Set the gradient to linear gradient, black to transparent, and drag your mouse from the top of your dotted line to about center of your colored shape to make the dark fade.

Use gradient tool to create dark fade

Step 4: Hopefully you still have the dotted line around your shape. If you don’t, then click on the shape layer and use your Magic Wand to select it. Next, go to your menu bar & choose Select > Modify > Contract and contract your selection 2px.

Contract Your Selection

Step 5: Grab your Gradient Tool again, but this time, use white to transparent. Create a new layer (Ctrl-Shift-N) & from the top dotted line drag your mouse down to about the center again. This will create a white area on the top.

Use Gradient Tool with White this time.

So far so good! Of course, my sample images are at 200% so you can see what I am doing, but the button is now taking shape.

There is one more tweak.

Step 6: Go to your layers panel and click on the white “highlight” layer. For the Blending options, you want to change the “Blend if Grey” bar as shown below.

Change Blending Option

I chose 135 because that looked best to me, but you look at your button & see what looks good to you.

So far, you have a nice looking button. But perhaps you want it to look a little more transparent. Then click on your colored shape layer. Tweak the opacity down to about 90%.

Here is what you’re image should look like.

Final Step, Final Look

Don’t forget to save your image. I like to save as a .png so that the edges blend better to whatever background button that I choose on my web page.

– More Later!

Technorati Tags: glass buttons, Photoshop

As a web designer, I help clients with video uploads quite a bit.

One network that I have been known to use for video uploads is TeacherTube.com. The rules seem pretty specific there, meaning you can’t just drop any ol’ video in their network. It has to be specific to teaching. At least two of my clients have videos that meet the criteria that TeacherTube has for uploading media. Also, both clients’ video are longer than 10 minutes yet under the allotted 100 megabytes. So, you’d think I would be happy! NOT!

On both occasions I have been outraged with TeacherTube. Their method for uploading videos is via your browser. This is not a problem since video upload to networks like this require some background processing to get your movie into a Flash wrapper. Realistically, the uploading time doesn’t seem to be the issue…it went smoothly on my end. The upload itself on my latest video took about 10 minutes. The PROCESSING time seemed to last an eternity! I must have tried to upload 10 times or more with the same results. I would sit an watch the L – O – A – D – I – N – G bar where you can watch the uploading of your video… But then we get to the processing part and after what seems like an enormous amount of time, I get the ol’ ERROR sign… Like some big monster tried to eat my video, digest it and then spat it out for no known reason! What’s with that? It didn’t just happen once… Try 10 times.

So, I am thinking, maybe, just maybe it is my Internet connection. I use my laptop and connect up to my in-house network via wireless connection. Well, that could be a problem, right? So I hook up my laptop to our network via wire instead. I go through the uploading all over again. ERROR! After about 2 more hours of hitting my head against the TeacherTube WALL, my laptop dies… low batteries. Tells you how long I was at it this morning alone.

I finally get booted up and calm, ready to beat my head against that wall a different way, when I log into my clients account and what do you think I found? SIX different uploads of the same video! Yeah, you heard me!

Do I like TeacherTube? I have mixed feelings. Yes, I like that it is teacher specific and they really don’t have a video time limit…but I hate the uploading process so much more. Maybe they should talk to YouTube to find out how they do things.

– More Later

Technorati Tags: Reviews, Social Networks

I am a sucker for Google’s search engine. I use it over any other. However, from time to time I do look at the others just to see if I am missing anything special. Usually, I’m not.

Today, I found that Google is working on something new. It is called Google Caffeine. It is their new search engine and it is supposed to bigger, better, more powerful. Well, according to this article on The Channel Wire, there seem to be mixed results.

I went to the Official Google Webmaster Central Blog and found out that Google is looking for feedback on their new baby. They want people to test out Google Caffeine by going here: http://www2.sandbox.google.com/, do a search… on the search results page look for a link at the bottom of the page that says “Dissatisfied? Help us improve.” Click on that link, type your feedback in the text box. Make sure you include the word caffeine somewhere in the text box.

Now, as for me, I still love Google. I put in my search criterion, my name of course. As I typed it in, my search results started showing up in my search box as I was typing in the letters. Finally, the search results page brought everything that mentions my name PLUS it had a highlighted box that asked if I would like to update my profile for Google myself. I forgot that I had a Google profile. I have so many places where I have to type in my profile… Facebook, Twitter, Technorati, LinkIn, etc. Google profile let me add in all those sites too.. So, now I am linked. Or maybe… I’m Caffeinated!

– More Later!

Technorati Tags: Google, Google Caffeine, Search Engines