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.
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.
| 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) {
}
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.