Responsive Web Design Summary

2020-May-29

📚 start of w3schools Responsive Web Design

💨 by Eugene Ruthven

email Feedback About This Page

🔽 1. Introduction 🔽 5. Images
🔽 2. The Viewport 🔽 6. Videos
🔽 3. Grid-View 🔽 7. Frameworks
🔽 4. Media Queries 🔽 8. W3.CSS Web Site Templates

1. Introduction 🔼

📚 w3schools RWD Introduction

What is it?

Makes web pages look good on all devices.
Uses only HTML and CSS.
Not a program or uses JavaScript.

Designing For The Best Experience For All Users

Web pages can be viewed using many different devices:
desktops
tablets
phones
Web pages should look good, and be easy to use, regardless of the device.

Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device.

It is called Responsive Web Design (RWD) when CSS and HTML are used to
resize
hide
shrink
enlarge
move the content
to make web pages look good on any screen.


2. The Viewport 🔼

📚 w3schools RWD Viewport

What is it?

It's the user's visible area of a web page.
It varies with the device, and will be smaller on a mobile phone than on a desktop/laptop computer screen.

A Quick Fix

When tablets and mobile phones started to be used to surf the internet, fixed size web pages were too large to fit the viewport. The quick fix was browsers on those devices scaled down the entire web page to fit the screen.

Setting The Viewport

HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.

Include the following <meta> viewport element in all web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

This 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.

Size Content to The Viewport

Users are used to scroll websites vertically on both desktop and mobile devices - but not horizontally!

4 Concepts to Keep in Mind

  1. Avoid a poor user experience by not having pages scroll horizontally or zoom out to see the whole web page.

  2. Do NOT use large fixed width elements.
    An image displayed at a width wider than the viewport it will cause the viewport to scroll horizontally.
    Remember to adjust this content to fit within the width of the viewport.

  3. Do NOT let the content rely on a particular viewport width to render well.
    Since screen dimensions and width in CSS pixels vary widely between devices, content should not rely on a particular viewport width to render well.

  4. Use CSS media queries to apply different styling for small and large screens.

    Setting large absolute CSS widths for page elements will cause the element to be too wide for the viewport on a smaller device.

    Instead, consider using relative width values, such as width: 100%. Also, be careful of using large absolute positioning values. It may cause the element to fall outside the viewport on small devices.


3. Grid-View 🔼

📚 w3schools RWD Grid

What is it?

Many web pages are based on a grid-view = the page is divided into columns.

Using a grid-view is very helpful when designing web pages. It makes it easier to place elements on the page.

A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and expand as you resize the browser window.

Building a Responsive Grid-View

First: Ensure that all HTML elements have the box-sizing property set to border-box.

This makes sure that the padding and border are included in the total width and height of the elements:
* {
  box-sizing: border-box;
}

📚 Read more about the box-sizing property in w3schools CSS Box Sizing chapter.

Want to use a responsive grid-view with 12 columns, to have more control over the web page.

Must calculate the percentage for one column: 100%/12 columns = 8.33%.

Then make one class for each of the 12 columns, class="col-" and a number defining how many columns the section should span.
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

All these columns should be floating to the left, and have a padding of 15px.

Each row should be wrapped in a <div>. The number of columns inside a row should always add up to 12:
[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

Each row should be wrapped in a <div>. The number of columns inside a row should always add up to 12:
<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div> 

The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page, and other elements will be placed as if the columns do not exist. To prevent this, add a style that clears the flow:
.row::after {
  content: "";
  clear: both;
  display: table;
}

The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page, and other elements will be placed as if the columns do not exist. To prevent this, we will add a style that clears the flow:
.row::after {
  content: "";
  clear: both;
  display: table;
}

Can add some styles and colors to make it look better.

4. Media Queries 🔼

📚 start of w3schools RWD Media Queries

What is it?

Media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Add a Breakpoint

Earlier in this tutorial a web page was made with rows and columns, and it was responsive, but it did not look good on a small screen.

Media queries can help with that. A breakpoint can be added where certain parts of the design will behave differently on each side of the breakpoint.

Always Design for Mobile First

Mobile First means designing for mobile before designing for desktop or any other device. Doing this will make the page display faster on smaller devices.

Another Breakpoint

Can add as many breakpoints as wanted.

Usually insert a breakpoint between tablets and mobile phones.

Typical Device Breakpoints

To keep things simple target five groups:
 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...} 

Media queries can also be used to change layout of a page depending on the orientation of the browser.

Can have a set of CSS properties that will only apply when the browser window is wider than its height - a the landscape orientation.

Common use of media queries - hide elements on different screen sizes.

Use media queries to change the font size of an element on different screen sizes.

CSS @media Reference

Look at the @media rule in CSS reference:

📚 w3schools full overview of all the media types and features/expressions


5. Images 🔼

📚 w3schools RWD Images

Using The width Property

If the width property is set to a percentage and the height is set to auto, the image will be responsive and scale up and down:
img {
  width: 100%;
  height: auto;
}

