Web and mobile
Web and mobile applications are some of the most widely-used and most-visible communication vehicles in the university. It is important to properly utilize the university identity on all online pieces, from simple HTML emails to complex websites and mobile apps.
This section covers applying the brand to web and mobile applications. For individual elements such as the nav bar, social media icons and web fonts, visit the Digital elements section.
Branded email communication can make your message sing. And we’ve made it easy for you to get started with simple templates that are mobile-friendly and will work with any email distribution system. Everything is ready to go. Just add your message.
Want to further customize your email? No problem! Use the sender’s information, unit identifiers, unit social media icons or unit-specific imagery to talk to your unique audiences. Keep these guidelines in mind:
- Use your college or unit name in text only at the top of an email.
- Use as much “real text” as possible, rather than text in an image. Because an image may not load in an email client, important text should be typed or recreated outside of the image.
- A logo or secondary signature can be used in the footer.
- Consider the length of the email, especially when read on a phone. Be brief.
Use these guidelines as a solid foundation and starting point for designing emails. We'll take you through the basic steps to using the email templates in the included documentation.
Remember, a simple design keeps the focus on your message. Not sure if your design is quite right? Let email@example.com take a look.
- No images
- One column, two items
Questions about how to send an HTML email with your system? Contact your unit's IT department or 8help (8help.osu.edu).
Mobile app icons
Apps created for Ohio State constituents should use an icon and launch screen based on the templates provided.
The app icon template provides a unique presence for your app on a mobile device's home screen while retaining its university connection. Any university-related group may use this app icon template. Please note that variations of the Block O are reserved for the flagship Ohio State app.
The Block O and any variations of it are reserved solely for the Ohio State app.
Mobile app launch screens
As with the app icon template, the recommended launch screen template creates a unique but university-related first impression as your app loads. A vertical orientation is recommended.
Note: Device screen resolutions and proportions can vary across platforms. The templates provided are a common resolution. Please adjust the template ratio and resolution to best fit your app's targeted platforms and devices.
The Mobile Governance team manages the publishing of apps to the official Ohio State stores and maintains a resource guide (coming soon) for the development of university apps. If you are developing a university app, please contact Mobile Goverance (firstname.lastname@example.org) as early as possible in the development process.
Just below the Ohio State nav bar, mastheads are required to include a university logo, with the horizontal version used for left-alignment and the vertical or stacked version used for right-alignment. Below are example of layouts that have been found to work well, but this is not an all-inclusive or restrictive list. Creativity is encouraged, keeping in mind size and clear space requirements for the logo.
Stacked logo, right-aligned. Site/unit name aligns with text in logo. College name aligns with bottom of Block O.
Horizontal logo, left-aligned. Site/unit name aligns with the Block O.
Web and mobile resources
- HTML email templates
- Masthead and footer template
- Mobile app icon template
- Mobile app launch screen template