Focus on Design

The Websites to Compare

Texas School for the Blind and Visually Impaired

Perkins School for the Blind

Describes how each site exhibits repetition.

Texas School for the Blind and Visually Impaired Home page

Notice the repetition in color.

The website exhibits repetition through utilizing elements with alternating color schemes.

Perkins School for the Blind Home Page

Notice how the number of columns switches consistently between two and three throughout the page.

The website exemplifies repetition in its use of repetitive layout and colors. Alternating the column count leads to a unique design that is appealing to look at.

Describes how each site exhibits contrast.

High contrast colors seperate open menu from closed menu

TSBVI menu

TSBVI switches the background and foreground colors to create contrast.

Different colors seperate items from each other.

Perkins article list

Perkins uses change in color to create contrast between list items.

Describes how each site exhibits alignment.

Grid of elements

Grid alignment is great for attracting both eyes.
source: TSBVI - Preparing Students for Success

Non uniform column widths

Alignment could be better on the horizontal plane.
source: TSBVI - Programs & Student Life

Items of similar subject are all vertically aligned with each other. The site also uses horizontal alignment to covey the relationship of the image to the subject matter. There are some images that may be considered poorly aligned for the mere fact that the columns are not exactly the same width. Over all TSBVI has done a better job at exhibiting alignment on the home page.

Well aligned elements

Poorly Aligned
source: Perkins - Equipping adults to teach

It is hard to find consistent alignment on Perkins' home page. Although there are elements that have equal alignment, they are skewed up or down which breaks the consistency. I am not sure the site did a good job with creating a consistent layout except for in the navigation bar where elements are properly aligned with each other and do not tend to clash like other elements on the page. The site may be accessible but it is not as visually pleasing as other sites. Once off the home page, alignment is exhibited gracefully (see Figure above). It is intriguing how some sites can exhibit such great and foul alignment practices on the same site. It is as if the devs changed.

Describes how each site exhibits proximity.

Calender icon on red background

Out of proximity

Calender icon leaps from red background leaving a gold trail

In proximity

The buttons and icons on the site shift their position and box shadow when the mouse comes within proximity of the element

Navagational elements with arrow

Out of proximity

Navagational elements with arrow and green background

In proximity

Most of Perkins' navigational elements, which resemble those depicted above, have noticable changes to color.

Navagational elements with arrow

Out of proximity

In proximity

Most of the other interactive elements have subtle changes when the cursor is in the proximity.

Describe how each site that you chose to review exhibits web design best practices.

The improper declaration of SVG xLink library is not ideal for showing best practices. The site also uses a convoluted menu navigation system form a keyboard navigation standpoint.

The website uses a Document Tag Structure that contains the 'html', 'head', 'title', 'body', 'header', 'main', and 'footer' tags. The page also uses accessibility features such as alt and logical heading order.

I am not as impressed by the site's lack of coherence to web design best practices; despite being a gold standard for accessible web. The site has non standard use of the id

Like Texas School for the Blind and Visually impaired, the website uses the "Ten" and a logical heading order.

Recommend three improvements for each site.

  • Hide sub-menus from the screen reader when they are collapsed.
  • Remove unnecessary hidden links that are not accessible to sighted and non-sighted alike.
  • Cut back on the use of !important in the CSS file.
  • Differentiate the background color of green link buttons to change more more when hovered.
  • Adding the aria-current="page" for the current page of the site.
  • Hide the redundant Donate button in the mobile navigation menu.