Mobile Web Guidelines and Styles

Follow the documentation on UCSD's MWF website for HTML elements and styles and use these UCSD-specific styles and guidelines.

Header (required)

  • Header icon: The UCSD logo will always be at the top left, linking to http://m.ucsd.edu.
  • Header title: The title in the heading is the web application name and the link always takes the user to the root of your application. You specify the name and URL by editing the <h1 id="header"> element.
  • The Top Button is an optional element and in most cases is not displayed.

header image

Content area

This is where the web applicaition content displays. These pages have the same HTML semantics and content but is rendered differently based on the different classes of devices.

Mobile Directory

Footer

The footer includes a button which links back to the UCSD Mobile home page http://m.ucsd.edu and the copyright notice and "View Full Site", linking to http://ucsd.edu.

footer

If you wish to customize "View Full Site" link, add the following to your jsp page's head section if you are using sitemesh from UXT:

<meta name="footer" content="News Full Site" />
<meta name="footer.url" content="http://ucsdnews.ucsd.edu?ovrrdr=1" />

The ovrrdr parameter prevents the redirect javascript (if you have one) to redirect mobile devices back to the mobile site.  If you are not using sitemesh from UXT, just change the link's text and URL.

View all the Mobile Styles

View examples of how the MWF degrades gracefully across different device types.