10
\$\begingroup\$

I am working on my Tritium website (hosted on Github: feel free to fork and send pull requests), and now am looking for a review of it. If you are looking to critique the design of the website, please visit the sister question over on Graphic Design.

enter image description here

Here is what I would like reviewed:

  • Organization - Can you find where something should be easily?
  • Stale code - Is there code that isn't in use?
  • Modern conventions - Am I using the latest and greatest with HTML5 and CSS3?
  • Readability - Is the code formatted in a way that is compliant with today's standards?
  • Performance - Can I speed up any aspect of my code?
  • Portability - Websites can be hard to support for mobile devices. Is there anything I can improve so that these devices can have just as good of an experience? Also, I noticed that the animation of my atom is a bit laggy on those types of platforms; how can I fix that?
  • User Experience - What do you find annoying and how would you fix it?

Those are just some suggestions though. Please feel free to comment on any aspect of the code. No matter how small that aspect may be, I consider it important.

index.html:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>Tritium</title>
        <link rel="icon" href="img/tritium-logo.png" sizes="256x227" type="image/png">
        <link rel="icon" href="img/tritium-logo.svg" sizes="any" type="image/svg+xml">
        <!-- Bootstrap Core CSS -->
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" type="text/css">
        <!-- Fonts -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" type="text/css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,500,300italic,500italic" type='text/css'>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700" type='text/css'>
        <!-- Custom Theme CSS -->
        <link rel="stylesheet" href="css/tritium.css" type='text/css'>
    </head>
    <?php flush(); ?>

    <body id="page-top" data-spy="scroll" data-target=".navbar-custom">
        <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header page-scroll"> <a class="navbar-brand" href="#page-top">
                    <span class="light">Tritium</span>
                </a>

                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
                    <ul class="nav navbar-nav">
                        <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                        <li class="hidden"> <a href="#page-top"></a>

                        </li>
                        <li class="page-scroll"> <a href="#about">About</a>

                        </li>
                        <li class="page-scroll"> <a href="#contact">Contact</a>

                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>
        <section id="intro" class="intro">
            <div class="intro-body">
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                            <img src="img/tritium-logo.svg" height="100" width="100" />
                             <h1 class="brand-heading">Tritium</h1>

                            <p class="intro-text">A free, premium quality speech synthesis engine written completely in C.</p>  <a href="#download-box" class="btn btn-default btn-lg download-window">Visit Download Page</a>

                        </div>
                    </div>
                    <svg xmlns="http://www.w3.org/2000/svg" width="434.78391px" height="436.34589px" version="1.1">
                        <g transform="matrix(5.7971186,0,0,5.7971186,217.39195,218.95394)">
                            <g id="a1" transform="matrix(0.76604444,0.64278761,-0.64278761,0.76604444,0,0)">
                                <circle cx="0" cy="5" r="4" style="fill:#333" />
                                <circle cx="4.3299999" cy="-2.5" r="4" style="fill:#333" />
                                <circle cx="-4.3299999" cy="-2.5" r="4" style="fill:#333" />
                            </g>
                            <circle cx="0" cy="0" r="37" style="fill:none;stroke:#333;stroke-width:1" />
                            <g id="a2" transform="matrix(-0.93969262,0.34202014,-0.34202014,-0.93969262,0,0)">
                                <circle cx="0" cy="37" r="2" style="fill:#333" />
                            </g>
                        </g>
                    </svg>
                </div>
            </div>
        </section>
        <section id="about" class="container content-section text-center">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                     <h2>About Tritium</h2>

                    <p>Tritium is a compact, fast run-time synthesis engine primarily designed for both small embedded systems and large servers.</p>
                    <p>One use for Tritium is as an <a href="https://en.wikipedia.org/wiki/Tritium#Controlled_nuclear_fusion">important fuel for controlled nuclear fusion.</a> Based off of that idea, Tritium was created to fuel other projects with a simple, yet powerful, speech sythesizer.</p>
                </div>
            </div>
        </section>
        <section id="contact" class="container contact-section text-center">
            <div class="contact">
                <div class="col-lg-8 col-lg-offset-2">
                     <h2>Contact</h2>

                    <p>Feel free to contact me to provide some feedback on the software, give suggestions for new features and improvements, or to just say hello!</p>
                    <ul class="list-inline banner-social-buttons">
                        <li class="bitcon"> <a href="https://codereview.stackexchange.com/users/27623/syb0rg" <i class="fa fa-stack-exchange fa-4x"></i></a>

                        </li>
                        <li class="twitter"> <a href="https://twitter.com/syb0rg" <i class="fa fa-twitter fa-4x"></i></a>

                        </li>
                        <li class="github"> <span class="logo"></span>
 <a href="https://github.com/syb0rg" <i class="fa fa-github fa-4x"></i></a>

                        </li>
                    </ul>
                </div>
            </div>
        </section>
        <div id="download-box" class="download-popup text-center">
