WTB: Basic seo-friendly design with css

I'm looking to buy a basic site design, including graphics and coding. It needs to use css and be seo-friendly. Any idea what I can expect to pay (bids welcome)?

 

It depends, really. What type of design are you looking for? Is it for a blog, a tech site, bank, online news site?

Also be careful of the quality of the code and images involved when making your purchase. You're going to want to see some of the code (to help determine the quality of the code - this should be representative of the entire work, not just a tiny snippet) before you make your purchase.

You'll find that there are a lot of people who can create wonderful designs, but can't code it properly even if their lives depended on it. Same thing for people who can code such a design - they can code a .psd file, but they can't create one.

So what you're going to want to do is find someone to create a design (uncoded) for you, then find someone to code it. If you need help finding a coder, don't hesitate to PM me for advice.

 

Thanks a lot for sharing Dan. It's for my consulting site, for which I'd like to use wordpress as my CMS (I'm thinking that's relevant?...).

Anyways, as to the code and graphics, I'd like to keep things simple and work with a single person. How should I evaluate the quality of the coding?

Thanks

 

You're going to want to look for unnecessary DIVs, SPANS and class/ID attributes. Those are a dead giveaway that a person either doesn't know what they're doing (can't hand-code) or is using a WYSIWYTYG (What You See Is What You Think You're Getting) editor.

Invalid code is also another dead give-away. For example:

<a href="/contact/"><div class=imagereplacelink" id="link3">Contact Us</div></a>

Code (markup):

Is not only invalid (you cannot have a block-level element inside an inline one) but also perfectly illustrates the examples of needless DIVs and class/ID attributes rather nicely.

Also look for presentational HTML markup. <center> tags, align="" attributes, and the like. If they're present, then you're either dealing with a novice or a person with his head stuck back in 1995 (among a few other places I probably shouldn't mention).

Make sure that the code snippets you do preview work cross-browser on various screen resolutions, browser widths, font metric sizings (I mean the dpi settings, not font sizes themselves), and on various operating systems. At the very least, they should render properly on IE 6, IE 7, FireFox 1.0 (this is mainly for the benefit of Linux users, who may not even have FF2.0 on their latest Linux distro), Opera 9, Konqueror 3, and Safari 2. IE 5x uses a broken box model, and with some work, can be made to render close enough "for government work" in IE 5.5. Obviously I consider IE 5.01 (Win) and IE (Mac) to be lost causes. Don't forget to test in Netscape 8 either, as a few people will still be using this browser.

And I haven't even gotten to the stylesheet yet. You're going to want to make sure the stylesheet is formatted properly, using carriage returns and tabs to illustrate and emphasize the relationship between the various style rules and the sections of the HTML document they relate to. Comments aren't necessary for large sections, such as:

/* NAVIGATION SECTION STYLE RULES */

Code (markup):

I'm sure everyone can easily figure that out by giving the menu an ID of "menu" in the HTML, and referencing that Id in the stylesheet. I know I can. (Also avoid coders that make the same mistake in their HTML, such as this horrid abomination):

<!-- NAVIGATION SECTION HTML CODE -->

Code (markup):

Why even bother? It's pointless, wastes bytes in the document, and when used as part of a template, will just mean more wasted bytes and unnecessarily longer download times.

Now, if you want an example of a well-formed Web page, I'll be more than happy to give you one. In fact, I'll post it here, but the images you'll have to provide. Also, this only shows an example layout for educational purposes. Unless you like yellow hover states for menu links, I doubt you'll find it useful as is (also the styles should be external in all production work, not embedded as I have here). It uses HTML 4.01 Strict, but it works equally well with XHTML 1.0 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Untitled Document</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--

* {
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%;
}

body {
	background: #FFF;
	color: #000;
}

#container {
	height: 100%;
	min-height: 100%;
	margin-bottom: -2em;
}

html>body #container {
	height: auto; /* for modern browsers as IE 5 and 6 treats height as min-height anyway */
}

	.skipLink {
		position: absolute;
		left: -999em;
	}
	
	#header {
		background: #00F;
		color: #FFF;
		height: 80px;
		overflow: hidden;
		position: relative;
		width: 100%;
	}	
		h1, h1 span {
			background: url('/images/header.png') no-repeat; /* this is an image that will replace the default header text */
			height: 80px; /* just an example height */
			width: 618px; /* just an example width */
		}
			h1 span {
				display: block;
				margin-bottom: -80px; /* must be the same as the height of the image */
				position: relative;
				z-index: 1;
			}
			
		#header p {
			position: absolute;
				top: 2.25em;
			text-indent: 1.5em;
		}
	
	#main {
		float: left;
		margin-right: -200px; /* equal to the width of the #sidebar DIV container */
		width: 100%; /* DO NOT CHANGE OR REMOVE */
	}
		#menu {
			float: left;
			list-style: none;
			width: 7em;
		}
			#menu li {
				display: inline;
			}
			
			#menu a {
				background: #F00;
				color: #FFF;
				display: block;
				text-decoration: none;
				text-indent: 0.5em;
				width: 100%;
			}
			
			#menu a:hover {
				background: #FF0;
				color: #000;
			}
		
		#content {
			margin: 0 200px 0 7em; /* right margin is equal to the width of the sidebar, left margin is equal to the width of the menu */
		}
			#content h2 {
				text-align: center;
			}
			
			#content .section {
				padding: 0.5em 0;
			}
				#content h3 {
					padding-left: 0.5em;
				}
				
				#content p {
					padding: 0.25em 0.5em;
				}
	
	#sidebar {
		background: #999;
		color: #FFF;
		float: right;
		width: 200px;
	}
		#sidebar h2, #sidebar h3 {
			text-align: center;
		}
		
		#sidebar .section {
			padding: 0 0.25em;
		}
		
		#sidebar p {
			padding: 0 0.5em;
		}
	
	#clearFooter { /* needed to make room for the footer */
		clear: both;
		height: 2em;
	}

