New Design - Going CSS - Nervous!

bundleofjoys · #1 (**permalink**) 02-28-2009, 09:26 PM

I currently have good placement (top 3) in the major search engines for my keywords, so I am very hesitant to change anything. However, the time comes when a design has outlived its welcome. That time is now.

My purpose is to change out all code to be all css. The problem is not knowing how to do it, the problem is how it will affect my placement. The content and links on the new design will be exactly the same, just the layout will be changed. Hopefully this will not affect me in a negative way.

Anyway, here are the links...

Current Site

New Design (screenshot)

Any comments and critiques are welcome!

Thanks for looking!

bundleofjoys · #2 (**permalink**) 03-01-2009, 02:15 PM

Quote:

Originally Posted by abhishek

is prevented from accessing the site. In some
extreme circumstances, IP range bans or country
bans can be applied; however, this is usually for
political, licensing or other reasons. See also
: Block (internet), IP

Apparently you like posting this (seeing that this is your third time within a matter of a few minutes). If an IP or range of IPs are being blocked, it is for a reason.

Krugerrand · #3 (**permalink**) 03-02-2009, 08:21 AM

Well done! I love the look of your new website. Unfortunately I can't have a glimpse at your code. But if you have replaced all the dirty tds by CSS your search engine results will only be affected positively as the crawler can get quicker through all of your site. Just take care of not changig the title-tags too dramatically. They are very important for your listing.

bundleofjoys · #4 (**permalink**) 03-02-2009, 09:35 AM

Thank you very much! I appreciate the advice...I'll keep that in mind when I'm redoing it.

BabySites · #5 (**permalink**) 03-02-2009, 11:17 PM

I am doing the same type of thing. From an html page and demo site to a dynamic site. PS we should plan on exchanging links!
My site is about a PR3, anyhow! It was a PR4 before!
email only from Bryan! info at baby-coop dot com if interested. It will not be now but as soon as I can! Thank you.
My site will be a Children's Mall when done.

P.S your Current site looks nice and is easy to see that it offers many templates for new parents to consider. It also has
much text which is helpful for search engines to find you and explain to others what it is about.
The new on is probably more artsy and elegant however most Ads that go that way area more for showing off than for
content. Depends on the direction you want the site to be heading into. IMO.

Sincerely,
Steven C

**weegillis** · #6 (**permalink**) 03-03-2009, 03:04 AM

It's tough to be critical with such a good job. Very well done, indeed. Your years of experience have yielded a very SE friendly site with a long life ahead of it.

One can see that you've done your homework. Nice implementation of CSS Sprites... always good to show the JS folks that CSS works, too. And laughs at image preload.

As I said, it's tough to critical, but on a design of this caliber it only stands to reason that you would understand and appreciate some comments, so here goes...

UTF-8 is the recommended charset for international use. Your response headers currently list the text/html MIME type, and could be configured to provide charset as well, letting you drop the meta tag.

Include a meta content="language" tag instead, to let user agents know the human language of the content.

The html tag should also include a system language attribute, as in lang="en" xml:lang="en" to establish the coding language.

clearfix is not correctly implemented, needs inline-block and IE conditional in-page to escape IE7.

copyright in meta data is a waste of bytes.

H1 in header l.51 and again l.62--if l.51 repeats site wide it's clouding the site's visibility. Recommend use a div and span in the header.

Not 800x600 friendly. Most navigation is below the fold or off-right. Browser stats still show significant numbers in this screen res. Some elasticity would be recommended, though it is clearly going to be a challenge to implement. Maybe something for v.1.1?

font properties in the body CSS ought to only adopt system fonts. Best to characterize text in the wrapper and/or page elements for more flexible specificity and less trouble with inheritance.

SEOWebHelp · #7 (**permalink**) 03-03-2009, 03:11 AM

I'm confused. I see you have CSS in both sites. Are you trying to replace all the div tags in the new version?

I think the newer version looks more professional

bundleofjoys · #8 (**permalink**) 03-03-2009, 09:42 AM

