We offer private, customized training for 3 or more people at your site or online.
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.
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.
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:
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 © 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.
All the content appears left-justified. This is because we have not applied any CSS formatting to the HTML5 code.
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.
The layout is now structured and the content styled correctly.
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.
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; }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.
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; } }
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.
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.
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.
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 TrainingFor in-depth RWD training, click here to view all of Accelebrate's RWD training courses for you and your staff. |
Our live, instructor-led lectures are far more effective than pre-recorded classes
If your team is not 100% satisfied with your training, we do what's necessary to make it right
Whether you are at home or in the office, we make learning interactive and engaging
We accept check, ACH/EFT, major credit cards, and most purchase orders
Alabama
Birmingham
Huntsville
Montgomery
Alaska
Anchorage
Arizona
Phoenix
Tucson
Arkansas
Fayetteville
Little Rock
California
Los Angeles
Oakland
Orange County
Sacramento
San Diego
San Francisco
San Jose
Colorado
Boulder
Colorado Springs
Denver
Connecticut
Hartford
DC
Washington
Florida
Fort Lauderdale
Jacksonville
Miami
Orlando
Tampa
Georgia
Atlanta
Augusta
Savannah
Hawaii
Honolulu
Idaho
Boise
Illinois
Chicago
Indiana
Indianapolis
Iowa
Cedar Rapids
Des Moines
Kansas
Wichita
Kentucky
Lexington
Louisville
Louisiana
New Orleans
Maine
Portland
Maryland
Annapolis
Baltimore
Frederick
Hagerstown
Massachusetts
Boston
Cambridge
Springfield
Michigan
Ann Arbor
Detroit
Grand Rapids
Minnesota
Minneapolis
Saint Paul
Mississippi
Jackson
Missouri
Kansas City
St. Louis
Nebraska
Lincoln
Omaha
Nevada
Las Vegas
Reno
New Jersey
Princeton
New Mexico
Albuquerque
New York
Albany
Buffalo
New York City
White Plains
North Carolina
Charlotte
Durham
Raleigh
Ohio
Akron
Canton
Cincinnati
Cleveland
Columbus
Dayton
Oklahoma
Oklahoma City
Tulsa
Oregon
Portland
Pennsylvania
Philadelphia
Pittsburgh
Rhode Island
Providence
South Carolina
Charleston
Columbia
Greenville
Tennessee
Knoxville
Memphis
Nashville
Texas
Austin
Dallas
El Paso
Houston
San Antonio
Utah
Salt Lake City
Virginia
Alexandria
Arlington
Norfolk
Richmond
Washington
Seattle
Tacoma
West Virginia
Charleston
Wisconsin
Madison
Milwaukee
Alberta
Calgary
Edmonton
British Columbia
Vancouver
Manitoba
Winnipeg
Nova Scotia
Halifax
Ontario
Ottawa
Toronto
Quebec
Montreal
Puerto Rico
San Juan