responsive web design PowerPoint persentation - PowerPoint PPT Presentation

View by Category
About This Presentation
Title:

responsive web design PowerPoint persentation

Description:

Responsive web design (RWD) is an approach to web design which makes web pages render well on a variety of devices and window or screen sizes. Recent work also considers the viewer proximity as part of the viewing context as an extension for RWD. Content, design and performance are necessary across all devices more – PowerPoint PPT presentation

Number of Views:25
Slides: 18
Provided by: nitishreys
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: responsive web design PowerPoint persentation


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
About PowerShow.com