Delivering an Amazing Site on Every Device: UC San Diego Edition


Delivering an Amazing Site on Every Device: UC San Diego Edition

Mar 14, 2012By mStoner Staff

UCSD's responsive site

Web Office team members at UC San Diego are early adopters of responsive design in higher education. Many of the top levels of their site display optimally on desktop browsers, mobile devices, and tabletsand they have plans to take this strategy down to the department level. We spoke with Brett Pollak, Director of the UC San Diego Campus Web Office, and Cristian Horta, Web Project & Operations Manager at UCSD, to explore the work and thinking they did to deploy a responsive site for their institution.

Why should people care about responsive design?
Brett: Weve turned another corner in the era of computing. In the 60s it was the mainframe. In the 80s the desktop overtook the mainframe. In the last couple of years, phones and tablets are overtaking desktop and laptop computers. We now use computers and devices to access contextual information around us. People are using the web through TVs and video platforms like the Wii… many new cars are connected to the Internet. We are using more devices to access the internet and relying on the internet to help us accomplish more tasks.

Designers and developers need to be prepared for this shift. Its getting harder and harder to predict what device and resolution people are using to view our universitys content. We want to build for the future. We want to be ready for whatever replaces the current trending device. Responsive design has emerged as one solution.

Are there reasons responsive design is particularly important for colleges and universities?
Brett: If you look at the primary demographic for college and university websites and applicationscurrent and prospective studentsthis is the millennial generation. They have a deep connection with mobile devices; its second nature to them. We need to be prepared to deliver content to these groups on devices they usea generation that wants information on their phones or on the latest gadget.

In higher education, were not only serving the students. Faculty, staff, parents, alumni are all important audiences, and each audience may have vastly different computing preferences. We have to support the leading edge demographic but also those who are part of the long tail.

What has UCSD done with a responsive relaunch? When did it go live?
Brett: We deployed our campus homepage and top levels of the campus site as responsive. Our campus search and the staff & faculty search are responsive. The UCSD NewsCenter site is maintained by our Communications department and is also responsive. We went live with these sites at the end of January, 2012.

How many people worked on this project?
Brett: We had about 4 or 5 core people working on it, but it wasnt anyones full time project. We also had small contributions from others outside of our core group. The desktop layout was originally designed by our Communications department. Our UI designer, Jeremy Wiles, worked on all of the visual designs for the different breakpoints.

What is the most important thing for designers and developers to think about as they tackle responsive design?
Brett: It’s best to decide whether or not youre doing responsive design at the beginning of the project. There is additional planning you will need to do for this approach and understanding that from the beginning meand you can think proactively rather than reverse engineer a responsive solution.

Cristian: We designed our specific breakpoints based on our site analyticsthe devices we were getting the most traffic from. We started with an idea of designing for 3 versionsdesktop, mobile, tablet and filled in the gaps.

What CMS is UCSD on? What were the challenges of deploying a responsive design in your CMS?
Brett: Hannon Hill Cascade Server.

Cristian: We created new templates from the ground up to house the new, responsive campus website. It was relatively easy to integrate the responsive CSS with the CMS templates as they are independent from one another. Weve also started applying responsive design to the 60+ pre-existing CMS websites. The core templates remain the same, we just swap out the CSS with a new version thats responsive. This will continue to take place over the next couple of months.

Responsive development is fairly new, so working as a team on this kind of project was very beneficial. We met at least two times a week and did plenty of ad-hoc meetings.

UCSD firsts directs visitors to a responsive version of the site, not the custom UC San Diego mobile site. What drove the decision to move away from a custom mobile site as the first destination for visitors on phones?
Brett: Its an interesting topic and one that we are not finished exploring. Theres a couple of different schools of thought here.

Some institutions automatically redirect to a custom mobile sitea set of optimized mobile tools. Many custom mobile sites give the user a choice when they hit the sitesuch as University of Michigan’s mobile site. A visitor can use a set of mobile tools or visit the main site by clicking the link at the bottom.

