Step Five: Responsive (optional)

Fancier ways exist, but we're going to make some simple adjustments so our site will respond when the site is viewed on a variety of devices with variable screen sizes. One coded site with CSS adjustments, as opposed to (for example) a separate site designed for mobile devices, is called responsive web design.

One of the first media sites to go responsive was the Boston Globe. Notice that as you make the Boston Globe site smaller, it doesn't just realign content, but simplifies and reorders content to adapt to the device and how one might use the site on that device.

/*
    MEDIA QUERIES
*/

@media screen and (max-width: 768px) {
    html { font-size: 1.0em; }
    #container { width: 100%; margin: 0;}
    article { padding: 2.0em 2.0em 0.5em; }
    aside { padding: 2.0em 2.0em; }
    h1 { font-size: 2.827em; }
    header img { width: 90%; }
    blockquote { padding: 0.3em 1.0em;  }
}

@media screen and (min-width: 1400px) {
    html { font-size: 1.25em; }
    #container { width: 1024px; }
}

Step Six: JavaScript plugin (optional)

A variety of interactive code elements have already been written by programmers and many are available for use. Larger ones are usually called libraries and simpler ones are called plugins.

Some data, visual and interactive journalist favorites:

To get the idea of what this looks like without getting complicated, we're going to add a very simple smooth scrolling effect to our site.

1. Add in a basic navigation system.

We're going to add a very basic navigation bar to our site. When we click on a link, it will connect to a location within our current page by looking for an id of the same name.

In your CSS, replace your HEADER styles and add in NAVIGATION styles.

CSS:

/* 
    HEADER
*/

header {
    background-color: rgba(255,255,255,0.3);
    margin-top: 50px;
}

header img {
    display: block;
    padding: 40px;
    margin: 0 auto;
}


/*
    NAVIGATION
*/

nav {
    background-color: #000000;
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 960px;
    margin: 0 auto;
}

nav li {
    float: left;
    width: 25%; /* or 100% divided by number of items */
}

nav a:link, nav a:visited {
    display: block;
    color: #FFFFFF;
    text-align: center;
    padding: 16px 0;
    text-decoration: none;
    font-family: 'Libre Baskerville', Baskerville, 'Times New Roman', serif;
    font-weight: 400;
    font-size: 0.8em;
}

nav a:hover, nav a:active {
    background-color: rgba(255,255,255,0.3);
}

In your HTML, add in an unordered list, which is often the element of choice for a navigation system. It can go anywhere, but let's put it either before or after the <header>, near where it will appear:

We added in the id needed for each link at the beginning because it helped us identify each module (section) in our design, so we don't need to add those in again.

HTML:

<nav>
    <ul>
        <li><a href="#intro">The Chicago Dog</a></li>
        <li><a href="#lingo">Learn the Lingo</a></li>
        <li><a href="#no-ketchup">No Ketchup</a></li>
        <li><a href="#hot-dougs">Hot Doug's</a></li>
    </ul>
</nav>

2. Add in the JS code to make the smooth scroll happen.

A plugin or library would involve linking to JS (.js) files and then knowing what functions to call and how to call them. In this case, the code looks for any links going to a location within our current page (links that start with a # = id), then smoothly scrolls to that position. It's simple enough just to paste in.

Place the JavaScript code at the end of your HTML file, after the container div closes, but before end body and html tags:

JavaScript is often placed at the end of a web page. Because the page will load from top to bottom, and ven though it may only take a second or two to load the JS, this delays the content loading and can give the impression that the page is slow. Many people when faced with a slow page, will simply click away.

HTML:

        ...
        </div>

        <!-- jQuery (a JavaScript library) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

        <!-- CSS-Tricks.com smooth scrolling effect -->
        <script>
            $(function() {
              $('a[href*=#]:not([href=#])').click(function() {
                if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                  var target = $(this.hash);
                  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                  if (target.length) {
                    $('html,body').animate({
                      scrollTop: target.offset().top
                    }, 1000);
                    return false;
                  }
                }
              });
            });
        </script>
    </body>
</html>


Step 5 | Step 6


Step Steven & Eight: Validator & Web Servers   ➳

0 | 1 | 2 | 3 | 4 | 5-6 | 7-8