A better solution often will be to use the max-width property instead.

Using The max-width Property

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:
img {
  max-width: 100%;
  height: auto;
}

Background Images

Background images can also respond to resizing and scaling.

3 different methods for resizing and scaling:
  1. If the background-size property is set to contain, the background image will scale, and try to fit the content area.

    However, the image will keep its aspect ratio - the proportional relationship between the image's width and height:
    div {
      width:100%;
      height:400px;
      background-image:url('img_flowers.jpg');
      background-repeat:no-repeat;
      background-size:contain;
      border:1px solid red;
    }
    
  2. If the background-size property is set to 100% 100% , the background image will stretch to cover the entire content area:

    div {
      width:100%;
      height:400px;
      background-image:url('img_flowers.jpg');
      background-size:100% 100%;
      border:1px solid red;
    }
    

  3. If the background-size property is set to cover, the background image will scale to cover the entire content area. Notice that the cover value keeps the aspect ratio, and some part of the background image may be clipped:

    div {
      width:100%;
      height:400px;
      background-image:url('img_flowers.jpg');
      background-size:cover;
      border:1px solid red;
    }
    

Different Images for Different Devices

A large image can be perfect on a big computer screen, but useless on a small device. Why load a large image when it has to be scaled down anyway? To reduce the load, or for any other reasons, can use media queries to display different images on different devices.

Here is one large image and one smaller image that will be displayed on different devices:
/* For width smaller than 400px: */
body {
  background-image:url('img_smallflower.jpg');
}

/* For width 400px and larger: */
@media only screen and (min-width:400px) {
  body {
    background-image:url('img_flowers.jpg');
  }
} 

Can use the media query min-device-width, instead of min-width, which checks the device width, instead of the browser width. Then the image will not change when the browser window is resized:
<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture> 

HTML5 <picture> Element

HTML5 introduced the <picture> element, which lets you define more than one image.

The <picture> element works similar to the <video> and <audio> elements. The different sources are set up and the first source that fits the preferences is the one being used:
<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture> 

The srcset attribute is required, and defines the source of the image.

The media attribute is optional, and accepts the media queries fouhd in the CSS @media rule.

Should also define an <img> element for browsers that do not support the <picture> element.


6. Videos 🔼

📚 w3schools RWD Videos

Using The width Property

If the width property is set to 100%, the video player will be responsive and scale up and down.

A better solution, in many cases, will be to use the max-width property instead.

Using The max-width Property

If the max-width property is set to 100%, the video player will scale down if it has to, but never scale up to be larger than its original size:
video {
  max-width: 100%;
  height: auto;
}

7. Frameworks 🔼

📚 w3schools RWD Frameworks

Many existing CSS Frameworks that offer Responsive Design.

They are free, and easy to use.

A great way to create a responsive design, is to use a responsive style sheet.

Develop sites that look nice at any size on:
desktop
laptop
tablet
phone

W3.CSS

file size: 23kb

📚 w3schools W3.CSS Tutorial

Bootstrap

Uses HTML, CSS and jQuery to make responsive web pages.

bootstrap.min.css 119kb
bootstrap.min.js 39kb

📚 w3schools Bootstrap Tutorial

📚 w3schools Bootstrap 4 Tutorial

Bootstrap 4 is the newest version of Bootstrap; with new components, faster stylesheet and more responsiveness. However, Internet Explorer 9 and down is not supported.


8. W3.CSS Web Site Templates 🔼

📚 w3schools RWD Templates

Responsive templates with the W3.CSS framework.

Free to modify, save, share, and use them in all projects.

Order of Appearance at Templates Reference
Band Template
Art
Architect
Coming Soon
Blog
Food Blog
Fashion Blog
Gourmet Catering
CV
Wedding Invitation
Photo
Black & White Photo
Photo III
Nature Portfolio
People Portfolio
People Portfolio II
Dark Portfolio
Black & White Portfolio
Parallax
Clothing Store
Interior Design
Café
Pizza Restaurant
Modal Restaurant
Start Page
Startup
App Launch
Marketing
Marketing/Website
Web Page
Social Media
Analytics
Apartment Rental
Hotel
Travel
Travel Agency
House Design
Screen 50/50
Mail
Kitchen Sink/Demo

 

Alphabetical Order
Analytics
Apartment Rental
App Launch
Architect
Art
Band
Black & White Photo
Black & White Portfolio
Blog
Café
Clothing Store
Coming Soon
CV
Dark Portfolio
Fashion Blog
Food Blog
Gourmet Catering
Hotel
House Design
Interior Design
Kitchen Sink/Demo
Mail
Marketing
Marketing/Website
Modal Restaurant
Nature Portfolio
Parallax
People Portfolio
People Portfolio II
Photo
Photo III
Pizza Restaurant
Screen 50/50
Social Media
Start Page
Startup
Travel
Travel Agency
Web Page
Wedding Invitation


🏆 🎈 The End!!! 🏁 📣