Je conçois un nouveau site sur lequel je souhaite être le plus convivial possible, rapide, réactif, sémantique et très accessible. Beaucoup de ces choses sont embarrassantes pour moi. Ai-je raté quelque chose? Je veux que le modèle soit parfait.
Démo en direct: 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>
Pas un expert en référencement, mais pour bien démarrer, prenez les méta-mots-clés: fabricant de jeux, constructeur de jeux, html5, créez des jeux, créateur de jeux - et mettez-les dans le contenu visible de manière à ce qu'un humain lisant le site obtienne le idée tout de suite qui était au centre du site. En plus de veiller à ce que les moteurs de recherche puissent voir le contenu, ne faites pas ce que les moteurs de recherche n'aiment pas (par exemple, le spam) - mon expérience a été en grande partie que si les gens l'apprécient, les moteurs de recherche l'apprécieront également. Par exemple, un moteur de recherche ressemblant à des pages à chargement rapide; les humains aussi. Quoi qu'il en soit, je ne suis pas un expert. ce qui signifie que je ne suis pas actuellement payé pour faire du référencement; avoir dans le passé si.