Template Documentation: Responsive Design

On March 13, 2012, the UNL Web Developer Network launched a responsive design approach as the sole template for UNL sites. Responsive design is a technique utilizing CSS and (in some cases) JavaScript to adapt site layouts based on the user's device.

While the visual appearance of the site didn't change during this revision (we're calling it version 3.1), large portions of the underlying markup, CSS and JavaScript did change. New opportunities to optimize your site and your page's layouts for multiple displays are now available.

Here's what you need to know.

Upgrading

The changes to the templates involve modifying the HTML of all pages. The WDN supports two options for upgrading; both are a breeze!

UNL CMS Users

Upgrading in UNL CMS is simple: blink your eyes! Really, everything in UNL CMS was automatically upgraded on April 2, 2012.

Dreamweaver Templates

The downloaded package of the templates will have a file—UPGRADING.markdown—with directions on the Dreamweaver upgrade process. It's just a few steps, but read each carefully.

Now is the time to move to the UNL CMS. All template updates happen automatically.

Setup a site in UNL CMS

Mobile-First Philosophy

Traditionally, we've developed our content based on a fixed-width frame. If it fit inside 960, it shipped.

With the growth of mobile devices, we have to turn that process on its head. The v3.1 templates are engineered with a mobile-first approach. They're built from the ground-up for a 320 screen. Only what is needed to deliver an exceptional user experience is included. As the screen size gets larger, supporting resources are added.

Template Breakdown by Screen Width
320px 480px 600px 768px 960px 1040px
Grid 1 column 2 columns 3 columns 12 columns
jQuery (WDN.jQuery) No Yes
Navigation & Breadcrumbs Mobile Desktop
Footer Regions Feedback (link only) Comment Form, Contact Us, Share This Related Links Page Rating
Input Type Touch Pointer
WDN Tools None Available

Media Queries

These are CSS "breakpoints" that allow the templates to provide optimized presentations at various screen widths. CSS is all grown-up.

Responsive design is powerful stuff; with great power comes great responsibility. As the developer, you have the opportunity to fine-tune your site to work in all devices. In the template, we use CSS media queries at the aforementioned breakpoints. Here's the code to get started:

    
    /* UNL WDN Templates 
    v3.1 CSS Media Queries */
    
    @media (min-width: 320px) {
        
    }
    @media (min-width: 480px) {
    
    }
    @media (min-width: 600px) {
    
    }
    @media (min-width: 768px) {
    
    }
    @media (min-width: 960px) {
    
    }
    @media (min-width: 1040px) {
    
    }
    

Starting with the v3.1 release, all CSS is composed in LESS. We love LESS; in fact you won't find a template CSS file in the v3.1 repository! If you'd like to use LESS in your designs, feel free to use the standard functions built into the templates.

  • Fonts
  • Colors
  • CSS3 magic
  • And much more!

Tips & Tricks

Responsive Design is all about awesome user experiences on every device, every time.

Page Organization

The top left of #maincontent is your most valuable real estate. It's the first content viewed on smaller screens. Treat it as such. Also, keep in mind page organization (more important at the top).

Multimedia

Don't use inline height and width attributes on images, video or audio elements. It will cause major problems on smaller screens. In fact, watch all your widths and heights (even in CSS); it's no longer a fixed world!

Test

Test your pages in all widths. Start by shrinking your browser window. Use the Responsive Design Viewer. Get ahold of devices. Test often.

Have Fun!

Creating responsive designs is really fun. Be creative, think about users and their needs.

Template Mirroring

If you're running the templates on another server, you must synchronize files nightly.

Mirroring Documentation

All servers have the ability to sync files. This documentation on setting up synchronization is for your server admin.

Advanced Options

Can you say PHP rocks? If so, how about an extra efficiency boost!

PEAR Package

The WDN maintains a PHP PEAR Package for the UNL Templates with a lot of integration options. This makes the WDN templates even easier to implement in your web app.