Responsive Design on the Web

   Responsive Design is a technique that web designers use to make a website look good not only on an ordinary computer screen but also on a tablet or a smartphone.  In my last blog post, I explained that the number of mobile users are increasing at a steady rate each year so as a web designer, it is important to make my site look appealing on a mobile device as well as a computer because more and more people around the world are beginning to use their smart phone to access the web.
 
   To make a website responsive, one must simply edit the CSS and insert media queries.  Media Queries are guidelines the website follows to tell how big to make certain parts of the site so if I am viewing a website with the resolution of 1024x768 the banner image will be one size but I'm looking at the same site on my mobile phone with the resolution of 468x360 the banner image will be much smaller and the picture itself may even be different.  The points where the CSS triggers these changes are called breakpoints
Lets take a look at an example of responsive design

 Here is a screenshot of website from the UK.  Goofy right?  Stuff and Nonsense is actually a site where you can send your own website in to them and they will help you make your site responsive.  Right now, the screen is at its biggest and what do we see?  The banner image expands through the page and covers up a lot of the screen.  The text in body and the menu bar are fairly large and spread out.


Now lets shrink the screen a little bit...

What happened?  Well, as the screen got smaller and squeezed the banner image so that it takes up more space on the page.  If you notice, the image changed as well.  Nothing else really changed with the text and the menu besides the fact that it just got smaller but proportion wise, nothing really changed .





And even smaller...

The biggest change happens when the screen is shrunk to its smallest.  The banner image changed once again and the menu bar disappeared.  This version is simpler and throws all of the important information at the viewer right away because most people that visit websites on their mobile phones want to quickly search for the info they need rather than look through the page.