In the first article of this brand new series, I have introduced the main objectives of the series and given a short but complete introduction on the critical components of media queries and responsive breakpoints. Now, it’s time to begin doing some practical work. As I have mentioned before, I’ll start with the planning and creation of a mockup for each of the three main device types on which our responsive website will be designed, tested, and displayed: PC desktops, tablets, and mobile phones. Returning to our files, the first, called Style.css, is the one which contains all the common CSS rules. The second one called responsive.css contains the specifications of the rules to apply to the chosen devices.HTML can be edited by using a professional HTML editor like:
- Adobe Dreamweaver
- Microsoft Expression Web
- Coffee Cup HTML Editor
First Step: HTML code
The first step in creating a Responsive template is to add the code for the header, body, and footer.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. 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>
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">
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/style.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".Now Close the head tag and come on to the body section. Your final code look like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8" />
<meta name="viewport" content="width=device-width">
<title>Fluid Responsive Template</title>
</head>
<body>
<header>
<div id="header">
<h1>Responsive Template</h1>
</div>
</header>
</body>
</htm>
You will now have a page with no styles just HTML Webpage Structure. Now we need to create the CSS files and content for the Template. The Next tutorial will explain how to add the styles to the stylesheets and contents for your Responsive Template.
