6
\$\begingroup\$

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.

Working URL

/* 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 &copy; 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>

Improve this question
\$\endgroup\$

2 Answers 2

Reset to default
5
\$\begingroup\$

My first point is that you have no :focus style for your links. If you navigate the page with the keyboard that would really help a lot to see where you are. Take this rule for example:

h3 a:hover
{
    color: #1B676B;
    text-decoration:none;
}

Just add:

h3 a:hover, h3 a:focus
{
    color: #1B676B;
    text-decoration:none;
}

Another thing that is nice to do for people navigating with the keyboard is to place a hidden link with a text similar to "Skip to content" or something like that close to the top. This link should be a shortcut to the content and only show on :focus. The reason for that is that it takes a lot of tabbing to get through the menu otherwise.

Another tip that doesn't have to do with this question is that vertically aligning your content often creates a more resful reading experience. Indenting the paragraphs make it look more chaotic then it would be they were properly aligned.

Improve this answer
\$\endgroup\$
2
  • \$\begingroup\$ If it is decided to add a skip link, do not use display: none;, as that would hide it from screen readers and prevent tabbing to it. It is necessary to use another method such as offscreen positioning. \$\endgroup\$
    – PleaseStand
    Mar 6, 2011 at 8:03
  • \$\begingroup\$ @idealmachine, it is also important to make the skip links visible when focused, as they may also be used by sighted keyboard-only users. \$\endgroup\$
    – zzzzBov
    Mar 10, 2011 at 17:38
5
\$\begingroup\$

I had a really quick look, and here are some suggestions that weren’t already mentioned in other answers:

  1. I see you’re using a favicon: 

    <link rel="shortcut icon" href="images/favicon.ico" />

    Did you know that shortcut is not a valid link relation? The good news is: you don’t need it at all. Just move the favicon.ico file to the root of the domain, and remove this clutter from the HTML. For more info, see the link I just gave you.

  2. For the apple-touch-icon you could do the same: name it apple-touch-icon.png, place it in the root, and remove the reference from the HTML. For more info, and/or if you want to support multiple resolution icons, have a look at everything you ever wanted to know about touch icons (but were afraid to ask).

  3. What’s inside the js/googleAnalytics.js file? I assume it (only) contains the GA snippet.

    Here’s an optimized version of the asynchronous Google Analytics snippet (as featured in the HTML5 Boilerplate). Please use that one if you aren’t doing so already.

    Anyhow, I’d recommend not using a separate file for this. Since you have other JavaScript files in the document, I’d suggest to just append the GA snippet to one of those files. I know Google recommends placing the GA snippet in the <head>, but I’d actually recommend placing it near the closing </body> tag, along with other scripts. For more information, check out that link.

  4. Concatenate and minify all CSS files together, to reduce the total number of HTTP requests. Do the same for JavaScript files (except maybe jQuery, which you’re loading from Google’s CDN).

  5. Why are you using character entities like &copy; when you declare the character set as UTF-8? Just save yourself the trouble and use ©.

  6. What’s with the font-family: Arial, Helvetica; in the CSS? I don’t know of any system where the Helvetica font is available but not Arial.

Improve this answer
\$\endgroup\$
2
  • \$\begingroup\$ Great post thanks. In regards to point 3, I favour having the GA code in the head as it catches people who visit the page and exit before footer code has had a chance to run. \$\endgroup\$
    – Tom Gullen
    Mar 25, 2011 at 13:15
  • \$\begingroup\$ @Tom: Personally I would prefer not to count that as a page view, but again, it’s your decision :) \$\endgroup\$
    – Mathias Bynens
    Mar 28, 2011 at 11:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.