#footer {
	background: #FCF;
	clear: both;
	color: #333;
	height: 2em;
	position: relative;
}	
	#footer p {
		padding-top: 0.45em;
		text-align: center;
	}

-->
</style>
<!--[if lt IE 7]>
<style type="text/css" media="screen">

/* THE FOLLOWING ARE REQUIRED TO FIX THE INFAMOUS 3 PIXEL JOG */
	#menu {
		margin-right: -3px;
	}
	
	#content {
		height: 1%; /* IE 5x and 6 treats height as min-height, so this goes here; also fixes a layout bug in legacy IE versions */
		margin-left: -3px;
	}
	
</style>
<![endif]-->
</head>
<body>
<div id="container">
	<div id="header">
		<h1><span></span>Level 1 Header</h1>
		<p>
			Tag Line
		</p>
	</div>
	<div id="main">
		<strong class="skipLink">Main Menu <a href="#content">(Skip to Content)</a></strong>
		<ul id="menu">
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
		</ul>
		<div id="content">
			<h2>Page Title</h2>
			<div class="section">
				<h3>Section Header</h3>
				<p>Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum...</p>
			</div>
			<div class="section">
				<h3>Section Header</h3>
				<p>Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum...</p>
			</div>
		</div>
	</div>
	<div id="sidebar">
		<h2>Sidebar Title</h2>
		<div class="section">
			<h3>Section Header</h3>
			<p>Lorem ipsum...</p>
			<p>Lorem ipsum...</p>
			<p>Lorem ipsum...</p>
		</div>
		<div class="section">
			<h3>Section Header</h3>
			<p>Lorem ipsum...</p>
			<p>Lorem ipsum...</p>
			<p>Lorem ipsum...</p>
		</div>
	</div>
	<div id="clearFooter"></div>
</div>
<div id="footer">
	<p>
		Copyright &copy; 2006, The Monster Under the Bed. All Rights To Scare
		Unsuspecting Children Reserved.
	</p>
</div>
</body>
</html>

HTML:

 

I believe that the reason to 'bother' is to make it easier for people with less coding experience to find that section of the template and fill in information. When multiple people work on the project, or one coder is providing a template to a layman, and is not sure who will be inserting the text, or how, that tag is used to make it easier to make sure that the text goes in the right spot.

If you disagree with using it for this reason, why in particular, other than the obvious increase of file size?

 

Because I prefer to use semantic markup. Rather than calling a menu "style34" I'd just call it what it is - a menu. Also, using minimal markup will help reduce the time it takes for alayperson to find the areas they need to add code to.

 

like naming a table cell style td.content and having the tag class="content" for example? That's a practice I try to keep to myself. I even name my PHP includes that way. I try to use simpler code to achieve the same result when possible myself.

However, I personally find that using a visible comment usually helps someone find the content area more easily if they are using a text editor and view my code. So while I try to keep my code small, I do include at least a little bit of 'dummy text' which a person receiving the template can remove rather easily if they don't want it.

To find it otherwise, they have to know the exact name of the class they're searching for.

I also tend to use use highly verbose commenting to explain what I'm doing in C++ code as well, in case another programmer inherits my code.

 

C++ is a whole different animal. All that stuff gets compiled and won't even be executed at run time anyway. Web pages however, will need to be downloaded before they can even be rendered on a screen. Removing such comments and putting them in a separate section (password protected of course) of your site (I like "docs" myself) can help a lot.

 

Well if I was writing up a large amount of comments about why certain code worked certain ways and why not to change certain things to others, I would put that in a doc area. However, when the comment is specifically to help someone put information in the template, whether coder or a non-coder who is assigned the job of putting text based content in the template, I really don't see the problem with a few extra 1 byte characters per page.

Part of my coding philosophy for my pages is "I may not be the only one to code on this, and even if I am, I might leave that page alone for a few months. So I'd better make sure the next coder (potentially myself) is able to follow what I was doing here."

 

To be clear, I'm not saying -you- should suddenly start using comment place holders in your code, but I'm not entirely sure why you think that someone should avoid a coder that uses such a comment.

 

For situations like that, I'd just create a template.html file, with the comments added in as necessary, and then include instructions to remove the comments from the template (after making a copy of it) file before changing or adding anything.

 

So having the comments in there is not necessarily a deathly mistake that should cause a client to avoid the coder?