The guidelines below are intended to assist Web developers in preparing mobile-friendly Web content. These guidelines should be considered an addition to the previously established guidelines and requirements for the Web.
Our recommendation is that any Web project be designed according to responsive design principles in the hope that a single website can be produced to serve both full and mobile browsers. If this is not an optimal solution and it is determined that a dedicated mobile site is required, consult the following guidelines.
- Minimize the use of images. If you must use them, make them relevant and supply meaningful ALT text so that mobile devices can use the text descriptions.
- Make images smaller than 100 pixels. Specify the image height and width in the source code.
- Don't use background images on your mobile pages.
- Use external style sheets to control presentation.
- Ensure that contents are readable without style sheets.
- Use the link element to link to an external style sheet. Some handhelds don't recognize @import or @media.
- Keep the CSS simple and remove extraneous styling information.
- If you put the mobile stylesheet after the screen stylesheet in your code, then use "display: none" for whatever you don't want going to a mobile device.
- Limit the use of forms (particularly text elements). It is difficult for mobile users to input many characters.
Things to avoid
- Image maps
- Dynamic effects that specifically require mouse or keyboard for navigating
The University Communication Standards Committee (UCSC) oversees the official presence of The University of Texas at Austin on all mobile application platforms (a.k.a., “app stores”). To have a mobile application considered for publishing as part of the official university presence, send an email to UCSC to initiate a review of the code, content, art and promotional material for security, accessibility, content, brand and other considerations.
Official standards for these considerations are currently being created, of which the icon guidelines below are the first. In the meantime, consideration will be made on a case-by-case basis.
Mobile Application Icon Guidelines
Please note, the UCSC will share exact specifications and a pre-approved template on request.
- Orange border as demonstrated in official UT app and template
- White background as demonstrated in official UT app and template (when background is visible)
- No gradient across icon to denote 3D “button” shape (will be removed in current official UT app)
- All text must be demonstrably legible when used on each of the top ten most common handheld mobile devices, as per current Google Analytics traffic reports for utexas.edu and related domains
In cases where an icon or image requires additional copy:
- Benton Sans is only approved font (license may be supplied as part of management fee, or can be purchased by app creator)
- Font color must be official UT orange as defined under current brand guidelines and accessibility requirements
- Copy must meet legibility requirement
- Use of pre-existing icons or marks must be approved by the VP or dean of department or CSU that owns any included mark, as well as the Office of Trademarks and Licensing
- Addition of copy to pre-existing icons or marks must be approved by the VP or dean of department or CSU that owns any affected mark, as well as the Office of Trademarks and Licensing
- Every element of an app icon -- including marks, colors, images and copy -- must relate specifically to the CSU that has created the app and/or the app's intended audience or use
- All copy and design elements should be centered within the border (no requirements regarding margins); alignment along the sides is discouraged
- Use of photography is discouraged if alternatives are available and meet all requirements
- Use of colors that pair well with the required orange border is encouraged -- but not required