In the last article, as promised, we’ve begun doing some practical work with the planning and creation of a mockup. Now, we’ve focused on how to build a personal project wireframe thinking responsively and—consequently—how a responsive design can adapt to three target layouts: Default (PC desktop), Portrait Tablet, and Smartphone.
We’ve seen how to arrange the elements of a typical website in the three main devices’ categories by creating a template that represents the common content elements. In this third part of this series, I’ll concentrate on writing the HTML code and work on the structure of the homepage, while in the very next, I’ll be setting the first CSS styling rules to build the initial design of our project.
First Step: HTML code
Let’s begin building the structure of our website through the use of HTML code. To avoid confusion and miss some steps, we’ll proceed by dividing the layout into three parts, just like we did during the mockup design phase. We’ll pause from time to time on parts of the code that are inherent only to that single part. The first part we’ll face with will of course be the header, that is the part that in our mockup consists of the following elements: banner, newsletter-box, and main menu bar. Now, what we have to do as our first task is declare the type document that for HTML5 is indicated in the following way:
<!DOCTYPE html>
Next, we must add the section that is necessary to help the web browser to interpret the content in the following body section. This section contains specific tags, CSS stylesheets, and other elements that remain hidden and are not displayed in the browser. These elements are generally called meta information (basically “information about information”) because their function is to describe what kind of information is on the page.
The first meta-tag which needs a specification is “meta charset”; it defines what character coding is used in the page. In our case, we set it to UTF-8, which is a variable width Unicode format compatible with ASCII or plain text for the basic alphanumeric characters. By using the “upper half” of the 8-bit ASCII set and extension codes, it can handle over a million unique characters.
It’s a requirement that any web page defines the formatting of the page within it’s header info so that all the browsers know exactly how to read and interpret the content. Otherwise, they’ll show the characters using their “best guess,” which isn’t always accurate. The guess could be wrong, and this will lead to showing the wrong characters to the users.
The next item we have to pay attention to is the viewport property. Setting a viewport tells the browser how content should fit on the device’s screen and informs the browser that the site is optimized for mobile. For example…
<meta name="viewport" content="width=device-width, initial-scale=1.0">
…tells the browser to set the viewport to the width of the device with an initial scale of 1. After this, we insert into the title tag the name we’ve chosen for our website. Finally, we have to link our HTML page to the CSS stylesheets that we’ll use to define the style of our homepage; the HTML “link” element specifies relationships between the current document and other documents. With this line of code…
<link rel="stylesheet" href="css/common.css" type="text/css" />
…we link the document to the common stylesheet (that is, the document which contains all the common CSS rules that will be shared by the three versions of the project), while this one…
<link rel="stylesheet" href="css/responsive.css" type="text/css" />
…recalls to the file where there are the specifications of the particular rules that will be applied only to that particular device indicated. Please note that since we’re using HTML5, you don’t actually need to specify type="text/css".
Close the head tag and move on to the body section. At this point, we have to create two separate divs: one for the banner, and one for the newsletter box.
In the first, in addition to the id, it’s a good practice for accessibility to use a WAI-ARIA role; generally roles describe widgets and structure. Structural roles are added to markup as attributes of elements, which makes it perfect for our purposes.
WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) is a technical specification published by the World Wide Web Consortium that specifies how to increase the accessibility of web pages. It allows web pages (or portions of pages) to declare themselves as applications rather than as static documents by adding role, property, and state information to dynamic web applications in order to make controls and content updates accessible to users with disabilities. That’s why all these kinds of specifications are so important.
Let’s continue our project by building a newsletter opt-In form. first of all, add a form with <form> tags. The opening tag should include the form name, a method which can be either “query” or “post,” and the destination or “action” where the form should send the input (I put a # to indicate that it is not fixed).
Now, add a text field with a label to collect the email address and assign an ID and a class for the following changes of style you might apply to your form. Finally, add a submit button to the form. The information put into the form fields will be sent to the receiving page for processing when the visitor clicks the submit button. Insert the word “Submit” for the input type, name and value fields to create a submit button, and close the form and div tags.
So, at this point, you should have the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website name</title>
<link rel="stylesheet" href="css/common.css" type="text/css" />
<link rel="stylesheet" href="css/responsive.css" type="text/css" />
</head>
<body>
<header>
<div id="banner" role="banner"></div>
<div id="newsletter-box">
<form name="newsletter-form" action="#" method="post">
<label for="newsletter-email">Newsletter:</label>
<input type="email" id="newsletter-email" class="newsletter-email" name="email" required="required" placeholder="Your email" />
<input type="submit" name="submit" value="Submit" />
</form>
</div>
</header>Let’s proceed with the central part of our layout, namely the one used for different types of content.
First and foremost, let’s create a classic menu, composed of five options that will be the main categories of the whole website: Homepage, News, Graphics, Mobile, and Web Design. In this case, the element most suitable for our purpose is the nav element, which is a semantic element used for declaring a navigational section of a website (that is, a section of a page that links to other pages or to parts within the page).
Within the nav tag, let’s add an unordered list (to which we’ll assign a class called “menu-item”). For the content section, let’s create a main div whose ID is “content”, a wrapper div, and put an article within it. The article element is a specialized kind of section; it has a more specific semantic meaning as an independent, self-contained part of the page. In our sample, it’ll be used to contain the description of the purpose of our website.
As for the wrapper div, it will contain three more elements: a div which contains all the information about the author (and a photo,if you want), an aside in which the author can add his screencasts, and another aside intended for his latest tweets. Two points on the aside element: it is used for tangentially-related content. However, in the interpretation of this new element there lies some confusion as to how it should be used; remember that just because some content appears to the left or right of the main content isn’t enough reason to use the aside element. The better way to decide whether you should use an aside or not involves asking yourself if the content within the aside can be removed without reducing the meaning of the main content or if the main content is truly dependent on the aside. Pullquotes, glossaries, or even related links are some examples of tangentially related content that are appropriate for an aside.
The code for this second part is the following:
<nav class="menu">
<ul class="menu-list">
<li class="menu-item">
<a class="menu-item-link" href="./homepage" title="Homepage">Homepage</a>
</li>
<li class="menu-item">
<a class="menu-item-link" href="./news" title="News">News</a>
</li>
<li class="menu-item">
<a class="menu-item-link" href="./graphics" title="Graphics">Graphics</a>
</li>
<li class="menu-item">
<a class="menu-item-link" href="./mobile" title="Mobile">Mobile</a>
</li>
<li class="menu-item">
<a class="menu-item-link" href="./webdesign" title="Web Design">Web Design</a>
</li>
</ul>
</nav>
<div id="content">
<article id="description-box">
<h3>Title</h3>
<p>
Your content here
</p>
</article>
<div id="wrapper">
<div id="author-info-box">
<p>
Information about the author <br />
</p>
</div>
<aside id="video-box">
<video>
<source src="movie.mp4" type='video/mp4;' />
<source src="movie.webm" type='video/webm;' />
</video>
</aside>
<aside id="twitter-box">
<p>
<img class="twitter-bird" src="./images/twitter-bird.png" alt="Twitter Bird" />
Follow me on Twitter! <br />
We're in (number of follower)
</p>
</aside>
<br class="clear-both" />
</div>
</div>
The last remaining part is the section called footer, which generally contains information about its sections, the author, links to related documents, copyright data, and so on. In some cases, you can also find links to profiles or personal pages of ubiquitous social networks such as Facebook, Twitter, Google+, and LinkedIn. So, we place the principal information in a paragraph inserted in the new HTML5 tag <footer> and the links directed to the social profiles mentioned above in a div whose main class is named “social-bar”.
Here is the code of this last part:
<footer id="main-footer">
<p>
Author's name. All rights reserved. Copyright © 2012 - 2013.
</p>
<div class="social-bar">
<a href="./facebook" title="Facebook">
<img src="./images/icons/facebook.png" alt="Facebook icon" />
</a>
<a href="./twitter" title="Twitter">
<img src="./images/icons/twitter.png" alt="Twitter icon" />
</a>
<a href="./googleplus" title="Google+">
<img src="./images/icons/google.png" alt="Google+ icon" />
</a>
<a href="./linkedin" title="LinkedIn">
<img src="./images/icons/linkedin.png" alt="Linkedin icon" />
</a>
</div>
</footer>
</body>
</html>
Conclusion
In this article, we’ve seen how to start building a website from scratch with a particular focus on the HTML code and its main elements. In the next article, I’ll introduce the first CSS rules in order to have a general idea of the graphic style that the homepage of our website will display. Once we pass this step, we’ll concentrate on the aspects and the procedures to be followed to convert our static homepage into a responsive homepage that will be viewed correctly on numerous different devices.
