Web page code based off of a responsive Initializer template

Problem

Please review my code based off of a responsive Initializr template. It's functional and visually correct, but I know there's better ways to write the code. Let me know if I can layout the HTML5 better and/or best practices I'm not using for CSS selectors because I feel my stylesheet is all over the place.

HTML

`

Site - example.org

You are using an outdated browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.

-

-

About Us

Sub

Sub

Sub

Sub

Sub

Programs

Sub

Sub

Sub

Sub

Sub

News and Events

Sub

Sub

Sub

Sub

Sub

Apply

Solution

Since I don't have high enough rep to comment, I'll post this instead...

fyi: @import vs https://stackoverflow.com/questions/7199364/import-vs-link
I'd keep the same master stylesheet if it were me.

EDIT:
` or

 as a logo? Debate on... short answer, It depends on the context of the website—is it a single page layout? a personal blog? the next Amazon? Here's a few articles on the subject that will shed some light: http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/ & https://webmasters.stackexchange.com/questions/4515/h1-vs-h2-vs-other-for-website-title-logo-and-seo & http://www.amberweinberg.com/the-logo-to-h1-or-not-to-h1/ make your own asumptions. I've gone both ways on different projects. 

Here's a few links to look up and read into. On a smaller application such as this I doubt it would matter much, however, when you get into larger projects specificity and maintainability will cause you issues.  http://css-tricks.com/efficiently-rendering-css/ & http://csswizardry.com/2011/09/writing-efficient-css-selectors/

http://smacss.com/ - if you don't like it, it's at least a great starting point for thinking about maintainability and organization. OOCSS and BEM are the alternative.

Also, there are many ways to approach a menu icon, here's some methods of approach: http://css-tricks.com/three-line-menu-navicon/ I prefer font icons in place of using three elements to make the bars but that's just my opinion.

normalize.css is great! However, http://nicolasgallagher.com/about-normalize-css/ read approach 1: 

  
Approach 1: use normalize.css as a starting point for your own project’s base CSS, customising the values to match the design’s requirements.

Also, if you're going to use Conditional commenting for IE at least style the

.browsehappy

 class so it isn't... you know... bare bones... ;) 

I'd steer clear of using heading tags for items such as this

Learn More About What We Do »

 this isn't a heading, but the browser will read it as such, instead create a separate class for it and style it in a heading style if you want it to be bold and larger.

Also, bear in mind,

's, 's, 's, 's, and

's will always label a heading as null if you don't have one (e.g. untitled) in the semantic outline. I'd drop your code into this: http://gsnedders.html5.org/outliner/ and see if some of those tags shouldn't be replaced with

's which hold no semantic value.

as for the html5 portion. It really depends on the support levels you require for browser compatibility. I tend to forego wrapping html5 tags e.g.

 as it's a bit repetitive at this point and bulky (but I also tend to only target IE9+ too, anything under I feed a single column, but I'm lazy like that).

I use a very simple starting point for most projects. It's laid out like this: 


 

    
    title

    Who
    What
    When
    Why

    
        Email
        
        Submit
    

    
    
        
        
            
            
            
        
        
            
            
                
            
        
    
    
    
    
    

    

    (function (a, h, d, c, g, f) {
        a.GoogleAnalyticsObject = c;
        a[c] || (a[c] = function () {
            (a[c].q = a[c].q || []).push(arguments)
        });
        a[c].l = +new Date;
        g = h.createElement(d);
        f = h.getElementsByTagName(d)[0];
        g.src = "//www.google-analytics.com/analytics.js";
        f.parentNode.insertBefore(g, f)
    }(window, document, "script", "ga"));
    ga("create", "UA-XXXXX-X");
    ga("send", "pageview");


P.S. If you're not going to use modernizr or jquery, make sure you don't include the libraries as they're unnecessary at that point. Additionally, you wouldn't need the conditional comments wrapping the

tag either, nor the class="no-js"` class.

Code Snippets

<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->

<head>

<meta charset="utf-8">
<link rel="dns-prefetch" href="www.google-analytics.com"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title></title>
<meta name="description" content="">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui">
<meta http-equiv="cleartype" content="on">

<link rel="stylesheet" href="/libs/css/main.css">
<script src="/libs/js/vendor/modernizr-custom.min.js"></script>

<body>

<header role="banner">
    <a href="#"></a>
    <h1 role="heading">title</h1>
</header>

<nav role="navigation">
    <a role="link" href="#" accesskey="1">Who</a>
    <a role="link" href="#" accesskey="2">What</a>
    <a role="link" href="#" accesskey="3">When</a>
    <a role="link" href="#" accesskey="4">Why</a>
</nav>
<section>
    <form role="form" id="email-form" action="#" method="post" novalidate>
        <label for="email" id="email-label">Email</label>
        <input id="email" aria-labelledby="email-label email-form" type="email" placeholder="e.g. john@doe.co" name="email">
        <button role="button" aria-labelledby="email-form" type="submit">Submit</button>
    </form>
</section>

<main role="main">
    <h2 role="heading"></h2>
    <article role="article">
        <h3 role="heading"></h3>
        <section>
            <h4 role="heading"></h4>
            <p></p>
            <strong></strong>
        </section>
        <aside role="complimentary">
            <figure>
            <img role="img" src="" width="" height="" alt>
                <figcaption></figcaption>
            </figure>
        </aside>
    </article>
    <hr role="separator">
    <aside role="note">
    </aside>
    <hr role="separator">
</main>

<footer role="contentinfo">
    <h2 role="heading"></h2>
</footer>

<script src="/libs/js/jquery.min.js"></script>
<script>
    (function (a, h, d, c, g, f) {
        a.GoogleAnalyticsObject = c;
        a[c] || (a[c] = function () {
            (a[c].q = a[c].q || []).push(arguments)
        });
        a[c].l = +new Date;
        g = h.createElement(d);
        f = h.getElementsByTagName(d)[0];
        g.src = "//www.google-analytics.com/analytics.js";
        f.parentNode.insertBefore(g, f)
    }(window, document, "script", "ga"));
    ga("create", "UA-XXXXX-X");
    ga("send", "pageview");
</script>

Context

StackExchange Code Review Q#36812, answer score: 11

Revisions (0)

No revisions yet.