Build a Responsive, Mobile-Friendly Website From Scratch: Semantic HTML

Share this article

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 &copy; 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.

Frequently Asked Questions on Building a Responsive Mobile-Friendly Website from Scratch

What is the importance of a responsive mobile-friendly website?

A responsive mobile-friendly website is crucial in today’s digital age where a significant number of users access the internet through their mobile devices. Such a website ensures that all users have a seamless and consistent experience, regardless of the device they are using. It adjusts the layout, images, and functionalities to fit the screen size of the device. This enhances user experience, improves SEO rankings, and increases the time spent on the website, leading to higher conversion rates.

How can I make my website responsive?

Making a website responsive involves using CSS and HTML to resize, hide, shrink, or enlarge a website to make it look good on all devices (desktops, tablets, and phones). You can use CSS media queries to apply different styles for different devices based on their screen size. Also, using a flexible grid layout and flexible images and media ensures that your website layout adjusts to different screen resolutions.

What are the key elements of a mobile-friendly website?

Key elements of a mobile-friendly website include a responsive design, easy navigation, fast loading times, and touch-friendly buttons and links. The website should also have readable text without requiring zoom, avoid using flash, and have a viewport meta tag to control the layout on mobile browsers.

How can I test if my website is mobile-friendly?

You can use online tools like Google’s Mobile-Friendly Test to check if your website is mobile-friendly. This tool analyzes a URL and reports if the page has a mobile-friendly design. It also provides a screenshot of how the page looks on a mobile device and gives recommendations for improvement.

What is a viewport meta tag and why is it important?

The viewport meta tag is a key element in responsive web design. It gives the browser instructions on how to control the page’s dimensions and scaling. It ensures that your website fits the screen of the device properly and improves the mobile browsing experience.

How does a responsive website improve SEO?

Google prioritizes mobile-friendly websites in its search results. A responsive website is more likely to rank higher in search engine results, leading to increased visibility and more organic traffic. It also reduces the likelihood of running into issues with duplicate content, which can negatively impact SEO.

What is the difference between adaptive and responsive design?

While both adaptive and responsive designs aim to optimize websites for different devices, they do so in different ways. Responsive design uses CSS media queries to modify the website’s appearance based on the screen size, providing a consistent user experience across all devices. On the other hand, adaptive design uses static layouts that are designed for specific screen resolutions, and the server sends the appropriate layout based on the user’s device.

How can I optimize images for a responsive website?

To optimize images for a responsive website, you can use CSS to ensure that they scale and resize based on the screen size. You can also use tools to compress images without losing quality, which helps to improve page load times.

What are CSS media queries and how do they work?

CSS media queries are a feature used in responsive web designs to apply different style rules to different devices based on their characteristics, primarily their screen size. They check for conditions such as the device’s width, height, resolution, and orientation, and apply the appropriate CSS styles.

How can I ensure that my website is touch-friendly for mobile users?

To make your website touch-friendly, ensure that buttons, links, and navigational elements are large enough to be easily tapped with a finger. Avoid using hover effects as they don’t work well on touch devices. Also, provide enough space between tappable elements to prevent incorrect taps.

Annarita TranficiAnnarita Tranfici
View Author

I have a Bachelor's degree in European languages, cultures, and literature from the University of Naples. I'm passionate about graphics and web design, and for several years I've been working on projects and designs for many companies. I'm a writer for the Audero User Group; my specialties are HTML, CSS, Web Design, and Adobe Photoshop.

mobilemobile web discussionmobile web tutorialsTutorials
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week