University Communications

University Communications

CQ Mobile Components

Many of the styles on the mobile site (http://m.uc.edu) are the same as the main site. However, some components are specific to the mobile site and have behavior that is not as apparent as some of the components on the main site.

Icon Example

Home Page Icons

Icons appear on pages with the homepage template.

The component works as a white icon set on top of a red background. The white icon should be no larger than 50px X 50px.

Text is constrained to one line and should be no more than approximately 18 characters.

Dropdown Navigation

The drop down navigation component allows for a list of links to take minimal screen space. The drop down is 200 px wide, with an additional 50px "Go" button."

This width allows for maximum accessibility on iPhones and other devices that have a 320 pixel width screen. If menu items are too many characters, the choice will be cut off, so be concise.

dropdownnav
Phone Icon Example

Telephone Links

The phone link is particularly useful for the mobile site. It allows users to click on the link and go direclty to the dialing screen on their cell phones. The behavior and usage is similar to a mailto: link

Create a phone link just as you would any other link, but instead of http://[address] use the format tel:+1-###-###-####. For example: tel:+1-513-556-6000 is the correct format for calling UC's main line. The underlying html looks like

<a href="tel:+1-513-556-6000">Call UC at 1-513-556-6000</a>