Responsive Web Design 101

How to build a simple responsive Web page using HTML5 and CSS3.

  • Knowledge needed: Basic HTML5 & CSS3
  • Requires: HTML Editor & Web browser

Download tutorial code
See demo here

More and more people are using mobile phones and tablets to search, shop, study and conduct business. It is estimated that the US will surpass 200 million smartphone users, or nearly 65% of the country’s total population, by 2017. (source: http://www.emarketer.com/Article/2-Billion-Consumers-Worldwide-Smartphones-by-2016/1011694)

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.

Multiple device screen sizes

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.

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="utf-8"/>
  <title>Responsive Web - Basic Code</title>
  </head>
  <body>

  <!—Important to add a document wrapper div that holds all content in the body
container that should appear in the viewport of any device -->
<div id="wrapper"> <!—Start header -->
<header>
<h1>TULIPS</h1>
<!—Start navigation -->
<nav>
<ul> <li><a href="#" title="Home">Home</a></li> <li><a href="#" title="About">About Tulips</a></li> <li><a href="#" title="Work">Buy Tulips</a></li> <li><a href="#" title="Contact">Contact</a></li> </ul>
</nav>
<!—End navigation -->
<!--- Start large image of tulips image call -->
<div id="banner"> <img src="images/tulips.jpg" alt="banner" /> </div>
<!--- End large image of tulips image call -->
<!--- End header -->
</header>
<!---Start main content section -->
<section id="main">
<h1>Tulip History</h1>
<p>"The tulip is a perennial, bulbous plant with showy flowers in the genus Tulipa, of which around 75 wild species are currently accepted and which belongs to the family Liliaceae. The genus's native range extends west to the Iberian Peninsula, through North Africa to Greece, the Balkans, Turkey, throughout the Levant (Syria, Israel, Lebanon, Jordan) and Iran, North to the Ukraine, southern Siberia and Mongolia, and east to the Northwest of China. The tulip's centre of diversity is in the Pamir, Hindu Kush, and Tien Shan mountains. It is a typical element of steppe and winter-rain Mediterranean vegetation. A number of species and many hybrid cultivars are grown in gardens, as potted plants, or to be displayed as fresh-cut flowers. Tulip cultivars have usually several species in their direct background, but most have been derived from Tulipa suaveolens, often erroneously listed as Tulipa schrenkii. Tulipa gesneriana is in itself an early hybrid of complex origin and is not the same taxon as was described by Conrad Gesner in the 16th century." - Wikipedia</p> </section>
<!--- End main content section -->
<!--- Start right column content section -->
<aside> <h1>Care</h1> <p>"Water tulips during dry spells in the fall; otherwise, do not water. Compost annually. Deadhead tulips after flowering. Allow the foliage to yellow for about 6 weeks after flowering before removing it. The bulbs of Species tulips may be left in the ground for several years; others may be lifted annually, once the leaves have died down, and ripened in a warm, dry place. Replant the largest bulbs; smaller bulbs may be grown in containers in a bulb frame, in mix of equal parts loam, leaf mold, and sharp sand. When in growth, water moderately, applying a balanced liquid fertilizer weekly for 3 or 4 weeks after flowering; keep dry in summer, and repot annually." - The Farmers Almanac </p> </aside> <!--- End right column content section --> <!--- Start footer section -->
<footer>
Copyright &copy; 2015 Tulip Consultants, Inc. All rights reserved. EMAIL: <a href="mail:[email protected]">[email protected]</a> PHONE: <a href="tel:+000-000-0000">000-000-0000</a>
</footer>
<!--- Start footer section -->
<!-- Close document wrapper -->
</div> </body> </html>


Making RWD Work in Older Browsers

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.

 

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.

Example Web Page without CSS

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.

 

  /* Reset
------------------------------------------------------------ */
* { margin: 0; padding: 0; } html { overflow-y: scroll;} body { background:#ffffff; font-size: 13px; color: #666666; font-family: Arial, helvetica, sans-serif;} ol, ul { list-style: none; margin: 0;} ul li { margin: 0; padding: 0;} h1 { margin-bottom: 10px; color: #111111;} a, img { outline: none; border:none; color: #000; font-weight: bold; text-transform: uppercase;} p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;} img { display: block; margin-bottom: 10px;} aside { font-style: italic; font-size: 0.9em;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
/* Structure */ #wrapper { width: 96%; max-width: 920px; margin: auto; padding: 2%; } #main { width: 60%; margin-right: 5%; float: left; }
aside { width: 32%; float: right; background: #fae1bd; padding: 1%; }
footer { float: left; clear:left; margin-top: 15px; margin-bottom: 15px; width: 100%; height:auto; border-top: 3px solid #da000e; padding-top:1%; }
/* Logo H1 */ header h1 { height: 70px; width: 160px; float: left; display: block; background: url(../images/tulip-header.jpg) 0 0 no-repeat; text-indent: -9999px; color: #000000; }
/* Nav */ header nav { float: right; margin-top: 40px; }
header nav li { display: inline; margin-left: 15px; }
#goTo { display: none; } #goTo li { background: #f7b0b0; }
/* Banner */ #banner { float: left; margin-bottom: 15px; width: 100%; }
#banner img { width: 100%; }

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:

      <link href="styles/stylesheet.css" type="text/css" rel="stylesheet">

 

8. Save index.html. Preview the file in your browser.

Example Web Page with CSS

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:

      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />

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.

  /* Media Queries */
  @media screen and (max-width: 480px) {
           #goTo {
                    display: block;
                    }
header nav, #main, aside { float: left; clear: left; margin: 0 0 10px; width: 100%; }
header nav li { margin: 0; background: #efefef; display: block; margin-bottom: 3px; }
header nav a { display: block; padding: 10px; text-align: center; } }
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.

Web Page on Mobile Device



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.

Web Page on Mobile Device

An Easy Way to Test Your RWD Site

Once your RWD site is “live” on a Web server, use the online tool called The Responsinator https://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.



Contact Us:

Accelebrate’s training classes are available for private groups of 3 or more people at your site or online anywhere worldwide.

Don't settle for a "one size fits all" public class! Have Accelebrate deliver exactly the training you want, privately at your site or online, for less than the cost of a public class.

For pricing and to learn more, please contact us.

Contact Us Train For Us

Toll-free in US/Canada:
877 849 1850
International:
+1 678 648 3113

Toll-free in US/Canada:
866 566 1228
International:
+1 404 420 2491

925B Peachtree Street, NE
PMB 378
Atlanta, GA 30309-3918
USA

Subscribe to our Newsletter:

Never miss the latest news and information from Accelebrate:

Microsoft Gold Partner

Please see our complete list of
Microsoft Official Courses

Recent Training Locations

Alabama

Huntsville

Montgomery

Birmingham

Alaska

Anchorage

Arizona

Phoenix

Tucson

Arkansas

Fayetteville

Little Rock

California

San Francisco

Oakland

San Jose

Orange County

Los Angeles

Sacramento

San Diego

Colorado

Denver

Boulder

Colorado Springs

Connecticut

Hartford

DC

Washington

Florida

Fort Lauderdale

Miami

Jacksonville

Orlando

Saint Petersburg

Tampa

Georgia

Atlanta

Augusta

Savannah

Idaho

Boise

Illinois

Chicago

Indiana

Indianapolis

Iowa

Ceder Rapids

Des Moines

Kansas

Wichita

Kentucky

Lexington

Louisville

Louisiana

Banton Rouge

New Orleans

Maine

Portland

Maryland

Annapolis

Baltimore

Hagerstown

Frederick

Massachusetts

Springfield

Boston

Cambridge

Michigan

Ann Arbor

Detroit

Grand Rapids

Minnesota

Saint Paul

Minneapolis

Mississippi

Jackson

Missouri

Kansas City

St. Louis

Nebraska

Lincoln

Omaha

Nevada

Reno

Las Vegas

New Jersey

Princeton

New Mexico

Albuquerque

New York

Buffalo

Albany

White Plains

New York City

North Carolina

Charlotte

Durham

Raleigh

Ohio

Canton

Akron

Cincinnati

Cleveland

Columbus

Dayton

Oklahoma

Tulsa

Oklahoma City

Oregon

Portland

Pennsylvania

Pittsburgh

Philadelphia

Rhode Island

Providence

South Carolina

Columbia

Charleston

Spartanburg

Greenville

Tennessee

Memphis

Nashville

Knoxville

Texas

Dallas

El Paso

Houston

San Antonio

Austin

Utah

Salt Lake City

Virginia

Richmond

Alexandria

Arlington

Washington

Tacoma

Seattle

West Virginia

Charleston

Wisconsin

Madison

Milwaukee

Alberta

Edmonton

Calgary

British Columbia

Vancouver

Nova Scotia

Halifax

Ontario

Ottawa

Toronto

Quebec

Montreal

Puerto Rico

San Juan

© 2013-2019 Accelebrate, Inc. All Rights Reserved. All trademarks are owned by their respective owners.