University of Vermont

UVM Self-help Web Guide

Making Your UVM Website Responsive

Once you have migrated your website, our repsonsive template presents your site utilizing the three principle components of responsive design:

  • Media queries allowing the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
  • The fluid grid concept calls for page element sizing to be in relative units like percentages or EMs, rather than absolute units like pixels or points.
  • Flexible images are also sized in relative units (up to 100%), so as to prevent them from displaying outside their containing element.

Migrating an existing site to a responsive template

Please note: If you are either not using a template (just putting copy into straight HTML pages without the formatted templates we've provided) or if you have a website that is two iterations old (narrow width, center format), you are welcome to try this retrotfit. However, there's a good chance it may not work. We suggest trying it in a development folder first, and if you experience problems, make a help hours appointment. You will need to use a file transfer client and and an HTML editor to make these updates If you work in a friendly view only software such as Contribute, this can be done with assistance at help hours.

  1. Point to the responsive template in your magicoptions.html file

    The master responsive template is named template2013rwd. You can use this template by pointing to it in your magicoptions.html or defaultmenu.html file:

    template_file template2013rwd

  2. Point to the responsive CSS file

    Each of our downloadable responsive templates has a corresponding custom CSS file. These files are maintained centrally can be linked to directly via your magicoptions.html file. Note: If you need additional customized styles, you will attach them using a metatags.html file. You may need to include media queries in your custom CSS. If you need assistance, please make an appointment for help hours.

    stylesheet /www/css/html_templates/template1rwd.css

  3. Update your banner photo code (homepagebanner.html)

    There are two types of banners available in our templates--banner 1 has the left/right box defined (see example 1) and banner 2 has the right box imposed over the image (see example 2). In order to make your banner responsive, you'll need to replace both the code and the photo in it. Alternatively, you can download a new homepagebanner.html file from one of the templates and upload that to your account.

    Example 1 code replacement:

     <div class="wrapper770">
     	<div class="imagewrapper770">
     		<img class="uvmbanner" src="images/top-photo.jpg" alt="" />
     	</div>
     	<div class="textwrapper770">
     		<h4>Lorem ipsum dolor?</h4>
     		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     		sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
     		<p><a class="more" href="">Read more >></a></p>
     	</div>
     </div>
     

    Example 2 code replacement:

     <div class="wrapper1200">
     	<div class="imagewrapper1200">
     		<img class="uvmbanner" src="images/1200-200.jpg" alt="" />
     	</div>
     	<div class="textwrapper1200">
     		<h4>Lorem ipsum dolor?</h4>
     		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     		sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
     		<p><a class="more" href="">Read more >></a></p>
     	</div>
     </div>
     
  4. Replace the banner photo with the new size

    For this, you'll need to find the original photo file and resize it as indicated on the template (770x200 for banner 1 style; 1200x200 for banner 2 style). Or select a new photo.

  5. Testing your site responsively

    You'll need to preview your site in a wide variety of resolutions and using a touchscreen to verify that your content is displayed in a logical and usable way. Keep in mind that displaying some content presents particular challenges on smaller screens and may require creative or custom solutions.

    Testing in Firefox

    Recent versions of the Firefox browser have a handy feature for previewing websites responsively. You can locate this feature under Tools > Web Developer > Responsive Design View or by using the keyboard shortcut Shift + Command + M.

    The view comes with several standard screen sizes to which you can add, or simply resize any page manually. The tool also easily allows you to change the orientation of a webpage.

    Device Testing

    Firefox's design view is great for allowing you to change screen size, but it is also important to preview your size on an actual mobile device in order to assess whether font size is appropriate, link targets are large enough, and verify other functionality. While it is pretty much impossible to test your site on every device, you should aim to preview your site on at least one iOS (iPhone, iPad, or iPod) device and one Android-based device.

    Emulators

    If you don't have access to an iOS device but you do have access to a Apple computer, you can try an iPhone simulator.

    Last modified April 03 2013 01:41 PM