Michael Gray - Graywolf's SEO Blog » CSS

Why You Need to Be Concerned About Sloppy CSS

Michael Gray — Sun, 13 Apr 2008 17:27:56 +0000

If you follow me on twitter chances are you seen more than one rant on bad web design, bad CSS, and bad/sloppy coding. Sure I’m a reformed CSS Zealot who used write XHTML 1.1 valid code for kicks. I may have returned to slightly more normal life, but I still believe there’s value in writing clean code. I was migrating a client site from a development environment to a production environment, and when I signed up for webmaster central the results were pretty interesting …

The website was previously a 3 page site with nothing more than text header and with a flash animation on two pages and contact form on the third. Here’s what google webmaster central thought about it (screen shot sanitized)

The first 5 entries were inline CSS coding (Zurich was the font not the location)

What’s the takeaway, yes Virginia your CSS does matter. Don’t blindly accept what your designer gives you just because it’s pretty and looks nice. Learn enough to know what good CSS should look like, and act like. If you need any help I recommend Designing with Web Standards by Jeffery Zeldman.

Advertisement: Efficiently manage your SEO and Social Media campaigns with Raven’s powerful suite of Internet Marketing Tools

This post originally came from Michael Gray who is an SEO Consultant. Be sure not to miss the Thesis Wordpress Theme review.

Why You Need to Be Concerned About Sloppy CSS

1 2 3 4 5 6 7 8

Bad Architecture and Band-Aid Solutions In the past few months all of the search engines,...

Related posts brought to you by Yet Another Related Posts Plugin.

Maximizing Profits With Website Design and Layout: Part III

Michael Gray — Thu, 26 Jan 2006 10:51:50 +0000

In Maximizing Profits With Website Design and Layout: Part I, we looked at some examples of screen resolutions, and content placement. In Maximizing Profits With Website Design and Layout: Part II, we looked at how banner size affected the “sweet spot” being above or below the fold. In part III we’re going to look at liquid versus static.

When we left off we had a page that was pushing the limits of keeping the profitable elements above the fold in both an 800 and 1024 layout. This was done using a fixed width page layouts.

Lets look at what happens when we change it to a liquid layout (if you don’t believe in the power of CSS compare the files and see how easy it is for me to change this with very few lines of code)(example 4 example 5).

Now because we had to go to % instead of fixed pixels I think the 800 looks worse. You could play with using a hybrid of percentages and fixed width side rails, but that’s more complex than I want to get into right now. The 1024 looks a little better because you have more on the page. Lastly what about all the spoiled brats of the world like me who have big monitors, how does it look to them.

I think that looks great, but notice that page also has a more than a minimum amount of copy (over 200 words). So if you’re going to be building a website with a decent amount of copy on a page, then liquid layout is definitely your best choice. However if your copy is going to be less than stellar quality and posses a Zen like brevity, go with a fixed with to make it “feel” longer, and layout nicer. If you were to drop down to two columns instead of three, the length of the copy is going to play a larger role so make sure you are going to have plenty of it if you do want to go liquid.

Conclusion
So to wrap everything up in a nice little package here my recommendations

Masthead – Just the essentials, smaller is better. Avoid big graphics and other designer tricks and elements just to make an impact
Body – Keep the money items in the prime real estate above the fold and as far left as possible.
Navigation – If it’s in the masthead keep it small, if it’s in the body keep it to the right
Page Width – Are you going to have lots of content, if so go ahead and fill the whole screen, otherwise stick with a fixed width to make it feel longer

This post originally came from Michael Gray who is an SEO Consultant. Be sure not to miss the Thesis Wordpress Theme review.

Maximizing Profits With Website Design and Layout: Part III

1 2 3 4 5 6 7 8

Thesis is a Wordpress Framework Not a Design and Why That Matters for SEO When I mention Thesis a lot of people don’t really...
Can You Get a Website Indexed with No Links and XML Sitemaps? This weekend I was doing a little housekeeping on some...

