Demo of advertisment website

Question

A fully functional demo URL: http://69.24.73.172/demos/index.html

Note that in FireFox there is a small horizontal scrollbar bug which I have fixed at home.

HTML:

<!DOCTYPE html>
<html>  

<head>    
    <meta charset="UTF-8" />    
    <title>Welcome to Scirra.com</title>    
    <meta name="description" content="Construct 2, the HTML5 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" />    
    <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>    
</head>  

<body>   

<div class="topBar"></div>    
<div class="mainBox">    
    <div class="headWrapper">   
        <div class="searchWrapper">    
            <div class="searchBox">    
                <input type="text" id="SearchBox" />    
                <div class="s searchIco"></div>    
            </div>    
        </div>      
    </div>  


    <div class="topMenu">    
        <a href="#" class="topSelWrapper">Home</a>    
        <a href="#" class="topNormal">Forum</a>    
        <a href="#" class="topNormal">Contruct</a>    
        <a href="#" class="topNormal">Arcade</a>    
        <a href="#" class="topNormal">Manual</a>    
        <a href="#" class="topNormal">Support</a>    
        <a href="#" class="topNormal">Contact</a>    
    </div>

    <div class="subMenu">    
        <a href="#" class="subSelWrapper">Homepage</a>      
        <a href="#" class="subNormal">Construct</a>    
        <a href="#" class="subNormal">Products</a>    
        <a href="#" class="subNormal">Community Forum</a>    
        <a href="#" class="subNormal">Contact Us</a>    
    </div>



    <div class="contentWrapper">    
        <div class="wideCol">    
            <div id='coin-slider' class="slideShowWrapper">    
                <a href="#" target="_blank">    
                    <img src='images/screenshot1.jpg' >    
                    <span>    
                        Scirra software allows you to bring your imagination to life    
                    </span>    
                </a>    
                <a href="#">    
                    <img src='images/screenshot2.jpg' >    
                    <span>    
                        Export your creations to HTML5 pages    
                    </span>    
                </a>        
                <a href="#">    
                    <img src='images/screenshot3.jpg' >    
                    <span>    
                        Another description of some image    
                    </span>    
                </a>    
                <a href="#">    
                    <img src='images/screenshot4.jpg' >    
                    <span>    
                        Something motivational to tell people    
                    </span>    
                </a>    
            </div>      
            <div class="newsWrapper">    
                <h1>Latest from Twitter</h1>    
                <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>    
            <h2>Help Me!</h2>    
            <p>This column will keep expanging and expanging.  It pads stuff out to make other things look good imo.</p>    
            <h2>Why Download?</h2>    
            <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">    
                <div class="downloadHead">Download</div>    
                <div class="downloadSize">24.5 MB</div>    
            </a>            
        </div>    
        <div class="clear"></div>      

        <h1>This Weeks Spotlight</h1>       
        <div class="halfColWrapper">    
            <img src="images/spotlight1.png" class="spotLightImg" />    
            <p>Our spotlight member this week is Pooh-Bah.  He writes good stuff.  Read it.</p>    
            <a class="moreInfoLink" href="#">Learn More</a>    
        </div>    
        <div class="halfColSpacer">&nbsp;</div>    
        <div class="halfColWrapper">    
            <img src="images/spotlight2.png" class="spotLightImg" />    
            <p>Killer Bears is a scary ass game from JimmyJones.  How many bears can you escape from?</p>    
            <a class="moreInfoLink" href="#">Learn More</a>    
        </div>    
        <div class="clear"></div>    
    </div>    
</div>       

