Skip to main content
Developer Developer
  1. HOME
  2. Design
  3. Archive
  4. Decorator 3.1 and Earlier
  5. Styles & Widgets
  6. Mobile Web Design

Mobile Web Guidelines and Styles

Follow the documentation on UCSD's MWF website for HTML elements and styles.

Decorator Elements

When designing mobile web applications, follow these guidelines for the mobile decorator:

Heading (required)

  • Heading icon: The UCSD logo will always be at the top left, linking to http://m.ucsd.edu.
  • Heading 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.

header image

Content area

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

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

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 "UCSD Full Site", linking to http://ucsd.edu.

footer

If you wish to customize "UCSD 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.