As we think about redesigning the CHSSWeb sites, one of the elements we want to incorporate is responsive design. When we say "responsive design" we mean the design will respond differently when viewed on screens of different sizes.
Our sites were visited approximately 105,000 times in the past month. 10,500 of those visits were via mobile devices and 80% of those mobile visitors were using iPhones. When a visitor views one of our sites on an iPhone, a tablet or another mobile device, the site looks much like it looks on a desktop monitor... but smaller. Everything on the site shrinks proportionally to fit the screen. The navigation links are harder to click, the text harder to read. That's because the design is always the same; it doesn't change from device to device. The visitor can browse the site but it is not an ideal experience.
What's the answer? Responsive design. Here's what having a responsive design might mean for the new look for the college websites.
Viewed on a phone, the site will likely appear as one column, with minimal branding at the top so the visitor sees the important content without scrolling. It will display few graphics and those graphics that appear will be important enough to justify their presence. Its main navigation may appear as a series of large buttons or perhaps as a drop-down select box.
On a large monitor the design will make use of the available territory. The site will have multiple columns. The navigation might appear on the left or at the left as a series of links. The branding elements (e.g., Mason logo, unit name, banner graphic) will typically appear at the top of the page and will take up a good bit of space.
But phones and desktops are not the only ways visitors are viewing our sites. Some visit on iPads, some visit on Kindles. Some hold their phones sideways, which makes for a wider screen. A rare few, believe it or not, could be browsing our site via touch screens on their refrigerators.
We cannot design for all devices. Instead, we will identify sizes that approximate different device scenarios: a phone held vertically, a phone held horizontally, and so forth up to a desktop monitor. Using responsive design techniques, we will strive to give our visitors the best experience possible no matter what device they use.
October 22, 2012
