Wednesday, October 21, 2015

Strangers with Candy: How To Determine Legitimate and Credible Websites

I tripped over a hilarious website during some research recently. The site changes something innocent and pure to something very shady. In fact, if you want to see, go to Okay - that web address looks pretty scary, but I can honestly say that it will go to something slightly less nefarious: Facebook's homepage. And I promise this goes to Tarleton's website:

Ordinarily, I wouldn't encourage you to click on anything you have any slight misgivings about. You should listen to your gut instincts when you see unusual links. That includes anything you receive in your email, particularly when it comes from a stranger "with a nice van offering you candy."

Stranger danger.

In Badgering Us for Badges (and Other Social Engineering Scams), I mentioned some tips on how to spot scams. But how can we tell if someone is truly legitimate? There really are legitimate sites out there, and real people - not robots - telling us exciting news about our university that we may want to mention with a back link to their website. What tell-tale signs are there that we can specifically look at? Is the website legitimate?

Legitimate Ranking Websites

I mentioned in the last article that strangers from college ranking websites may contact you claiming that you ranked # on such-and-such degree and that they offer "quid pro quo." You put their link on your page, but should you investigate them first? (Hint: Scam artists hope you won't investigate!)

Are they even Human?

Read their verbiage and take note of anything that doesn't sound human, looks misspelled or grammatically incorrect, or for that matter, truly relevant to your website. Typically, if you have earned recognition for ranking high on an international or national college ranking system, that should be termed as an award or recognition, not a "resource". If something sounds out of context, then stranger danger.

Good for Them, Bad for Us

Like I mentioned before, resource pages are havens for "mischievous strangers with candy" hoping you'll add their malicious links, so they can infect you (i.e., lower your website search rankings) or others (i.e., steal personal information or hack computers). Being a university, we have the legitimacy and credibility that these strangers need to get more people to list them, boosting their search rankings.

Legitimate and Credible Sources

Are the sources recognizable? Do other prestigious universities reference them? Have you heard of them before, and not just because they landed on the first page results of a Google search?

Actually, it is very easy to find a legitimate website and then find one that looks just slightly different and has less of the credible information you need in order to trust them. Look for the following on their website:

Who is running the show?

Check for an About page of some type that provides a human face or human references, preferably those that link to legitimate firms or major media outlets. If the only information they provide is that they collected data from public databases that hold information about our university, then anyone with a programming background (and a designer keeping up with design/layout trends) can slap a website together and call it legit.

Think about it: just because someone can post our Tarleton logo on their email doesn't make theirs legitimate - they need to come from our domain:

Will they sell information to third-party vendors?

Maybe. Maybe not. But you should be able to find something on any law abiding website that details how they use the information you or anyone else provides. Will illegitimate sites try to convince you they have such a page? Yes, they will! And it may not even say "Privacy Policy," but because they know your strong suit is in English, they'll hope you don't read past their synonym trickery.

For example, I've run across a website that replaced their Privacy Policy with a Disclosure Policy. Inside said policy, they included absolutely nothing about what they do with your information, but they most certainly went on and on about disclosing university information for a price (and a lovely position well above the supposedly credibly ranked universities).

What is their methodology? Do they provide true comparison shopping?

Sure, they provide a "methodology," and they list a bunch of schools out on a page, but do the results make any sense? Are schools treated fairly in the result listings?

Don't get fooled by a fancy outline of weighted measurements. Read them. For example, how do you determine "Strength of Faculty?" Do you collect crowd-sourced votes on "Rate My Professor?" Or average the number of degree types held by professors? How about taking the grades of the students in their courses? And if you went that direction, if students make high grades, does that mean the professor taught well or gave their students easy breaks and lots of ways to make up absences and failed exams? Make sure the criteria are defined in a way that makes reasonable sense, something that can be calculated across all universities the same way.

And if they do provide a reasonable methodology, can you easily compare the criteria each are judged on, so you can tell how University A ranked higher than University B?

Are they being misleading?

Just like with the privacy policy, do they make their website do something you didn't quite expect? One example I found took advantage of the fact that we don't pay just as much attention to details as we should. It had a very obvious Quick Search with degree search criteria on it which made me expect to find a list of universities ranked on that degree, however, it went instead to a sign up form.

Normally, when we see sign up forms we think about how the site is going to give us personalized information, like financial aid opportunities. This page had a generic description of the degree itself, along with a randomly generated university, but more importantly, it had a disturbing way of asking for my information to sign up.

Again, if I had not paid attention to this step-by-step process, I wouldn't realize that I was about to put my information in the hands of third-party vendors whom I was giving consent to remove liability for spamming me with texts, emails, phone calls, and junk mail. Yes, they claimed they only required demographic information about me while showing me that the personal information fields were optional, but as soon as I clicked on the Continue button, I realized the personal information fields had all magically become required, and I saw a statement similar to this:
Clicking the "Continue" button below constitutes your express written consent to be contacted by email, phone, text and prerecorded message by [randomly generated university that you didn’t intend to sign up with] at the number(s) you provided, regarding furthering your education. You understand and agree that these calls may be generated using an automated technology
If warning bells haven't rung in your head, you've never had multiple phone calls from recordings or tried to put yourself on the Do Not Call Registry after you were positive you already added yourself months ago.

Let Us Check Your Candy Before You Take a Bite

If you have any misgivings about a request to add a link to your website, don't click the links and don't add the content to your website. Remember: stranger danger. If you think it is legitimate or credible, let Web Services give it a check first. We know their patterns and habits, including the latest trends in social engineering, and we want the best, highest quality sites flowering us with praise. We love praise. And candy. Good, clean chocolate candy... Well, I do, anyway.


Monday, August 17, 2015

Improvements Coming to Tarleton's Homepage

The Web Services team will be implementing improvements and changes to Tarleton's homepage on the evening of August 18th, 2015. Changes you will notice include:

  • New degree search bar below the main slideshow
  • Consolidated "Locations" and "Spotlight/Highlight" sections on wide-screen sizes
  • Gutters, otherwise known as "white space" or "margins" have been made larger on the outside edges of page content for wide-screen sizes

Degree Search and Repository

The most exciting new feature to Tarleton's homepage is the degree search/degree repository. This section will allow prospective students to "shop" our degree program offerings straight from Tarleton's homepage. The visibility of Tarleton's degree programs has needed improvement for quite some time, especially considering that according to the 2014 Noel-Levitz E-Expectations Report, 97% of seniors said they found college websites to be reliable sources of information and over 45% of prospective students and parents listed academic program listings or details as one of their top three priorities when looking at a university's website. Each degree page in the repository lists information that is tailored to what prospective students look for when shopping degrees, including what is "different" about the degree compared to other institutions, what someone can do with the degree after graduation, what special facilities and features are available, and much more. Web Services staff and student interns worked with faculty members and other staff over the past year in order to collect the information for these new pages.

Locations and Spotlight/Highlight Section Changes

Web Services continually evaluates content to ensure that it is being provided in the most effective manner possible. One area of the homepage that has been reorganized includes the "Locations" and "Highlights" sections. On wider screen sizes, these two sections originally took up quite a bit of space, each taking up a full "row" of space across the screen. Moving the two sections to be side-by-side on desktop screen sizes is a more effective use of space. On cellphones and some tablets, these sections will continue to be vertically organized instead of side-by-side.

Larger gutters for wide-screen devices

