The primary topic for Module 6 is responsive website development. Responsive websites look great on all screen widths, desktops, laptops, tablets, and smartphones. Since over 50% of website viewing is on smartphones, responsive development has become a critical part of web development.

But first, following Chapter 7 in the textbook, we will cover some advanced types of website links.

Advanced Links

Opening a Link in a New Window

By default, when a user clicks on a link, it will open that link up in the same window or tab. Sometimes the user will expect to open up the tab in a different window.

Use the target=”_blank” attribute in the <a> tag to open a new tab or window.

The code looks like this:

<a href="https://github.com/smetoxen" target="_blank">GitHub</a>

When would you expect a link to open a new tab or window?

Users expect the link to open in a new window when the link goes to a different website.  Use target=”_blank” so that a new tab will open in the user’s browser. 

Special Hyperlinks

If you want an email link to open up the email client on the website visitor’s computer, use “mailto:” in front of the email address. When the link is clicked on, it will compose a new email addressed to the email address you specify.

<a href="mailto:susan.metoxen@saintpaul.edu">Email me</a>

You can also use a link to make a phone call. Ever click on a telephone number from your browser and find that it didn’t start a call? That is because the web developer didn’t make the phone number into a link. Of course, most of your website visitors can’t call from their computer, but they can if they are browsing from a cell phone.

<a href="tel:952-270-7784">952-270-7784</a>

You can even create a link that will generate a text message:

<a href="sms:952-270-7784">Text me!</a>

Demonstration Video: Advanced Hyperlinks

Exercise: Advanced Hyperlinks

Open your template html file.

Create a absolute link that opens a new window. A good place to put this is in the footer. The code looks like this.

Open your template.html fileIn the footer of your template, and create Email, Phone, and Text links, separated by a bullet with the &bull; HTML entity. The code should look like this.

The result should look like this:

(Recognize the phone number?)

Responsive Websites

The goal is to make websites look great on all-size devices by making them “responsive”.  On most websites I make, over half of traffic comes from mobile devices. 

To make websites look good on both mobile and desktop, these features are generally incorporated:

1. Columns on desktop are stacked on mobile
2. Unnecessary decorative images are removed on mobile
3. The navigation on mobile is changed to one button or a hamburger menu. 

In the early days of smartphones, a web designer made two completely different views, probably in two different web files, one for mobile and one for desktop. The code detected the screen width, and loaded a different web page. That approach has generally been replaced by the stacking of columns.

There are online tools that allow you to see your website screen at four sizes. Here is one of them: https://ui.dev/amiresponsive

Here are some screenshots:

Note that on the second example, a different image is shown on the tablet and smartphone.

Using Google Chrome Developer Tools for Mobile Testing

In order to code responsive websites, you need to know how to access the Chrome Developer Tools so you can see the website at various screen sizes.

1. Right click and Inspect
2. Click the smartphone/tablet icon

After you turn on the mobile view, you can select various devices. The screenshot above is displaying an iPhone 6. If you click on the dropdown next to iPhone 6, you can choose other devices.

Another way to view a website at a variety of widths is to drag the side of the browser window to various sizes.

In Module 1, you may have watched this video demonstrating how to use Chrome developer tools:

Viewports

The viewport is the website visitors visible area on a web page. Obviously, the viewport is much more narrow on a mobile phone than on a desktop computer. As developers, we need to make sure our websites provide a good experience at all widths. 

We set the viewport for a website by placing this line of code into the website head:

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

A <meta> viewport element gives the browser instructions on how to control the page’s dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

If you would like to read more about it, check out the example and explanation from W3 Schools: https://www.w3schools.com/css/css_rwd_viewport.asp

Media queries

Media queries are used to make adjustments based on screen width. They are new with CSS3, and now an integral part of all modern websites.

In the code example below, we initially set the size of the h1 text to 4em. Because that is too large for smaller devices, we change it to 1.8em for tablets and 1.5em for smartphones, like this:

h1{
   font-size: 4em;
}

/* CSS Adjustments for Tablets */
@media only screen and (max-width: 1024px) {
   h1{
      font-size: 1.8em;
   }
}

