Responsive design has been a big boom recently and it's still a mystery to some. Let's see just how easy it really is. Let's say you want to start simple with a normal desktop version of your website and one suitable for smaller screens like mobile phones. Let's start with something like the menu. You can create one menu and set it to display for large windows and make a compact menu, perhaps a dropdown, for smaller screens. This is where CSS Media Queries come in. In the HTML there can be two different menus created with only one set to display at a time.
/* Default Styles for anything larger than 600px wide */
#full-menu { display: block; }
#compact-menu { display: none; }
/* Special styles to be applied only on browsers less than 600px wide */
@media (max-width: 600px) { #full-menu { display: none; }
#compact-menu { display: block; } }This is a very basic example to demonstrate a very basic media query. It's possible to set a min-width and max-width so styles are applied only to certain ranges. For more details check out Mozilla's CSS media queries article