Content, whether on the web or in print, can be difficult to read or follow if it spreads too wide across the medium on which it is situated. This is the reason why newspapers have stories organized into a "column" format. The same holds true on the web. We discovered that with the increasing widths of desktop computer screens that it would be important to implement "gutters" on our responsive webpages. You will notice on wide and ultra-wide screens that content is now consolidated to the center of the screen, with white-space on the sides. This should allow for better usability on those types of screens.

There are many other technical modifications we have worked on for this implementation, which we will go into with detail in the coming days. The entire Web Services team has put in countless hours for this project and I'm excited for these new features to be available for everyone.

If you have questions about any of the changes, just send me an email at


Friday, July 24, 2015

Widgets and Why I Can't Wear an Apple Watch

I love new technology (new toys!), and I most certainly got excited when Apple was getting ready to announce their Apple Watch (which I still accidentally call an iWatch because all their other mobile devices start with "i"). Their smart watch isn't the first to hit the market, though. Android already had smart watches out for a couple years, but since I moved to an iPhone, I never looked at them as a possibility.

I do not have brand bias. I went to an iPhone because my family are all on iPhones, and they refuse to video chat in any other application than FaceTime. That's not to say we didn't test other video chat apps. They didn't compare to the quality or my family refused to create a new account just to use one app, so those requirements basically forced my decision on the brand I use personally. At work, though, I use everything because I test everything to see how different devices react to our website as well as how each one works to the advantage or detriment of our website's functionality.

It was with great sadness that I decided I could not wear the Apple Watch, but the Apple Watch wasn't the first smart watch I tried before making this decision. I had joined the university's fitness program and tried out the new Fitbit tracking watches we were given, and before that I tried a different fitness watch. I had the same results each time: they cut off my circulation, putting my hand and wrist to sleep. And no, it wasn't the typical "user error" of keeping it too tight.

Downside: I can't appreciate the joys of the Apple Watch without risking putting my hand to sleep.

Alternative: I can still use my iPhone to answer phone calls, check the time, view the map, read my mail, and all the other things that are easier to read on the larger screen anyway.

Not too bad, just not as cool as the new technology, but I can still function with the alternative option.

It's these kinds of decisions that I make in my personal life that I also have to make when web maintainers request to embed some kind of code, typically a widget, onto their web pages. In respect to our website, I have to look at web, compliance, and security standards as well as our Tarleton branding guidelines.

If the code you request to embed on our web pages doesn't pass the tests, then we cannot embed the code onto our webpages, however, where possible, we can still link to an external website that provides the content in its original form.

Just keep in mind when doing research for awesome technology to add to your website, you should include Web Services in the investigation of such products to determine if the safety or privacy of our constituents is compromised or the content is not accessible, as well as all the standards we must follow. Including us helps you ask the vendors the right questions, so we can get you the product you want without the vendor's response going over your head.

Things Coming Down the Pipeline

Please note per our Web site Terms of Service (under Scripting languages and allowed packages) that all code you wish to embed on your website must be approved by Web Services before it can be implemented.

We do have a lot of legacy content on our website that will not be transferring over to the new website due to the programming issues I mentioned in Responsive Design Next Level: Entirely Modular Pages. As we receive new requests for certain types of "widgets" (feeds, modules, or other embedded code), we discourage further or additional use of those "widgets" or encourage other temporary solutions as we look for new solutions.

These are a few that are coming down the pipeline.

Flash "Widgets" (uses Adobe Flash Player, as opposed to apps in an app store)

As we move over to responsive pages in Project Squishy, we have to look at how any "widget" can adjust to the screen size of any device. If the content cannot squish into the screen, we are encouraging web maintainers to find alternative solutions as they will not be accessible to users of those smaller devices. Many of our current "widgets" have a forced set of dimensions that would, therefore, not be transferable to the redesigned site.

Adobe Flash products have had consistently negative feedback from users with disabilities. Accessibility advocates discourage its use in place of HTML5 alternatives.

Adobe Flash has had other negative feedback as well, including poor support on mobile devices as well as security risks. Apple mobile devices don't support Flash, period. Firefox is heading that direction. Even social media executives are asking Adobe to finally say goodbye and accept the HTML5 solution.

There is no more general support for Flash, so in the end, we really need to convert everything off as soon as possible for accessibility purposes. You don't want to prepare for the end-of-life date after you cannot view your Flash products on browsers like Internet Explorer or Firefox. Prepare for its expected end-date, and do research on alternatives now! Contact Web Services for assistance in possible solutions.

How do you know it is a Flash widget? 

If you right-click on the widget in your browser, and it shows a menu option "About Adobe Flash Player [version]", that is a Flash widget.

The following is a short list of examples that will not be transferable, along with our home-grown Flash widgets:
  • Prezi presentations: you should only link to these on the Prezi website.
  • Photobucket, Flickr, and other photo (and music) slideshows or galleries: we have slideshow solutions in the redesign for very small slideshows, and for larger slideshows we also encourage links directly to the albums or album slideshows.
  • Music players: contact Web Services for options
  • Online form software: we use an enterprise solution called Wufoo
  • Calendar/events solutions: we use an enterprise solution from ActiveDataX, and we can refer you to alternative solutions.
  • Clocks and countdowns: we are currently investigating options
  • Chat room software: we are currently investigating options

Social Media Widgets

Before we even considered a redesign of our website to be responsive, we were already having trouble with embedded social media widgets, like the social feeds. Originally, we could pull the content (via a feed file) and style it to our own liking, however, these larger social media outlets have been wary of their competition using their platforms to promote their competing products, and they decided they wanted to control the entire look and feel of their platforms to direct their users to their own services. Remember when Instagram stopped showing previews of their photos on Twitter to increase viewership on their own platform? Or how about the Periscope vs. Meerkat showdown?

They now insist we use their proprietary code, look and feel. Sure there are a few customizations, but we are at their mercy at all times.

We've tried before to fix issues. There was a Facebook feed widget issue that popped up a few times throughout one year where the size had gone outside our template's layout. I'd muck with our webpage's styles to try to fit it back in the boundaries and display at the right text size, but as soon as Facebook fixed the widget, my temporary fix broke the widget again. I'd have to go to every single webpage that had the Facebook widget, and fix each and every one. Twice. Each time.

If your page is not working correctly because of the social media feed, our hands are tied during that time the vendor is working on the fix while your page looks broken and unprofessional.

Given the instability of their code, we have discouraged new requests for embedded social media widgets, and will not be moving them to the redesigned site unless we can find a proper alternative. Given the lack of support for customization of widgets from these social media outlets, we are not hopeful for solutions at this time but nevertheless are on the lookout. We still allow links to your social media pages per our social media guidelines, and that alternative has been available since before we learned of their codes' instability.

The following is a short list of examples of social media widgets that will not be transferable until we find proper alternatives:
  • Social media feed, follow, like, etc. widgets
  • Social media mass share widgets (e.g., AddThis, ShareThis)
  • Comment/discussion widgets
  • Ratings widgets

Tracking Code

Web Services uses Google Analytics tracking code to help you determine what is working on your websites, what your constituents are interested in, and what needs improvement or removal due to lack of interest from your target audiences. We consult with web maintainers based on university, department, and program goals and our constituents' needs when accessing our website content. However, when additional tracking code combines with our code, our analytical data gets skewed (e.g., duplication or removal of important information), so we cannot provide proper consultation services to you.

Typically, tracking code (like Google Analytics) is hidden from sight when our constituents view a website. This is good because we don't necessarily want people to see those page view numbers which only tell a partial story about the page's usage anyway. Some might interpret them as good while others might think they are bad. But what you don't know is that hackers can see these embedded code snippets and exploit their security flaws to hack our website. One of the many approaches they use is "injection". In this scenario, they don't have access to Cascade Server or the web server itself to make changes to our webpages, but they can view the code of our website, find a backdoor in any weak programming, and inject malicious code onto our webpages and server. Flash widgets are what we typically hear about having these flaws, but any code has the potential to create security leaks.

