Responsive Web Design Project

What is responsive web design?

Responsive web design (RWD) is an approach to designing and building websites that are easy to view on a wide range of devices. A responsive site senses the size of your screen and shows you the version of that site that works best for you. 

The benefits of RWD include

  • sites that look great on all displays—from mobile phones to desktops;
  • full-size initial view for easy reading;
  • a user experience that requires a minimum of resizing, panning, and scrolling;
  • and a mobile view that is optimized for fingers.
Comparison of new homepage mobile responsive view with old site
The initial view of our previous site (left) was reduced to fit on phone screens, rendering it unreadable without pinching, zooming, and panning. Our upgraded site (right) is readable on a mobile phone, no zooming required. It is also optimized for "fat fingers."

Why go responsive?

Mobile use is on the rise

  • Mobile use of the Chico State website is growing fast. Mobile traffic has increased from 1.8% in 2010 to 19.5% in 2014. 

Mobile use is especially high among prospective students

  • 40% of prospective students and 28% of parents use a mobile device nearly all the time for web browsing.
  • 1 in 4 of teens ages 12 to 17 are “cell-mostly” Internet users, while 3 in 4 access the Internet on cell phones, tablets, and other mobile devices at least occasionally. ("Teens and Technology 2014")

 RWD is fast becoming standard in higher education

  • As of February 2012, only 15 percent of institutions with a mobile solution had adopted the responsive web design approach. A year later, 51 percent of institutions surveyed had. (“2013 State of the Mobile and Responsive Web in Higher Ed”)
  • When we created this site, eight of the 23 CSU campuses had implemented responsive design.

Research

During the decision-making process, we used data from Google Analytics and Crazy Egg that showed us how many visits each campus page got, how much time was spent on the page, where it ranked on the University site, and how high content interaction was. We also conducted focus groups with current students to get a better idea of what was working on the campus website and what wasn’t.

Project scope

This project covered all of the top-level pages of the University website. This includes

  • The home page
  • Topic pages: About Chico State, Academics
  • Audience pages: Current Students, Prospective Students, Faculty & Staff, Parents, and Visitors
  • Informational pages: Employment Opportunities, Safety at Chico State, Sustainability at Chico State, Mobile App, Departments & Colleges, Directions, Administration, Contact Us, About This Site, and Help & Search Tips
  • Maps & Tours: Photo Tour, Video Tour, Campus Map, and individual building pages

What’s changed

Working within our current design system, we made changes necessary for responsive design such as increasing type size, widening column width, and prioritizing content to flow correctly across multiple devices. Other changes made included the following:

  • During student focus groups, we learned that many students didn’t notice the audience links, so we made them more prominent and added images. We also included three of the most-used links from each of those pages on the home page so users can get to the information they want more quickly.
Comparison of new homepage tablet responsive view with old site
Audience navigation before (right) and after.
  • The Student Life and Current Students pages are now combined into a one-stop shop for students.
  • Very little content was removed, but the pages have been reorganized. Our focus groups were drawn to images and icons, so we added images to reinforce content and make pages easier to scan. The few links that were removed had very low click rates.
  • To keep content fresh, we reworked the big picture at the top of the home page and added a photo of the week.
  • Additional information, including the top menu, has been added to the footer. This will be especially helpful when someone is at the bottom of a page on a device with a small screen. 

Mobile navigation

If the site is accessed on a tablet, phablet, or phone, the menus collapse, but they’re still there.
1   The subject and audience navigation are combined in the Campus Menu.
2   Click the magnifying glass to access search.
3   Campus tools include portal, email, catalog, class schedule, campus map, directory, and library.

Mobile navigation with matching indicators  

Behind the scenes

Besides the improvements that can be seen, many behind-the-scenes changes have been made in Cascade, our content management system. Site production has been streamlined and improved as we prepare to move the rest of the campus into responsive web design. 

What’s next? 

New templates

Besides being converted to responsive web design, the current template for campus pages (such as colleges, departments, offices, and programs) will be adjusted to become more flexible. Beta testing should happen in late summer 2015, with conversions starting late fall 2015. 

Events calendar

A new events calendar will be implemented sometime this spring. Once the updated templates start rolling out, users can add an event to their website and submit it to the campus events calendar, Campus Announcements, and Student Announcements at the same time. This will help campus users promote events more easily and build a robust campus calendar that will benefit both internal users and visitors alike.

Feedback & Suggestions

Do you have a suggestion for us, or would you like to report an error on the site? Please use our Website Change Request Form.