Responsive Web Design

This is the normal page size on the website on a mac.  

What is responsive web design?

Responsive web design is when a website becomes compatible with all devices from macs to windows, to smart phones. The website will automatically switch to your screens resolution and if the screen is minimized then it will adapt to the new resolution. This will eliminate the need for having to make a different design for each kind of device. Not only does it adjust the resolution, but also automatically resize the images. 

This is the wide view of the same website, you can't see
all of the photo, but the text and the diamond adapted to the
width of the screen.

Why is it important?     

Responsive web design is more relevant now because there are more different kind of devices that websites are being looked on. Also more mobile phones are being used to look online and the websites need to change resolutions to the size of the device.

What are media queries?

This photo is stretched upwards
and there is less photo on the sides
and the diamond and text both
adapted to the size of the screen.

Media queries are what change the sizes of all things if on a smaller device. The code sets a width so that if it is smaller than the resolution set, it will change the sizes of all the images and text. You can also change the color of the text, background, and width of all the tabs on the page. It will adjust to a computer, tablet, or a phone, depending on what the media queries are set to. Breakpoints will change the change how the behavior acts on both sides of the breakpoint, and will also change the shape of the tabs if there are any.