I'm designing a new site which I want to be as SEO friendly as possible, fast and responsive, semantic and very accessible. A lot of these things, embarrassingly are quite new to me. Have I miss applied anything? I want the template to be perfect.
Live demo: http://69.24.73.172/demos/newDemo/
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Welcome to Scirra.com</title>
<meta name="description" content="Construct 2, the HTML5 games creator." />
<meta name="keywords" content="game maker, game builder, html5, create games, games creator" />
<link rel="stylesheet" href="css/default.
css" type="text/css" />
<link rel="stylesheet" href="plugins/coin-slider/coin-slider-styles.
css" type="text/css" />
</head>
<body>
<div class="topBar"></div>
<div class="mainBox">
<header>
<div class="headWrapper">
<div class="s searchWrap">
<input type="text" name="SearchBox" id="SearchBox" tabindex="1" />
<div class="s searchIco"></div>
</div>
<!-- Logo placeholder -->
</div>
<div class="menuWrapper"><nav>
<ul class="mainMenu">
<li><a href="#">Home</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#" class="mainSelected">Construct</a></li>
<li><a href="#">Arcade</a></li>
<li><a href="#">Manual</a></li>
</ul>
<ul class="underMenu">
<li><a href="#">Homepage</a></li>
<li><a href="#" class="underSelected">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="contentWrapper">
<div class="wideCol">
<div id="coin-slider" class="slideShowWrapper">
<a href="#" target="_blank">
<img src="images/screenshot1.jpg" alt="Screenshot" />
<span>
Scirra software allows you to bring your imagination to life
</span>
</a>
<a href="#">
<img src="images/screenshot2.jpg" alt="Screenshot" />
<span>
Export your creations to HTML5 pages
</span>
</a>
<a href="#">
<img src="images/screenshot3.jpg" alt="Screenshot" />
<span>
Another description of some image
</span>
</a>
<a href="#">
<img src="images/screenshot4.jpg" alt="Screenshot" />
<span>
Something motivational to tell people
</span>
</a>
</div>
<div class="newsWrapper">
<h2>Latest from Twitter</h2>
<div id="twitterFeed">
<p>The news on the block is this. Something has happened some news or something. <span class="smallDate">About 6 hours 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="smallDate">About 6 hours ago</span></p>
<p>Shocker! Santa Claus is not real. This is breaking news, we must spread it. <span class="smallDate">About 6 hours ago</span></p>
</div>
</div>
</div>
<div class="thinCol">
<h1>Main Heading</h1>
<p>Some paragraph goes here. It tells you about the picture. Cool! Have you thought about downloading Construct 2? Well you can download it with the link below. This column will expand vertically.</p>
<h3>Help Me!</h3>
<p>This column will keep expanging and expanging. It pads stuff out to make other things look good imo.</p>
<h3>Why Download?</h3>
<p>As well as other features, we also have some other features. Check out our <a href="#">other features</a>. Each of our other features is really cool and there to help everyone suceed.</p>
<a href="#" class="s downloadBox" title="Download Construct 2 Now">
<div class="downloadHead">Download</div>
<div class="downloadSize">24.5 MB</div>
</a>
</div>
<div class="clear"></div>
<h2>This Weeks Spotlight</h2>
<div class="halfColWrapper">
<img src="images/spotlight1.png" class="spotLightImg" alt="Spotlight User" />
<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="halfColWrapper r">
<img src="images/spotlight2.png" class="spotLightImg" alt="Spotlight Game" />
<p>Killer Bears is a scary ass game from JimmyJones. How many bears can you escape from? <a class="moreInfoLink" href="#">Learn More</a></p>
</div>
<div class="clear"></div>
</div>
</div><div class="mainEnder"></div>
<footer>
<div class="footerWrapper">
<div class="footerBox">
<div class="footerItem">
<h4>Community</h4>
<ul>
<li><a href="#">The Blog</a></li>
<li><a href="#">Community Forum</a></li>
<li><a href="#">RSS Feed</a></li>
<li>
<a class="s footIco facebook" href="http://www.facebook.com/ScirraOfficial" target="_blank" title="Visit Scirra on Facebook"></a>
<a class="s footIco twitter" href="http://twitter.com/Scirra" target="_blank" title="Follow Scirra on Twitter"></a>
<a class="s footIco youtube" href="http://www.youtube.com/user/ScirraVideos" target="_blank" title="Visit Scirra on Youtube"></a>
</li>
</ul>
</div>
<div class="footerItem">
<h4>About Us</h4>
<ul>
<li><a href="#">Contact Information</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms and Conditions</a></li>
</ul>
</div>
<div class="footerItem">
<h4>Want to Help?</h4>
<p>You can contribute to the community <a href="#">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"><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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="plugins/coin-slider/coin-slider.min.js"></script>
<script type="text/javascript" src="js/homepage.js"></script>
</body>
</html>
