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
- If your app will be developed by a third party vendor, it will require an official contract with the vendor and the University. That contract should include some provisions for maintenance and updates through the life of the app. We see a major update each year and several minor updates from both major OS (Apple and Android). Any update could cause an app to stop functioning or require changes in design.
- If the cost from the vendor is higher than $5,000, the contracts office is likely to ask you to conduct an RFP (which takes 4-6 months) or justify a sole source agreement.
If you use ours:
- Your app would appear next to ours when users search for “University of Texas”
- Your app would appear to be officially sanctioned by the university
- Your app may get some additional promotion on our website
- All updates would need to go through us and we would submit them to the app stores on your behalf – eventually (and soon) we will be unable to sustain this model for free and will instead move to a cost recovery model and charge a small fee for updates to users of our app store licenses
If you use theirs:
- Your updates will all go through your vendor
- Your app would appear to be developed by a third party and not UT
- Your app could appear to some users as “not official”
Mobile Application Icon Guidelines
- 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