Responsive Web Design

       So, I'm sure your first question is 'what is responsive web design?' Well I'm glad you asked; responsive web design is a change in a website so it can change depending on the device being used. Say for instance you use your phone instead of your computer. On some websites there will be a significant difference in how the website looks. It's still the same website but with a different format to make it easier to navigate and find stuff.

       It may not sound like much but responsive web design can make a huge difference for a company or organization. If you were in charge you would want to reach as many people as possible without something as silly as the website being too big to stop you from showing off your products and ideas. With the growth or more mobile technology it is pretty much impossible to ignore. Not to mention the fact that it saves more money than having to make three different websites (one for desktop computers, one for tablets, and one for phones).

desktop computer

       At this point I'm sure you're dying to see what I'm talking about so here are some visual aids to aid your visuals. This is a screenshot of One, an organization formed to help stop the poverty and spread of disease around the world (mainly in Africa). This website is definitely a responsive website in the fact that you can change the dimensions of the site and it will adjust accordingly.

tablet

mobile phone

First off, there is a notable difference in the computer screenshot and the tablet screenshot. The computer shot has an obviously different layout than the tablet. Instead of the pictures being next to each other the pictures change and are now on top of one another and the same goes for the phone screenshot. The pictures are right on top of each other. In the tablet shot the pictures become bigger than the computer but in the phone size the pictures get smaller to adjust. 

       The text size also changes, in the computer you can see a line below the pictures saying to join the fight against poverty, but can't see it in the tablet and phone. That is because it became smaller until it couldn't get smaller then moved to the bottom of the screen. 

       The menu also changes in the phone as you can see all of the links are on top of one another instead of side to side.

       The content changes as well, if you look closely at the pictures you notice that the stories organize themselves in order of importance. The main story stays near the top where it is clearly visible and the other stories just kind of fall in line.

       All of this overwhelming information is done through media queries which look at the capabilities of the device and is used to check things like dimensions of the window and device, the orientation, and resolution.

       But don't worry there are things called breakpoints which help to gather info on a program during it's run. It helps to debug and get more information on what is happening at that time.

Until the next post,

This is Jake Smith