The document discusses responsive web design (RWD), emphasizing its importance for optimal website functionality across various devices through techniques like media queries. It highlights the significance of having a single URL and codebase that adjusts for different screen sizes, making it crucial for designers to adapt to changing user needs. The text also outlines trends for RWD in 2018, such as attractive typography and adaptive layouts.

1. Responsive
Web Designing
In 2018
www.seoczar.com

2. Types Of Website Designing
S tatic website design
custom website design
Progressive web apps
Responsive website design
E-commerce website design
WordPress website design
More info on how to know about above designing at https://www.seoczar.com/dynamic-web-design-trends/
2

3. Responsive Web
Design!
Responsive Web Design…
Means that a web site works optimally
well for users regardless of the device
they are using.
The core of RWD is a media query, a
request for the resolution of the users’
viewport.
3
more details : https://www.seoczar.com/dynamic-website-design/

4. 1.
Viewport?
The viewport is the user's visible area of a web page.
4

5. “Definition - What does Viewport mean?
A viewport is a term for the visible area of a webpage on a
display device. It is used in both code and analog design as a
way to refer to the display screen and how layout fits into that
screen.
A framed area on a display screen for viewing information.

6. 2.
Media query?
Media query designed for smartphone users.
6

7. “Media Q ueries?
Media Queries is a CSS3 module allowing content rendering to adapt
to conditions such as screen resolution (e.g. smartphone screen vs.
computer screen). It became a W3C recommended standard in June
2012, and is a cornerstone technology of responsive web design
(RWD).
 “Media queries are a feature of CSS that enable webpage
content to adapt to different screen sizes and resolutions”.

8. Why is responsive design so important?
▸ Responsive design is an effective solution to
future-proof your website.
▸ C urrent traffic is desktop vs. tablet vs. mobile?
▸ RWD Is emerge 2.6 billion smartphone users and
by 2020 that’s tipped to reach over 6 billion
“Responsive design responds to a variety of browser versions “.
8

9. BIG QUESTION
How Responsive Web Design Works ?
9

10. “O ne Url
S ignle C ontent
O ne code
O ne development
But works in multiple devices
“ The Responsive Era has changed our mindset as designers and users,
and it has also changed web design workflow in the same way in order
to be more efficient “.

11. The Next Big Thing In Responsive Design
11

12. 12
NEXT RWD In 2018 ?
Attractive typography
Font resizing for different screens
Vertical display
On-screen toggle
3-Bar menu
More info on how to know about above designing at https://www.seoczar.com/blog

13. Use charts to explain RWD Users
42%
desktop
51 %
Mobile
7%
others
13

14. Example of RWD14
Melanie Daveid
Melanie Daveid site seen
across four breakpoints
Read more

15. Example of RWD15
Field Notes
Field Notes site across 4
different device viewports
Read more

16. 16
THANKS!
Any questions?
You can find me at @ nitishreys@ mail.com

17. Credits
S pecial thanks to G oogle.com who made and
released these awesome resources for free:
▸ Presentation template by S lidesC arnival
▸ Ppt persentation by www.seoczar.com
17