iframes

[Business Attorney]

Frederick isn't the only one trying something new. I added iframes to my LLC site last night.

I have been listing some LLC books available through Amazon on my site. When Illinois recently passed a new law that would require any company with affiliates in the state to collect sales taxes on all sales to Illinois residents (including sales made directly or by non-Illinois affiliates), Amazon closed the accounts of all affiliates in Illinois.

Even though the links only brought in a few dollars a month, I didn't want to leave in links to Amazon. Call it principle or spite. With the Amazon ads, I had hard-coded links to specific products on each of my 80 or so pages. I thought this was a good time to change that. Since this site is written in html rather than php, and I don't feel like going through and converting it to php right now, I looked for another solution and came up with iframes.

Now I have one question and a request:

The question: Are there any drawbacks to using iframes? The Amazon ads were iframes, which is what gave me the idea in the first place. To reduce page loading time, I copied the images I needed and put them on my server to avoid one extra link out (times 5, on most pages). I also reduced the images to exactly the size I needed, to avoid unnecessarily large image files.

The request: Can some of you that use browsers other than Firefox and IE (Opera, Safari) take a look and let me know if the book ads in the left column look OK. I notice at least one difference between how Firefox and IE render the code - the "learn more" button is 2 pixels from the bottom of the frame on Firefox and 10 pixels on IE.

Any other comments are welcome. I know the color choice is a little loud and doesn't really go well with the other blues on the page, but I will deal with that at some point.

Here is a pretty typical page on the site: LLC Disadvantages :: Limited Liability Company Center

[billbenson]

It looks good in opera and FF. I have a big screen and a high resolution (I forget the actual resolution). The downside of iframes is SEO. The source on your website just shows the iframe link. If there is anything in there that you want for the search engines, they won't see it. The information in the iframe is probably on sites all over the web though, so it's probably not important.

[vangogh]

As far as the downside of using iframes, I think the only real issue is one of seo. Since the content in the iframe is on a different page the content doesn't get indexed. It shouldn't be an issue for you.

The ads look fine in Safari on a Mac. In Opera the Learn More buttons are too high and sitting on top of some of the link text. The space between them is gone. It looks like the buttons are using absolute positioning to set them at the bottom. That really shouldn't be necessary, though I assume you did that to keep all the iframes the same size and still have the buttons be at the bottom.

I did this really quick and didn't exactly test to see if it works, but you might try this on each of the pages within the iframe. As you can see I didn't fill in everything either, but hopefully it's enough to show you how I would have set things up.

If you can't get it to work let me know. I should be able to give you all the code with few more minutes of non-laziness.

<div class="book-ad">
<a class="book-image" href=""><img src="" alt="" /></a>
<a class="book-title" href=""></a>
<p class="author"></p>
<a class="action-button" href=""><img src="" alt="" /></a>
</div>

You don't need all those classes, but I added them so you can better identify what goes where. Here's some quick css.

