skip to main content

TAMU Webmaster's Blog


Information and insight from the A&M Webmasters

Visual Identity

Custom icon fonts: performance and accessibility

Like a fine sports car, an icon font or symbol font has good performance and it looks good too. Why?  Instead of making your site visitors download multiple icons or even a sprite, you can include your icons in a single web font, which is automatically downloaded and cached. Some icon fonts includes hundreds of symbols. To make it download faster, you can easily create your own smaller, custom icon font with only the characters you need. Iconmoon even lets you upload your own SVG images into your custom icon font.

But if not done right, icon fonts provide an accessibility challenge. Like any font, they include a set of characters, only they assign images to characters. But if you don’t have a font installed, what do you see on your screen. The original character, right, ? True, a web font is automatically installed when you view the page, but that doesn’t help much if you’re using a screen reader…  When we put an image on a web page, we always add an alt attribute (we do, right?) for screen readers. But font images (which are characters) don’t have alt attributes as such.

Pictos explains how to define the text equivalent of an font icon using HTML, CSS and ARIA-WAI codes. Symbolset uses custom ligature codes so that the word “mail” itself is displayed as an envelope. Try typing “left”, “right” or “home” on their home page demo. Iconmoon has an option to use the same technique with custom characters. That is, we could upload an SVG version of the TAM logo as part of our custom icon font, and assign it to the word “TAMU” or “Texas A&M University”.  Built-in alt attributes, so to speak.

Wednesday, August 28th, 2013 Visual Identity No Comments

Web Templates Available

To go along with the upcoming launch of the university site we have created several web templates to make available to the university family. These were designed to offer a good starting point for departments or offices in need of a website and who wanted to follow along with our general design direction.

These templates are fully functional, but were left intentionally rough so that you would have the ability to make your own changes and customizations without thinking the templates had to be used strictly as-is. We encourage you to express your creativity and make whatever changes or add whatever features you think your office should have.

[EDIT: You may want to try the templates available at http://gomobile.tamu.edu/downloads.]

Thursday, January 13th, 2011 Visual Identity, www.tamu.edu No Comments

New Multimedia Page

As some of you may have heard already, we have launched our new and improved Multimedia Page.  This site is the hub for all things multimedia for Texas A&M: screensavers, wallpapers, firefox personas, photos, videos, etc.

Aggie Multimedia Homepage

AggieMedia Website Homepage

We wanted this site to stand out from our other pages and use it as an outlet for trying new and inventive approaches to design that cannot be done on www.  Before designing the site, I did research on web design trends for 2010, and found that hand drawn elements and large, bold headers are going to be popular this year (this explains why you may have seen me doodling on paper taped to the windows of Bizzell Hall last month).  I used these elements throughout the site along with lighter colors that stray away from the traditional A&M maroon and tan.  Most of the hand drawn doodles are also links to other pages, one of them being “snapshots of campus” which is a different way to approach the stereotypical campus slideshow.

The look of the site is meant to be eye catching and fun for future and current students, and we are already getting a lot of positive buzz about it on facebook and twitter!

So check it out!

Tags: , ,

Thursday, June 3rd, 2010 design, Multimedia, Visual Identity 2 Comments

Updated Web color palette

With the Brand Guide/Visual Identity Guide and site going through some updating, I’ve been working with Kim Miller to get the RGB/Hex code versions of the color palette brought in line with the print palette. There have been some modifications of colors from the Print side and I wanted to make sure they were echoed on the electronic/Web side as well.

Updated version of the Web color palette

Updated version of the Web color palette

To that end, I’ve put together a revamped Web color palette sheet that has each of the main color palette as well some of the other Web-centric colors. Under each of the main colors there are shades that we tend to stick to (they are 80/60/40/20 percent grades of the main color). You’ll also notice that there’s no shades of the maroon.

Like we’ve said before, beside having the primary mark, consistent use of color is an easy way to help brand your site as part of the Texas A&M family of sites.

Wednesday, December 10th, 2008 Visual Identity No Comments

Brand family

So where’s the Web version of the Brand Guide, or Visual Identity Guide? The more I think about it, the more I think the answer will continue to be, “There isn’t one.”

And here’s why. The print guide is very important because it explains and constrains. It explains what the rules are, what the color codes are, what the areas of isolation are, what the fonts are, etc. And ultimately when something is printed, it is constrained by those rules. Aggie Maroon will look like Aggie Maroon across the board, and printing will be consistent based on the print procedures the university has set up.

The Web though, is different. Every monitor is calibrated a little differently, some hot, come cold. Resolutions, font availability, browser type, etc. all affect the “look” of a Web site. There’s no way we can guarantee a site is going to look exactly like what we had in mind. We give basic ideas and principles, but ultimately it’s your site.

Second, there’s no way we can regulate what goes up or out on a A&M web site, nor would we want to. The Web is all about community, collaboration and sharing. We become better designers and developers because of this.Plus, with servers in machine rooms, under desks, in offices and everywhere in between, who would want that headache?

Third, and probably the most philosophical, the web is about evolution. Why would I want to codify something that’s evolving? As soon as I do, then the evolution is hindered, or stops. I’ve seen too many new A&M sites that have embraced the principles of the Visual Identity Guide and made them their own.

There are a number of sites (and the number continues to grow) that have really taken the core VIG ideas and, what I like, adapted them to suit the needs of their sites and their site visitors/users. Here’s a small sampling, and I hope to continue adding to the list.What’s interesting is the different interpretations each of these sites take, but yet, jumping around from site to site to site, I still know I’m on a Texas A&M site because of the consistent color palette and use of the primary mark.

Like I said, this is just a small list, but I enjoy seeing what all everyone is coming up with. I’ve already borrowed a couple of ideas from some of the ones on the aforementioned list. So if you’ve got a new rebranded site, let me know, or if you are wanting to redo your site, give us a call or drop by.

Friday, August 22nd, 2008 Visual Identity No Comments

Categories

Archives