If you have any questions about "widgets" or code you want to embed on your website, please let Web Services know what you are researching, and we can help you determine your best options.


Thursday, July 2, 2015

Future of Web Editing: Proactive versus Reactive Compliance

I went to my brand new medical specialist the other day, and like with any new client, he asked me what I do for a living. I told him I was a web designer and developer. He remarked that he has a website and someone who works on it, but he knows how busy the developer is, so he thinks he should update the website himself.

This is a response I hear quite often from across the campus. Only a decade ago, everyone with a computer connected to the Internet was getting into the latest web editor they downloaded and sprucing up webpages related to their work and hobbies. And we all called ourselves “Webmasters.”
It was simple enough, right? After all, it is technology, and technology is supposed to be smart enough anybody can build a webpage.

Supposed to be.

But it isn’t.

And that was the shock I received at the first accessibility conference I went to a decade ago. Anyone can build a webpage with the numerous drag and drop options available, however, most are not aware of the accessibility challenges, not to mention content strategy or information architecture. We can do a lot with technology, but technology is only as good as what we put into it. Without the proper knowledge, web maintenance is becoming a far more specialized practice only individuals with a minimum set of technical skills qualify to accomplish.

Our goal as we progress is to make it easier for less technical staff to maintain websites and help technology literate staff keep up with compliance standards at the same time. A new strategy we will be implementing will use a technique commonly used on word processors.

Think back to the days of the typewriter. Yes, they still exist, and their sound is unforgettable to those of us who have used them, but you may recall the typewriter never told you that you misspelled a word.

Yep! You remember reading through your work and cursing under your breath as you had to start all the way over. Well, that is unless you had one of the newer typewriters that let you go back and erase a typo. And it improved through various intervals until we started typing on computers in these technological contraptions called word processors.

Example of a word processor warning a user of a misspelled word.

Then they got really smart! They started to warn us about our misspelled words! Eventually, they were programmed to figure out what we intend to say despite our poor typing skills, and now they autocorrect text for us.

The same kind of proactive warning system has not been done to make web content accessible. For example, web maintainers remember their days writing research papers and using underlines for the titles of books. However, underlines on the web are used primarily for links. People often get confused about what is a link and what is not when they see the underline, imagining they will perhaps hit an online store selling that book only to click on a non-reacting webpage. Web maintainers receive no warning when they underline text for web content telling them they are using the style inappropriately.

This means what I do right now checking our website for accessibility compliance issues is very reactive. I go through webpages manually to check if web maintainers are inappropriately using the underline style for web content. Then I tell them where the problems are, why underlining content that isn’t a link is inaccessible, and ask them to remove the style from their text. I have a very large website to scan and it is very slow process. And that is only one piece in a very long checklist of accessibility compliance issues!

However, with Project Squishy, we will be improving all that in two ways:

1. Appropriate Styles and HTML Tags

Example of Cascade Server's WYSIWYG warning a user of an inappropriate style in use.
Many of the styling errors that web maintainers make currently will have warnings appear around them as they use styles inappropriately, just like a spell check or grammar check. If the maintainer does not correct it in the WYSIWYG editor, the content will still not appear with the styles they had placed on the text when they publish the page to the live website.

This also goes for HTML tags that have been deprecated, such as the old acronym tag (see the full list of HTML 5 tags, plus the alternatives for deprecated tags).

2. Properly Structured Page Content, Alternative Text, and Appropriate Writing for the Web

Preview mode in Cascade shows a warning for the text that was inappropriately styled along with the reason and options for correcting the issue.
Previewing a page inside Cascade will show a warning for many more issues that are inaccessible, including missing or inappropriate alternative text, bolding or italicizing of entire paragraphs, and using headings to increase the font size of entire areas of content that should be paragraphs.

These issues will only appear in the Preview mode inside Cascade Server, along with the reason and options to fix it. When maintainers publish the content without fixing the accessibility issues, the content in violation will not publish.

It will also autocorrect inappropriate spacing and punctuation.

I’m working on more issues as Cascade allows me to resolve them within the system in order to provide maintainers the quickest turnaround on accessibility compliance checking. This proactive approach will help web maintainers receive immediate warnings of inaccessible content issues as well as teach them what to do without me having to review the content and write responses each time.

The Future of Proactive Accessibility Checking

My solution inside Cascade Server is not a full accessibility compliance check, but it is a step in the right direction for all of us. Many things will still need manual checking, and web maintainers will still need training on how to make content more accessible, just like we did when we learned how to write research papers on typewriters.

I do see some potential areas for technology, on its own, to catch some of our mistakes. For example, we cannot insert an image into a webpage and generate automated alternative text for it based on what is seen in the image currently. However, The Wolfram Language Image Identification Project is making some major strides in image identification such that if we were able to implement it into web editors, we would, at minimum, be able to generally describe images based on what their databases believe all those pixels in their specific pattern on the images represent.

The only problem with this is similar to problems with textual autocorrection. Does the alternative text accurately describe the mood or intention of the web maintainer who inserted the image into the page? What about artistic expression? Yes, we will all be laughing at the funky automated identification responses just like we already do with textual autocorrect from our “smart phones.”


Thursday, June 4, 2015

Badgering Us for Badges (and Other Social Engineering Scams)

Social engineering, with respect to the web, is the psychological manipulation of web maintainers (or content owners) to perform certain actions, such as clicking on links in emails and adding those links to websites. I have so many examples, but I'll just provide a couple to start you off:

Subject Line: (empty)

Hi there,

I hope Monday is treating you well? I was just browsing and came across your site. I was wondering if I could offer a couple of suggestions.

As a mother, child safety is very important to me.

Here is a couple of guides I consider to be of great help. Would you consider adding them to your resources page? I think it covers a lot so I’m sure your readers would find them a worth-while read.

1) Random keyword related link
2) Random keyword related link
3) Random keyword related link

And this was the page is was referring to: Completely unrelated webpage (music education resources page) on our website that uses related keywords on education and children and contains lots of resource links.

Either way, I liked your site, keep it up

Kind regards,
A robot scanning our website
This was an actual email I received, however, I removed the names and links to protect the innocent. Note the emotional plea, the poor punctuation and grammar, and the desire for you to provide these links on your webpage, even though your page is considered such a great resource without them.

On this next one, I will reveal the webpage the robot was referring to, so you can understand how smart these robots are:

Subject Line: Astronomy info from retired teacher and students:)

Hi there,

My name's a robot scanning our website and I'm a tutor at the local middle school. The kids that I mentor wanted me to email you and let you know that they think your page, on space is very helpful! We have been learning all about astronomy, since a parent donated an amazing telescope to the school.

As a thank you they wanted me to reach out to you and give you another great resource they have been using and have found helpful  Random astronomy keyword related link

This group of kids really are wonderful and have come a long way in learning, they were hoping you would add the above link to your page, and because of their hard work, I told them they could have a surprise pizza party this Friday ;)

Let me know if this is something you would be interested in adding to your page!

A robot scanning our website

They received a pizza party just for finding our website and telling us we were missing a webpage! And this tutor, once again, has poor punctuation, poor grammar, and an aching desire to convince me she is a legitimate person. Do I take the bait?

If you look at the Tarleton's Society of Physics Students website they refer to this time, it does look like they hit an appropriate webpage on our website with the resources links about astronomy, though that is only one topic in physics if you look at the entire listing of resources there. Should you add their link to your webpage?