body {background: #0ff}
.book-ad {padding:10px 5px; text-align: center; height:240px; width:120px; position: relative}
.book-ad p {margin-top: 0}
.action-button {position: absolute; bottom: 10px}

I think the Opera issue is that the button is being positioned in relation to something other than the whole ad. If you add position: relative to the ad div it should work. I also added in the width and height on the ad div since it doesn't look to me like Opera is honoring the width and height.

[Business Attorney]

Thank you. I'll try these changes tonight or over the weekend.

By the way, I plan to clean up the code and move the css to my stylesheet when I am done. In the past, I have edited the stylesheet as I was making each change, but the thread on Frederick's css made me think I was doing a lot of extra running back and forth. Plus, the style sheet is long so it takes more time to get to the right place even once I am in the document. So last night as I was playing around with the margins, padding, font size, etc... I decided to keep everything in front of me until I have it just the way I want it. It sure seemed to allow me to work faster when I could make the changes in one document rather than in two. Thank you to Frederick for that!

Thank you both for pointing out the SEO effect. I agree that the content of these iframes is all over the web and is not important to my SEO efforts, but if I am tempted to use iframes in another context, the loss of SEO benefits from the content of the iframes might be important.

[Business Attorney]

By the way, one more question. Last night I tried to make the background color an element of the div "book-ad" which seemingly should be the whole thing. However, it gave the background only to the divs book-image and book-title while the bottom part was still white.

When I move the css to the stylesheet, I am going to have to leave "body {background: #0ff}" in the html code unless I can attribute it to a div. What's up with that?

[vangogh]

The background color issue is also due to positioning the button When you use position or float and element you take that element out of what's called the normal document flow. You can style it so it looks like it's inside the book-ad div, but as far as the code is concerned it's no longer inside that div. As far as the code is concerned the book-ad div ends right after the book-title div.

If you want to prove this to yourself add

.book-ad {border: 1px solid red}

The bottom border will be just under the title and the button will be on the other side. In fact you'll probably notice the border matches exactly with what you saw with the background color. Adding borders like that is an easy trick to help debug things by the way.

Feel free to ask questions as you rework the site. FYI, the way I would go about building the site is first to develop a single page. I think the only thing that changes across your pages is the content area. So the one page is really to build the header, footer, and two sidebars and structuring the layout for the content. You might as well use real content from one of your pages for the content area.

Then you have boilerplate template for the entire site.

The next step for me is changing that single html page into php and moving header, footer, and sidebar code into their own files and replacing them in the template with one line of php to include those files. That's part of the beauty of working with server side languages as now all that boilerplate code sits in single files that are reused across the site.

You'll have some issues where seo is concerned though, if you try to do that now as all your urls will change to use the php extension. It's a solvable issue and probably not even a difficult one, though it could mean a dip in traffic for a short time while search engines reindex the site.

In your case if you want to stick with html you could copy that single page template over and over and just replace the content area on each page.

You can probably also use something called server side includes (SSI) I think your server is running Apache so you should be able to use server side includes. It's similar to the php include though it lets you keep the .html extension. You can also set up your server so when it sees the .html extension it still runs the code through a php parser before displaying it to the browser. It's another way to include php on each page and still keep the .html extension.

I don't know that you want to take on the challenge of all of the above, but once set up it'll save you a lot of time and effort later in maintaining the site. It's also not as hard as I probably made it sound, though there are a few potential show stopping gotchas along the way.

[Business Attorney]

Steve, thanks for the explanation about the background color. I see why it has the effect it does.

What you suggested in building pages is exactly what I do, although over time my page template has changed slightly and, due to not having the site in php, those changes don't get reflected on all the changes unless I go back and make the changes on the existing pages. Sometimes I do that and sometimes I don't, depending on how much I care.

As for the php suggestion, I agree that it is the best choice and I would never write a site today without using php. I have converted several small hobby sites of mine to php from html and I do think I will probably do that with this one some day. My major hesitation is that my site has the #1 ranking in Google for literally dozens of competitive keywords and phrases. Even though I'm not selling anything, I really hate to jeopardize that. For my sites with little or no traffic, it wasn't a big deal to me.

I do have some search and replace software that makes it relatively less painful to make changes across all the pages. Once I got the ads the way I wanted them, it probably took me 15 minutes to change all 80 pages. Also, I make very few global changes. This was really an exception.

Even when I have to make mass changes by hand, I open about 20 windows in my code editor at time and then it is just ... "scroll down, highlight, control v, control s, close window; scroll down, highlight, control v, control s, close window; etc...).

Because I keep the pages virtually identical except for the content, I can probably make a change to all 80 pages in about 15 minutes. Spending 15 seconds making the change once to one php file would obviously be better, and if I were making global changes several times a month, even 15 minutes would add up. Before yesterday I made no changes at all to the site since November, so it is one of those things that falls in the category of nice to have but not critical. In fact, the effort to switch over would probably require more time than I would save at this point, since the site is fairly mature.

Some day when I get tired of the design, I'll use that as an opportunity to spur me to make the switch to php.

Live and learn!

[vangogh]

Glad I could help. I completely understand why you don't want to change the site to php now.

I'm not sure if you remember, but my site used to be on a completely different domain. A few years ago I decided it wasn't the right domain for me and so I moved the site to it's current location. That meant every url on the site was changing. I accepted there might be some loss, but thought it was worth it.

I set up 301 redirects for every url on the site so the old url would point to the new. Unfortunately since I was moving I changed things other than the domain. I changed the whole structure of the site, renamed files, etc. I had to map each url 1:1 old to new. (You'd only be changing the extension so all the redirection could be taken care of with few lines of code instead of all the 1:1 mapping)

Right after the move there was no change in search results. The old pages ranked, people clicked, and were taken to the new page via redirection. A month or so later traffic dipped, though not much. Not too long after that traffic was up across the board. People lose traffic because they fail to set up any redirection. As long as you set it up you really shouldn't see more than a temporary dip, though some links you've earned probably never get transferred to the new url.

Do keep in mind that using server side includes or setting your server to parse .html files as php means you can set up the template files and still have the pages be .html. The latter is relatively easy to do. It's a matter of changing one (maybe a few) lines of code in one of the Apache files. I think it's one you likely have access to. Even easier though you can add this to your .htaccess file.

AddType application/x-httpd-php .html

If your page doesn't have php in it then nothing happens. If your page does have php in it, then the php gets parsed the same way it would if the extension were .php. In effect you could keep your current .html urls and still use php on the pages.

[Business Attorney]

Steve, in the html site that I switched to php, I did add a line in the .htaccess so that if anyone types a URL with the extension .html they auto-magically go to the .php page. Even if someone mistakenly types the html extension on a page that didn't exist as a page prior to the switchover, it still goes to the php page. The line of code was:

RewriteRule ^(.*)\.html$ http://www.mywebsite.com/$1.php [NC,R=301]

I honestly don't know what that does compared to what you suggested, but it seems to work. That particular site had relatively few hits to begin with, and I also added several pages at the same time I recoded it in php, so it is difficult to say for sure, but I didn't see a dip at all.

Maybe I am being too cautious. It really would be nice to have it in php.

As for the includes, I tried that a year or two ago it didn't work. I believe that the host for my site (1&1) did not have SSI activated on shared servers, and that I found that information buried in the FAQs some place. It may have changed by now.

[billbenson]

If you add the code below to your htaccess file your site should parse the .html files as php. This means you could change your page code to php but still use the html extension and have the page treated by the server as .php. This would solve any page renaming issues.

AddType application/x-httpd-php .php .html