Practical eCommerce

erichar11 · Last edited by erichar11 on Wed Feb 21, 2007 6:10 pm; edited 1 time in total

Hi all,

I'm in the process of redesigning a clients site to make it more friendly, both
from a users perspective as well as for SEO. I came across the article from PE
called: Gaining Control of SE spiders? This article hits on a pretty important
topic that I don't think a lot of people think about(including myself) when
designing sites.

So why is it important? Follow the steps below to see the problem on a real page.

Step 1. Take a look at the home page for the site I'm working
on at www.hungrymindbooks.com/h/home (the redesign is not live yet, still work to do but feel free to play).

Step 2. View the site in a Lynx Viewer which is a text based viewer(only shows text on a page) such as this www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php
Just type in the URL above www.hungrymindbooks.com/h/home

Step 3. View the results and see the problem. Notice that the left and right navs are placed above the most important text on the page, the content area. This is a problem because SE's, google for example, read the page from top down and apply more weight to what's at the top then what's at the bottom. In addition, how can an SE determine what the page is really about with all the left and right nav being inserted, specifically at the top.

So what's the solution?

We'll the article discusses one of the methods to potentially solve this problem. By using anchors for the various content areas, you can create links in a div tag right below the opening body tag that follows the links in order that you put them in. (Check out www.practicalecommerce.com/articles/82/Tutorial:-Gaining-Control-of-Search-Engine-Spiders to get a much better explanation. Great, So what's the problem. The problem is that the method uses hidden text such that the links in the div tag are not displayed. As far as I know, Google frowns on hidden links. They can be easily spammed by just placing spam keywords within the anchor text.

So is their an alternative solution?

I asked Brian, the author of the article, about this and he was kind enough to provide some additional insights. I think we agreed that probably the best way to tackle this problem is using Divs and CSS to reposition the content on the page, while at the same time maintaining your sites look and feel. So with Brian's potential help, maybe we can come with a div version of the site and hopefully compare the original vs. the new version.

I'm no css expert, as most of the sites I have been designing I have been using tables with css mixed in. I'm more inclined to move to a completely css based design not just for the SEO benefits, but how much more easier it is to manage the presentation of a website.

Lastly:

Check out your own pages using the "Lynk Viewer", it may help to understand why your not ranking as well as you could. You can also get a better understanding of how SE spiders see your page.

Eric

PamelaHazelton · **Date:** Wed Feb 21, 2007 6:06 pm **Subject:**

The topic of tableless design came up in another conversation I had earlier today. And while I love it, it's impossible to completely embrace.

The majority of sites using solely CSS (tableless) design are missing the mark in some browsers. With ecommerce sites, you want to be compatible with as many browsers as possible - on the PC, MAC and Linux systems. Unfortunately, CSS is often hacked in certain aspects to accomodate IE's various pitfalls, and thus rendering in other browsers is less than ideal.

Even this site displays with problems for me in two of the dozens of browsers I run.

I'm currently reworking an ecommerce site whereas the designer created a completely tableless design. Looks great in IE - version 6 only. It's skewed in FF and in Safari? Forget it.

I love CSS. I use it all the time, but there have been so many hacks written it's almost as if there are very loose standards.

I understand the importance of SE, but as with anything else, there's always a compromise. Everyone needs to find that very happy medium. Because if you dump all your tables and the CSS doesn't render for the users' browser as expected, you could see a drop in conversions.

Just food for thought.

erichar11 · **Date:** Wed Feb 21, 2007 6:29 pm **Subject:**

Yep, I can understand that a tableless design may not be there yet. However, even with a table based design we are running into so many problems working in various browsers as well. Not on this site, but the one I'm working on for myself.

So you mention a compromise. What would that consist of? Designing tables and mixing in css? This is what we do currently and it's still creating multiple problems in various browsers. So if you can shed some light in this area that would be great. And in terms of the topic "moving page content" what would you suggest? I need to figure out a strategy so I'm all ears.

Lastly, how did you quickly view the page in multiple browsers? I use ff 2.0 and the IE tab extension which works with ff and ie only. If there is some trick, please do share. Very Happy

Thanks for the insights.

P.S. I'm sure you easily figured this out, but for others, this is a Miva 5 site that I'm currently converting from Miva 3.

bgetting · **Date:** Wed Feb 21, 2007 6:29 pm **Subject:** Which browsers?

Hi Pamela,

If you could kindly expose to the world which browsers you are seeing display errors in, I would love the opportunity to address them.

Of course, in doing so I will be proving your point by trying to augment the current CSS with some sort of browser specific hack. Hopefully this stuff will not be a problem soon. If Vista were more attractive we'd see a faster migration to IE7, which is pretty compliant with CSS.

But alas, the migration is slow, if even a trickle.

PamelaHazelton · **Date:** Thu Feb 22, 2007 7:16 am **Subject:** Re: Which browsers?

bgetting · **Date:** Thu Feb 22, 2007 7:46 am **Subject:** Ahhh... yes

