responsive w eb designing in 2018 n.
Skip this Video
Loading SlideShow in 5 Seconds..
responsive web design PowerPoint Presentation
Download Presentation
responsive web design

Loading in 2 Seconds...

play fullscreen
1 / 17

responsive web design - PowerPoint PPT Presentation

  • Uploaded on

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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'responsive web design' - ConsuellaHunter

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
types of website designing
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

responsive web design

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 :

1 viewport



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

definition what does viewport mean a viewport
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.
2 m edia query


Media query?

Media query designed for smartphone users.

media queries media queries is a css3 module
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”.
why is responsive design so important
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 that’s tipped to reach over 6 billion

“Responsive design responds to a variety of browser versions “.

big question


How Responsive Web Design Works ?

one url signle content one code one development
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 “.

next rwd in 2018
NEXT RWD In 2018 ?

More info on how to know about above designing at

use charts to explain rwd users
Use charts to explain RWD Users

51 %






example of rwd
Example of RWD

Melanie Daveid

Melanie Daveid site seen across four breakpoints

Read more

example of rwd 1
Example of RWD

Field Notes

Field Notes site across 4 different device viewports

Read more



Any questions?

You can find me at


Special thanks to who made and released these awesome resources for free:

  • Presentation template by SlidesCarnival
  • Ppt persentation by