Responsive Web Design

Have no idea what responsive web design is? Start with this incredibly detailed and helpful article.

Responsive CSS Frameworks

This framework provides basic typography, forms, tabs, buttons and more – all flexible and ready to be viewed by any browser at any resolution.

Based on percentages, this framework resizes block level elements and the margins that surround them.

Rather than adjusting the size of every element when the browser is resized, this framework uses media queries to serve the website in different layouts based on the size of the window.

Example Sites

One of Q’s latest web projects was the redesign of the Café Zola website. We used CSS3 media queries to display a stripped down mobile version of the site for users on their smartphones.

This site was built to show the potential of “liquid” layouts. Resize it in your browser to watch the page adapt.

Looking for more examples of responsive websites? This nifty site allows anyone to submit their own responsive website, so the database is always growing.