The process of developing new mobile templates for the Missouri State website involved re-thinking everything from content to code. A new structure led to the design of a new interface and visual framework for content so it could be conveyed efficiently and effectively across desktops, tablets and smartphones. Our goal from the onset of the project was to ensure the design decisions we made enhanced the content, not distracted from it. Specifically, we had six key objectives regarding our approach to the new mobile design:

1. Utilize university brand elements to promote Missouri State and aid with inter-site consistency. The Missouri State logo, “follow your passion, find your place” brand statement and maroon color band remain in the new design to give continuity to each site and further reinforce the brand of the university across all unit sites.
2. Define a hierarchy of brandable site elements to afford the unit a unique presence on the web. Elements are strategically designed within the templates to afford units a chance to introduce visual elements unique to themselves such as logos, color and marketing imagery.
3. Employ a typographic structure that enhances readability and scannability. Type selection and layout are re-thought to provide a comfortable reading experience across a variety of screen sizes. Headings are sized to allow for versatile content structuring.
4. Design touch-centric interactive elements. Generous, yet appropriate spacing is given to interactive elements to minimize touch errors.
5. Develop modular elements that provide flexible layout options. Elements can be placed in countless manners to create layouts specific to the needs of the content and the intended audience.
6. Create a visual framework that works predictably and efficiently across various platforms and device-types. The base rich text field is the starting point for almost every additional element used across the site. This encourages consistency and user-familiarity as new elements are designed and implemented.

The hierarchy of brandable site elements is where the new mobile design framework meets the needs of the user. Consider the following elements and the best practices shown in the Web and new media website case study when developing a unit-branded design for the new mobile templates:

• Navigation. The new Missouri State mobile navigation, typography and other interactive elements have been designed to allow for the average human index finger to comfortably tap without error.
• Logo. A logo or other primary mark—if available—is one of the first elements visitors will see on the site. The logo is persistent across all pages and devices, and it encourages immediate recognition by adding another level of distinction from other unit sites.
• Imagery. High-quality, relevant imagery can quickly engage your target audience and set a visual context for your content. A visual hierarchy can be established by coupling photography with headings or calls-to-action. Secondary brand marks or iconography can be incorporated into the imagery to further reinforce the unit’s brand.
• Color. An appropriate and consistent color palette can powerfully and dynamically reinforce the unit brand across multiple facets of a site. Color can add depth to a page and visually anchor featured elements. Optional colored bars can be utilized above a rich text field to group like content on a page and further aid in the scannability of content.
• Masthead. The unit masthead creates a bold first impression for the visitor by uniting primary brand elements such as the logo/site title with secondary brand elements including color and texture. The masthead is also a persistent element across all pages and devices.
• Background. Backgrounds help to add further depth and dimension to your site and can create additional brand extension through appropriate use of color and texture.
• Layout. A thoughtful layout can immediately enhance the readability and retention of content on a page or drive visitors away. When developing a page layout, strive to create some degree of visual hierarchy through a combination of rich text fields and action blocks, as well as imagery and color. Design to encourage scannability by using short blocks of text, bulleted lists and concise headings. The established flow and structure of the content should guide the layout, not some arbitrary “fold.” Keep in mind that the fold on a smartphone is vastly different than that of a high-resolution desktop monitor. Consider instead adopting a mobile-first—or linear—methodology to help prioritize content and calls-to-action.

The new mobile templates are a paradigm shift for our office and users alike. Understanding how the various elements are designed to work together should help in creating a visually engaging and predictable user experience regardless the device on which the site is viewed.