Thank you for the compliments!

weegillis, I appreciate and respect your comments as they are exactly what I needed! I will be going over each one to see where I can make changes. I always strive to learn and grow and your very constructive comments are heard loud and clear...very much appreciated! I was thinking too many H1 tags, but it was late last night and I needed some rest

I'll be changing them tonight and implementing your suggestions. Thank you again!

SEOWebHelp, my current site has some css, but the new design will be all css.

SEOWebHelp · #9 (**permalink**) 03-03-2009, 03:28 PM

Only use 1 h1 tag for each page. Never use multiples in one page. It dilutes your seo.

**weegillis** · #10 (**permalink**) 03-03-2009, 11:28 PM

Quote:

Originally Posted by weegillis

... response headers currently list the text/html MIME type, and could be configured to provide charset...

To .htaccess in your root folder [public_html, public, /www/, etc] add this,

Code:

AddDefaultCharset UTF-8
AddLanguage en-CA .html .htm .php .css .js

If you can configure it directly on the server it won't be needed in .htaccess

The first rule does the trick, and lets you remove,

HTML Code:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 />

from all your pages.

The second is the response header replacing,

HTML Code:

<meta http-equiv="Content-Language" content="en-CA" />

Quote:

Originally Posted by weegillis

Include a meta content="language" tag instead...

For some reason Cynthia Says doesn't acknowledge the response header or the meta http-equiv tag for content-language. To pass the automatic check for accessibility CS insists on,

HTML Code:

<meta name="Language" content="en-CA" />

in the page source metadata for all documents. (Further investigation needed to clarify this.)

In USA, en-US is the value to use, and in html tag attributes, lang="en-US", excluding HTML. To be on the safe side, I've got language well declared as you can see. Finally,

Quote:

Originally Posted by weegillis

The html tag should also include a system language attribute, as in...

HTML Code:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

bundleofjoys · #11 (**permalink**) 03-04-2009, 12:30 AM

WOW, weegillis!! I'm blown away that you have taken to help me out. Indeed, you have provided me with some useful and most helpful tips.

I believe I have addressed them all with the exception of the screen resolution. According to the analytics, only 3% of my overall traffic have an 800x600 resolution, so I believe I can live with that.

- I have updated and added the language tags/info. (added the info to my .htaccess file)
- added inline-block and ie conditions to the clearfix (I believe I did it correctly)
- removed the copyright meta tag
- changed out the H1 tags (only one per page) and substituted with ascending header tags
- Updated the body font with a system font

I think I have covered all your points.

I think you have me on the path to greatness and I owe you a big THANK YOU! I can't wait to dive into the remaining pages now and transform them...oh what fun!

confettiguru · #12 (**permalink**) 03-04-2009, 01:20 AM

Very Nice.
The new site has a very current look and feel.
I can't wait to see it live

The navigation is very clean and to the point.

bundleofjoys · #13 (**permalink**) 03-04-2009, 01:45 AM

confettiguru, thank you very much! My wife is big into scrapbooking, so I was somewhat inspired from her work. Wanted to make it a fun, yet sophisticated site. She told me my navigation menu is a form of "scallops"...scrapbooking term....who know

Appreciate the comments!

**weegillis** · #14 (**permalink**) 03-04-2009, 02:55 AM

Should be

HTML Code:

<!--[if lt IE 7]>

IE 7 (and beyond) can follow the same CSS as the others and doesn't need this extra hack; ergo, it's filtered out of the in-page conditional.

How does this compare to your source reading?

HTML Code:

<!--[if lt IE 7]> 
<style type="text/css"> 
/* \ */ 
* html .clearfix {height: 1%;} 
.clearfix {display: block;} 
/* / */ 
</style> 
<![endif]-->

and I see you have this,

Code:

.clearfix:after { 
content:"."; 
display:block; 
height:0;
clear:both; 
visibility:hidden; 
}  
.clearfix { 
display:inline-block; 
}

