There are three main features of a responsive web design, which are fluid layouts, resizable images and media queries. Media queries are not really that new to web design. Beginning as media types in CSS2.1, we could design stylesheets for both web and print, somewhat insuring that the webpage would look the same on the screen and when printed. This progressed into media queries in CSS3. This query checks for the width of the media device (max-device-width) and tests it against a set value such as 480px or 768px. In response to this query, we use CSS styles to change the fluid layout and resize the images for the screen.

You can easily test if a website has a responsive design. Begin with the browser at full width of your computer screen. Then drag the right edge of the browser to the left to reduce the width of the browser window. You should see the images become smaller and the layout will take the floating divs that are side-by-side and stack them vertically. For example, if we have six images (six divs) per row on a gallery page at full screen, as we reduce the screen width, the number of images in a row are progressively reduced and stacked, as needed. Once the width is reduced to a certain amount, the images themselves will begin to resize smaller. If you watch closely, you will also see that certain design elements, such as the navigation links, may be reduced to an icon or even disappear. This is also controlled by the CSS stylesheet.

When designing websites, consider not only how the webpage design elements will look at full screen width but how they will look when stacked. Consider what design elements can be removed from the screen at the smaller screen width without reducing the functionality of the website. As the features and technology for responsive design are changing quickly, keeping up with all the enhancements can be time consuming. If you would rather spend your time designing instead of coding, take a look at some of the beautiful responsive themes available for Wordpress. If you are a small design firm, you might want to consider starting from one of these responsive theme layouts when designing websites.