I've been spending a long time working on this template, I'd like to know if its CSS/HTML is good, and mainly if it is speedy to load, accessible, semantic and SEO friendly.
I've tested it in IE7+, Chrome, FF and Safari and am happy with the output in each.
/* Main Layout Elements */
body{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, Verdana;
background: #EAFDE6 url(../images/background.png) repeat-x;
color:#444;
}
label{
cursor: pointer;
}
p {
margin: 0 0 20px 8px;
position:relative;
}
.news-wrapper p
{
margin: 0 0 10px 8px;
}
a{
color: #1B676B;
}
.time-ago{
float:right;
color: #1B676B;
}
.top-bar{
position:absolute;
top:0;
left:0;
background-color: #519548;
height: 30px;
border-bottom:2px solid #3E7236;
width: 100%;
z-index:1;
}
h1{
margin:0;
margin-bottom:5px;
font-size:35px;
color: #519548;
font-weight:normal;
}
h2{
margin:0;
margin-bottom:5px;
font-size:35px;
color: #519548;
font-weight:normal;
}
h3{
margin:0 0 5px 0;
font-size:22px;
color: #519548;
font-weight:normal;
}
h3 a
{
color: #519548;
text-decoration:underline;
}
h3 a:hover
{
color: #1B676B;
text-decoration:none;
}
h4{
text-shadow: black 0.1em 0.1em 0.2em;
text-transform: uppercase;
font-size: 17px;
font-weight: bold;
margin-bottom: 3px;
margin-top: 30px;
}
a.ralign{
text-align:right;
display: block;
}
.clear{
clear:both;
}
/* Sprite definitions and positioning */
.s{
background-image:url(../images/sprites.png);
background-repeat:no-repeat;
}
.facebook{
background-position: 0 0;
}
.twitter{
background-position: 0 -40px;
}
.slideshow-wrapper{
height:261px;
overflow:hidden;
-moz-box-shadow: 0px 0px 5px #555;
-webkit-box-shadow: 0px 0px 5px #555;
box-shadow: 0px 0px 5px #555;
}
.youtube{
background-position: 0 -80px;
}
/* Main Wrappers */
.content-wrapper{
width:750px;
margin: 0 auto;
}
.head-wrapper{
height: 120px;
padding-left:11px;
}
.footer-wrapper{
position:relative;
z-index:1;
top: -35px;
height:155px;
background-image: url(../images/background-footer.png);
background-repeat:repeat-x;
margin-bottom: -35px;
overflow: hidden;
}
.main-wrapper{
margin: 0 auto;
width: 792px;
background-image: url(../images/mainbox-background.png);
z-index:2;
position:relative;
padding: 0 0 0px 0;
}
.main-end{
width: 786px;
background-image: url(../images/mainbox-background-bottom.png);
background-color:transparent;
height:32px;
position:relative;
z-index:2;
margin: 0 auto;
padding:0;
}
/* Footer */
.footer-inner-wrapper
{
color: white;
font-size: 13px;
margin: 0 auto;
width: 700px;
margin-top:5px;
}
.footer-item{
float: left;
width: 33%;
}
.footer-item ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.footer-item p{
padding: 0;
margin: 0;
}
.footer-item a{
font-size:13px;
color:white;
}
.footer-item a:hover{
color: #ffaa00;
}
.copyright
{
color: #9FCAD5;
text-align:center;
background-color: #2A525A;
background-image: url(../images/copyright-background.png);
font-size: 14px;
line-height:35px;
height:35px;
text-shadow: 0px 1px 1px #2A525A;
}
.social-icon{
height: 40px;
width: 32px;
float: left;
margin-top: 7px;
position:relative;
left: -4px;
display:block;
}
/* Search */
.search-wrapper{
background-position: -46px -70px;
width: 259px;
height:62px;
position:absolute;
right: -50px;
top: 0;
text-align:center;
line-height:50px;
}
.search-wrapper input{
height:24px;
padding-left:15px;
color: #c0c0c0;
line-height:24px;
padding-right:25px;
border: 0;
position:absolute;
top: 15px;
left:30px;
}
.search-icon{
height: 37px;
width: 36px;
background-position: -40px 0;
position:absolute;
left:205px;
top:13px;
}
/* Menus */
.menu-main{
height:38px;
background-color: #88C425;
font-size: 15px;
font-weight: bold;
line-height:38px;
margin:0;
padding: 0;
padding-left: 20px;
}
.menu-wrapper{
width: 770px;
padding-left:11px;
margin-bottom:10px;
}
.menu-main li{
margin: 0;
list-style-type: none;
float:left;
}
.menu-main a{
text-shadow: #114400 1px 1px 1px;
display: block;
padding-left: 20px;
padding-right: 20px;
color:white;
text-decoration: none;
}
.menu-main a:hover{
background-color:#3E7236;
}
a.main-item-selected{
background-color:#519548;
}
.main-item-selected a:hover{
background-color:#519548 !important; /* Stupid firefox bug */
}
.mainSelLPan{
float:left;
width:11px;
height:33px;
background-position: -105px 0;
margin-left: -11px;
}
.mainSelPos{
position:relative;
top: 5px;
}
.mainSelRPan{
float:left;
width:11px;
height:33px;
background-repeat:no-repeat;
background-position: -116px 0;
margin-right: -11px;
}
.mainSelTxt{
float:left;
background-color:#519548;
height:33px;
line-height:33px;
}
.sub-menu{
height: 33px;
background-color: #519548;
font-size: 13px;
line-height:33px;
margin: 0;
padding: 0;
padding-left:20px;
}
.sub-menu li{
margin: 0;
list-style-type: none;
float:left;
}
.sub-menu a{
display: block;
padding-left: 20px;
padding-right: 20px;
color:white;
text-decoration: none;
}
a.sub-item-selected{
background-color:#3E7236;
color: white !important;
}
.sub-menu a:hover{
background-color:#3E7236;
}
.underSelLPan{
float:left;
width:11px;
height:33px;
background-position: -78px 0;
margin-left: -11px;
}
.underSelPos{
position:relative;
top: 6px;
}
.underSelRPan{
float:left;
width:11px;
height:23px;
background-repeat:no-repeat;
background-position: -91px 0;
margin-right: -11px;
}
.underSelTxt{
float:left;
background-color:#3E7236;
height:22px;
line-height:22px;
}
/* Download box link */
.download{
display: block;
background-position: -134px 0;
width: 215px;
height: 55px;
margin: 0 auto;
text-align:right;
color:white;
text-transform: uppercase;
text-decoration: none;
}
.download-title{
font-weight:bold;
font-size:17px;
padding-top:14px;
padding-right: 15px;
}
.download-size{
padding-right: 15px;
font-size:14px;
margin-top: -3px;
}
/* Other */
.moreInfoLink{
display:block;
color:white;
font-size:12px;
font-weight:bold;
text-decoration: none;
float:right;
height:17px;
background-color:#1B676B;
text-align:center;
padding:0 12px 0 12px;
line-height:17px;
min-width:100px;
-moz-border-radius: 10px;
border-radius: 10px;
position:absolute;
bottom: 0;
right: 0;
}
.moreInfoLink:hover{
text-decoration:underline;
background-color: #23868B;
}
.column-thin{
float:left;
width:270px;
}
.column-wide{
float:left;
margin-right:10px;
width:470px;
}
.news-wrapper{
position:relative;
top: -25px;
margin-bottom:-25px;
}
.column-half{
float:left;
width:48%;
position:relative;
}
.r{
float:right;
}
.spotlight{
float:left;
margin-right:15px;
width: 90px;
height: 90px;
position:relative;
}
.spotlight img{
position:absolute;
}
.slideshow-wrapper img{
width:470px;
height: 261px;
border: 0;
}
.slideshow-wrapper a{
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Make Games with Scirra Software</title>
<meta name="description" content="Game making with Construct." />
<meta name="keywords" content="game maker, game builder, html5, create games, games creator" />
<link rel="stylesheet" href="css/default.css" />
<link rel="stylesheet" href="plugins/coin-slider/coin-slider-styles.css" />
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/favicon_apple.png" />
<script src="js/googleAnalytics.js"></script>
</head>
<body>
<div class="top-bar"></div>
<div class="main-wrapper">
<header>
<div class="head-wrapper">
<div class="s search-wrapper">
<input type="text" name="SearchBox" id="SearchBox" tabindex="1" />
<div class="s search-icon" title="Search Scirra"></div>
</div>
<!-- Logo placeholder -->
</div>
<div class="menu-wrapper">
<nav>
<ul class="menu-main">
<li><a href="#" class="main-item-selected">Home</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Construct</a></li>
<li><a href="#">Arcade</a></li>
<li><a href="#">Manual</a></li>
</ul>
<ul class="sub-menu">
<li><a href="#">Homepage</a></li>
<li><a href="#" class="sub-item-selected">Construct</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Community Forum</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
<div class="content-wrapper">
<div class="column-wide">
<div id="coin-slider" class="slideshow-wrapper">
<a href="#" title="Features for making your games" target="_blank">
<img src="images/screenshot1.jpg" alt="Features to help you make your games" />
<span>
Packed with hundreds of exciting features
</span>
</a>
<a href="#" title="Functional and intuitive games editor">
<img src="images/screenshot2.jpg" alt="Games editing has never been easier" />
<span>
Construct's intuitive editor means it's never been easier to create
</span>
</a>
<a href="#" title="High performance optimised games">
<img src="images/screenshot3.jpg" alt="Screenshot" alt="Optimised for performance" />
<span>
Squeeze every drop of performance from your platforms
</span>
</a>
<a href="#" title="Professional and stunning game making">
<img src="images/screenshot4.jpg" alt="Make stunning professionally finished games" />
<span>
Design stunning and professionally finished games
</span>
</a>
</div>
<div class="news-wrapper">
<h2>Latest from Scirra</h2>
<section>
<h3>New from our <a href="http://twitter.com/Scirra" title="Construct game making on Twitter">Twitter</a> feed</h3>
<p>The news on the block is this. Something has happened some news or something. <span class="time-ago">About 1 hour ago</span></p>
<p>Another thing has happened lets tell the world some news or something. Lots to think about. Lots to do.<span class="time-ago">About 6 hours ago</span></p>
</section>
<section>
<h3>Scirra's <a href="#" title="Developement blog">Developer Blog</a></h3>
<p>Tom describes why he thinks Adobe Flash is on the out, and HTML5 is going to take over the web.<span class="time-ago">About 1 day ago</span></p>
</section>
</div>
</div>
<div class="column-thin">
<h1>Make Games</h1>
<p>Game making has never been easier with <a href="#" title="Make games with Construct">Construct</a>. Design unique worlds where only your imagination is the limit. Want to get more involved? Visit our <a href="#" title="Plugins for Construct">plugin library</a>, and throw yourself into our active <a href="#" title="Visit the helpful Scirra community">community</a></p>
<h3>Export in Multiple Formats</h3>
<p>The <a href="#" title="Alternative to Flash">HTML5 Exporter</a> allows you to export your games to a web page, a truly multi platform solution. With an <a href="#" "Construct executable exporter">EXE Exporter</a> and <a href="#" title="Construct mobile phone exporter">Mobile Exporters</a> planned you will soon be able to save your games for the mobile and desktop platforms. <a class="moreInfoLink" href="#" title="Exporting your games">Learn More</a></p>
<h3>Packed with Features</h3>
<p>Hundreds of exciting <a href="#" title="Features of game making in Construct">features</a>, designed to aid you in every way as you make your games and develop your projects. Get involved today.</p>
<a href="#" class="s download" title="Download Construct 2 Now">
<div class="download-title">Download</div>
<div class="download-size">24.5 MB</div>
</a>
</div>
<div class="clear"></div>
<section>
<h2>This Weeks Spotlight</h2>
<div class="column-half">
<div class="spotlight"><img src="images/spotlight1.png" alt="Spotlight member" /><img src="images/spotlight-mask.png" alt="Mask" /></div>
<p>Our spotlight member this week is Pooh-Bah. He writes good stuff. Read it. <a class="moreInfoLink" href="#">Learn More</a></p>
</div>
<div class="column-half r">
<div class="spotlight"><img src="images/spotlight2.png" alt="Spotlight game" /><img src="images/spotlight-mask.png" alt="Mask" /></div>
<p>Killer Bears is a scary ass game from JimmyJones. Escape is mandatory! <a class="moreInfoLink" href="#">Learn More</a></p>
</div>
</section>
<div class="clear"></div>
</div>
</div>
<div class="main-end"></div>
<footer>
<div class="footer-wrapper">
<div class="footer-inner-wrapper">
<div class="footer-item">
<h4>Community</h4>
<ul>
<li><a href="#" title="Scirra developers blog">The Blog</a></li>
<li><a href="#" title="Game making community">Community Forum</a></li>
<li><a href="#" title="Scirra's available RSS feeds">RSS Feeds</a></li>
<li>
<a class="s social-icon facebook" href="http://www.facebook.com/ScirraOfficial" target="_blank" title="Visit Scirra on Facebook"></a>
<a class="s social-icon twitter" href="http://twitter.com/Scirra" target="_blank" title="Follow Scirra on Twitter"></a>
<a class="s social-icon youtube" href="http://www.youtube.com/user/ScirraVideos" target="_blank" title="Visit Scirra on Youtube"></a>
</li>
</ul>
</div>
<div class="footer-item">
<h4>About Us</h4>
<ul>
<li><a href="#" title="Contact Scirra">Contact Information</a></li>
<li><a href="#" title="Advertise on Scirra">Advertising</a></li>
<li><a href="#" title="Scirra's History">History</a></li>
<li><a href="#" title="Scirra's Privacy Policies">Privacy Policy</a></li>
<li><a href="#" title="Scirra's Terms and Conditions">Terms and Conditions</a></li>
</ul>
</div>
<div class="footer-item">
<h4>Want to Help?</h4>
<p>You can contribute to the community <a href="#" title="Ways to contribute">in lots of ways</a>. We have a large active friendly community, and there are lots of ways to join in!</p>
<a href="#" class="ralign" title="Involve yourself in the game making community"><strong>Learn More</strong></a>
</div>
<div class="clear"></div>
</div>
</div>
<div class="copyright">
Copyright © 2011 Scirra.com. All rights reserved.
</div>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="js/common.js"></script>
<script src="plugins/coin-slider/coin-slider.min.js"></script>
<script src="js/homepage.js"></script>
</body>
</html>