One aspect of Search Engine Optimization that I did not mention in great detail in What is Good for SEO is Good for URL is authority and legitimacy. Search engines rank you based on how relevant you are from other websites. That is to say, if a lot of people link to a particular page, then it must be the authority on that subject.

I mentioned before that we have authority and legitimacy based on our .edu status. In fact, ours is higher than any other domain (e.g., .com, .org, .net).

If we link to someone else, we are saying that the links we place on our website have authority and legitimacy as well. That increases their rank in search results. When it comes to legitimate sites, link exchanges are good for both entities. When they aren't legitimate, we actually lose rank - and they gain.

There lies the need to socially engineer you to believe you should add their link to your webpage.

Social engineers are getting better at their game these days. They can pull a logo off our website and stick it in an email, claiming to be one of us. They can spell their email addresses almost exactly like one of our legitimate ones. They can even build a website to collect information on people and lure us into baiting more people. Take, for example, this more recent attempt to manipulate us:

Subject Line: Spring 2015 Graduate Program We Have Rankings announced!

Website collecting user information to sell to third-parties is pleased to announce its Spring 2015 Graduate Program We Have according to students, enumerating the best graduate programs in the country based solely on ratings and reviews from current or recent graduate students posted on website collecting user information to sell to third-parties.

Program rankings, compiled using data gathered between September 1, 2012 and March 31, 2015, encompass reviews posted by more than 70,000 students participating in over 1,600 graduate programs nationwide.  Ratings are based on a 10 star system (with 1 being the worst and 10 being the best).

For a copy of our Top Rankings Badge & Seal, please click on the link.

For the rankings page, please click Graduate Program We Have Rankings

The Top Graduate Program We Have are listed below:

1 - 7        removed
8             Tarleton State University
8 - 25      removed

Website collecting user information to sell to third-parties reaches current and recent graduate students through scholarship entries as well as social media platforms. 

Website collecting user information to sell to third-parties assigns 15 ranking categories to each graduate program at each graduate school.  Rankings cover a variety of student topics such as academic competitiveness, career support, financial aid and quality of network.

For a given graduate program, rankings are determined by calculating the average score for each program based on the 15 ranking categories.  These scores are then compared across all ranked schools for that program and are translated into a final ranking for that graduate program, i.e., “business and management”.  A given graduate program is not ranked until a minimum threshold of graduate student surveys is completed for that program

Contact information for a robot scanning our website
Again, removing the actual names to protect the innocent, but I did go to their website - not from the email, though! The email contained tracking code that allows the robots scanning our website to recognize they hit a live email address, so they can spam you with more emails or sell your contact information to a third-party vendor who will spam you with more emails. Note the endless cycle that comes from curiosity?

I don't want to sound cynical. There are some legitimate reports out there ranking universities with scientific methods, so I read through the methodology you might have skimmed over. That's right, I didn't even have to ask them for it. After all, a methodology stated up front would provide legitimacy all on its own, right? Yeah, I knew you were shaking your head.

Look carefully at the content of the email: the information is based on student responses. They have convinced over 70,000 individuals to create an account in order to look through the results and vote on their universities. By creating an account, they collect information about these individuals.

Take another look at the numbers they mention, including "70,000 individuals." There are 322 million people in the United States, by 2014 estimate, so what portion of the population has a graduate degree or higher? And they've been running this website for 3 years with only that kind of response?

As I said, I tried not to be cynical. There are crowd-sourced databases from legitimate and authorized firms on the web, so I searched on Google for the website and entered from there. I have to say that the website looks very sophisticated (as many do), so it does become harder to see beyond the flashiness of the design and information plastered everywhere.

I looked specifically for the page listing out our rank within the graduate program they mentioned we were number 8 on. When I finally found it, there was a link to Tarleton State University next to the number 8, so I clicked on our name to see their detailed report on our grades from student voters.

The first thing I saw on our report card were lots and lots of stars covering 60% of the webpage. That is the distraction they hope you will linger on. When I looked up above those stars, I saw just how many students responded to our university's report card: 7.

A big, whopping 7.

And given they are user names and not actual names, I couldn't verify if they had actually attended Tarleton.

Then I went back to the full list, clicked on the number 1 ranking university, and there were 29 respondents.

Oh, but it gets better.

I went back to the full list this next round, and I clicked on the number 2 ranking university. Drum roll, please, for the number of respondents that brought this university to a number 2 national ranking on this particular graduate program: only 1 respondent.

Just 1.

Essentially, if you want a higher ranking, you have to convince your students (or your neighbors, since the voting is anonymous) to create accounts on this particular website (not a unbiased firm randomly surveying the population), pass this unknown company your personal information, and then vote up your university graduate program. May the most popular university program win.

There is no way this was scientifically calculated, measured or weighed to give us the national ranking they claim we have. Link badge denied.

How to Avoid Being Socially Engineered

These are some of the steps you should take to avoid clicking on links in emails or posting those links or link badges onto your wesbite:
  1. Check the email address
    • Legitimate company or firm?
    • Words spelled correctly?
    • Word spelled slightly off or extra punctuation added to what would normally be a legitimate company or firm?
  2. Check spelling, in general
  3. Check grammar and punctuation
  4. Check for an emotional plea
    • Are they trying to convince you to do something in a short time frame or insisting that you respond to an email they've sent you before?
    • Are they using reverse psychology?
    • Are they pleading to your humanity?
  5. Check how they found you and how relevant you are to the link exchange they are requesting
    • Keywords randomly found on your page?
    • Do you have a resource page with your email address on it?
  6. Check the links from a search engine instead of the email
  7. Check their methodology for scientific weights and measurements
    • What is their scope?
    • What are their criteria?
    • Where (sources) do they collect their information?
    • Is their information even accurate?
    • How do they calculate the results?
    • How do they weigh their final results?
If you do find an email that looks like social engineering, go ahead an delete it. If you think it may be legitimate, forward it to us, and we'll investigate it for you. If you have any other questions about social engineering, in general, you can contact Tarleton's Information Security Officer, Marilyn Meador.


Thursday, May 21, 2015

Pulse of Higher Education Accessibility

I found this article Patterns in Higher Education Accessibility Complaints very interesting in respect to where we are right now with providing accessible electronic and information resources (EIR), academic services, and other services across all institutions of higher education. This is not an exhaustive list, but it gets to the issues most complained about across our campuses nationally.

Two resources he mentioned about litigation with higher education were also included:
Again, none of these are exhaustive. I mentioned in a past article the National Association of the Deaf is attempting a class-action lawsuit, filing two first against Harvard and MIT on lack of appropriate closed captioning of online videos or educational materials. And more recently, the United States Department of Justice is involved in a blind student's lawsuit with Miami University (Ohio - not Florida) over inaccessible software.

This brings me to an important aspect to my duties as the EIR Accessibility Coordinator. The first list of complaints mentions issues that may need the attention of different accessibility coordinators on Tarleton's campus. For example, I do not personally handle issues related to academic courses and test taking. Students are asked to contact Center for Access and Academic Testing (CAAT) for assistance in these areas. Faculty and staff can contact Employee Services for assistance getting assistive technology in their work environment. However, my list of duties as Tarleton's EIR Accessibility Coordinator are defined by the Texas Department of Information Resources. Generally speaking, it involves checking all our electronic and information resources for compliance with accessibility standards as well as any we have yet to procure for university use and training those who create EIR content as well as resolving any issues that come up.