/* CSS Adjustments for Smartphones */
@media only all and (max-width: 768px) 
   h1{
      font-size: 1.5em;
   }
}

The CSS selector is nested and indented inside of the media query. At the end of the media query there are two closing curly braces. The first one closes the selector, and the second one closes the media query.

Max and Min Width

The max-width and min-width are used most often to define media queries.

@media only screen and (max-width: 1024px) {}

In English: “If the viewport is less than a max-width of 1024px.”

@media only screen and (min-width: 1024px) {}

In English: “If the viewport is greater than a min-width of 1024px.”

How many media queries do I need?

Web design generally targets three sizes:

1. Desktop

2. Tablet

3. Smartphone

The key is to check your layout at ALL widths and add the media queries you need to make the website look great. You may need more than just three sizes. 

Place the media queries below your other CSS

Remember that CSS processes in order, so that the CSS later in the file overrides the CSS earlier in the file. Place your media queries after the CSS it is overriding. The CSS in the media query overrides the CSS that was created above it.

Media Queries are Nested and Indented

Indent the CSS inside of the media query, so it is easy to see that it is inside of it.

Note that you have two closing curly braces }} at the end of the media query…one to close the CSS and a second to close the query.

Demonstration Video: Viewports and Media Queries

Exercise: Viewport and Media Queries

We will be working on your website template for this exercise. The code we will be adding will be a good starting point for any websites you make in the future. We need to add the viewport to the HTML template file and the media queries to the CSS template file.

Viewport in the HTML Template

Add Viewport tag to HTML template inside of <head></head> and above your title and after the charset. The code in your template <head> should look like this, with the meta viewport tag above the title:

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
   <title>My Website</title>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>

While the order of the items in the head most likely won’t matter, it is a good idea to place the meta links at the top and the stylesheets at the bottom. Here is an article on it: Article on Best Order by Adam Hollett.

Add Media Queries to CSS Template

This code adds some adjustments to the font-size for <h1> elements.

1. Open your template/style.css file.
2. Copy these Media Queries to the bottom of your template code. It is important to place this code after the other CSS code in your template
3. Test to see what happens to the <h1> headings by checking the developer tools or dragging the side of your browser screen. You should see three different text sizes based on the width of the screen.

/* CSS without a media query--applies to all screen widths unless overridden in a media query */
h1{
   font-size: 4em;
}

/* CSS Adjustments for Tablets */
@media only screen and (max-width: 1024px) {
   h1{
      font-size: 1.8em;
   }
}

/* CSS Adjustments for Smartphones */
@media only screen and (max-width: 768px) {
   h1{
     font-size: 1.5em;
   }
}

Mobile Experience

On mobile devices, there is much less screen real estate, so you need to use your discretion to remove elements that you don’t want the user to see. You don’t want users to do unnecessary scrolling to find the information they want on your website.

You can use display:none to hide elements that aren’t necessary for mobile.

Look at the content you are displaying from the perspective of mobile. Is it necessary? Is it worth the extra scrolling required to view it?

The code below removes the element with a class of hero-image from the display of screens less than 768px.

/* Media queries for smartphones */
@media only screen and (max-width:768px){
    .hero-image{
        display:none;
    }
}

Display Different Content on Mobile

In some cases, you want to display something different on mobile devices. For example, you may want a phone number to be clickable on smartphones, but not on a desktop computer. 

Here’s the trick: You can have two or three versions of content–one for smartphones, one for tablets and one for desktop. Use display:none with media queries to hide content on mobile.

Demonstration Video: Displaying Different Content on Mobile

Exercise: Displaying Different Content on Mobile

Create two h1 tags with different text. We want to use the longer title “Beautiful Sunsets” on larger devices, but simply use the title “Sunsets” on smaller devices. 

Add a class of “mobile” to one and a class of “desktop” to the other

Using display:none and display:block, make one appear on smaller devices and the other on larger devices.

Your JSFiddle should look like this:

If you rearrange your JSFiddle so that the width of the browser is less than 400 px, you should see the second H1 element:

Note: We will do this on the Pacific Trails lab. We will display the phone number in mobile and hide it on desktop. 

Frequently Asked Questions