<div class="footerWrapper">    
    <div class="footerBox">     
        <div class="footerItem">    
            <h3>Community</h3>    
            <a href="#">The Blog</a><br />    
            <a href="#">Community Forum</a><br />    
            <a href="#">RSS Feed</a><br />    
            <a class="s footIco facebook" href="http://www.facebook.com/ScirraOfficial" target="_blank"></a>    
            <a class="s footIco twitter" href="http://twitter.com/Scirra" target="_blank"></a>    
            <a class="s footIco youtube" href="http://www.youtube.com/user/ScirraVideos" target="_blank"></a>    
        </div>    
        <div class="footerItem">    
            <h3>About Us</h3>    
            <a href="#">Contact Information</a><br />    
            <a href="#">Advertising</a><br />    
            <a href="#">History</a><br />    
            <a href="#">Privacy Policy</a><br />    
            <a href="#">Terms and Conditions</a>    
        </div>

        <div class="footerItem">    
            <h3>Want to Help?</h3>    
            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!<br />    
            <div class="ralign">    
            <a href="#"><strong>Learn More</strong></a>    
            </div>    
        </div>    
        <div class="clear"></div>       
    </div>    
</div>

<div class="copyright">    
    Copyright &copy; 2011 Scirra.com.  All rights reserved.    
</div>   

</body>

</html>

(Note head wrapper div is empty at the moment, this will have a logo at a later date).

