2
\$\begingroup\$

Followup to this


I have created a simple HTML5/CSS3/JS website with a navbar and no content.


index.html:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8" />
  <title>SigmaCubes - Home</title>
  <meta name="author" content="Julian Lachniet,Simon Kwilinski,Jacob Wysko" />
  <meta name="description" content="SigmaCubes is the best website on the internet." />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  <link href="https://fonts.googleapis.com/css?family=Lato|Noto+Sans|Nunito:600|Material+Icons" rel="stylesheet" type="text/css" />
  <link href="/lib/css/reset.css" rel="stylesheet" type="text/css" />
  <link href="/lib/css/sigmacubes.css" rel="stylesheet" type="text/css" />
  <link href="/favicon.ico" rel="shortcut icon" />
  <script src="/lib/js/main.js"></script>
</head>
<body>
  <div>
    <noscript>
      <div class="error">
        <h1>Error:</h1>
        <h2>JavaScript</h2>
      </div>
    </noscript>
    <!--[if IE]>
      <div class="error">
        <h1>Error:</h1>
        <h2>Old Internet Explorer</h2>
      </div>
    <![endif]-->
    <div id="nav-stupid" class="error">
      <h1>Error:</h1>
      <h2>Resolution</h2>
    </div>
  </div>
  <div id="wrapper">
    <div id="nav-large">
      <img alt="SigmaCubes Logo" class="logo_h" height="24" src="/img/logo_h.svg" />
      <div id="nav-large-links">
        <a class="link-large" href="#">About Us</a>
        <a class="link-large" href="#">Projects</a>
        <a class="link-large" href="#">Contact</a>
        <a class="link-large" href="#">Donate</a>
      </div>
    </div>
    <div id="nav-small">
      <img alt="SigmaCubes Logo" class="logo_h" height="24" src="/img/logo_h.svg" />
      <a class="link-nav" onclick="toggleNav()" href="javascript:void(0);">
        <img height="28" src="/img/menu.svg" />
      </a>
    </div>
    <div id="nav-small-links">
      <a class="link-small" href="#">About Us</a>
      <a class="link-small" href="#">Projects</a>
      <a class="link-small" href="#">Contact</a>
      <a class="link-small" href="#">Donate</a>
    </div>
  </div>
</body>
</html>

reset.css:

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;
}

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;
}

main.js:

var navEnabled = false;

document.addEventListener('DOMContentLoaded', main);

function main() {
  setDisplay("wrapper", "block");
}

function toggleNav() {
  if (navEnabled) {
    setDisplay("nav-small-links", "none");
  } else {
    setDisplay("nav-small-links", "block");
  }
  navEnabled = !navEnabled;
}

function setDisplay(id, state) {
  document.getElementById(id).style.display = state;
}

What can I try to improve?

\$\endgroup\$
1
\$\begingroup\$

title

It’s better for usability to use "page-title - site-name" instead of "site-name - page-title".

But for the homepage, you might want to omit the page-title ("Home"), as the site/domain name only typically represents the homepage.

<title>SigmaCubes</title>

Error messages

You shouldn’t use a heading element for the content, as this creates an outline that’s not useful. Use p instead. And to convey the importance of the error, you could use the strong element.

<div class="error">
  <h1>Error</h1>
  <p><strong>Old Internet Explorer is not supported</strong></p>
</div>

You should add the hidden attribute to your error messages, and remove it as soon as the error becomes relevant. Otherwise the markup affects your outline (i.e., you have all possible errors listed at the top of the document outline).

<div class="error" hidden>
<div id="nav-stupid" class="error" hidden>

(For the error about disabled JavaScript, you’d need to add the hidden attribute via JS itself, of course.)

alt for logo

The alt attribute for a logo shouldn’t contain the term "logo" (unless that’s part of the name, of course). Just use the site name.

alt="SigmaCubes"

Navigation

Use the nav element for the navigation.

Use a ul element for the navigation links (without a list, you should use some kind of textual delimiter separating the navigation links, e.g. for text browsers).

\$\endgroup\$

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.