We have all tried to read web site content originally designed for a desktop computer on our mobile phones. The text is too small, it is difficult to click on links, and overall, it is not a solid user experience.
Google recommends webmasters follow the industry best practice of using Responsive Web Design (RWD), namely "serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device." Rather than have separate sites for different devices that serve up the same content, web developers can make use of a single content set that Google can index efficiently.
Why Use RWD?
The goal of RWD is to provide the user with an optimal web site viewing experience, no matter what device is being used. Applying RWD principles to web site design allows for effortless reading and navigation of content with a minimum of resizing, panning, and scrolling, no matter what kind of device (desktop computer monitors, laptops, tablets, or mobile phones) is being used.
There are many RWD frameworks that developers can use, such as Skeleton, Bootstrap, Foundation and more. But if one is new to RWD, it is important to understand its basic concepts.
The Goal of This RWD Tutorial
The purpose of this tutorial is to help you build a basic RWD home page using HTML5 and CSS3, and to utilize CSS instructions called media queries that allow you to put together a page that scales smoothly between large and small device screens.
We will be creating a basic Home Page that looks like this:
Tutorial Steps
1. Download the tutorial file code called rwd-tutorial.zip. Unzip the file and save it to your desktop.
2. Using your HTML editor, open the file called start.html, located in the rwd-tutorial directory on your desktop.
3. Re-save the file as index.html to the rwd-tutorial directory.
Code Review
You will notice we are using standard HTML5 elements within the index.html file: <header>, <nav>, <section>, <aside> and <footer>. The HTML comments within the code document the basic page content structure as well as where the HTML elements begin and end.
We are also making use of two images: tulip-header.jpg that appears in the top left corner of the HTML page, and the large tulips.jpg image that appears in the middle of the page. The image files are located in the images directory within the rwd-tutorial folder.
Older web browsers need some help to process RWD pages. Internet Explorer versions prior to version 9 do not allow unknown elements (such as HTML5) to be styled without JavaScript. IE versions 6-8 do not recognize media queries.
HTML5Shiv <link: http://en.wikipedia.org/wiki/HTML5_Shiv> is a JavaScript workaround, created by Sjoerd Visscher, that enables styling of HTML5 elements in versions of Internet Explorer prior to version 9.
4. After the </title> tag, add the following HTML5Shiv and Respond code to the index.html file. (Please note that respond.min.js is already located in the scripts folder within the rwd-tutorial directory.
<!-- HTML5 Shiv -- enables styling of HTML5 elements in versions of Internet Explorer prior to version 9, which do not allow unknown elements to be styled without JavaScript --><!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--><!-- Enables IE6-8 browsers to recognize media queries --><script type="text/javascript" src="scripts/respond.min.js"></script>
5. Save index.html. Preview the file in your browser.
All the content appears left-justified. This is because we have not applied any CSS formatting to the HTML5 code.
Adding CSS for Page Layout and Element Styling
6. Using your HTML editor, open the file called stylesheet.css located in the styles folder within the rwd-tutorial directory.
Reviewing the CSS Declarations
Some things to note:
a) wrapper margin: auto;
Centers all content contained within the wrapper div as a group
b) wrapper max-width: 920px;
Stops the site content from scaling out of control across very
large monitors
c) main float:left;
Aligns the main content section to the left
d) aside float:right;
Aligns the right column of content in the layout.
e) #goTo
This declaration will be used for mobile phone navigation only.
More on this later in this tutorial.
NOTE: For images not used in backgrounds, it’s a good idea to set the property:value for the img declaration as width:100%. This will ensure that non-background images will scale correctly on each device.
7. Add the following link to the index.html (after the </title> element) to connect the stylesheet declarations to the HTML5 page:
8.Save index.html. Preview the file in your browser.
The layout is now structured and the content styled correctly.
Setting the Viewport
RWD pages optimized for a variety of devices must include a meta viewport element in the head of the document. A meta viewport tag instructs the browser on different devices how to control the page's dimensions and scaling.
9. Using your HTML editor, add the following code to index.html, right after the </title> element:
The attribute width=device-width instructs the page to match the screen’s width in device independent pixels.
The attribute initial-scale=1 instructs browsers to establish a 1:1 relationship between CSS pixels and device independent pixels regardless of device orientation.
The attributes minimum-scale=1.0, maximum-scale=1.0 can also be used to control the user’s ability to zoom the viewport content.
10. Save index.html.
Adding Media Queries
11. Using your HTML editor, open the stylesheet.css file from the styles folder within the rwd-tutorial directory. Copy and paste the following code to the bottom of the CSS file, after the #banner img declaration.
The @media rule is used to define different style rules for different media types/devices. In this case, we are requesting that any device with a viewport of 480 pixels or less use these style declarations to format and style the navigation bar content. The nav menu in the header will now display differently on mobile phones.
By following these media query rules, the mobile phone nav bar will display each nav button vertically, on its own line, and with a grey background.
12. Save the stylesheet.css file.
13. Refresh the index.html file in your desktop browser.
14. Reduce the size of your desktop browser window until it is at least 480 pixels wide. You will then see the page change to the mobile menu with the re-scaled large tulip image.
Adding a “Go To Main Content” Link for Mobile Phone Versions of the Page
In the media query rule within stylesheet.css, we declared a goTo ID that should display on devices with viewports less than 480 pixels.
#goTo {
display: block;
}
We are going to add a link to the top of the home page that anchors to the main content area. This means mobile phone users can click the link and immediately be taken to the main content area without having to scroll.
NOTE: This link will not show up on devices with viewport widths measuring more than 480 pixels.
1. Using your HTML editor, open index.html.
2. Copy and paste the following into the code after the <header> element:
<nav id="goTo"><ul><li><a href="#main" title="Go to Main Content">Go to Main Content</a></li></ul> </nav>
3. Save the index.html file, then refresh the file in your desktop browser.
4. Reduce the size of your desktop browser window until it is at least 480 pixels. You should then see the Go to Main Content link at the top of the page.
An Easy Way to Test Your RWD Site
Once your RWD site is “live” on a Web server, use the online tool called The Responsinatorhttps://www.responsinator.com/ to test your responsive Web site on different device resolutions.
Conclusion
Congratulations. You have learned the basic concepts of responsive Web design using HTML5 and CSS3.
Remember...technology changes fast. Computer, tablet, and smartphone manufacturers are constantly developing new products meant to outperform the competition. A responsive Web site built in HTML5 and CSS3 can keep up with the latest devices, and should serve up your Web content correctly for some time to come.
Author: Mary Gillen, one of Accelebrate’s HTML instructors
In-Depth RWD Training
For in-depth RWD training, click here to view all of Accelebrate's RWD training courses for you and your staff.
