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 |
Makes web pages look good on all devices.
Uses only HTML and CSS.
Not a program or uses JavaScript.
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.
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.
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.
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.
Users are used to scroll websites vertically on both desktop and mobile devices - but not horizontally!
Avoid a poor user experience by not having pages scroll horizontally or zoom out to see the whole web page.
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.
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.
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.
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.
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;
}
<div class="row"> <div class="col-3">...</div> <!-- 25% --> <div class="col-9">...</div> <!-- 75% --> </div>
.row::after {
content: "";
clear: both;
display: table;
}
.row::after {
content: "";
clear: both;
display: table;
}
📚 start of w3schools RWD Media Queries
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.
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.
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.
Can add as many breakpoints as wanted.
Usually insert a breakpoint between tablets and mobile phones.
/* 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.
📚 w3schools full overview of all the media types and features/expressions
img {
width: 100%;
height: auto;
}
A better solution often will be to use the max-width property instead.
img {
max-width: 100%;
height: auto;
}
Background images can also respond to resizing and scaling.
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;
}
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;
}
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;
}
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');
}
}
<picture> <source srcset="img_smallflower.jpg" media="(max-width: 400px)"> <source srcset="img_flowers.jpg"> <img src="img_flowers.jpg" alt="Flowers"> </picture>
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.
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.
video {
max-width: 100%;
height: auto;
}
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
file size: 23kb
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.
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 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 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 |