<a href="#" class="close"><i class="fa fa-times btn-close"></i></a>

             <h2>Please Donate!</h2>

            <p>As a college student, I have many bills to pay and therefore not a lot of time to spend on development. Help me change that by donating a bit of money. Every little bit helps!</p>
            <ul class="list-inline banner-social-buttons">
                <li class="paypal"> <span class="logo"></span>
 <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=WABVCTSPENJFJ&lc=US&item_name=Tritium&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_SM%2egif%3aNonHosted" <i class="fa fa-pied-piper fa-4x"></i></a>

                </li>
                <li class="bitcoin" data-address="1EYDqUKuLKF9di1pSEtEfNA8pj2CgL7Wne"> <a data-code="717ff45d85b1cc7cdd6752e618dd6d62" data-button-style="custom_large" href="https://coinbase.com/checkouts/717ff45d85b1cc7cdd6752e618dd6d62"><i class="fa fa-bitcoin fa-4x"></i></a>

                </li>
                <li class="gittip"> <span class="logo"></span>
 <a href="https://www.gittip.com/syb0rg/" <i class="fa fa-gittip fa-4x"></i></a>

                </li>
            </ul>
        </div>
        <!-- Core JavaScript Files -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
        <script src="https://coinbase.com/assets/button.js" type="text/javascript"></script>
        <!-- Custom Theme JavaScript -->
        <script src="js/tritium.js"></script>
    </body>
    <script>
        (function(i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function() {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o),
            m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-50973307-2', 'auto');
        ga('send', 'pageview');
    </script>

</html>

tritium.css:

body {
    width: 100%;
    height: 100%;
    font-family:"Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    background-color: #171d25;
    -webkit-backface-visibility:hidden;
}
html {
    width: 100%;
    height: 100%;
}
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 35px;
    text-transform: uppercase;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
}
p {
    margin: 0 0 25px;
    font-size: 18px;
    line-height: 1.5;
}
svg {
    z-index: -1;
}
@media(min-width:767px) {
    p {
        margin: 0 0 35px;
        font-size: 20px;
        line-height: 1.6;
    }
}
a {
    color: transparent;
    color: #6e6e6e;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
a:hover, a:focus {
    text-decoration: none;
    color: #78C40F;
}
svg {
    position: absolute;
    right: 0;
    bottom: -100px;
    width: 250px;
    height: 436.34589px;
}
.light {
    font-weight: 400;
}
.navbar {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    text-transform: uppercase;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #000;
}
.navbar-brand {
    font-weight: 700;
}
.navbar-brand:focus {
    outline: 0;
}
.navbar-custom a {
    color: #fff;
}
.navbar-custom .nav li a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}
.navbar-custom .nav li a:hover, .navbar-custom .nav li a:focus, .navbar-custom .nav li.active {
    outline: 0;
    background-color: rgba(255, 255, 255, .2);
}
.navbar-toggle {
    padding: 4px 6px;
    font-size: 16px;
    color: #fff;
}
.navbar-toggle:focus, .navbar-toggle:active {
    outline: 0;
}
@media(min-width:767px) {
    .navbar {
        position: fixed;
        margin-left: 0px;
        margin-right: 0px;
        padding: 20px 0;
        border-bottom: 0;
        letter-spacing: 1px;
        background: 0 0;
        -webkit-transition: background .4s ease-in-out, padding .4s ease-in-out;
        -moz-transition: background .4s ease-in-out, padding .4s ease-in-out;
        transition: background .4s ease-in-out, padding .4s ease-in-out;
    }
    .top-nav-collapse {
        padding: 0;
        background-color: #000;
    }
    .navbar-custom.top-nav-collapse {
        border-bottom: 1px solid rgba(255, 255, 255, .3);
    }
}
.intro {
    display: table;
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    color: #fff;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
}
.intro-body {
    display: table-cell;
    vertical-align: middle;
}
.brand-heading {
    font-size: 40px;
    color: #78C40F;
}
.intro-text {
    font-size: 18px;
}
@media(min-width:767px) {
    .intro {
        height: 100%;
        padding: 0;
    }
    .brand-heading {
        font-size: 100px;
    }
    .intro-text {
        font-size: 25px;
    }
}
.btn-circle {
    width: 70px;
    height: 70px;
    margin-top: 15px;
    padding: 7px 16px;
    border: 2px solid #fff;
    border-radius: 35px;
    font-size: 40px;
    color: #fff;
    background: 0 0;
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}
.btn-circle:hover, .btn-circle:focus {
    outline: 0;
    color: #fff;
    background: rgba(255, 255, 255, .1);
}
.page-scroll .btn-circle i.animated {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: .9s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: .9s;
}
.page-scroll .btn-circle:hover i.animated {
    -webkit-animation-name: pulse;
    -moz-animation-name: pulse;
    -webkit-animation-duration: 1.4s;
    -moz-animation-duration: 1.4s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
}
@-webkit-keyframes pulse {
    0 {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@-moz-keyframes pulse {
    0 {
        -moz-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -moz-transform: scale(1.2);
        transform: scale(1.2);
    }
    100% {
        -moz-transform: scale(1);
        transform: scale(1);
    }
}
.content-section {
    padding-top: 100px;
}
.contact-section {
    padding-top: 300px;
    padding-bottom: 200px;
}
@media(min-width:767px) {
    .content-section {
        padding-top: 150px;
    }
    .contact-section {
        padding-top: 300px;
    }
}
.btn {
    text-transform: uppercase;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.btn-default {
    border: 1px solid #78C40F;
    color: #78C40F;
    background-color: transparent;
}
.btn-default:hover, .btn-default:focus {
    border: 1px solid #78C40F;
    outline: 0;
    color: #000;
    background-color: #78C40F;
}
.banner-social-buttons {
    margin-top: 0;
}
@media(max-width:1199px) {
    ul.banner-social-buttons {
        margin-top: 15px;
    }
}
@media(max-width:767px) {
    ul.banner-social-buttons>li {
        display: inline-block;
        margin: 20px;
    }
}
::-moz-selection {
    text-shadow: none;
    background: #fcfcfc;
    background: rgba(255, 255, 255, .2);
}
::selection {
    text-shadow: none;
    background: #fcfcfc;
    background: rgba(255, 255, 255, .2);
}
img::selection {
    background: 0 0;
}
img::-moz-selection {
    background: 0 0;
}
body {
    webkit-tap-highlight-color: rgba(255, 255, 255, .2);
}
/* Mask for background, by default is not display */
 #mask {
    display: none;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: 999;
}
/* You can customize to your needs  */
 .download-popup {
    display: none;
    background: #333;
    padding: 10px;
    float: left;
    position: fixed;
    top:50%;
    left:50%;
    width:400px;
    /* adjust as per your needs */
    height:400px;
    /* adjust as per your needs */
    margin-left:-200px;
    /* negative half of width above */
    margin-top:-200px;
    /* negative half of height above */
    z-index: 99999;
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

tritium.js:

$(window).scroll(function () {
    // jQuery to collapse the navbar on scroll
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
    // jQuery to animate atom SVG
    var s = ($(window).scrollTop() / (($("#intro").height() + $("#about").height()) - $(window).height()));
    var r1 = 40 + 106 * s,
        r2 = 160 - 100 * s;
    $("#a1").attr("transform", "rotate(" + r1 + ")");
    $("#a2").attr("transform", "rotate(" + r2 + ")");
});

// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function () {
    $('.page-scroll a').bind('click', function (event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1000, 'easeInOutExpo');
        event.preventDefault();
    });
});

$(document).ready(function () {
    $('a.download-window').click(function () {
        var a = document.createElement("a");
        a.target = '_blank';
        a.href = "https://github.com/syb0rg/Tritium";
        var evt = document.createEvent("MouseEvents");
        //the tenth parameter of initMouseEvent sets ctrl key
        evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
        true, false, false, true, 0, null);
        a.dispatchEvent(evt);
        $("body").css("overflow", "hidden");
        //Getting the variable's value from a link 
        var loginBox = $(this).attr('href');

        //Fade in the Popup
        $(loginBox).fadeIn(500);

        // Add the mask to body
        $('body').append('<div id="mask"></div>');
        $('#mask').fadeIn(300);

        return false;
    });

    // When clicking on the button close or the mask layer the popup closed
    $('a.close, #mask').on('click', function () {
        $('#mask , .download-popup').fadeOut(300, function () {
            $('#mask').remove();
            $("body").css("overflow", "auto");
        });
        return false;
    });
});
Improve this question
\$\endgroup\$
0

