VCU Web Standards & Guidelines

• Skip to main content
• Quick Checklist
• General Regulations
• Accessibility
• Design & Branding
• Required Content
• Web Development
• Mobile Sites
  • General guidelines
  • Accessibility
  • Design & branding
  • Required content
  • Web development
• Personal & Student Org Sites
• Best Practices
• Additional Resources

Mobile sites

More and more users are accessing the web through their mobile devices, such as phones, tablets, or other media devices (such as iPods). While traditional websites may work on these devices, they are often not optimally designed for such use.

In order to promote the creation and support of mobile-ready websites, we are adding a new section to the VCU A-Z index specifically for mobile websites. In order for a website to be listed within this subsection, they will have to adhere to the following additional guidelines. These guidelines are designed to enhance the user's experience of your website from a mobile device.

General guidelines

• Try to keep individual pages under 50 kb; maximum page size should not exceed 100 kb.
• Images should be used minimally. Maximum width for mobile images should be under 200 pixels; as much as possible, try to compress all of your images to under 10 kb total.
• Use external CSS and javascript files. When called from multiple pages, they reduce the page load for subsequent page views. When using standard Javascript libraries, linking to the libraries hosted at Google will improve the chance that your users have already cached them.
• Use standardized code. Coding for specific browsers increases file size and the chance for cross-platform bugs.

Simplify the content and available navigation for your mobile site to what your mobile users will need most. In some cases, this may mean removing much of the content from your regular website. You can offer a link to your regular website as an option for those who may want to delve beyond the content available on your mobile site.

How do you determine what information is best to keep and remove? There is no foolproof way to determine what every user who visits your mobile site will want. Generally speaking, mobile users are highly task-driven, want quick access to information, and are often seeking location- and date-specific information. They are very unlikely to spend time reading long documents, perusing your latest news, or browsing your site in depth.

With that baseline in mind, you can further refine your mobile content by looking at your statistics (what portions of your site are mobile visitors more likely to access) and asking your users directly (using surveys, feedback forms, and even directly working with individual users in usability tests). Some suggested baseline inclusions for any site would be:

• search - bonus points if you have a simplified mobile search template
• contact information - the basics are required for all VCU sites, but a mobile-friendly map and directions are particularly helpful for mobile users. If your organization has relevant "business" hours, listing these may also be helpful.
• events and other date-relevant information, but only if such information is relevant to your organization

Accessibility

Your mobile website should continue to adhere to VCU's accessibility standards. Mobile devices have varying levels of support for input devices and advanced multimedia. Adhering to the accessibility guidelines will help to improve the experience for your users no matter what device they use to access your site.

Design & branding

Because bandwidth is at a premium on mobile devices, we require only the VCU logotype graphic (available for download from the VCU Identity website). The VCU logotype graphic should link to the VCU Mobile homepage at http://m.vcu.edu/. Your site's title (both the <title> and the site's heading) should also include the word Mobile to distinguish your mobile site from your primary site.

Required content

Please continue to include all relevant contact information on your mobile site, including email address, physical street and mailing addresses, the name of your unit, and any important phone numbers. (This information can either be contained in the footer on every page or on a single contact page linked from the footer.) Please also include a link to the VCU homepage with the text spelled out as Virginia Commonwealth University in your footer. In addition, make sure to note when your mobile site was last updated (and review your site annually). Finally, make sure to include a link to your non-mobile site within your footer so your visitors can easily find that site if necessary.

Web development

When using forms on your mobile website, keep them as simple as possible. Text entry on many mobile devices may be limited and difficult for your users.

Do not use:

• Frames or iframes
• Flash
• Image maps
• Tables (except for basic data display)
• Pop-up windows (or other dynamic Javascript that requires mouse or keyboard input)