University of Vermont

UVM Self-help Web Guide

Writing Responsive CSS

If you have or want to create a unique look for your unit, you can use CSS to customize your site or individual pages. If you're designing using a responsive technique for the first time, there are plenty of online references to get you started. To name a few:

UVM's responsive template uses a mobile first design concept. This means that pages should be designed first for small screen sizes. (By default, pages have a minimum width of 320 pixels and a maximum width of 1200 pixels.) The mobile first approach encourages you to order content logically which not only results in a better mobile experience, but has the added benefit of better search engine optimization (SEO). We use a model of progressive enhancement using media queries to add certain features, such as floats and columns, at higher resolutions. For example, here is how you might create the CSS for two columns for two pieces of content at resolution greater than 800 pixels:

 @media only screen and (min-width : 800px) { 
 	.left {
 		float:left;
 		width:50%;
 	}
 	.right {
 		float:right;
 		width:50%;
 	}
 }
 

Note the use of widths in percentages in the previous code example. Because we want to have our content to stretch and grow at different resolutions, our widths must be represented in relative values.

There are a lot of built-in responsive features in the new template including flexible images and multimedia, as well as scripts that assist in allowing responsive sites to work in older web browsers that don't support media queries. Nevertheless, it is important that you preview any custom CSS at a variety of resolutions and across different web browsers.

Last modified January 04 2013 09:54 PM