Related posts brought to you by Yet Another Related Posts Plugin.

Maximizing Profits With Website Design and Layout: Part II

Michael Gray — Wed, 25 Jan 2006 11:06:59 +0000

In Maximizing Profits With Website Design and Layout: Part I, we looked at some examples of screen resolutions, and content placement. In part II I’m going to show some examples of how I look at and approach design considerations, specifically where the important “money making” parts are in relation to the screen break.

Looking at the Adsesne Heat map lets get some ideas about how to design a page with the prime content above the fold. As I see it you want to use your money spots for either your products or your AdSense advertising. I know this is going to sound like web heresy to some of you, but if you’re putting your navigation on the left, I think you’re not utilizing your prime real estate as well as you could, shift that navigation over to the right, people will figure it out, and personally I think it works better next to the scroll bar anyway. So Lets do some mockups of what I consider optimal layout.

We’ll be working with four files to start with (example1, example 2, example 3, example 4). Example 1 has a 50 px header, example 2 has a 100 px header, example 3 has a 150 px header, example 4 adds a navigation banner, page title and breadcrumb. I’ve also used some of the colors from the Adsense heat map to make things clearer. Below you’ll see the pages in 800 and 1024 screen resolution.

I think it’s very important to note that in both shots the “money parts” of the page are in the prime location. Now Lets see what happens when we raise the masthead up to 100 pixels.

Both of these layout are still acceptable IMHO, but you can see how the bigger masthead is clearly encroaching in a dramatic way on the 800 screen resolution. Now lets go up to a 150 pixel masthead.

All right that doesn’t look to bad, but wait these pages don’t have an H1 title, they don’t have any primary navigation, or a breadcrumb navigation. If you add that in lets take a look.

This is really about as far as I would push it. Personally I’m of the opinion that the 800 layout is “broken” and needs to be scaled back, but thats just me. I think the 1024 layout still works

In Maximizing Profits With Website Design and Layout: Part III, We’ll look at liquid versus static and see how those factors play into the picture.

Categories:( website.design, | website.design, | website.layout | website.layout)

This post originally came from Michael Gray who is an SEO Consultant. Be sure not to miss the Thesis Wordpress Theme review.

Maximizing Profits With Website Design and Layout: Part II

1 2 3 4 5 6 7 8

Thesis is a Wordpress Framework Not a Design and Why That Matters for SEO When I mention Thesis a lot of people don’t really...
Can You Get a Website Indexed with No Links and XML Sitemaps? This weekend I was doing a little housekeeping on some...
How to Integrate Advertising into Your Blog So you’ve been blogging for a while, your getting some...

Related posts brought to you by Yet Another Related Posts Plugin.

Maximizing Profits With Website Design and Layout: Part I

Michael Gray — Tue, 24 Jan 2006 11:15:33 +0000

I was building new site this past weekend and I got into the liquid width versus static width debate with myself again. Now I’ve been involved in designing, programming, running, and optimizing websites in one way or another since 1998, and while I’m no usability expert I think I’ve seen and built enough websites to have a educated opinion, so I’d like to share what I think about how design and layout can effect your profitability.

First off lets look at some recent screen resolution statistics:

Screen Resolution	2004	2005
800×600	35%	28%
1024×768	50%	56%
>1024	10%	11%
smaller/unknown	5%	5%

We see a reduction in 800×600 screens an increase in 1024 screen and a slight increase in larger screen (strangely 5% remain consistanly clueless). I’ll confess that I personally have a 17″ widescreen with a 1440 x 900 pixel resolution. I’ll also confess that at one point I would have defended liquid layout to death like a fiercely devoted open source zealot. The thing that changed my mind was actually getting a bigger monitor with a higher resolution. Why? Well unless you have LOTS of content, enough to fill the page at any almost any width your page just ends up looking … funny at some point. If you mix in adsense, affiliate links, or any other type of commerce where layout and placement are crucial, IMHO liquid layout makes a lot less sense. But lets take a look at some examples.

