responsive web design in 2018

1
ResponsiveWeb DesigningIn
2018
www.seoczar.com
2
Types Of Website Designing

• Static 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-tren
  ds/

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.

more details https//www.seoczar.com/dynamic-web
site-design/
4
1.
Viewport?

• The viewport is the user's visible area of a web
  page.

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.

7

• Media Queries?
• 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.
• Current traffic is desktop vs. tablet vs. mobile?
• RWD Is emerge 2.6 billion smartphone users and by
  2020 thats tipped to reach over 6 billion
• Responsive design responds to a
  variety of browser versions .

9
BIG QUESTION

• How Responsive Web Design Works ?

10

• One Url
• Signle Content
• One code
• One 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
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
14
Example of RWD
Melanie Daveid Melanie Daveid site seen across
four breakpoints
Read more
15
Example of RWD
Field Notes Field Notes site across 4 different
device viewports
Read more
16
THANKS!

• Any questions?
• You can find me at _at_nitishreys_at_mail.com

17
Credits

• Special thanks to Google.com who made and
  released these awesome resources for free
• Presentation template by SlidesCarnival
• Ppt persentation by www.seoczar.com