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. http://www.tarleton.edu/Costweb/sps

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!

Thanks,
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?

No!

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

METHODOLOGY
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.

-Karole

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.

-Karole

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 Texas.gov website. They made things simple by
Texas.gov website screenshot
The new www.texas.gov 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.


-Daphne

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?

-Karole

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: www.tarleton.edu

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 www.tarleton-state-university.edu. 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 www.tarletonstateuniversity.edu 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.

Resources


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: www.tarleton.edu/index.html.

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 www.tarleton.edu as opposed to www.tarleton.edu/index.html or www.tarleton.edu/webservices as opposed to www.tarleton.edu/webservices/index.html.

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:
  • www.tarleton.edu/webservices/web-guidelines.html
  • www.tarleton.edu/webservices/post-apocalyptic-design.pdf
  • www.tarleton.edu/web-services/index.html

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.

Usability

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!

-Karole

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.

-Daphne