Campus Web Office
Menu

Campus Website

The UC San Diego campus website was refreshed on January 26th, 2012.  The revised design reflects the latest UC San Diego branding standards including revised color scheme and logo.  

Refresh Goals

In addition to bringing the site into the latest design standards, the following were guiding principles througout the project.

  • Optimize space and apply proper placement of navigation elements based on standards and best practices.
  • Transform the content under Explore, Learn, Apply to be visually engaging and impactful.
  • Provide flexibility to visually feature timely information on the home page.
  • Use responsive design (more info below) to ensure the layout is optimized to the resolution of any device (mobile, tablet, etc.) used to access the content.

Campus Website Design

One of the goals of the refresh was to provide a unique look to the core campus website while evolving academic and administrative units' websites to reflect elements of new core campus site but not copy it directly.  Below are screenshots of the new design.  Click each image to enlarge.

Start Slideshow
Start Slideshow


Academic & Administrative Unit Websites

Academic and administrative units whose websites are in the Campus CMS will be updated over the next couple of months to reflect elements of the new design.  Some of the changes will include:

  • Updated logo
  • Updated header strip to reflect revised colors
  • Benefits of responsive design including page optimization for tablets and mobile devices.
Start Slideshow
UXT Home Page

The CWO will contact CMS website owners to let them know their sites will be updated with the refreshed look.  We'll work with you to test across various browsers and devices and remidiate any issues that arise from the transition.

Responsive Design

With the proliferation of mobile devices and tablets such as the iPad and Kindle Fire, it was important for us to ensure the refreshed campus website was optimized for all devices.  

You might be aware of UC San Diego Mobile.  This suite of mobile apps provides access to UCSD information on the go.  These mobile tools can help you:

  • find a building on campus,
  • look up your class schedule,
  • view today's cafeteria menus, or
  • find out what time the shuttle is arriving.  

All of these tools were built using the Mobile Web Framework (MWF).

In contrast, the core campus website (www.ucsd.edu) is a gateway to campus information for a broad audience.  For a content-rich website, a new technique called responsive design has emerged as a way to optimize the page layout for various screen resolutions and devices.

What is Responsive Design?

Are you reading this article on a desktop browser?  If so, you can see responsive design in action by making the browser thinner and wider with your mouse.  

Notice how the page conforms to the size of the screen by repositioning the header elements, collapsing the navigation under a "Menu" drop-down, and the columns in the page fall under one another.

Now go to www.ucsd.edu and do the same thing.  Try bringing up www.ucsd.edu on your smartphone and notice how the layout falls inline and fits your screen without needing to pinch and zoom to read the content.  In addition, a button to "UCSD Mobile" is exposed when viewing the site on a lower resolution so you can easily toggle to the apps.

Acknowledgements & Kudos

The new campus website designs were developed by University Creative Services & Publications.  The coding and CMS templates were built by the Campus Web Office.  The Campus Web Steering Committee approved and weighed in on the direction of the project throughout.

  • What do you think about the new site?  Provide Feedback.  We read every submission.