2 Answers 2

Reset to default
4
\$\begingroup\$

About your HTML

You still have a <?php flush(); ?> in your HTML code.

To be on the safe side, you might want to escape & in URLs with &amp; (but it’s only required for ambiguous ampersands).

You have a script after the body element, which is not allowed.

You are missing many > of your a start tags (i.e., you are using <a <i></i></a>).

Your img containing the logo must have an alt attribute, but it should be empty in your case because the logo contains no relevant content:

<img src="img/tritium-logo.svg" height="100" width="100" alt="" />

Empty links

An empty link like <a href="#" class="close"><i class="fa fa-times btn-close"></i></a> (you have some more of these) is not accessible.

And using the i element for this is not appropriate. If you really need this empty element, it should be a span instead.

Side effect of these "font icon" links (which is a problem many sites have): For me, these links look like that:

Screenshot of Tritium’s contact links

Outline

You don’t want to have the page heading ("Tritium") in a section element. It’s the heading for the whole page, so it should belong to the body sectioning root, not only to its section. As it contains no content suitable for a section, remove this first section element completely.

The section with the "Please Donate!" heading should get its own section element.

So removing anything not related to the outline, you would get this structure:

<body>

    <nav>
    </nav>

    <h1>Tritium</h1>

    <section>
        <h2>About Tritium</h2>
    </section>

    <section>
        <h2>Contact</h2>
    </section>

    <section>
        <h2>Please Donate!</h2>
    </section>

