With ‘responsive design’ overhaul, one site fits all
{{youtube:medium:center|ujgiAQ9yhjM, One site fits all}}
Does the William & Mary website look a bit different today?
Well, it should—especially if you are reading this on a mobile device. The university’s Creative Services department launched the new and improved “responsive design” version of the William & Mary website today. The responsive design concept takes into account the technical needs and esthetic opportunities of all web-based devices, from desktop computers on down through tablets and smartphones.
“It’s all about the content,” said Tina Coleman, William & Mary’s director of creative services. “Now that we have embraced responsive design, more people will have more access to our content and they’ll be able to view it on their favorite device—or devices—plural!”
She noted that this is not a “wouldn’t it be nice to have” design, but a “need to have” design as the usage statistics for the W&M website clearly indicate a rapid growth in visitors with mobile devices. The goal is for everyone visiting the W&M website to have a seamless, pleasant experience, so they get the information they are seeking without the hassle of pinching and zooming.
She credits months of creative and intensive labor by the creative services team, led by Associate Director of Technology Mark Windley. “This was truly a group effort as the project successfully drew from several key areas of our team – technical, design and content,” said Coleman. There has been an aggressive timeline this summer leading up to the launch. But, work began early last fall as the team began updating certain web elements to be more accessible and more amenable to the forthcoming responsive design.
Coleman said the elements of the new responsive design will be most apparent for people using tablets and phones. The technology behind responsive web design detects the width of the device you are using and delivers a customized, optimized version of the William & Mary web experience.
Rather than shrinking a webpage to fit a smartphone screen, the new responsive-design format reformats the page to minimize or eliminate the need for horizontal scrolling.
“Arrangement of the content across the different-sized devices is not necessarily going to be the same,” Windley explained in a blog post earlier this year. “And here’s where the fun begins. A 4" phone screen cannot handle a 3-column layout, right? But don’t you just love that beautiful 3-column layout on a full-size monitor?”
Now, responsive design will render the content in all its three-column glory on full-size monitors, while providing an appropriate and esthetically correct version of the same content on handheld devices.
To get an introduction to responsive design, look at the William & Mary homepage on a tablet or phone. Tilt your device and watch how the page almost magically redesigns itself to fit to the new orientation.
The William & Mary homepage has incorporated responsive design for more than a year. Today’s launch extends the concept to the remainder of the university’s general web presence. The next step will be to bring responsive design to the websites of William & Mary’s graduate and professional schools as well as other web-based services offered by Creative Services, such as W&M Events.
Windley explains that the incorporation of responsive design is all built into the base-level coding and won’t require William & Mary’s numerous web editors to do anything different.
