Responsive Web Design is essentially just a set of methods and standards that help websites better adapt to a variety of resolutions. Obviously mobile devices such as phones and tablets are becoming more popular for browsing the web and so it's definitely a good idea to make sure their experience is just as 'fair' as anyone else's. I'll try to help demonstrate and explain some things you can do to help adjust your site to fit a responsive design.
Media Queries are a popular way to create a responsive web design. They allow you to adjust your CSS based on conditions of the person viewing the page. You can set different values for parts of your page or completely rearrange how things are displayed based on who is viewing the page.
@media screen and (max-width: 480px) {
.someElement {
width: 100%;
}
}
There are a number of queries you can preform and essentially you will simply end up 2, 3 or maybe even 4 different query designs that alter certain CSS values on your page to adjust to different resolutions and orientations. Personally my aim would be to set 'default' CSS values for your PC users and then have 2 seperate queries to adjust your CSS (one for tablets and one for phones). Here is a useful reference if you need help understanding media queries better: http://css-tricks.com/css-media-queries/
Another important part of responsive web design is relative values. Using percents or EMs instead of pixels can be a big help in allowing your site to better adjust to various resolutions. Typically height values in pixels are more acceptable as with any browser you can expect to scroll vertically. It's horizontal scrolling that starts to become less user-friendly on mobile devices. One little trick I like for adjusting content is the use of the max-width property.
.contentContainer {
width: 800px;
max-width: 90%;
}
With something like this you will get an element that is 800 pixels wide unless it exceeds 90% of its container (such as the body or another element on the page). So as a page got smaller you would see that content element reduce its size to adjust and fill 90% of its container rather than staying at 800 pixels and forcing a horizontal scroll. Also remember you can use percents and EMs for fontsizes as well as elements/containers. This can be useful for mobile devices as you may not want some size 72 font on your phone, but on a PC it is reasonable for some huge attention-drawing header.
On your site there are obviously some of these adjustments that could be made and so I'll try to cover those now. I'm not going to recode all of your CSS to make your site responsive but I will certainly try to make sure you know what to do and how to do it.
Your header uses 3 images. Changing these to 'responsive images' would help adjust your header for mobile devices. Setting a 'max-width' value of 100% and 'height' of auto, all you then would need to do is allow 'header' [FONT=Courier New]<div>[/FONT] to scale (using percents). But make sure you set a 'min-width' value so your images do not shrink too much. It's also not a bad idea to simply use a media query that removes the two images on the sides under a smaller resolution ([FONT=Courier New]@media screen and (max-width: 320px)[/FONT]) so you only really see your header logo, keeping things from getting to cluttered.
Next, your search bar is also using a fixed width and so it isn't user-friendly on smaller mobile devices. Try using the content trick I mentioned earlier so that it stays at 650px until it becomes greater than 90% of its container. You would also need to make sure the elements inside will properly break to a new line if the search bar becomes smaller.
The last thing would be your sidebar. Sidebars are great, however they are terrible for webpages on smaller mobile devices. Typically the best thing to do is move the sidebar above or below your main content. This way your page is able to use the full width of a phone or tablet and not feel 'crammed' and you won't lose any content from your sidebar. The goal is to have a page that only needs to be scrolled vertically and doesn't contain too much clutter or junk that isn't needed for mobile users.
I realize my post might be a bit long and perhaps wasn't what you were looking for but I'm merely trying to share some knowledge on responsive web design. You can always reply if you give these things a try and still need help. I don't mind looking at some of the source and making suggestions or even giving little samples of code.