Procurement is a big issue because pretty much everything we buy has some EIR aspect to it and has to be upgraded and maintained in ways that keep them compliant or improve their compliance. The following electronic and information resources must be reviewed for compliance with accessibility standards:
  • Web Applications and Software (e.g., websites Tarleton uses, email, TexanSync, mobile apps)
  • Software Applications (e.g., Microsoft Office and Outlook, Adobe Creative Suite)
  • Operating Systems (e.g., Windows, Mac, Android)
  • Telecommunications (e.g., phones)
  • Videos/Multimedia (e.g., YouTube, Vimeo)
  • Self Contained (e.g., copy/fax cachines, laboratory equipment)
  • Desktop/Portable/Mobile Computers (e.g., Apple iPad, Microsoft Surface)
That is a huge list and not even a comprehensive one! That's obviously more than I can juggle along with my primary job position as Web Designer / Developer. Some of these issues are actually checked by other organizations that assist accessibility coordinators in determining accessibility. Organizations like Knowbility (where I just recently attended a conference) assist all of us in training vendors who provide these kind of EIR as part of their business. In fact, one of the vendors on the most recent lawsuit was there (another didn't tell me who they worked for) to learn how to make their products accessible.

The point I'm trying to make here is that not all software is accessible - nowhere near that. However, with everyone's assistance and open communication, we can all become more compliant and avoid these lawsuits that are starting to really pop up everywhere nowadays. People with disabilities have been aware of the laws that protect them from discrimination for a long time, but that "legal" word has not spread as it should and from their point of view, they've waited long enough for us to make certain changes to our processes, so they are no longer discriminated against.

As always, I will keep you informed of any changes to the laws and what we need to do to comply. If you have any questions, please feel free to contact me. Open communication keeps us better prepared to handle these tough issues and determine our direction moving forward.


Tuesday, May 19, 2015

Responsive at a Glance

Web technology has changed so much in the last five years. What used to be straight-forward and simple has now gotten complex with the invention of responsive technology. The world has a jungle of devices, and the devices display many different breeds of websites. We as developers have to make decisions on how to organize our websites so that all devices in all sizes give users the same opportunities to needed information. We are, in a sense, genetic engineers.

Responsive technology does not provide a perfect viewing platform for online information. It is by far the best methodology we have for the amount of device sizes we must cater to, but inevitably there will be some things that are visually bothersome. The most important thing is to make the same information available to all devices.

With traditional publications, such as posters, brochures, and billboards, there are things we must pay attention to, such as whitespace, image placement, kerning, and content alignment. In the web world, these things are less precise, especially with responsive development. We can of course program to provide the best situations for popular screen sizes, but everything in-between can* have a slightly spaced-out, misaligned, or unnatural feel. (*some responsive developers are better at preventing this than others!)

A great example of a responsive design is the new website. They made things simple by website screenshot
The new website
putting all of the important information on the homepage (without crowding it) and making it easily searchable. The content is easy to read, and scrolling down the page is quite pleasant. They use what our office calls a "stacked" page structure, where only one section of information is available per "row" on your desktop or mobile phone. This allows for consistency of design on all platforms and makes finding information easy. Their predictive search is on par as well, providing organized categories of results including related agencies, services, search suggestions, and more.

We have taken a similar approach with Tarleton's website. Our responsive homepage is "stacked" and we provide predictive search capabilities. We try to provide a similar user experience no matter what device is used, however small differences can be noticed.

To demonstrate some of the differences in how a single page may look on different devices/screens, I am providing photos of Tarleton's homepage below. You will see differences in text/image size, space taken up by text, column sizes, content organization, navigation look, and more.

This is a mobile view of Tarleton's homepage. You will see a collapsed menu and search at the top, a banner slideshow underneath the header, and a portion of the locations section. Each content item is "single file" down the page, with the slideshow image appearing ahead of the slideshow text.

Since this mobile phone is small, there is not room for desktop-style navigation. If we did try to fit traditional navigation on the device, the text would either be too small to press with a finger or take up too much valuable real estate. We have decided to collapse the navigation menus just for mobile phones and very small devices.

This is a tablet view of the homepage in a vertical/portrait orientation. On this one you can see quite a bit of Tarleton's homepage, in fact, you can see all the way down to part of the News section. We have the normal navigation available without it being collapsed. You can also see a bit of space underneath the text on the right side of the slideshow.

We are able to see further down the page because of the size of the device vs. the screen resolution. Even though the device is smaller than most desktop screens, the screen resolution and vertical orientation allow for more vertical page to be visible.

This is the same tablet, but in a horizontal/landscape orientation. Obviously, less of the page is visible in this orientation, with only part of the locations section visible. We are able to fit in the full navigation just as with the vertical orientation of the tablet.

Here is Tarleton's homepage on an older desktop screen, with 1920x1080 screen resolution. Since the screen is more square than rectangle, you get a more narrow view of the page than a wider-screen version. You can see the entire locations section and a little sliver of the highlights section.

Since the screen is much larger than a tablet, you can see we have adjusted the text size so that it isn't too large. In doing so, we have created extra "whitespace" to the right of the image and underneath the slide text. Considering there is a different amount of text accompanying each slide of the slideshow, there can be more or less whitespace. It all depends on how long the title and teaser need to be for each slide.

Lastly, this is a widescreen desktop view of the homepage.There is quite a bit more space in header, the navigation bar, and in the slideshow text area. Again, if we were to make the text larger in order to fill those areas, the size of the text would be too overwhelming for the screen size.

As you can see, Tarleton's homepage looks different on all of these screens. However, the same information is available on that page for all devices. Given this is just a small sampling of the hundreds of screen sizes available, we can conclude that responsive technology is here to stay for the foreseeable future.

Web Services is constantly learning more about responsive technology, and has been programming some changes to the responsive templates in order to remedy some of the whitespace and issues with being "too spread out." We will be adding a "gutter" to our pages so that the main content is more consolidated and less spread out horizontally. The page will still be responsive, but should be more visually appealing and easier to follow. The homepage changes should debut sometime this summer.

For another visual explanation of responsive design, check out this blog article from FROONT: 9 basic principles of responsive web design.


Thursday, May 14, 2015

Putting People First: Deciding What Is Important Contextually

Describe the sun to a person who has been blind their whole life, and you will likely find some challenges. For example, what is this thing called "color" or "bright"? What does red or yellow look like? But you can tell a blind person that the sun is round like a ball because that is something they can relate to, something they can feel here on Earth - definitely don't encourage trying to touch the actual sun!

As usual around this time in May, I headed down to Austin, Texas, for the annual John Slatin AccessU Conference hosted by Knowbility. And as usual, they bring some kind of art or cultural experience to the conference in respect to some aspect of accessibility compliance. The keynote speaker this year was the Blind Film Critic himself, Tommy Edison, and he took us on a journey through audio descriptions on Monday night at the Alamo Drafthouse Cinema on South Lamar.

Right now audio descriptions feel like the adopted children of video players and movie theaters (and probably every other theatre) when it comes to accessibility options. We are becoming more and more accustomed to providing closed captioning for the deaf, but what about the actions that are important for the story that the blind cannot comprehend based on sounds and dialogue alone?

Blind audience members were dismayed when their blind superhero, Marvel's Daredevil, came to Netflix without audio descriptions. Daredevil's alter ego, Matt Murdock, is constantly provided with audio descriptions of people's actions by his friends throughout each episode, but the same could not be said for the Netflix subscribers who complained about this irony. Netflix announced a decision to start adding audio descriptions four days after posting the entire season.

"Oh, sorry, you didn't see that. She just nodded her head."

