Responsive Websites

What is Responsive Design?

As the number of smartphone and tablet users has gone up an extreme amount, web designers scrambled to come up with  a way to make the layout of the page change depending on your browser size. Web designers created a css rule to make this dream a reality. 

How Does It Work?

These clever CSS designers created a way to make a certain CSS rule apply to the page only when the window is a certain size. This way they optimize their layout for the window. This prevents Large sidebars and headers, it also put an end to having to scroll left and right on a phone to read an article.

How Can I Create This?

To make your website responsive you mush create a CSS sheet that works with your page. At the end of your CSS add this Media Tag  " @media only screen and (min-width:XX) and (max-width:XX) { } " fill in you credentials for max and min width for what ever platform you are aiming at adjusting the CSS. Then paste the CSS into the brackets. Make all of your widths, heights, margins, ... fluid (in percents) instead of in pixels. If you are making this for the phone make the font-size smaller. If you are making for the tablet make the font-size slightly larger. If you have a large sidebar try moving it to the bottom of the page. Also set you pictures, GIFs, and videos to a larger size to fill up the screen.