Paul is right on the tagline bit – you’ve got paragraphs around non-paragraph elements, fixed height containers with dynamic fonts in them (shtups your whole layout on large font machines), Looks like a few more DIV than should be necessary, , classes on things that shouldn’t probably have classes (though much of that is for the broken/bloated scripting), jquery bloat for christmas only knows what, that outdated cufon nonsense that we can finally STOP wasting time on thanks to @font-face now being cross-browser, comment placement that could be tripping rendering errors (yes, COMMENTS), and of course since you seem to have some bits of YUI in there too, you’ve doubled your bloat.
Much less sending the same style to screen and print (with no projection or TV?!?) declaring a robots that’s identical to the defaults (at which point dont’ waste time on it), sending a type with the .ico while omitting a type on the .png (that’s actually backwards), or the completely pointless/redundant title attributes on the menu – title=“link”? Oh yeah, that’s real useful… Oh, and might help if your indentation made the least bit of sense. I could go on for quite a bit on this… and that’s without even talking about a fluid layout that breaks below 1024 (at which point why bother?)
I mean, you’re at half a megabyte for three content images, some tileable backgrounds, and 1.3k of plaintext?
So first order of business? Cleaning up the HTML – CSS is only as good as the HTML it’s applied to. If I was writing that I’d gut the markup down to this, axing all the javascript for nothing nonsense:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<link
rel="shortcut icon"
href="favicon.ico"
/>
<link
rel="apple-touch-icon"
type="image/png"
href="apple-touch-icon.png"
/>
<title>
Mother Hubbard's Cupboard
</title>
</head><body>
<div id="heightWrapper">
<ul id="socialLinks">
<li>
<a href="#" title="MHC for Your Phone">
<img src="http://www.sitepoint.com/forums/images/mobileIcon.png" alt="Mobile Phone" />
</a>
</li><li>
<a href="#" title="MHC on Facebook">
<img src="http://www.sitepoint.com/forums/images/facebookIcon.png" alt="FaceBook" />
</a>
</li>
</ul>
<h1>
<a href="/">
Mother Hubbard's Cupboard<br />
<small>
feeding wilmington's
<span>hungry since 2010</span>
</small>
</a>
</h1>
<div id="topDonate">
<a href="#"><span>Please Donate and Help the Hungry Today!</span></a>
</div>
<ul id="mainMenu">
<li><a href="/">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#" class="current">Donate</a></li>
<li><a href="#">Volunteer</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Contact</a></li>
</ul>
<hr />
<div id="callToAction"><div class="widthWrapper">
<div class="ctaText">
<h2>Helping Those in Need</h2>
<p>
Serving Wilmington’s hungry by distributing emergency food supplies to those in need without regard to race or religion, and always mindful of the dignity of those we assist.
</p>
<a href="#" class="readMore">
Why our aid is so critical...
</a>
<!-- .ctaText --></div>
<!-- .widthWrapper, #callToAction --></div></div>
<hr />
<div id="content" class="widthWrapper">
<h2>
News, Time-Critical Information, or Points of Emphasis
<small><span>-</span> March 1, 2011</small>
</h2>
<p>
Here you will put news items (i.e. announcing a new fundraising drive, a new initiative, an expansion in services, a new major donor, whatever), or time- or mission-critical information. The date above is optional for inclusion.
</p><p>
Duis aute irure dolor in reprehenderit in voluptate. <a href="#">Link to more information</a>.
</p>
<hr />
<h2>
News, Time-Critical Information, or Points of Emphasis
<small><span>-</span> February 10, 2011</small>
</h2>
<p>
Here you will put news items (i.e. announcing a new fundraising drive, a new initiative, an expansion in services, a new major donor, whatever), or time- or mission-critical information. The date above is optional for inclusion.
</p><p>
Duis aute irure dolor in reprehenderit in voluptate. <a href="#">Link to more information</a>.
</p>
<hr />
<h2>Add more sections as desired.</h2>
<p>
Duis aute irure dolor in reprehenderit in voluptate. <a href="#">Link to more information</a>.
</p>
<hr />
<!-- #content --></div>
<!-- #heightWrapper --></div>
<div id="footer">
2011 ©
<a href="index.html">mother hubbard's cupboard</a>
<ul>
<li><a href="design.html">design info</a></li>
<li class="last">valid html and css</li>
</ul>
<!-- #footer --></div>
</body></html>
Basically throwing 1k of it away (excuse the XHTML, it’s what I do)
Gimme a few minutes I’ll bash out the CSS to go with that and toss it on my server as a demo… probably neuter down the images too as there’s no reason for that to be using more than 48-50k of images.