Tommy Edison judged attendees, instructors, and staff of the AccessU conference to a contest of audio description to see who could describe 90 seconds worth of a scene the best. Before anyone took a shot at it, some attendees took an audio description class Monday morning and the rest of us enjoying the show at the Alamo Drafthouse listened to a professional audio describer depict the 2015 Oscar winner for an animated short film Feast. She was lucky, though. She'd seen Feast maybe ten times beforehand and refined her description to best tell the story. We, however, watched an entirely different short film, and had to come up with a description to a story we had never seen before. Everyone tried hard, but it was obvious that without understanding the story and without properly analyzing the scenes, where dialogue and sound began and ended, you aren't providing anywhere near the full story.

Audio descriptions are the alternative text for moving images, so you can take much of your instruction from the average alternative text guide for website compliance (many of which are posted on A Picture is Worth a Thousand Words... Literally). As a sighted audience member, I am overwhelmed with visual information. So if I were to try to describe what is happening in any scene or an entire movie, which details do I include? Which ones are important? More importantly, which details are important to a person who is blind?

For example, the short film we were audio describing had three white characters and one black character. Do we describe the fourth character as being black? Again, those born blind do not know what color looks like. Unless the fact that the character is black, as opposed to the actor portraying the character being black, is important to the context of the story, this detail can be ignored. It provides no essential information to the story, so it wastes otherwise important and precious time to describe something else.

One hang up I had while the professional was describing the dog in Feast was that she wasn't describing all the visual cues, the facial and body language. That, I learned, is information blind people would not comprehend anyway, unless you don't mind your privacy being invaded by someone constantly touching your face for new facial expressions. However, blind audiences can gather a great deal from verbal cues like inflection and pitch while speaking.

This hang up is one we all share. So often when we come up with content, we look at it from our own point of view, what we think our audience wants or needs. This only helps us, not our audience which makes them more confused and need to ask more questions from us. We have to turn our focus to them, get in their shoes. What is important to them? Focus on the important details.

Interesting little debate that we somewhat covered over comedic scenes: due to the fact that the audio description needs to occur at times when other sounds and dialogue are not the focus, a blind audience member listening on their headset may start laughing at the punchline to a joke seconds before the rest of the audience gets the punchline visually at the movie theater. They say people have actually told the blind attendees to hold back their reactions, but is that discrimination? By telling them they cannot experience and react to the performance naturally, on their own time, are you making it a better experience for one group of people or all groups of people?

Don't understand the situation? Okay, let's say you are on Facebook or Twitter or whatever social medium, and you had to work the late shift during a TV show that you absolutely love, and you just told all your friends not to say a word because it would totally spoil it for you. Keep in mind, they have lots of other friends who are interacting with each other on social media while watching the same show, but you've just told them they can't have any interaction at all in relation to this TV show because you would see it before you turned on your DVR. Is it the same kind of discrimination? Do they have the right to post the spoilers? Is it possible for you to ignore those posts (or laughs) for a short period of time to catch up with them later? What do you think?


Wednesday, May 6, 2015

What is Good for SEO is Good for URL

There are a number of important factors that come into play when improving search engine optimization (SEO). Descriptive titles and keywords are very important, but did you know how you type the page or file names can also affect SEO?

What is a URL?

A URL (uniform resource locator) is a web address. It's the name you type out or click on within a page that spells it out that takes you to the location of a page or file on the internet.

Tarleton State University has a very nice, clean web address:

Domain (.edu) and Domain Name

As an educational institution, we have the ability to acquire a domain name ending in .edu. This signifies authority and legitimacy across the internet. Not just anyone will be eligible for a .edu domain, so this increases the value of your content and raises your ranking on search engines the most.

We also made it very simple to find us by sticking to "tarleton" as our domain name. Imagine if we had gone the route of First, that is a very long web address. Also note the hyphens separating the words. Now, what I'm about to tell you is based on some research allowing Google robots to scan websites without any links to them and rank them accordingly. If hyphens are in the domain name, Google sees these as less authoritative web addresses and lowers their rankings. If, however, we had used as one word, Google would raise the ranking. But honestly, do you really want to type that much for our web address? Probably not. Neither do your constituents.


Moving to the right of the domain and domain name we have our resources. Let's look at a very important resource on our website which ranks very high on SEO:

Homepage or Index Page

Depending on what your IT professionals decide on the back end, you will often see index.html or default.html as your homepage. At Tarleton, our homepages are index.html. That is, if we wanted someone to go our main homepage or departmental homepage, we wouldn't actually have to type that portion out. A homepage can have the web address form of as opposed to or as opposed to

Again, we like shorter web addresses. The less we have to type, the better. They also look much better on brochures and other publications. These "index" or "home" pages are very important for SEO, though. You should always use them in your website structure to denote the main page on a website or within a folder in your website.

Page and File Names

So now down to the nitty-gritty details of other page and file names. There are good characters and bad characters to use when naming your files and pages. A typical name can include upper- and lowercase letters, hyphens, underscores, periods, and that weird squigly line we still have on some of our websites called the tilde. Trouble starts when you go outside that set of characters because other characters are needed for calculations or interactivity with scripts and applications. The following characters should be avoided at all cost in your page and file names: ! @ # $ % ^ & * ( ) + =[ ] { } | , \ / < > ? `

Syntax Rules

Then come the rules, like you should only use a period when saving a file. It is the punctuation used to separate file name from its extension. It also helps software applications determine which one should open your file. For example, if your file ends with .doc, then your computer is typically going to open up Microsoft Word to see the file.

Spaces vs Hyphens vs Underscores

We often save our files in a way that is readable to us, such as including spaces in the name. That's great for internal use, but it is not helpful for SEO. Spaces are also a bad character to use in page and file names on the internet. We often try to replace them with either underscores or hyphens, but which one is actually better for SEO? Here's what is really going down with those two characters:

If you use a hyphen, you are helping the search engine separate words out to be readable and searchable, so marine-biology comes up as "marine biology" in search engines.

If you use an underscore, you are telling the search engine to combine words, so marine_biology becomes "marinebiology" in search engines.

Is "marinebiology" a word? How high would it land in the page rankings then? Probably not very high, since it makes the assumption that someone is specifically looking for "marinebiology" as opposed to "marine biology" in their search (or we hope they made a spelling error). That means it is better to use hyphens to replace spaces in a page or file name.

This is obviously opposite of the rule for domain names, but it really does work for resources after the domain name:

Make it All Lower Case

Some search engines and analytics software are case sensitive. Your page can be typed in multiple ways. Each way has its own search rankings or analytic results. That knocks their values down because they aren't all leading to the same page. They do not add together in the final results. To avoid hijacking your own results, use lowercase letters for your page and file names.

Other SEO Practices to Consider

While the web address itself is important to SEO, there are many other things you can do to help your pages rise in the ranks. Some techniques have been called "black hat" due to their inappropriate usage to falsely make claims of authority on topics. Google and other search engines will actually lower your rankings in the search results or ban your site if you use black hat tactics. Here's a list of Do's and Do Not's:

Do provide the appropriate keywords that span the content of your specific page.

For example, if you are talking about chocolate, you can mention dark chocolate and white chocolate if that content is part of your webpage's message. Don't separate chocolate from bunnies, if you are referring to chocolate bunnies. The topics for those two words are entirely different, so combine them.
Do Not "keyword stuff" on any portion of your page, including metadata such as title, keywords, teaser, summary, or description. Keyword stuffing is repeating the same keyword multiple times in one or more of metadata or portion of the page, such as hidden text on a page or alternative text on an image.

