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.

This is the old layout.

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:

   Create Corner Cutouts

   Cut out pixels for sides, top, & bottom

   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.

HTML for #Header

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.

Completed Header

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.

Final Look of Page

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

The last couple of days I have spent looking for just the right image or just the right music to fit the web sites that I am building. As you’re aware, it is a REALLY BAD IDEA to steal artwork or music from another website. People frown upon you stealing their work… So, I spent the better part of today and yesterday looking for royalty free stuff. It can be really tough to look for just the right piece.

I have to explain to people that I build websites for, and to those that I just consult that it is very bad form to right click on an image and save it for use at a later date. Now, there are a lot of websites out there on the Internet that allow you to use their clip art, but you have to be very careful to read the disclaimers on the sites.

This time, I had to search for music. You can’t just use music off your CD without the artist’s permission… So, I decided to browse some “Royalty Free” websites that will sell you their music clips for a reasonable price. No problem there. I started with Google to give me a list of sites to browse, and as I began my search, I tweeted about what I was doing. I received multiple tweets back from people who either shop for royalty free stuff or they own the sites… but it was cool to find all these sites to peruse. (You can follow me on Twitter.)

Here are some sites that I visited and found some very useful, royalty-free stuff. This is not free stuff… you still have to buy it, but the license allows you to use it on your websites.

iStockphoto
Audio Micro
Premiumbeat
Freeplay Music
Music Bakery
Accent Music Productions

Well that’s just a few… Have fun!

– More Later!

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

I learned something interesting yesterday. All these past years, when I have to use javascript in a web page, I have always put one of these as my link to my javascript inside my head tags:

script type=”text/javascript” src=”scripts/anyscript.js”
script src=”scripts/anyscript.js”

However, in my endeavors to write cleaner pages, use new code instead of obsolete or deprecated code, and also to learn Dreamweaver CS4, I set my tag to be:

script type=”application/javascript” src=”scripts/anyscript.js”

Usually I test all my pages before I let my clients know that they’re done… but this time I didn’t. Shortly after releasing them, I found that the javascript, which I use in many pages only worked in Firefox or Safari, but it did not work in Microsoft IE.

I went through all my code trying to figure out what the deal was… you know, looking for the proverbial needle in a haystack! Couldn’t find it. Finally, it occurred to me that I had tried this new thing that Dw offered, type=”application/javascript”. I quickly changed back to my tried and true, type=”text/javascript”.

Apparently, The W3C (HTML) specification suggests using text/javascript instead of application/javascript.

I found a post by Microsoft that says, “This is an expected by-design behavior. IE currently does not have support for these media types.” This was in reference to the media type of “application/javascript” or “application/ecmascript.”

Well, this web designer is sticking to the old tried and true “text/javascript” for now. No use making more trouble in my designs.

More later…

Technorati Tags: Tips & Tricks!, Web Design