UCSD's custom mobile site

Our first thought when considering a responsive relaunch of is that were primarily serving prospective students. We didnt want to direct people to a custom mobile site that was geared toward utility rather than admissions. Our audiences can still get to a button that takes them to the custom mobile tools as they scroll down the page on the responsive version of the main site. I should also mention that we’re continuing to add both content and utility to our custom mobile site because people are using it.

Were looking at a couple of other models for the future. USC has a unique approach on their mobile sitethe utility is at the top, and the responsive content is below. Were likely to eventually take an approach where mobile tools are at the top as well.

What kind of different content do visitors look at on a smartphone vs. a desktop machine or tablet?
Over the past couple of years we have seen, on average, about a half a percent increase from mobile devices to all our web properties per month. This is really remarkable growth for mobile traffic. Below is a snapshot for what content people are accessing.

Top content visited on main site from desktop browsers (Jan 11 – Jan 12):
Current Students: 9.4%
Prospective Students/Admissions: 7.2%
Academics: 6%
About: 3%

Top content visited on main site from mobile browsers (Jan 11 – Jan 12):
Current Students: 12%
Prospective Students/Admissions: 8%
Academics: 7%
About: 2%

Top content visited on (Jun 11 – Jan 12) from mobile browsers:
MyTritonLink (Student Portal): 10%
Course Schedule: 3%
Maps: 2.3%
Dining: 2%

Does how .edu tackles responsive design and development differ from how other industries tackle it?
Brett: Widespread decentralization is a hallmark of colleges and universities. I think that decentralization happens with all kinds of organizations, but it happens in a very extreme way in .edu. Here at UCSD weve accumulated a lot of web properties over the years. With our approach and how we’re using the CMS we’ve been able to consolidate many of them but theres still a lot of work to do.

Part of how we’re approaching this strategically is to provide alternate solutions for websites and web applications that may or may not be maintained by our IT group. We are now offering responsive web templates and application decorators that can be used by anyone on campus.

About a year ago, we deployed UCSD Mobile using the Mobile Web Framework (MWF). The Mobile Web Framework was originally developed by UCLA and has been adopted UC-wide. Were all contributing to it now.

Weve made UCSDs version of the mobile framework available to campus IT units so they can mobile-optimize their applications. They build and host their own apps and point to our centrally hosted framework. Its been successful.

With the introduction of responsive design, we also wanted to start with a tested, stable, and effective HTML base for all sites. For this, we are using HTML5 Boilerplate as the foundation with our own custom styles.

If you had to do it over again, what would you do differently?
Brett: For the home page redesign, we started with the desktop design layout and figured out how to scale down for a mobile display. A different approach (and one that has been popularized by mobile web guru Luke Wroblewski) would be to start with the mobile strategy and figure out how to scale up.

Another thing is to leave enough time for testing. Fluid containers and elements that stack require more time to test in different browsers.

For the pre-existing CMS sites, there are problems we still havent solved such as image compression, tables with more than a couple columns, embedded or iframed content, and reports. We will get to these things but waiting until we’ve got a perfect solution for all of the issues would put us behind. Solutions will emerge quickly as these problems exist for everyone moving to responsive design.

Cristian: Internet Explorer Compatibility Mode is not accurate. Id want anyone who is undertaking responsive development to know that, if they dont already. Having a test center close while doing development is paramount.

Also, pick a solid code foundation. We used HTML 5 Boilerplate. We also looked at Less Framework. Twitter developed their own code base called Bootstrap.

Have you deployed and responsive sites for departments, centers, etc? Any plans to do this?
Brett: Yes. We are taking a responsive approach down to the college, division, and department level now. Two early examples are our Campus Web Office site and our User Experience and Technologies Site.

Were always working with website owners to launch on a pilot basis, get feedback, and iterate. We’re doing what we can to deliver a great experience for all audiences and to help faculty at staff at UC San Diego do the same for their audiences.