Using the chocolate example, you don't need to say you sell chocolate in Fort Worth, Dallas, and San Antonio with the keywords Fort Worth chocolate, chocolate Fort Worth, Dallas chocolate, chocolate Dallas, San Antonio chocolate, chocolate San Antonio. Just add the locations to an appropriate section, like the description where you say, "We proudly sell our delicious chocolate in locations across Texas, including Fort Worth, Dallas, and San Antonio."

Do use keywords in the context of your message on your webpage. Remember, your audience is coming to you on this topic specifically. If the page talks about this topic, their keywords would likely be somewhere within the conversation, not just within the metadata. In fact, keywords in message content on a webpage play a larger role in ranking than keywords in metadata.

Do Not use keywords that are unrelated to your content.


And a final recommendation in regard to page titles. While many web maintainers get concerned about adding keywords into the page title, you really want to keep them quite simple. This is in part due to black hat practices of stuffing, but here's a different perspective:
  • What are you reading on the search results?
  • What are you reading if you are choosing a bookmark in your long list of bookmarks?
If every page title starts out the same, then you can't tell the difference without investigating further. Most users are not that curious.

Here at Tarleton, all our Cascade pages already include that we are Tarleton State University. You don't need to include it in your title. Instead, start with the page topic, then go to the department name. For a fake example, Glorious Dark Chocolate - Department of Chemistry & Biology - Tarleton State University. ("- Tarleton State University" does not need to be entered in Cascade.)

Start specific and go out. Note I didn't mention the College of Science and Technology in the page title. Keep it simple.

Last but definitely not least, make all your page titles unique!


Friday, May 1, 2015

Student Employee of the Semester Award - Spring 2015

Each semester we award one of our student employees with the "Student Employee of the Semester Award" in web services. This semester's award was given to our student intern, Yaritza Corrales.

Morgan Hammond, Yaritza Corrales, Daphne Hunt
Yaritza is a star-performer in everything that she does in Web Services. She has made great strides in collecting and placing content for our new degree pages. Yaritza has well-written communication and has done well with tackling difficult situations. Her eager attitude and pleasant demeanor has made an impact in our office. She is quick to share ideas and suggest new opportunities for engagement.

Left to right: Ernesto Martinez, Danielle Dunigan, Colton Sheffield, Silvia Fuentes, Josh Roelofs, Daphne Hunt, Morgan Hammond, Yaritza Corrales, Karole Schroeder

Web Services has had a busy semester, and could not have completed the large number of projects and tasks without having such a strong team. We look forward to continuing to serve the university this summer as we continue to roll-out our new responsive degree program pages.


Update on Templates in Project Squishy (Responsive Web Design)

From a programming perspective, we have been receiving a number of requests for an update on our progress on Project Squishy, and I'd like to speak on that for everyone instead of responding to these requests individually to keep our progress transparent to our community.

As we mentioned in January, programming in SASS has been a major learning curve. As we try to keep the new CSS file small enough that loading time doesn't deteriorate your experience, we are combining functionality to make the user experience, in general, more intuitive. We are also making some improvements to the accessibility of different modules which is a constant work in progress as technology changes.

First of all, there will be two primary templates used across the Tarleton website. The first one you have already seen on the main Tarleton homepage is called "Stacked" due to the way the modules stack up on top of each other like pancakes, cake layers, sandwich layers, or any other delicious food product you can think of (we love food). The second template will have the same functionality, the same modules, as the "Stacked" template, but it will also include the navigation you need in order to provide all your departmental content, called "Right Navigation."

Right Navigation template screenshot
Screenshot of the sandbox (no factual information) version of "Right Navigation"
We set up user testing on this sandbox page to determine the usefulness and appropriateness of our new content and navigation modules. This test page was built with fake information in order to determine content placement. For example, users found the breadcrumbs very helpful on this page to navigate back up through our hierarchy, even though they knew nothing about the fake academic degree program.

Some of the most exciting news, though, came from testing the content we have placed on the right hand side instead of the left. The location of the navigation menu was a big question in the Digital Media Advisory Committee, so we wanted to get it right. Right hand side navigation assisted users to read the content on the left first and then look to the navigation for more information if they couldn't find it. This will increase the importance of content on pages and help us strategically build navigation menus that are clean and concise.

We also found out that placing the contact information on the right side, below the navigation menu, was very intuitive for our users. They targeted it immediately when asked who to contact for more information about our fake degree program.

Obviously, the right navigation would take up a great deal of real estate on a mobile phone's screen, so it will be located under the same menu button as our Main Menu navigation on mobile phones - just above the Main Menu. This is a common practice among commercial and educational websites, and it keeps our web pages clean and open for our main focus: your content!

Academic degree program page featuring new modules
Screenshot of an academic degree program page
With the addition of our new academic degree pages highlighted on the Tarleton homepage, we have a few more modules premiering, including:
  • Tall Aside: provides a location for main textual content and an option to provide text, images and videos on an aside box
  • Rotating News: scrolling bucket layout of images and content
  • Button: basic module to post button looking links for significant information
As we collect information from all the academic departments on their degrees and place them on these new pages, we are working on implementing a degree search feature that will be highlighted on the Tarleton homepage as well as available in the functionality of the search box, similar to our Web Site Directory search (customized to display content based on the keywords you want your degree to focus on), on every page.

What is our time table for all of this? Each staff member and student intern is focusing on a different aspect of this conversion process. We have a goal to highlight a new degree page once a week. We are also aiming to start creating pages in the "Right Navigation" template this summer. As we receive programming requests and other design/development requests, this timeline gets shifted, but we are very excited to be moving to a more responsive website and working with you to put your best foot forward on your departmental websites!


Accessible Color By Numbers

When I took my first design class in college, we studied elements and principles of design extensively. The majority of our class projects were done in black and white (or grayscale) to focus on the artistic value each had to any art piece. Obviously, we were all itching to get into color, but we had to wait until almost the end of the semester.

Color provides extra meaning to a design. Just like the other elements, color can create a mood or define a message. However, for a colorblind or visually impaired audience that meaning can be lost. That's not to say that color should be ditched for every design.

An audience that can view your design can still interpret some meaning as long as the colors contrast well enough.

What does that actually mean? For an audience with no visual impairments, that still means the colors should contrast enough to read words if words are necessary to convey a message. For example, if you provide event information in a light yellow against a white background, that content is not readily readable for even the most able person.

Have you ever walked up to a poster in just the right (or wrong) lighting, and noticed you can't read the information due to the glare on the poster? Some visual impairments replicate that issue even in good lighting. Providing enough contrast can help your audience see your information despite the "glare."

For the most colorblind among us, though, that means you are back to that grayscale design that still needs to convey your message. If any color is too close in similarity to another color when converted to grayscale, your content will achieve that "glare" issue that makes it unreadable. Similar issues occur when someone cannot see any combination of red, green, and/or blue.

I've previously mentioned in a number of articles a color contrast checker I use all the time: Colour Contrast Check. It takes the hexadecimal value, or HEX, of the color for the foreground and background and calculates their contrast ratio. To meet WCAG 2.0 AA compliance (which we are working towards with the upcoming Section 508 Refresh), all text and images of text must have at minimum a contrast ratio of 4.5 to 1 unless the text is large scale (3 to 1), purely for decoration, or text is part of a logo. To meet AAA compliance (far stricter standard that meets a larger disabled audience's needs), the contrast ratio minimum is 7 to 1, with a higher minimum for large scale text at 4.5 to 1. I try to stick to AAA, but we are not required to meet more than AA compliance at this time.

