1. Responsive Web Pages

2. Responsive design
Application code queries about the size of the screen on a device and adjusts its output to fit nicely on the devices screen.
Create one site that looks and behaves well on big monitors, small mobile devices, and everything in between

3. Responsive Design
Desktop
Tablet
Phone

4. Cascading Style Sheets (CSS)
Style sheet language for describing the presentation of a document written in a markup language
XML, HTML, SVG, etc.
Designed to separate document content from document presentation

5. Media queries
rule is used to define different style rules for different media types/devices.
Media queries look at the capability of the device, and can be used to check many things, such as:
width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
and much more

6. Media Queries Syntax Example
@media mediatype and (media feature) {     CSS-Code; }
Example
@media screen and (max-width: 3000px) {
CSS instructions go here }
@media screen and (max-width: 620px) {
@media screen and (max-width: 500px) {

7. Approaches
Desktop first
Mobil first
Java

8. Responsive Web Design Advantages
You can serve only the most important content for smaller resolutions such as iPhones, thus eliminating clutter
Higher chances that the website will lead to more conversions (better selling of products or services)
If a significant portion of your audience are using mobile devices, a responsive website makes sense.

9. Responsive Web Design Disadvantages
Responsive websites take longer to code and are more expensive
Don’t use if visitors are using 1024px resolutions and up
Older browsers don’t support CSS3 media (Java fallback)
Some non-tech clients wouldn’t understand why their website does not look the same on desktop and phone

10. Many books about Responsive Web Design
Many more

11. Discussion Question
Can Responsive design be use on smart watches and smart rings?