To start off lets look at the poster child for gadget blogs Engadget

A few thing to notice right off the bat I’ve only got one toolbar on so there’s not a lot of wasted browser chrome. Second thing to notice like all weblogs inc blogs it’s wider than 800 pixels (see the scrollbar on the bottom). As far as actual content we see the site masthead, the title of the first post, and thats it. Let’s raise the resolution up to 1024.

The horizontal scrolling is gone so IMHO that’s a good thing. Next thing is we are getting actual content on the screen. In this case it’s a picture but it could just as easily be text. Now lets look at it at at my my resolution of 1440.

Now even with the big picture we are still getting some actual copy. Now just because I’m a little crazy lets look at the same page in the RSS feed at 1024.

I feel there are two important things to take note of, one the advertisements are taking up much less screen real estate, and I can see almost two complete posts without scrolling. Why is this important to people who build and market websites? Hopefully you read the report that came out last week about how little time people spend evaluating a website. (Internet users quick to judge. 16/01/2006. ABC News Online)

“Visual appeal can be assessed within 50 milliseconds, suggesting that web designers have about 50 milliseconds to make a good impression,” the Canadians report in the journal Behaviour & Information Technology.

Associate Professor of psychology Bill von Hippel, from the University of New South Wales, says it takes about 50 milliseconds to read one word, making this a “stunningly remarkable” timeframe in which to process the complex stimuli on a website.

So if you are concerned with a websites financial success, exactly what and how much are you going to show that person in 50 milliseconds in an 800 or 1024 width screen? According to a recent article on blog design trends “big headers and footers are in” as well as “a thin border at the top”. From where I sit this doesn’t make much sense, you want to keep your masthead as small as possible, just enough to put a logo, establish branding, get some primary navigation, and maybe a search box. If you can do it in 50 to 75 pixels excellent, keep it 100 or less you’re still in good shape, approach the 150 pixel height and it maybe time to reign in your web designer, and see if you are on the same page and working towards the same goal. I’ve said it here a few times before, big huge tall banners have always been my problem with the layouts on CSS Zen Garden. Not that designs there aren’t stunningly beautiful, but I think they do more to stroke the ego of the designer on their 20″ apple monitor, than facilitate commerce on a 15″ to 17″ Compaq, Dell, or Gateway.

In Maximizing Profits With Website Design and Layout: Part II, I’ll give you some examples of what I think are design considerations you should think about.

Categories:( website.design, | website.design, | website.layout | website.layout)

This post originally came from Michael Gray who is an SEO Consultant. Be sure not to miss the Thesis Wordpress Theme review.

Maximizing Profits With Website Design and Layout: Part I

1 2 3 4 5 6 7 8

Thesis is a Wordpress Framework Not a Design and Why That Matters for SEO When I mention Thesis a lot of people don’t really...
Can You Get a Website Indexed with No Links and XML Sitemaps? This weekend I was doing a little housekeeping on some...

Related posts brought to you by Yet Another Related Posts Plugin.

28 Free CSS Templates

Michael Gray — Thu, 29 Sep 2005 15:17:22 +0000

Here is a list of 28 free CSS templates for you to copy and use on any website you’d like. You can view the full matrix for the templates in my FREE CSS Template Library. If you use one or more of them a link back to my website or CSS library is not neccesary but would be appreciated.

2 Column Layouts Left Nav

Template 1
Template 2
Template 3
Template 4
Template 5
Template 6

3 Column Layouts Right Hand Side (Blogs)

2 Column Layouts Right Nav

Template 11
Template 12
Template 13
Template 14
Template 15
Template 16

SEO 2 Column Layouts

3 Column Layouts

SEO 3 Column Layouts

2 Column Layouts Liquid

3 Column Layouts Liquid

Template 29

