12
\$\begingroup\$

I was just curious to know what you think about this website I'm designing. I would just like any constructive feedback that you might have.

http://jackatron.web44.net/music/

@import url(http://fonts.googleapis.com/css?family=Lato);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



*,*:before,*:after { box-sizing: border-box; }
.mainHeader {
	background: rgb(255,0,0);
	padding: 12px;
}
.mainHeader h1,h2,h3 {
    text-align: center;
    color: rgb(255,255,255);
    font-family: "Lato";
}
.mainHeader h1 {
	font-size: 24px;
	font-weight: bold;
	color: rgb(0,0,0);
}
.mainHeader h2 {
	font-size: 20px;
	margin-bottom: 2px;
}
.mainHeader h3 {
	font-style: italic;
}
.mainArticle {
	box-shadow: 1px 1px 9px #888888;
	padding: 12px;
	margin: 24px auto;
	width: 90%;
}
.mainArticle h1 {
	font: 24px "Lato";
	font-weight: bold;
}
.mainArticle h2 {
	color: rgb(0,0,0);
	text-align: left;
}
.mainArticle ul  {
	padding: 0;
	display: inline;
}
.mainArticle ul  li{
	margin-left: 22px;
	font-family: "Lato";
	list-style-type: square;
}
.mainFooter {
	border-top: 1px solid rgb(0,0,0);
	text-align: center;
	padding: 12px;
	width: 100%;
	background: rgb(255,0,0);
	font-family: "Lato";
	color: rgb(255,255,255);
}
.mainNavigation a:not(.current) {
	opacity: 0.5;
}
.mainNavigation ul {
	padding: 0;
	display: table;
	margin: 15.5px auto;
}
.mainNavigation p {
	position: absolute;
	font-family: "Lato";
	color: rgb(255,255,255);
	font-weight: bold;
	top: 60px;
	left: 6px;
}
.mainNavigation ul li {
	float: left;
	margin-right: 5px;
}
.current {
	pointer-events: none;
	padding: 14px 14px 9px 14px !important;
}
.mainNavigation ul li a {
	padding: 14px;
	background: rgb(255,0,0);
	text-decoration: none;
	color: rgb(0,0,0);
	font-family: "Lato";
	color: rgb(255,255,255);
	border-radius: 0 0 6px 6px;
	font-size: 19px;
}
.mainNavigation ul li a:hover {
	opacity: 0.9;
	-webkit-transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
	-o-transition:all 0.5s ease;
	transition:all 0.5s ease;
}
mark { background: rgb(255,255,255); color: rgb(255,0,0); font-weight: bold;}
.mainNavigation li:nth-child(1) a, .zero {
	background: rgb(0,0,0) !important;
}
.mainNavigation li:nth-child(2) a, .one {
	background: rgb(216,0,7) !important;
}
.mainNavigation li:nth-child(3) a, .two {
	background: rgb(246,185,0) !important;
}
.mainNavigation li:nth-child(4) a, .three {
	background: rgb(0,70,16) !important;
}
.mainNavigation li:nth-child(5) a, .four {
	background: rgb(199,35,0) !important;
}
.mainNavigation li:nth-child(6) a, .five {
	background: rgb(0,83,147) !important;
}
.mainNavigation li:nth-child(7) a, .six {
	background: rgb(52,52,52) !important;
}
.mainNavigation li:nth-child(8) a, .seven {
	background: rgb(63,21,84) !important;
}
.mainNavigation li:nth-child(9) a, .eight {
	background: rgb(8,145,226) !important;
}
.mainNavigation li:nth-child(10) a, .nine {
	background: rgb(209,70,109) !important;
}
.mainNavigation li:nth-child(11) a, .ten {
	background: rgb(142,90,0) !important;
}
.mainNavigation li:nth-child(12) a, .eleven {
	background: rgb(211,10,0) !important;
}
.mainNavigation li:nth-child(13) a, .twelve {
	background: rgb(251,189,42) !important;
}
.zero-border { border-bottom: 10px solid rgb(0,0,0); }
.one-border { border-bottom: 10px solid rgb(216,0,7); }
.two-border { border-bottom: 10px solid rgb(246,185,0); }
.three-border { border-bottom: 10px solid rgb(0,70,16); }
.four-border { border-bottom: 10px solid rgb(199,35,0); }
.five-border { border-bottom: 10px solid rgb(0,83,147); }
.six-border { border-bottom: 10px solid rgb(52,52,52); }
.seven-border { border-bottom: 10px solid rgb(63,21,84); }
.eight-border { border-bottom: 10px solid rgb(8,145,226); }
.nine-border { border-bottom: 10px solid rgb(209,70,109); }
.ten-border { border-bottom: 10px solid rgb(142,90,0); }
.eleven-border { border-bottom: 10px solid rgb(211,10,0); }
.twelve-border { border-bottom: 10px solid rgb(251,189,42); }
.audioPlayer {
	text-align: center;
	padding: 4px;
	background: rgb(255,0,0);
}
.audioPlayer audio {
	width: 100%;
	vertical-align: middle;
	margin: 0;
}
.mainArticle table {
	font-family: "Lato";
}
.mainArticle td{
	padding: 4px;
	border: 1px solid rgb(0,0,0);
}
.mainArticle a:not(.setWorkButton) {
	text-decoration: none;
	color: rgb(255,0,0);
	font-weight: bold;
}
.mainArticle strong { font-weight: bold; }
.mainArticle em { font-family: times; font-weight: bold;}


a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;} 
a.tooltip span {
    z-index:10;display:none; padding:14px 20px;
    margin-top:-30px; margin-left:28px;
    width:300px; line-height:16px;
}
a.tooltip:hover span{
    display:inline; position:absolute; color:rgb(255,255,255);
    border:1px solid #DCA; font-weight:normal; background:rgb(255,90,90);}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
    
/*CSS3 extras*/
a.tooltip span
{
    border-radius:4px;
    box-shadow: 5px 5px 8px #CCC;
}
.setWorkButton {
	background: rgb(255,0,0);
	padding: 4px;
	color: rgb(255,255,255);
	font-family: "Lato";
	text-decoration: none;
	border: 1px solid rgb(255,0,0);
}
.setWorkButton:hover {
	background: rgb(255,255,255);
	color: rgb(255,0,0);
	border: 1px solid rgb(255,0,0);
}
.setWorkIndex {
	margin: 0 auto;
	width: 90%;
}
.setWorkIndex .mainArticle {
	width: 32%;
	padding: 24px;
	display: inline-block !important;
}
.setWorkIndex .mainArticle h2 , .setWorkIndex .mainArticle h3 {
	font-size: 14px;
}
.controlButton {
	width: 90%;
	margin: 0 auto;
}
.controlButton a {
	font-family: "Lato";
	border: 1px solid rgb(255,0,0);
	color: rgb(255,0,0);
	text-decoration: none;
	text-align: center;
	width: 80px;
	display: block;
	padding: 6px;
}
.controlButton img { display: inline-block;}
.controlButton a:hover {
	color: rgb(255,255,255);
	background: rgb(255,0,0);
}
/* Copyright Jack Winstanley Web Design */
@media print {
	.mainNavigation { display: none; }
	.mainArticle {
		box-shadow: none !important;
		border-bottom: 1px solid rgb(0,0,0);
		margin: 0 !important;
	}
	.mainHeader { border: 0 !important;}
	.audioPlayer { display: none;}
	br { display: none; }
	.mainFooter { display: none; }
	mark { font-weight: none; background:none; }
	li { padding: 4px; font-size: 14px; }
	.controlButton { display: none;}
}
@media screen and (max-width:669px) {
	.setWorkIndex .mainArticle {
		width: 44% !important;
		margin: 9px !important;
	}
	.mainHeader h1 {
		margin-bottom: 5px;
	}
	.mainNavigation ul li a {
		border-radius: 0 !important;
		margin: 0 !important;
		padding: 12px !important;
		display: block;
		width: 100%;
		opacity: 1 !important;
	}
	.mainNavigation ul li {
		margin: 0 !important; 
	}
}
@media screen and (max-width:553px) {
	.setWorkIndex .mainArticle {
		width: 100% !important;
		margin: 9px !important;
	}
	.mainNavigation ul li:first-child {
		width: 100% !important;
	}
	.mainNavigation ul li {
		width: 25% !important;
		text-align: center;
	}
	.mainNavigation p { 
		position: static !important;
		color: rgb(0,0,0) !important;
		text-align: center;
		margin-top: 12px;
	}
	.mainFooter { font-size: 15px !important;}
	.mainHeader h1 { font-size: 20px !important;}
}
@media screen and (max-width:340px) {
	.mainNavigation ul li {
		width: 33.3% !important;
	}
}
<!doctype HTML>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/responsive.css"/>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <title>Music Revision</title>
  </head>
  <body>
    <div class="mainHeader zero-border">
      <h1>GCSE Music Revision</h1>
      <h2>Edexcel Based</h2>
      <h3>By Jack Winstanley</h3>
    </div>
    <div class="mainNavigation">
      <p>Set Works:</p>
      <ul>
        <li><a class="current" href="index.html">HOME</a></li>
        <li><a href="handel.html">1</a></li>
        <li><a href="mozart.html">2</a></li>
        <li><a href="chopin.html">3</a></li>
        <li><a href="schoenberg.html">4</a></li>
        <li><a href="bernstein.html">5</a></li>
        <li><a href="reich.html">6</a></li>
        <li><a href="davis.html">7</a></li>
        <li><a href="buckley.html">8</a></li>
        <li><a href="moby.html">9</a></li>
        <li><a href="capercaillie.html">10</a></li>
        <li><a href="ragdesh.html">11</a></li>
        <li><a href="koko.html">12</a></li>
      </ul>
    </div>
    <br/><br/>
    <div class="setWorkIndex">
      <div class="mainArticle">
        <h1>Set Work 1</h1>
        <h2><strong>Piece Name:</strong> And the Glory of the Lord</h2>
        <h2><strong>Composer:</strong> George Frédéric Handel</h2>
        <br/>
        <a href="handel.html" class="setWorkButton">Click to view</a>
      </div>
      <div class="mainArticle">
        <h1>Set Work 2</h1>
        <h2><strong>Piece Name:</strong> Symphony No. 40 in G Minor</h2>
        <h2><strong>Composer:</strong> Wolfgang Amadeus Mozart</h2>
        <br/>
        <a href="mozart.html" class="setWorkButton">Click to view</a>
      </div>
      <div class="mainArticle">
        <h1>Set Work 3</h1>
        <h2><strong>Piece Name:</strong> Prelude No. 15 In D Flat Major</h2>
        <h2><strong>Composer:</strong> Frédéric Chopin</h2>
        <br/>
        <a href="chopin.html" class="setWorkButton">Click to view</a>
      </div>
      <div class="mainArticle">
        <h1>Set Work 4</h1>
        <h2><strong>Piece Name:</strong> Peripetie</h2>
        <h2><strong>Composer:</strong> Arnold Schoenberg</h2>
        <br/>
        <a href="schoenberg.html" class="setWorkButton">Click to view</a>
      </div>
      <div class="mainArticle">
        <h1>Set Work 5</h1>
        <h2><strong>Piece Name:</strong> Something's Coming</h2>
        <h2><strong>Composer:</strong> Leonard Bernstein</h2>
        <br/>
        <a href="bernstein.html" class="setWorkButton">Click to view</a>
      </div>
      <div class="mainArticle">
        <h1>Set Work 6</h1>
        <h2><strong>Piece Name:</strong> Electric Counterpoint</h2>
        <h2><strong>Composer:</strong> Steve Reich</h2>
        <br/>
        <a href="reich.html" class="setWorkButton">Click to view</a>
      </div>
      <div class="mainArticle">
        <h1>Set Work 7</h1>
        <h2><strong>Piece Name:</strong> All Blues</h2>
        <h2><strong>Composer:</strong> Miles Davis</h2>
        <br/>
        <a href="davis.html" class="setWorkButton">Click to view</a>
      </div>
      <div class="mainArticle">
        <h1>Set Work 8</h1>
        <h2><strong>Piece Name:</strong> Grace</h2>
        <h2><strong>Composer:</strong> Jeff Buckley</h2>
        <br/>
        <a href="buckley.html" class="setWorkButton">Click to view</a>
      </div>
      <div class="mainArticle">
        <h1>Set Work 9</h1>
        <h2><strong>Piece Name:</strong> Why Does My Heart Feel So Bad</h2>
        <h2><strong>Composer:</strong> Moby</h2>
        <br/>
        <a href="moby.html" class="setWorkButton">Click to view</a>
      </div>
      <div class="mainArticle">
        <h1>Set Work 10</h1>
        <h2><strong>Piece Name:</strong> The Skye Waulking Song</h2>
        <h2><strong>Composer:</strong> Capercaillie</h2>
        <br/>
        <a href="capercaillie.html" class="setWorkButton">Click to view</a>
      </div>
      <div class="mainArticle">
        <h1>Set Work 11</h1>
        <h2><strong>Piece Name:</strong> Anoushka Shankar</h2>
        <h2><strong>Composer:</strong> Rag Desh</h2>
        <br/>
        <a href="ragdesh.html" class="setWorkButton">Click to view</a>
      </div>
      <div class="mainArticle">
        <h1>Set Work 12</h1>
        <h2><strong>Piece Name:</strong> Yiri</h2>
        <h2><strong>Composer:</strong> Koko</h2>
        <br/>
        <a href="koko.html" class="setWorkButton">Click to view</a>
      </div>
    </div>
    <div class="mainFooter">
      <p>&copy; Copyright Jack Winstanley Web Design</p>
    </div>
  </body>
</html>

\$\endgroup\$
  • 3
    \$\begingroup\$ Why do you have the copyright in the middle of the css ? \$\endgroup\$ – bhathiya-perera Apr 2 '15 at 17:15
  • \$\begingroup\$ Is this css maintained by hand or is it processed less or scss or something like that? If it is by hand, I would highly recommend utilizing a preprocessor instead simply to keep track of all the different color codes and to avoid some of the repetition in here. \$\endgroup\$ – Bill Barry Apr 2 '15 at 21:18
  • \$\begingroup\$ I noticed you have "George Frédéric Handel" in there. His name has two spellings, a German one ("Georg Friedrich Händel") and an English one ("George Frideric Handel"). Neither has this accented second name. \$\endgroup\$ – 11684 Apr 2 '15 at 21:30
11
\$\begingroup\$

First, your HTML passes the W3C validator with no errors. This will help all browsers render it the same, and make it easier to maintain.

However, because you are using HTML5, you should use the header element instead of a div:

<div class="mainHeader zero-border">
  <h1>GCSE Music Revision</h1>
  <h2>Edexcel Based</h2>
  <h3>By Jack Winstanley</h3>
</div>

This section also should be a nav element instead of a div:

<div class="mainNavigation">
  <p>Set Works:</p>
  <ul>
    <li><a class="current" href="index.html">HOME</a></li>
    <li><a href="handel.html">1</a></li>
    <li><a href="mozart.html">2</a></li>
    <li><a href="chopin.html">3</a></li>
    <li><a href="schoenberg.html">4</a></li>
    <li><a href="bernstein.html">5</a></li>
    <li><a href="reich.html">6</a></li>
    <li><a href="davis.html">7</a></li>
    <li><a href="buckley.html">8</a></li>
    <li><a href="moby.html">9</a></li>
    <li><a href="capercaillie.html">10</a></li>
    <li><a href="ragdesh.html">11</a></li>
    <li><a href="koko.html">12</a></li>
  </ul>
</div>

Your CSS does have two errors according to the validator.

First, you cannot set font-weight: none;. If you wish to use the default value, change it to initial, if you wish to inherit it from the parent element, use inherit; otherwise, use a specific number or a predefined value, such as bold:

@media print {
    mark { font-weight: none; background:none; }
}

Second, there is no property pointer-events:

.current {
    pointer-events: none;
}

A third problem is you should use a common font that is installed on most machines, unless you are going to include the font in your webpage. I know that my Windows machine does not have Lato installed, and I don't think my parents' MacBook has it either; also, you should specify a few different fonts just in case one is not installed so it doesn't just use the default - you can also specify a font family to default to, such as serif.

\$\endgroup\$
  • \$\begingroup\$ Thanks for the feedback, I've updated all of my header, footer , navigation and article tags to make more html5 complaint and I have fixed all of the CSS issues. \$\endgroup\$ – Jackatron Apr 2 '15 at 19:48
9
\$\begingroup\$

About your document outline

Page heading

<div class="mainHeader zero-border">
  <h1>GCSE Music Revision</h1>
  <h2>Edexcel Based</h2>
  <h3>By Jack Winstanley</h3>
</div>

Instead of using h2 and h3 for the "subtitles" of the page heading (which creates a wrong document outline), use p instead (and header instead of div).

See Subheadings, subtitles, alternative titles and taglines in the HTML5 spec.

<header class="mainHeader zero-border">
  <h1>GCSE Music Revision</h1>
  <p>Edexcel Based</p>
  <p>By Jack Winstanley</p>
</header>

Navigation

Use nav for the navigation.

You may use "Set Works" as the heading for this navigation section:

<nav class="mainNavigation">
  <h2>Set Works</h2>
  <!-- … -->
</nav>

Article headings

Each of your .mainArticle starts with an h1, which is not ideal unless you use sectioning content elements, e.g.:

  <div class="mainArticle">
    <h1>Set Work 1</h1>
    <!-- … -->
  </div>

The article element (which is such a sectioning content element) seems to be appropriate in your case:

  <article class="mainArticle">
    <h1>Set Work 1</h1>
    <!-- … -->
  </article>

(You can choose if you want to keep using h1, or if you want to switch to h2, which is what HTML5 encourages.)

Headings inside of an article

You are using h2 for lines of name-value pairs / metadata in your articles, e.g.:

    <h2><strong>Piece Name:</strong> And the Glory of the Lord</h2>
    <h2><strong>Composer:</strong> George Frédéric Handel</h2>

This would be appropriate if these were headings for actual content that follows, but it seems that these stand on their own. Using a heading element is not the best choice then.

You might want to use the dl element instead:

<dl>
  <dt>Piece Name:</dt> <dd>And the Glory of the Lord</dd>
  <dt>Composer:</dt> <dd>George Frédéric Handel</dd>
</dl>

(No need for strong then.)

Semantic markup details

Line breaks

Don’t use br for line breaks that are only needed for layout reasons. Use CSS instead (e.g., margin).

Piece/composer names

Use the cite element for work titles:

<cite>Why Does My Heart Feel So Bad</cite>

You may also use it for the name of the musician:

<cite>Moby</cite>

Copyright notice

<div class="mainFooter">
  <p>&copy; Copyright Jack Winstanley Web Design</p>
</div>

Use footer and small for the copyright notice:

<footer class="mainFooter">
  <p><small>&copy; Copyright Jack Winstanley Web Design</small></p>
</footer>
\$\endgroup\$
6
\$\begingroup\$

Some of this review looks at parts of your website beyond the scope of the code posted above.

User Experience

Take care when using saturated colours. \$\bbox[red]{\color{white}{\texttt{#FF0000}}}\$, being the reddest red possible, is the equivalent of screaming. Even a slight change to, say, \$\bbox[#cc3333]{\color{white}{\texttt{#CC3333}}}\$, would make the site design look more elegant and less distracting. A copyright footer is certainly not worthy of being highlighted in bright red.

All twelve numbered tabs should be of equal width. I suggest using <a title="Handel: And the Glory of the Lord" href="handel.html">1</a> to provide tooltips, because the numbers alone are basically meaningless.

Since you've used red for the \$\bbox[red]{\color{white}{\textrm{Click to view}}}\$ links on the index page, I have the impression that the red text on page 1 should be clickable. Disappointingly, those aren't links to glossary entries.

Content

Please use a real ♭ character (Unicode U+266D, or HTML entity &#x266d;) instead of b, and ♯ instead of #. That would make your text more readable and your site look more professional.

On reich.html, the title "Electric Counterpoint" should be an <h1>, not <h2>.

Markup

You are abusing the <article> tag:

The HTML Article Element (<article>) represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable, e.g., in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, or any other independent item of content.

"Metre & Rhythm", "Tonality", etc. should not be articles; they should be <section>s.

\$\endgroup\$
6
\$\begingroup\$

Usability

Mystery Meat Navigation

Here's something I haven't seen in a long time. Users shouldn't have to guess that the link labeled "1" is going to take them to the page on "Handel". Words are easier for people to remember than numbers, which will help repeat visitors find what they're looking for faster.

Headlines that are useful

All of your articles have the same useless headline: Set Work [Number]. Is something wrong with just using the title of the piece ("And the Glory of the Lord" vs. "Set Work 1")? If you're naming them based on the order these courses are in your syllabus, it's not a very useful convention. What is the lesson trying to teach? Again, words are easier to remember than numbers.

Whitespace

By setting your line-height to 1, you've eliminated useful whitespace between elements, particularly in your "articles". Given the font size/weight and proximity, the headline and labels (piece name/composer) end up looking squished together. Whitespace is important and enhances readability.

Redundancy

The li element must be a child of ul, making ul in this selector unnecessary (unless you're using it to increase specificity).

.mainArticle ul  li{
    margin-left: 22px;
    font-family: "Lato";
    list-style-type: square;
}

Probably not what you meant

The following modifies all h2 and h3 elements (you probably meant .mainHeader h1, .mainHeader h2, .mainHeader h3).

.mainHeader h1,h2,h3 {
    text-align: center;
    color: rgb(255,255,255);
    font-family: "Lato";
}

!important

The !important flag is something that should be avoided whenever possible. There are very very few situations where they are appropriate, and none of them apply to this website. If you're needing to override a previously declared style, then it is preferred that you increase the specificity of the selector instead.

Media Queries

It is preferred that you only modify a property only exactly as many times as necessary. The following only modifies the width property once:

p {
    color: orange;
}

@media (min-width: 30em) {
    p {
        width: 10em;
    }
}

But what you're doing is the equivalent of this:

p {
    max-width: 10em;
    color: orange;
}

@media (max-width: 30em) {
    p {
        width: 100%;
    }
}

See how the first example saves a line of code? This is most commonly referred to as mobile first.

\$\endgroup\$
6
\$\begingroup\$

Use the Cascading part of CSS

This is a smaller point, but you don't seem to be taking full advantage of cascading. For instance, this gave me pause:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

So you're basically taking practically every possible HTML element, and applying the same properties to them. This could more simply be done like this:

html {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

That way, the properties cascade down and are inherited by every element that is within <html> ... </html>. It might be better to go with body instead of html since anything outside the body is not actually displayed, and therefore doesn't have visual properties. Either should work fine for your usage.

Conveniently, you already have this:

body {
  line-height: 1;
}

So you could probably just add those other properties there and eliminate that huge style block you have at the beginning.

(Nice website by the way, I work on music a lot and will put it in my bookmarks!)

\$\endgroup\$
  • \$\begingroup\$ Actually, the only thing you list that will be inherited by descendant elements is the font property (and font is overriding font-size). \$\endgroup\$ – cimmanon Apr 3 '15 at 19:25
  • \$\begingroup\$ Oh, does CSS require that you explicitly tell each property to inherit? Haven't run into that issue before, but if you can clarify I'll be happy to edit my answer... thanks @cimmanon! \$\endgroup\$ – Phrancis Apr 3 '15 at 19:46
  • \$\begingroup\$ I edited my answer after doing a bit of reading. Does this look better? \$\endgroup\$ – Phrancis Apr 3 '15 at 21:50
  • \$\begingroup\$ No, that's not any better. Now it is misleading as well as containing redundancies. \$\endgroup\$ – cimmanon Apr 3 '15 at 22:52
  • \$\begingroup\$ Alright, I rolled it back. I'm open to suggestions, including deleting it if you think it is warranted. \$\endgroup\$ – Phrancis Apr 3 '15 at 23:20
3
\$\begingroup\$

Bug report

On page http://jackatron.web44.net/music/koko.html the play button is visible for a second only. I have visited the page with the latest firefox version on android.

About the flag !important

Last but not least I noticed "!important" in your css file. This is a quick 'n dirty method to get things done. I am pretty sure every solution that uses !important can be realized without, too.

It is not a good habit to use !important as other css declaration cannot change a declaration having this flag.

Case 1:

You have installed a third-party plugin using color: #fff !important; for a headline and you want to change the color of the headline as white does not fit to your design. You would be forced to make the change in the css file provided by the plugin.

Case 2:

The css file size increased or its been a while since the last time you have worked with the project and you have to change the css for links in the footer. The standard procedure is to use a path like div.footer-wrap footer a and declare some css definitions. You then take a look on the website but there's no change. You now have to investigate the behaviour. If you have not used !important the task would be done.

\$\endgroup\$
  • \$\begingroup\$ Thanks for your feedback, I'm fully aware of the audio issue, I just haven't linked any of the audio files because it isn't allowed on the free hosting. Is there any colours that you would suggest and how can I get round the !important thing? \$\endgroup\$ – Jackatron Apr 2 '15 at 19:47
  • \$\begingroup\$ In general I prefer more decent colors and design. My favourite is material. But keep in mind it is my personal opinion. If you want to override an existing css declaration you can either define it after the existing or use a more detailed css path. E.g.: given=div.footer a | more detailed=body div.footer a \$\endgroup\$ – AMartinNo1 Apr 2 '15 at 20:12
  • \$\begingroup\$ This is not really a code review answer... Can you add more detail about !important if you find it is a concern? Sounds more like a style review as it is... \$\endgroup\$ – Phrancis Apr 3 '15 at 3:24
  • \$\begingroup\$ I have updated it. Btw. isn't the style also part of code? \$\endgroup\$ – AMartinNo1 Apr 3 '15 at 9:21
  • 1
    \$\begingroup\$ Thanks for updating, I voted up! If OP requested suggestions on the design/style of the website, they probably would have posted on the Graphic Design site. Yes, the values assigning the colors are part of the code of course, but giving suggestions to change the colors of the website doesn't really help to improve the code :) \$\endgroup\$ – Phrancis Apr 3 '15 at 19:49
0
\$\begingroup\$

I generally like the design and feel, but on choosing colors, if in doubt, I always suggest selecting from ready sets available in Adobe Color, :

https://color.adobe.com/explore/most-popular/?time=all

Those color palettes are selected and put together by users, and generally you can't go wrong if you choose from those colors. As usually the users are good designers!

\$\endgroup\$
  • \$\begingroup\$ Thanks for chiming in an answer. We generally don't like answers that are mostly just a link. If you could edit in some explanation as to why you select from Adobe Color, as opposed to, for example, Bootstrap CSS, or make your own? \$\endgroup\$ – Phrancis Apr 3 '15 at 21:24
  • \$\begingroup\$ Thanks for your comments, I tried to add a couple of lines, I hope it makes it better. \$\endgroup\$ – Nick May 22 '15 at 11:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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