</body>

You might want to consider using a header element for the page heading and the logo (you could even include the nav in it, too):

<header>
  <!-- also the 'nav', if you like -->
  <img src="img/tritium-logo.svg" height="100" width="100" alt="" />
  <h1 class="brand-heading">Tritium</h1>
</header>
Improve this answer
\$\endgroup\$
4
\$\begingroup\$

The HTML

The HTML has some problems. Run the w3c validator on it: http://validator.w3.org/check

The <?php flush(); ?> jumps in the eye, and it seems there are many <i> tags stuck in the middle of of <a ... > start tags, as if you forgot the closing >:

<a href="https://twitter.com/syb0rg" <i class="fa fa-twitter fa-4x"></i></a>

HTML validation problems are not as insignificant as you might think. Many times I've seen inexplicably strange JavaScript errors, that were strangely caused by invalid HTML. So to prevent wild goose chases, I make sure to keep my HTML valid.

The JavaScript

As of jQuery 1.7, .on() is the preferred method to bind events, instead of .bind(). See the docs. There are also shortcuts like .click(). I prefer .click(), because an intelligent editor can warn you if you mistype it, while it might not warn for .on('clck', ...).

Instead of:

$('body').append('<div id="mask"></div>');

This is shorter:

$('body').append('<div id="mask">');

From the jQuery docs:

When the parameter has a single tag (with optional closing tag or quick-closing) — $( "<img />" ) or $( "<img>" ), $( "<a></a>" ) or $( "<a>" ) — jQuery creates the element using the native JavaScript createElement() function.

Improve this answer
\$\endgroup\$
3
  • 1
    \$\begingroup\$ My HTML is a bit rusty, are self closing tags recommended these days? Last I knew (many moons ago) it was considered best practice to use the "empty" element. \$\endgroup\$
    – RubberDuck
    Aug 17, 2014 at 0:53
  • 1
    \$\begingroup\$ @ckuhn203 self-closing tags are indeed invalid HTML for tags like <div>, but valid for tags like <img>. But we're not doing this in HTML but jQuery. If I interpret the docs correctly, this is allowed and jQuery will do the right thing. \$\endgroup\$
    – janos
    Aug 17, 2014 at 8:24
  • 1
    \$\begingroup\$ Gotta love HTML. Keeping up with current standards is like trying to hit a moving target while you're standing in quicksand. Thanks for the clarification. \$\endgroup\$
    – RubberDuck
    Aug 17, 2014 at 8:36

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.