Responsive Web Design (RWD) is a term that was coined by Ethan Marcotte in 2010. It refers to making Web pages which respond to the size of the display (usually based on the width of the screen) by allowing the page's content to shift around, resize, change position, and/or adjust other CSS properties.
But various other approaches to what would eventually become "Responsive Web Design" were used in Web sites as early as 2001.
The most common way of detecting the display screen's width is through the CSS @media rule, which was created by the W3C in the CSS3 specification. Most browsers, including mobile browsers, now support CSS3 properties and rules, so we are definitely in a "Responsive Web Design" world.
There is a good article at Wikipedia which gives more details about the development of what we now know as Responsive Web Design.
The ingenious folks at the w3schools.com site have created a great general-purpose stylesheet which can be easily incorporated into your site as the basis for making it Responsive. We will be using their stylesheet in today's class.
You can probably follow the instructions in the w3schools.com tutorial for the w3.css stylesheet, but let me summarize some of the key points here:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/w3.css">(assuming that you have placed the w3.css file into a "css" folder in your site)
Another ingenious system for implementing RWD is called Bootstrap. Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open source product in August 2011 on GitHub. (GitHub is a site which makes downloadable scripts and libraries available to Web developers.) Bootstrap sometimes introduces CSS and JavaScript conflicts into a site, so we will not look at Bootstrap in this course.
Images in a RWD page will not automatically adjust their size to fit the display screen.
You must tell the page to adjust the image's size.
The best way to tell the page to adjust the image's size is to use a stylesheet declaration (rule) to set the width as a percentage.
For example, you could set your "banner" image's width to 100%. The browser will then automatically adjust both the width and the height of the image to fit the display device's screen. The browser adjusts both the width and height even though you are setting only the width, so the image's proportion (aspect ratio) remains the same.
But the nice folks at W3Schools.com have also provided a way to set an image to automatically resize itself to fit the size of its container. Scroll down to the "Responsive Images" section of the page.
To summarize: If you want the image to scale down if it has to, but never scale up to be larger than its original size, use the w3-image class.
Now it's time to get into the nitty-gritty details of using RWD in your Web pages. We will, as I said above, use the w3.css stylesheet in today's class.
There are a bunch of examples and template pages at
the w3.css tutorial pages.
I am going to show you my "Instructor's" site as a sample RWD site. You can
work through the tutorials at w3schools.com to get more of the details.
The Instructor's site is at http://spacestuff.xyz.
Please note these basic features of how the w3.css RWD system works:
Here is the source of the site's index page. This is page index.html at the Instructor's site:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Space Stuff - Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="space.css">
<meta name="Description" content="This site is a prototype site for providing information about space and space exploration.">
<meta name="Keywords" content="space, space exploration, research, resources">
</head>
<body class="w3-container mainBody">
<div id="mainContainer">
<div id="banner">
<a href="index.html"><img src="images/SpaceLogo.png" id="logoImg" alt="The Final Frontier" title="The Final Frontier"></a>
<a href="index.html"><img src="images/spaceBanner.jpg" id="bannerImg" alt="Space Stuff" title="Space Stuff"></a>
</div>
<div id="mainContent" class="w3-container">
<div class="w3-container" id="mainMenuDiv">
<div class="w3-bar w3-grey" id="navContent">
<a href="index.html" class="w3-bar-item w3-hover-indigo w3-mobile">Home</a>
<a href="about.html" class="w3-bar-item w3-hover-indigo w3-mobile">About Us</a>
<a href="portfolio.html" class="w3-bar-item w3-hover-indigo w3-mobile">Portfolio</a>
<a href="media.html" class="w3-bar-item w3-hover-indigo w3-mobile">Media Kit</a>
<a href="resources.html" class="w3-bar-item w3-hover-indigo w3-mobile">Resources</a>
<a href="contactus.html" class="w3-bar-item w3-hover-indigo w3-mobile">Contact Us</a>
<a href="sitemap.html" class="w3-bar-item w3-hover-indigo w3-mobile">Site Map</a>
</div>
</div>
<div class="w3-container">
<div id="breadcrumbs">
> Home
</div>
<h2>Space Stuff</h2>
</div>
<div class="w3-row">
<div class="w3-third w3-container">
<p>
This site will provide information about space, space exploration, and the
physics concepts that are involved with space.
</p>
</div>
<div class="w3-third w3-container">
<p>
Some of the topics that will
be presented here are:
</p>
<ul>
<li>Rocket History</li>
<li>Lunar Exploration</li>
<li>Planetary Probes</li>
<li>Manned Exploration</li>
</ul>
</div>
<div class="w3-third w3-container">
<img src="images/total_eclipse.jpg" width="95%" id="firstImage" alt="Total Eclipse" title="Total Eclipse">
<br>
<span>Total Eclipse of March 7, 1970 -- by Jim Link</span>
<br><br>
</div>
</div>
<div class="w3-container w3-grey" id="footerDiv">
<p class="w3-container" id="footer">
© Copyright 2019 James B. Link
</p>
</div>
</div>
</div>
</body>
</html>
Let's look at some of the most important features and usage of the w3.css classes, as shown in the above page's code:
w3-col m4 l3which tells the browser to take up 4/12 (1/3) of the display row in a medium screen, and 3/12 (1/4) of the display row in a large screen, for this column.
Fonts are a challenge in RWD, with regard to the font-size style property.
If you hear someone talking about "fluid fonts", they are probably referring to the font-size property in a RWD page.
An excellent online article regarding fluid fonts is this article, which refers to "fluid typography" instead of "fluid fonts", but it is the same idea. I will summarize the main ideas in the article, in the rest of this section of the eHandout.
Let me begin with a warning: Fluid fonts are not for everyone, nor are they for every site. Use them carefully, and TEST your pages thoroughly on many differently-sized screens.
Four "fluid" size units are available in the browser whenever the HTML page is using a viewport. So in a RWD page, since it does have a viewport meta tag, we have these four "fluid" size units available:
The easiest way to start using fluid fonts is to set the font-size on the html tag to be one of these fluid units, like this (in your external stylesheet):
html { font-size: 2vw; }
In the example above, we've set the font-size property for the root element (meaning: the html element selector) to 2vw. Therefore, we have effectively changed the "root em" unit. Because all em and rem units are either directly or indirectly related to the root em unit, they also will now be fluid.
So if, for example, we set the paragraph font-size property to be 2em, like this:
p { font-size: 2em; }
then the effective font size for the paragraphs will be 4vw, since it is twice (that's the real meaning of "2em") the current font size, which is 2vw.
The page below looks like this in the browser. Move the browser's right or left border in and out to see how the font size changes smoothly in response to the browser's width.
Here is the code for this page, fluidFonts.html, which illustrates the above ideas:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fluid Fonts</title>
<meta charset="UTF-8">
<meta name="description" content="Introduction to designing and making Web sites">
<meta name="keywords" content="Web Design,HTML,CSS">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="fluidStyles.css" media="screen">
</head>
<body>
<div id="content" class="w3-container">
<header>
<h2>Fluid Fonts</h2>
</header>
<section id="section1" class="w3-row">
<h3>Section 1</h3>
<div class="w3-third">
<p id="firstParagraph">This is the first paragraph in section 1.</p>
</div>
<div class="w3-third">
<p id="secondParagraph">This is the second paragraph in section 1.</p>
</div>
<div class="w3-third">
<p id="thirdParagraph">This is the third paragraph in section 1.</p>
</div>
</section>
<footer>
<p>© Copyright 2019</p>
</footer>
</div>
</body>
</html>
Now here is the stylesheet, fluidStyles.css:
html, div { font-size: 2vw;}
body { font-family: Arial, sans-serif; }
p { font-size: 2em; }
Please NOTE these points about the above page and its stylesheet:
You will not need to code any of your own RWD rules in your stylesheet, unless you need to customize the stylesheet that we will be using. (And make sure it's a need before you tackle it!)
But just in case you're wondering how RWD is implemented in a stylesheet, you will be interested to know that in a stylesheet which implements RWD, the @media rule is usually used. This rule will normally look something like this:
@media only screen and (min-width:601px){
.col1{width: 8%;}
.col2{width: 32%;}
.col3{width: 60%;}
}
This format is common and works fine, but is hard to read. Let me expand this formatting so it is easier to read:
@media only screen and (min-width:601px)
{
.col1
{
width: 8%;
}
.col2
{
width: 32%;
}
.col3
{
width: 60%;
}
}
In the sample above, the various parts of this section of the stylesheet, and what they do, are:
Here is a very important feature of most RWD stylesheets: There are normally multiple, and usually many, selector groups determined and defined by separate @media tests. So you will probably see many @media groups in a RWD stylesheet, designed for many different screen sizes.
Each @media group in such a stylesheet will usually have different property values for the same selectors. For instance, in the example shown above, another @media group could look like this: (Note the different width values for the same class selectors.)
@media only screen and (min-width:993px)
{
.col1
{
width: 12%;
}
.col2
{
width: 35%;
}
.col3
{
width: 53%;
}
}