The document discusses responsive web design. It defines HTML and CSS, and describes the three types of web design: static, adaptive, and responsive. Responsive design makes web pages render well on different devices and screen sizes. It provides advantages like increased mobile traffic, faster page loads, lower bounce rates, higher conversion rates, and improved SEO. Key elements of responsive design include the viewport, responsive images, fluid text, and media queries to define different styles for varying screen sizes.

1. Copyright Intellipaat. All rights reserved.

2. Copyright Intellipaat. All rights reserved.
01 HTML 02 CSS
03 Types of Web Design? 04 Responsive Design
Why Responsive Design?05 06
Responsive Design
Elements
Demo07

3. Copyright Intellipaat. All rights reserved.
HTML

4. Copyright IntelliPaat, All rights reserved
HTML
HTML stands for HyperText Markup Language. It is a markup language that is used to
define the structure of the content web page

5. Copyright Intellipaat. All rights reserved.
CSS

6. Copyright IntelliPaat, All rights reserved
CSS
CSS stands for Cascading StyleSheets. It is a used to control the styling and layout of
the elements on a Web Page

7. Copyright Intellipaat. All rights reserved.
Types of Web Design

8. Copyright IntelliPaat, All rights reserved
Types of Web Design
There are majorly 3 Types of Web Design
Static Adaptive Responsive

9. Copyright Intellipaat. All rights reserved.
Responsive Design

10. Copyright IntelliPaat, All rights reserved
Responsive Design
Responsive Web Design is an approach to web design that makes web pages render
well on a variety of devices and window or screen sizes

11. Copyright Intellipaat. All rights reserved.
Why Responsive Design?

12. Copyright Intellipaat. All rights reserved.
Why Responsive Design?
Responsive Design has several advantages
Responsive Design makes our website
easier for mobile users to navigate
which increases mobile traffic
Mobile Traffic
Faster Pages
Lower Bounce Rates
Higher Conversion Rates
Improved SEO

13. Copyright Intellipaat. All rights reserved.
Why Responsive Design?
Responsive Design has several advantages
A responsive website uses modern
performance techniques such as
caching and responsive image display
which helps improve your web page
loading speed.
Mobile Traffic
Faster Pages
Lower Bounce Rates
Higher Conversion Rates
Improved SEO

14. Copyright Intellipaat. All rights reserved.
Why Responsive Design?
Responsive Design has several advantages
A responsive and optimized mobile
site provides a much better user
experience for the visitor
Mobile Traffic
Faster Pages
Lower Bounce Rates
Higher Conversion Rates
Improved SEO

15. Copyright Intellipaat. All rights reserved.
Why Responsive Design?
Responsive Design has several advantages
Having a single secure website that
looks professional on all platforms
makes users less likely to get
frustrated or turn to a competitor
Mobile Traffic
Faster Pages
Lower Bounce Rates
Higher Conversion Rates
Improved SEO

16. Copyright Intellipaat. All rights reserved.
Why Responsive Design?
Responsive Design has several advantages
Responsive web design is becoming as
important to search engine
optimization as quality content
Mobile Traffic
Faster Pages
Lower Bounce Rates
Higher Conversion Rates
Improved SEO

17. Copyright Intellipaat. All rights reserved.
Responsive Design
Elements

18. Copyright Intellipaat. All rights reserved.
Responsive Design Elements
Responsive Design has several elements
Using viewport we can tell web
browsers rendering engine render
elements based on device's width
Viewport
Images
Text
Media Queries

19. Copyright Intellipaat. All rights reserved.
Responsive Design Elements
Responsive Design has several elements
Responsive images are images that
scale nicely to fit any browser size. We
can do it by having different sized
images for different screens
Viewport
Images
Text
Media Queries

20. Copyright Intellipaat. All rights reserved.
Responsive Design Elements
Responsive Design has several elements
The text size needs to change with the
height and width of the device to
accommodate for the lesser space
Viewport
Images
Text
Media Queries

21. Copyright Intellipaat. All rights reserved.
Responsive Design Elements
Responsive Design has several elements
With media queries you can define
completely different styles for
different screen or view sizes
Viewport
Images
Text
Media Queries

22. Copyright Intellipaat. All rights reserved.
Demo: Responsive Web
Design

23. Copyright IntelliPaat, All rights reserved

24. Copyright IntelliPaat, All rights reserved
Further Learning

25. Copyright Intellipaat. All rights reserved.
India: +91-7847955955
US: 1-800-216-8930 (TOLL FREE)
support@intellipaat.com
24/7 Chat with Our Course Advisor
sales@intellipaat.com