Yes, that is one that I find very hard to fix. The issue with that one is that the CSS2 "min-height" property is not supported by those browsers. That one I have looked at and there is regretably no solution that I can see other than having full content pages.

I did try messing with combinations of the "height" property and the "!important" attribute, but that seemed to cause more problems than it solved.

As for Safari, it has it's weaknesses. However, it is by far the fastest performing browser that I have ever used, from how long it takes to open the application to rendering a web page. It also have great support for CSS2, although there are gaps like anything else. I have to say that support for the "text-shadow" property and full PNG24 support is a plus for me.

In two years, today's design ideas will be great for all users, but the problem is that by then we will all be itching to use that brand new CSS4 property that isn't supported by IE7.5 (if it's out by then).

Very Happy

bgetting · **Date:** Thu Feb 22, 2007 2:44 pm **Subject:** Quick and Dirty

First, I wanted to clarify that the challenge that has been presented in this forum is not the same thing as the tutorial for controlling search engines. That tutorial explores using skip links to direct spiders to content within a site. That is not the same as positioning content within the source code. The challenge with positioning the source code is getting the site to display properly while having control over where your code is.

This is a quick and dirty example. I basically took your example site and turned the code upside down to illustrate. The higher up on the page that an item displays, the farther down in the code it is. The goal was to have all the specific page content to appear at the top of the HTML code. Mission accomplished.

The CSS is included inline in this code for ease here. Obviously you would want to remove it to an external file. I have checked browser compatibility and I get a consistent display in the following browsers:

Mac OS X: Safari, Firefox, Camino
Windows XP: Firefox, IE6, IE7

I suggest that people copy and paste the code below and play with it. At the very least go through it thoroughly before posting wild questions about it. It can seem strange if you are used to table layouts, but I guarantee that playing with it a bit will help out a lot.

erichar11 · **Date:** Thu Feb 22, 2007 3:36 pm **Subject:**

Thanks Brian,

This is great, I hope this will serve to help get the point across about making sure your most relevant content is at the top of the page. I have taken your html and uploaded to a page on my clients site called www.hungrymindbooks.com/test.html

The site looks almost identical, with the exception of a few padding issues but that doesn't really matter. This was a test about moving page content to the top of the page while at the same time maintaining the same look and feel for the site. And it was accomplished using Divs and CSS.

To view this page as how a SE spider might see it, follow the steps I mentioned in the first post.

Step 1. Take a look at the new css/div version of home page at www.hungrymindbooks.com/test.html

Step 2. View the site in a Lynx Viewer which is a text based viewer(only shows text on a page) such as this www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php
Just type in the URL above www.hungrymindbooks.com/test.html

Wow, now notice that our main content area is shown at the top and the left and right nav area text are shown below it. Just what I was after. Now the SE spiders can really identify what the page is about instead of having the left and right nav stuff interfering.

Theoretically, I could move any area (left, right, content, footer,etc) to the top of the page by simply making some changes to the css.

If you can't see the difference, just look at the original page I posted and view it in Lynx Viewer (text browser)

Step 1. Take a look at the home page for the site I'm working
on at www.hungrymindbooks.com/h/home (the redesign is not live yet, still work to do but feel free to play).

Step 2. View the site in a Lynx Viewer which is a text based viewer(only shows text on a page) such as this www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php
Just type in the URL above www.hungrymindbooks.com/h/home

Please note, Pamela makes some good arguments about using css which should be noted.

Lastly, for those that use firefox, there is a Lynx View plugin the allows easy access to the viewer from any page.

A big thanks to Brian for doing this.

Eric

bgetting · **Date:** Thu Feb 22, 2007 3:47 pm **Subject:** Middle Ground

Keep in mind, to anyone that is reading this thread that there is also middle ground. You could use DIV elements and CSS to position parts of the code at the correct places on the page. However, if you also need some tables to accomodate your design, then you could use them in conjunction.

No one way is right or wrong, they just each offer different benefits and drawbacks. My personal philosophy is that tables are ideal for displaying tabular data, such as a spreadsheet or calendar. However, since websites are not just for browsers on computers anymore (there are mobile phones, game systems, PDAs, etc) it's important that your site display properly in them all.

To ensure that, I suggest designing your code first and using CSS to format it. That way you will always know exactly how your site is showing up.

BTW - What were the minor padding issues?

erichar11 · **Date:** Thu Feb 22, 2007 4:23 pm **Subject:**

Brian,

good point about using css and tables together. As far as positioning stuff, it was my mistake in playing with the page using firebug that lead me to see a positioning problem. A good reason why I shouldn't keep so many windows open in firefox. Sad

Practical eCommerce

Community Forum

Why Gaining control of SE spiders is important

Ecommerce Articles

Search Articles

Ecommerce Community

Ecommerce Resources

About Practical eCommerce

Page 1 of 1
Practical eCommerce Community Forum Index » Design, Development & Usability