CSS:

    /* Main Layout Elements */
    body{
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica, Verdana;
        background: #fff url(../images/background.png) repeat-x;
        color:#444;
    }
    p {
        margin: 0 0 20px 8px;
    }
    a{
        color: #0066FF;
    }
    .smallDate{
        float:right;
        color: #339900;
    }
    .topBar{
        position:absolute;
        background-color: #339900;
        height: 30px;
        border-bottom:2px solid #3FBF00;
        width: 100%;
        z-index:1;
        -moz-box-shadow: 0px 0px 5px #555;
        -webkit-box-shadow: 0px 0px 5px #555;
        box-shadow: 0px 0px 5px #555;
    }
    h1{
        margin:0;
        margin-bottom:5px;
        font-size:35px;
        color: #339900;
        font-weight:normal;
    }
    h2{


margin:0 0 5px 0;
    font-size:22px;
    color: #339900;
    font-weight:normal;
}
h3{
    text-shadow: black 0.1em 0.1em 0.2em;
    text-transform: uppercase;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 3px;
}
.ralign{
    text-align:right;
}
.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;
}
.slideShowWrapper{
    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 */
.contentWrapper{
    padding: 10px;
}
.headWrapper{
    height: 120px;
}
.footerWrapper{
    position:relative;
    z-index:1;
    top: -20px;
    height:155px;
    padding-top: 15px;
    background-image: url(../images/background-footer.png);
    background-repeat:repeat-x;
    margin-bottom: -20px;
overflow: hidden;
}
.mainBox{
    -moz-box-shadow: 0px 0px 12px #444;
    -webkit-box-shadow: 0px -20px 28px #c0c0c0;
    box-shadow: 0px 0px 12px #444;
    margin: 0 auto;
    width: 770px;
    border:0;
    z-index:2;
    position:relative;
    background-color: #ffffff;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius:  10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius:  10px;
}

/* Footer */
.footerBox
{
    color: white;
    font-size: 13px;
    margin: 0 auto;
    width: 700px;
    margin-top:5px;
}
.footerItem{
    float: left;
    width: 33%;
}
.footerItem a{
    font-size:13px;
    color:white;
}
.footerItem a:hover{
    color: #ffaa00;
}
.copyright
{
    color: white;
    text-align:center;
    background-color: #000000;
    font-size: 12px;
    padding: 3px;
}
.footIco{
    height: 40px;
    width: 32px;
    float: left;
    margin-top: 7px;
    position:relative;
    left: -4px;
    display:block;
}

/* Search */
.searchWrapper{
    float:right;
    background-color: #339900;
    width: 250px;
    height:53px;
    position:relative;
    left: 50px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius:  10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius:  10px;
    text-align:center;
    line-height:50px;   
}
.searchBox{
    position:Relative;
    left:12px;
}
.searchBox input{
    height:20px;
    padding-left:10px;
    color: #c0c0c0;
    line-height:20px;
    padding-right:25px;
}
.searchIco{
    height: 37px;
    width: 36px;
    float: right;
    background-position: -40px 0;
    position:relative;
    left:-33px;
    top:11px;
}

/* Menus */
.topMenu{
    height:38px;
    background-color: #339900;
    font-size: 15px;
    font-weight: bold;
    line-height:38px;
}
.topMenu a{
    text-shadow: #114400 1px 1px 1px;
    display: block;
    float:left;
    padding-left: 8px;
    padding-right: 8px;
    color:white;
}
.subMenu{
    height: 33px;
    background-color: #1B5300;
    font-size: 13px;
    line-height:33px;
}
.subMenu a{
    display: block;
    float:left;
    padding-left: 8px;
    padding-right: 8px;
    color:white;
    text-decoration: none;
}
.subLinkLImg{
    float:left;
    width:11px;
    height:23px;
    background-position: -80px 0;
}
.subLinkSelected{
    background-color:#123700;
    float:left;
    height:22px;
    line-height:22px;
}
.subSelWrapper{
    text-decoration: none;
    margin-right: -20px;
    margin-left: 5px;
}
.subNormal{
    margin-left: 25px;
}   
.subNormal:hover{
    background-color:#123700;
    text-decoration: none;
}   
.ssOrient{
    position:relative;
    top:6px;
}
.subLinkRImg{
    float:right;
    width:11px;
    height:23px;
    background-repeat:no-repeat;
    background-position: -91px 0;
}
.topSelWrapper{
    text-decoration: none;
    margin-right: -20px;
    margin-left: 5px;
}
.topLinkLImg{
    float:left;
    width:11px;
    height:33px;
    background-position: -105px 0;
}
.topLinkRImg{
    float:right;
    width:11px;
    height:33px;
    background-position: -116px 0;
}
.topLinkSelected{
    background-color:#1B5300;
    float:left;
    height:33px;
    line-height:33px;
}
.tlOrient{
    position:relative;
    top:5px;
}
.topNormal{
    margin-left: 25px;
    text-decoration: none;
}
.topNormal:hover{
    background-color:#2B8200;
}

/* Download box link */
.downloadBox{
    display: block;
    background-position: -134px 0;
    width: 215px;
    height: 55px;
    margin: 0 auto;
    text-align:right;
    color:white;
    text-transform: uppercase;
    text-decoration: none;
}
.downloadHead{
    font-weight:bold;
    font-size:17px;
    padding-top:14px;
    padding-right: 15px;
}
.downloadSize{
    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:#3366CC;
    text-align:center;
    padding:0 12px 0 12px;
    line-height:17px;
    min-width:100px;
    -moz-border-radius: 10px;
    border-radius:  10px;
    margin-top:-12px;
    margin-bottom:10px;
    clear:both;
}
.moreInfoLink:hover{
    text-decoration:underline;
    background-color: #537DD5;
}
.thinCol{
    float:left;
    width:270px;
}
.wideCol{
    float:left;
    margin-right:10px;
    width:470px;
}
.newsWrapper{
    position:relative;
    top: 5px;
}
.halfColSpacer{
    width:4%;
    float:left;
}
.halfColWrapper{
    float:left;
    width:48%;  
}
.spotLightImg{
    float:left;
    margin-right:15px;
    -moz-border-radius: 10px;
    border-radius:  10px;
    -moz-box-shadow: 3px 3px 3px #444;
    -webkit-box-shadow: 3px 3px 3px #444;
    box-shadow: 3px 3px 3px #444;
    width: 90px;
    height: 90px;
}
.slideShowWrapper img{
    width:470px;
    height: 261px;
    border: 0;
}
.slideShowWrapper a{
    text-decoration: none;
}

I've tried really hard to design this with progressive enhancement in mind, so I think it degrades quite nicely.

IE7 and below aren't supported. I am completely fine with taking that decision. I'm considering adding some sort of notification though.

It's tested in Safari, FF, IE8 and Chrome.

I've used a sprite image to improve load speed. CSS isn't compressed/optimised yet, I'll do that later.

Comments on CSS/HTML/JS are all welcome. I really want to nail this as being as near to perfect as possible. Main areas of importance are:

SEO friendly
Fast and responsive
Accessible

Fge · Accepted Answer · 2011-03-02 11:39:08Z

I didn't have a look in detail, but some ideas/observations/remarks:

You might save some div elements with using the float style (especially in your header). Try to avoid using divs for styling only and use the logical corresponding tags (for example in <div class="downloadHead">Download</div>).
Menus should be lists (<li>) from a logic point of view (e.g. like here)
Try to put all javascript includes at the end where possible (this has some disadvantages though, (one of many discussions about that topic))
As long as your code doesn't become more complicated it should render fast. I think your biggest problem will be the underlying application (assuming the site is not static). Yahoo has some great guidelines on how to speed up websites.
Accssible: You're missing a lot of title and alt tags which are especially important for screen-readers (they also require the elements to be in a logical order, how to optimize a website for them is out of scope here).

I only used alt on images, never really used title before in anything but the head, should these go anywhere else but images? I've also noticed img tags not closed in slideshow, that's code from the plugin source I'll fix that. — Tom Gullen, Mar 2, 2011 at 11:52
title can be a tag or an attribute ;) Old but should be ok to get the idea: netmechanic.com/news/vol6/html_no1.htm — Fge, Mar 2, 2011 at 11:58

