Responsive Web
Design
Department of Computer Science and Engineering
Chitkara University, Punjab
FEE-I Dr. Damandeep 1
Responsive Web Design
• Responsive web design makes your web page look good on all
devices.
• Responsive Web Design is about using HTML and CSS to
automatically resize, hide, shrink, or enlarge, a website, to make it
look good on all devices (desktops, tablets, and phones)
• Responsive web design uses only HTML and CSS.
• Responsive web design is not a program or a JavaScript.
• Responsive web design, or RWD, is a design approach that
addresses the range of devices and device sizes, enabling automatic
adaption to the screen, whether the content is viewed on a tablet,
phone, television, or watch
FEE-I Dr. Damandeep 2
Designing For The Best Experience
For All Users
• Web pages can be viewed using many different devices: desktops,
tablets, and phones. Your web page 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 when you use CSS and HTML to
resize, hide, shrink, enlarge, or move the content to make it look
good on any screen.
FEE-I Dr. Damandeep 3
Responsive Web Design - The
Viewport
• The viewport is the user's visible area of a web page.
• The viewport varies with the device, and will be smaller on a mobile phone than on
a computer screen.
• Before tablets and mobile phones, web pages were designed only for computer
screens, and it was common for web pages to have a static design and a fixed size.
Setting The Viewport
• HTML5 introduced a method to let web designers take control over the viewport,
through the <meta> tag.
• You should include the following <meta> viewport element in all your 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.
FEE-I Dr. Damandeep 4
FEE-I Dr. Damandeep 5
Size Content to The Viewport
Users are used to scroll websites vertically on both desktop and mobile devices - but
not horizontally! So, if the user is forced to scroll horizontally, or zoom out, to see the
whole web page it results in a poor user experience.
• Some additional rules to follow:
1. Do NOT use large fixed width elements - For example, if an image is displayed at
a width wider than the viewport it can cause the viewport to scroll horizontally.
Remember to adjust this content to fit within the width of the viewport.
2. 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.
3. 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.
FEE-I Dr. Damandeep 6
Responsive Web Design - Grid-
View
• Many web pages are based on a grid-view, which means that 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.
FEE-I Dr. Damandeep 7
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.
• Add the following code in your CSS:
*{
box-sizing: border-box;
}
• The following example shows a simple responsive web page, with two columns:
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
FEE-I Dr. Damandeep 8
Measurements Units
Measuring units – %, em, rem, px, vh, vw
1. Percentage (%):The percentage unit is used to set values relative to the current font-
size or the size of the parent element. This unit is highly flexible and allows for
responsive design adjustments.
Example: Setting the font-size relative to the current font-size.
font-size: 150%;
2. em: The em unit is relative to the font-size of the element it is used on. For example,
2em means two times the size of the current font.
Example: Setting the font-size relative to the current font-size.
font-size: 2em;
Note: Here, 2em means 2 times the size of the current font.
3. rem: The rem unit is relative to the root element (usually the <html> element) font-
size, making it consistent across the entire document.
Example: Setting the font-size relative to the browser base font-size.
font-size: 1.5rem
FEE-I Dr. Damandeep 9
4. Pixles(px):
The pixel unit is an absolute unit used to define sizes in terms of pixels. It ensures
consistent size across different screens.
Example: Setting the font-size in pixels.
font-size: 16px;
5. Viewport Height (vh)
The vh unit is relative to 1% of the viewport’s height, making it useful for setting sizes
based on the height of the browser window.
Example: Setting the height relative to the viewport height.
height: 50vh;
6. Viewport Width (vw)
The vw unit is relative to 1% of the viewport’s width, making it useful for setting sizes
based on the width of the browser window.
Example: Setting the width relative to the viewport width.
width: 50vw;
FEE-I Dr. Damandeep 10
Responsive Images
Responsive images are images that scale nicely to fit any browser size.
• Using the width Property If the CSS width property is set to 100%,
the image will be responsive and scale up and down:
<img src="img_girl.jpg" style="width:100%;">
• 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 src="img_girl.jpg" style="max-width:100%;height:auto;">
FEE-I Dr. Damandeep 11
• Different Images Depending on Browser Width
The HTML <picture> element allows you to define different images for
different browser window sizes.
Resize the browser window to see how the image below changes
depending on the width:
• <picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="[Link]">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>
FEE-I Dr. Damandeep 12
• Responsive Text Size
• The text size can be set with a "vw" unit, which means the "viewport
width“.That way the text size will follow the size of the browser
window:
• Example
• <h1 style="font-size:10vw">Hello World</h1>
FEE-I Dr. Damandeep 13
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.
• Example
If the browser window is 600px or smaller, the background color will
be lightblue:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
FEE-I Dr. Damandeep 14
• Add a Breakpoint
When a web page is made with rows and columns, and it was
responsive, but it did not look good on a small [Link] queries
can help with that. We can add a breakpoint where certain parts of the
design will behave differently on each side of the breakpoint.
FEE-I Dr. Damandeep 15
FEE-I Dr. Damandeep 16
Always Design for Mobile First
Mobile First means designing for mobile before designing for desktop
or any other device (This will make the page display faster on smaller
devices).This means that we must make some changes in our
[Link] of changing styles when the width gets smaller than
768px, we should change the design when the width gets larger than
768px. This will make our design Mobile First:
FEE-I Dr. Damandeep 17
FEE-I Dr. Damandeep 18
Orientation: Portrait / Landscape
• Media queries can also be used to change layout of a page
depending on the orientation of the [Link] can have a set of
CSS properties that will only apply when the browser window is
wider than its height, a so called "Landscape" orientation:
• Example
The web page will have a lightblue background if the orientation is in
landscape mode:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
FEE-I Dr. Damandeep 19
• Hide Elements With Media Queries
Another common use of media queries, is to hide elements on different
screen sizes:
It will be hidden on small screens.
• Example
/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) {
[Link] {
display: none;
}
}
FEE-I Dr. Damandeep 20
• Change Font Size With Media Queries
You can also use media queries to change the font size of an element on different
screen sizes:
• Variable Font Size.
Example
/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media only screen and (min-width: 601px) {
[Link] {
font-size: 80px;
}
}
/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
[Link] {
font-size: 30px;
}
}
FEE-I Dr. Damandeep 21