Responsive Web Design

What Is Responsive Web Design?

Responsive design is when a website will respond to what the size of the browser size is. This is most important when you have websites that are used when you're on mobile/tablets, so they have an easy way to make people navigating your website. It uses media queries to decide what size/layout all the items and content on the page should use. This can be small changes, to changing the layout entirely. It also uses breakpoints to decide at what point it should change if you were changing your browser size. 

Example

For the example, I'm going to use http://responsivedesign.is/. Fitting for this, isn't it?

This is the website at the normal, desktop/laptop size. It is a good clean layout that is easy find with text big enough that anyone can read it on their computer. It uses various columns depending on the point you're at in the website. It has the menu bar and search bar at the top of the website, where everything is easy to find and works very well. Take notice of the top left corner of the website, as it will show which layout size you're on at that point. 

This is the website at the tablet size. Everything is brought much closer together and the text is made larger to compensate for the smaller screen. It is generally the same layout, but does change what's needed to compensate for the less room. The menu has changed a bit, but not too much. The menu info takes up more room as opposed to just having blank space, and the responsive design.is is moved to be in the top right, as opposed to being in the top left. It makes a very good and very legible way of viewing the main screen on the website given the less space they have to work with.

Last but not least, we have the phone size. This is made much more compact than the other two, and has significantly less content on it. However, the way they change it is very good in the sense that it keeps things simple for the phones. The menu is made into a drop down menu, and you don't have to click on little links that you can very easily misclick. They take off some news, but they provide a link that lets you see more news. In short, they take off some unnecessary things, but still provide you that information if you wish to view it. This creates a good, streamlined website that is useful and helpful to the user.