How many people reading that just went blank at the term "hexadecimal value" and ignored all the other math in the paragraph? Most of our design software for emails, newsletters, brochures, and everything in between allow you to choose colors based on RGB (Red, Green, Blue) values. Those values are often converted to hexadecimal values for use on the web, so most color contrast checkers use hexadecimal values. Let me apologize there because I'd love to provide you with an optionally RGB color contrast checker. When I get one, I'll let you know.

I have, instead, a compromise for you called Color Safe which is the designer's accessible color swatch picker.

It begins by asking you what your background color is going to be in (hiss) that hexadecimal value, what web-friendly font you'd like to use at what font size and weight (how bold the text is), and then it asks you which WCAG standard you want to use: AA or AAA. Again, AA will give you more color choices than AAA.

Beneath those options, you have a field of text that automatically changes based on your options above. You can also change it from the standard "The quick brown fox jumps over the lazy dog." phrase to anything you may be using in your message.

When you are happy with those starting options, you can Generate Color Palette which changes your interface to chose the color swatch for the foreground you may want to use, the RGB value (yay, finally!) or HEX value of that color swatch, the resulting text with those foreground and background colors, and last but not least, the contrast ratio based on your selected WCAG standard.

Below all that are the glorious color options you were waiting for. You can select primary hues to see what tints and shades as well as dullness or brightness comply under that standard. Select one and check above for the results.

Again, the awesome part of this application is that you can grab the RGB values that you can use in Word or Outlook, and so forth, once you have picked the colors you wanted.

If you are wondering how easy it is for you personally to distinguish colors, take this fun color acuity challenge! I was tired the first time I took it, so my score was a bit off. The next morning, I tried it again being more focused, and I got a perfect score. Just an excuse you might want to use if you want to challenge your friends.


Friday, April 10, 2015

What is our "Go Live" Process?

To maintain a professional presence that is also consistent with our brand and messaging for all our electronic content, Marketing and Communications uses various branding guidelines to check materials. You can see our main list on the University Branding Guide page. Web Services uses a lot of these guidelines due to the variety of media we connect to or embed on our websites, including Graphic Identity Standards, including logos, Social Media Standards, Web Communications Guide, Web Technical Guide, and Video Guidelines from The Texas A&M University System.

In general, we review the following before launching a website (and periodically afterwards to maintain standards):

Web Page Semantics

  • Appropriate usage of tables
    • defined table headings
    • tables only used to display tabular data
    • tables to provide content lists are not sufficient enough to display
  • Appropriate usage of headings versus paragraphs
    •  avoid the usage of bold or italics for entire paragraphs
  • Appropriate usage of lists versus paragraphs
    • avoid the usage of symbols or characters to look like list item bullets
  • Appropriate hierarchical usage of headings
    • avoid skipping heading levels for aesthetic purposes
  • Appropriate usage of images
    • avoid usage in place of text and fonts that are part of the official template
    • avoid usage of posters/flyers
    • avoid usage of Tarleton logo graphics as they duplicate the one on the official templates
  • Appropriate usage of links
    • avoid usage of an URL address as text for the link
    • avoid usage of text for the link that does not clearly identify the purpose or call-to-action of the link if seen outside of the context of the content surrounding the link 
[Guidelines mainly found in Web Technical Guide]

Web Page Styles

  • Color 
    • avoid low color contrast issues
    • avoid red against black
  • Text
    • avoid busy/over-styling issues
    • avoid extra spaces used for aesthetics*
    • keep all text left aligned (no justified allowed)
*As we convert our current pages to responsive pages that are visible to all manner of devices and sizes, content will not look exactly the same on each device.

[Guidelines mainly found in Web Technical Guide]


  • Image
    • quality
      • content should be professionally captured and decent to high quality (no pixelation, stretching, or squeezing to fit)
    • copyright
      • check that we have the right to use any portion or all of the image
    • alternative text
      • must have appropriate alternative text that describes the image for an individual that cannot see or load the original image
      • no use of “image of”, “symbol of”, etc.
      • if a logo, no need to describe the contents except what the logo represents and any relevant text (i.e., “Tarleton State University – Member of The Texas A&M University System”)
    • color
      • avoid low color contrast issues, including usage of the Tarleton purple directly against black
      • avoid red against black
    • text
      • avoid heavy usage of text (exceeding 140 characters)
  • Audio
    • quality
      •  content should be professionally captured or easy to understand
    • copyright
      • check that we have the right to use any portion or all of the audio content
    • transcript
      • provide a transcript of all sounds and dialogue pertinent to the context of the message
  • Video
    • quality
    • copyright
      • check that we have the right to use any portion or all of the video and audio content
    • closed captions
      • provide a transcript that is or can be synched with the video of sounds and dialogue pertinent to the context of the message
  • Applets, Plug-ins, Widgets, Scripts
    • review for the same issues as above
    • review for functionality with our template
    • review for security issues
    [Guidelines mainly found in Web Technical Guide]


    •  Forms
      • Check for HIPAA (i.e., medical information) and FERPA (i.e., name and DOB together, SSN, DL) exceptions
        • PDF documents should not be emailable if they contain secure content
        • Wufoo forms should not contain HIPAA or FERPA exceptions
    • Files/Folders
      • Make sure Web Services is aware of any permissions that should be placed on a folder, and all content that needs to be secure is in that folder
    [Concerns about scripts, database access, and other web content is available in our Terms of Service]

    Web Template Standards*

    • Currency/Accuracy
      • Check that relevant content is on all pages, not placeholder images or text
      • Check that content is as current as we can provide upon launch and remove any old content that can confuse our audiences
      • Check that content is accurate for our audiences' usage
    • Footer
      • Check the footer for appropriate information per the technical guide
    • Left hand navigation**
      • Check that academic colleges and departments have their specific consistent set of links
      • No more than 3 large buttons
      • Home link is at the bottom with Contact Us link right above it
      • Official social media button graphics used below the main left hand navigation with social media sites approved per Social Media Standards
    • Site architecture
      • Page and file names 
        • have no spaces or other special characters (only use hyphens to separate words for SEO, or Search Engine Optimization)
        • do not contain dates, “revised” nomenclature, or numbers at the end denoting a page was duplicated
        • have appropriate file extensions (for files, specifically)
      • Folder names have no spaces (only use hyphens)
      • File locations
        • Forms are all located in a “forms” folder
        • Documents are all located in a “documents” folder
        • Images are all located in an “images” folder
        • "Side Images" are named numerically, in consecutive order, as JPGs in the “sideimages” folder
    • Links
      • Check for broken links or links that need to be redirected when the website is launched
    *As we convert our current pages to responsive pages, these standards will change for the new templates. All websites created in the old template will follow the current technical guide.

    **Navigation on the page will be moved to the right for all responsive pages using the "Right Navigation" template (the homepage and degree pages are using the "Stacked" template), and some of these standards will change from our current technical guide when we finish the responsive page technical guide.

    [Guidelines mainly found in Web Technical Guide]

    After the Review

    The review of the website is pretty intensive, so we try to assist as much as we can in resolving issues and ask questions where content may be missing or confusing. It is important to us that website maintainers keep an open and steady dialogue with us, so we can consult where questions may occur on both sides and speed up the launch of the website. Delays push well intended publish dates behind deadlines, so we want to hear from you!

    Once all is reviewed, we
    • publish your website
    • set up security (when necessary)
    • set up indexing for our site directories
    • set up a virtual directory (when necessary)
    • redirect links on other websites
    • set up any requested SEO changes to reduce the amount of time the new site is low on the search result rankings
    • archive your old website (when necessary)