This post originally came from Michael Gray who is an SEO Consultant. Be sure not to miss the Thesis Wordpress Theme review.

28 Free CSS Templates

1 2 3 4 5 6 7 8

Seth Is Wrong On Paid vs Free Journalism I’ve been writing about thinking critically recently and the Malcolm...
Thesis Theme for Wordpress Review I’ll admit that when I first saw the Thesis wordpress...
Thesis is a Wordpress Framework Not a Design and Why That Matters for SEO When I mention Thesis a lot of people don’t really...

Related posts brought to you by Yet Another Related Posts Plugin.

CSS Templates VII

Michael Gray — Wed, 28 Sep 2005 15:19:07 +0000

Here are the last two templates in the series 2 liquid layout templates one with right hand navigation, the other with Left hand Navigation.

Liquid CSS TEMPLATES

This post originally came from Michael Gray who is an SEO Consultant. Be sure not to miss the Thesis Wordpress Theme review.

CSS Templates VII

1 2 3 4 5 6 7 8

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

CSS Templates Vol VI

Michael Gray — Tue, 27 Sep 2005 15:21:14 +0000

Today’s two templates represent the first liquid width templates to be added to the CSS Template Library. I’ve got a love hate relationship with liquid templates, and dealing with browser quirks, well it just isn’t pretty sometimes

Liquid CSS Templates

This post originally came from Michael Gray who is an SEO Consultant. Be sure not to miss the Thesis Wordpress Theme review.

CSS Templates Vol VI

1 2 3 4 5 6 7 8

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

CSS Templates Vol. VI

Michael Gray — Mon, 26 Sep 2005 15:26:48 +0000

Today’s templates are 3 column layouts that are very trendy in the blogosphere. Now unlike some Blog Overlords who don’t want you copying their HTML, I say screw ‘dat, take the code go forth, be fruitful and multiply, use ‘em where ever you like, if you like them be nice and link back to the CSS Template Library. Oh and did I happen to mention they are search engine spider friendly, with all that content right up front … much better than someone else’s templates.

Search Engine Optimized Blog Templates

This post originally came from Michael Gray who is an SEO Consultant. Be sure not to miss the Thesis Wordpress Theme review.

CSS Templates Vol. VI

1 2 3 4 5 6 7 8

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Free CSS Templates Vol. V

Michael Gray — Thu, 22 Sep 2005 15:05:12 +0000

Today’s installment of Free CSS Templates includes more Search Engine Optimized templates this time in the 3 column variety. We’ll probably have a few more fixed width templates before we get into the full screen liquid layout templates.

SEARCH ENGINE OPTIMIZED CSS TEMPLATES

Template 27 (SEO)

Template 28 (SEO)

This post originally came from Michael Gray who is an SEO Consultant. Be sure not to miss the Thesis Wordpress Theme review.

Free CSS Templates Vol. V

1 2 3 4 5 6 7 8

Seth Is Wrong On Paid vs Free Journalism I’ve been writing about thinking critically recently and the Malcolm...
Thesis Theme for Wordpress Review I’ll admit that when I first saw the Thesis wordpress...

Related posts brought to you by Yet Another Related Posts Plugin.

Free CSS Templates Vol. III

Michael Gray — Wed, 14 Sep 2005 19:50:54 +0000

The third batch of free CSS Templates is now up in the CSS Template Library. These are similar to the first batches except they have 3 columns fixed width with optional headers and footers. The next batch are going to be the SEO friendly CSS templates.

3 Column Layouts

Categories:( css | css.templates | free.templates | free.css.templates)

Yes I skipped some numbers on purpose

This post originally came from Michael Gray who is an SEO Consultant. Be sure not to miss the Thesis Wordpress Theme review.

Free CSS Templates Vol. III

1 2 3 4 5 6 7 8

Seth Is Wrong On Paid vs Free Journalism I’ve been writing about thinking critically recently and the Malcolm...

Related posts brought to you by Yet Another Related Posts Plugin.