Since you are using the conditional in every page you can remove the hack,

Code:

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: inline-block;}
/* End hide from IE-mac */

from the external style sheet. For one, it's wrong--IE 6 (Win) and below don't know inline-block; second, IE 7 will follow this rule, which we don't want; and third, it's definitely better coding to remove IE workarounds to a conditional. While clunky, it lets your style sheet run free of confusing hacks.

**weegillis** · #15 (**permalink**) 03-04-2009, 03:29 AM

search for "the real clearfix"

IN your reading you will encounter the 'haslayout' question, which is behind the zoom property in your current version. In certain isolated cases, such as test scenarios, this property may be necessary, but in yours it is not.

haslayout can be triggered in any number of ways, including position: relative; which is invoked in #header, for starters, enough to trigger haslayout. Now it's on, it stays on. Zoom with the zoom... Or leave it. It's not hurting anything.

One article does mention changing the "." to " ". Can't see any harm in this. Never really preferred the dot, anyway... felt like I was hiding something hideous. JK. The writer has a point.

[edit]
Oh, yeah. If position: relative; isn't enough, z-index:auto will definitely do the trick. If these properties are high enough up in the starting cascade, haslayout will be invoked before any float properties are declared.
[/edit]

bundleofjoys · #16 (**permalink**) 03-04-2009, 01:21 PM

weegillis, that makes sense. Thanks for the tip and I'll be doing some research. Again, very much appreciated!

**weegillis** · #17 (**permalink**) 03-04-2009, 05:27 PM

I noticed you still have this in your code:

HTML Code:

<meta http-equiv="Content-Language" content="en-CA" />

If you've added the directive to .htaccess, it can be removed.

Also, be sure to set the correct region on you language value. en-US if you're in the USA, -CA if Canada, -UK if England, and so on. If you're not in Canada, you will definitely want to change this.

bundleofjoys · #18 (**permalink**) 03-04-2009, 11:04 PM

Got it! Thanks again!!!

**weegillis** · #19 (**permalink**) 03-05-2009, 04:41 PM

Quote:

Content-Type: text/html; charset=UTF-8
Content-Language: en-ca

You're almost there...

Your IP indicates the server is in the US. This is typical, as most servers are in the US (that we see over here, anyway). Even Telus (Canadian based ISP) has their data centers and hosting servers in Kansas, which makes it look like we're there, too.

If you are in fact actually based in USA, then I would recommend changing the value to en-us, just to be clear.

**weegillis** · #20 (**permalink**) 03-05-2009, 04:51 PM

Since you're making every effort to make your new site as clean as possible for its launch, it might be worth looking at the links in your top navigation:

HTML Code:

<li><a href="baby-website-designs.php" class="m_designs" title="Baby Website Designs">Baby Website Designs</a></li>

There has been discussion on repeated text in title attributes and link phrases, and the generally accepted conclusion is that they should not be duplicated. (Further study recommended)

As the link text is not visible unless styles are disabled, perhaps it would be best to shorten that text to match the graphic button text, and leave the full text in the title attribute. This way, there will be something to click on in an unstyled page, but the duplication will be avoided.

Also, in the empty buttons, you have two options to prevent a validator from suggesting you trim empty LI elements:
1: add a non-breaking space LI- /-LI; or,
2. give the elements an ID, as in id="button-1" or id="natal-care"
This will rid the page of validation warnings.

bundleofjoys · #21 (**permalink**) 03-06-2009, 01:30 AM

Thank you! I completely forgot about the .htaccess file

I cleaned out the title attributes. Better safe than sorry.

Thank you!

**weegillis** · #22 (**permalink**) 03-06-2009, 09:06 PM

Bryan,

You're welcome. Glad I could help.

andr113 · #23 (**permalink**) 03-09-2009, 07:46 AM

Good site. But all fonts are too light. It's not readable. You should choose CSS.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Nervous about sending out a large amount of emails	Furlongs	Marketing Strategies Discussion Forum	7	02-15-2006 11:26 PM