kleinfreund · Accepted Answer · 2014-02-10 16:54:43Z

You should add the meta viewport tag to ensure mobile browsers have a good standard viewport:
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
You should specify sans-serif as the last resort for your font stack. Also if you want Helvetica to be used, move it to the front. If not, you can simply leave it out. That's because one can assume that on every system where Helvetica is installed, there is also Arial.
```
font-family: Helvetica, Arial, Verdana, sans-serif;
```
Something small: If you have a hex-based color value like #0066ff, #ffffff or #000000 for example, you can write the shorter version: #06f, #fff and #000
Ommit the unit for zero values like 0px: box-shadow: 0 0 5px #555;
You're resetting the margin on a lot of elements. Group this together to decrease repetition:
```
h1, h2, h3, h4, h5, h6,
p, blockquote {
    margin: 0;
}
```
If you want to set a bottom margin, you only need margin-bottom: 10px;, not margin: 0 0 10px 0;
For clearfixing, you don't need a new div element. Add the following rule declaration to your CSS and add clearfix to the element you need to fix. (e.g. a navigation with floated items)
```
clear:after {
    content: "";
    display: table;
    clear: both;
}
```
There is no reason to prefix border-radius anymore. You can use the unprefixed version safely.

For the time, I'll stop here. I'd be great to hear some feedback. I have a few things in mind, but I don't know if you want to go this deep. No offense. ;) Feel free to ask questions, if you have them.

65Fbef05 · Accepted Answer · 2011-03-03 03:42:06Z

Regarding speed, I don't think you have anything to worry about. As @Fgo mentioned, that typically has more to do with your application - not your static pages (unless they're enormous with tons of pictures and the like).

When you're speaking of SEO and accessibility, those are really two sides to the same coin. It's important to know how your site will look in a text-only browser. Your page example will be usable, but a tad confusing without images or layout tags.

First of all, only one <h1></h1> should appear on any single page. It should also typically be similar to your page title. I also noticed that you don't have a <meta keywords="" /> tag (important). Additionally, I usually like to include my <h1> and my page's main and most important <p></p> immediately after the open <body> tag. Wrap this in a <div> and you can place it wherever you want later.

@Fgo recommended that you should place your menu in an <ul></ul> which I think is a stylistic preference, and it's also pretty common practice. It's my opinion that a site's navigation belongs right below the first group of body text and again at the bottom of the page. This too can be moved wherever you want later in your CSS. Search engines want to see the meat-and-potatoes of your site as soon as possible and then branch off quickly without obstruction.

Stack Exchange Network

Demo of advertisment website

3 Answers 3

Your Answer

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

Hot Network Questions

Demo of advertisment website

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

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

Related

Hot Network Questions

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