This week I’ve been learning all about Accessibility and the User Experience.  I gotta say, after learning about what User Experience Designers do, I’m fascinated and actively researching the field!  So much goes into the User Experience than just the look of the webpage.  I had no idea!

But what I really want to focus on is Accessibility.  In a crazy twist of fate, while I was working through my Treehouse videos, all on Accessibility, I stumbled on a coding podcast and the first episode was on… you guessed it, Accessibility!  Listening to this really opened my mind to all the different ways to make websites accessible.  There are so many disabilities beyond blindness that effect how people experience the web.  Color blindness, physical limitations, hearing loss, sensitivity to lighting effects, etc.  Wow!  Who knew!?!  And if you don’t comply with the WCAG you could end up in some legal trouble.

So our assignment this week was to take a website that we created and made it more accessible.  I chose my Discography homepage to focus on, the one I redesigned with CSS Grid.  It could really use some help!  While all of my images had alt text, which is great for screen readers, my page had some limitations that didn’t make it as accessible as I would like.

 

Homepage BEFORE the fix

So without further ado, here’s what I fixed and why…

The Header

The Header didn’t span the page

The first fix I wanted to made was more of a UX fix than Accessibility.  I wanted to fix the Header and make it span the page.  It just looked odd shortened like that.  I had to play around with this and figure out what was causing it.  Turns out, it was a media query causing all the problems.

 

The Header now spans the page with the rest of the images

The Navigation Font

The Nav Font wasn’t bad, but not distinct enough

The Nav Font actually wasn’t too bad.  It was an improvement from the Bootstrap version which was really hard to read, especially with the hover effect that has a gradient light up effect.  After listening to the podcast and thinking about what the speaker said about making the font larger for those with limited sight.  I decided to enlarge the font and make it thicker to really stand out.

 

The Nav Font is now a little bigger and bolder

Background Color of Navigation Links

If you’ll look at the two images above, you’ll also notice how the background on the buttons has gotten a little lighter.  I wanted more distinction to set them apart from the Header background.  When you hover over them, the gradient effect with a very light red still occurs, but is a little easier on the eyes now.

 

The Overlay

An Overlay appearing over the Hero Image

This was actually the saddest change I made to the page, but I stand by why I did it.  In the first two versions of this page, I had created an Overlay effect where, when you scrolled over the Hero image of the band, a screen would push up from the bottom of the image, relating more info on the band.  It was a really cool effect that I enjoyed figuring out.  However, I noticed it didn’t work so well on touch screens.  I also wonder if the effect might be too much for someone with sensitivities.  Either way, if didn’t satisfy my UX, so I placed the text in the caption at the bottom of the image.  And I have to say, I like how it turned out.

 

With the Overlay removed and the text added into the Caption

The Caption Font

The Caption font was small

I wanted to enlarge the font under the Hero image that held the info about the band.  It was small and hard to read.  After adding the text from the Overlay, I increased the font size and played around with different fonts only to settle on the original due to its readability.

 

Larger font size makes for a friendlier Caption

Visited Links

Visited links appeared pink

Originally, my color scheme for the page was black, gray, and red (a favorite of mine) and the visited links would appear pink.  After going back and accessing the whole thing, it really made for an odd choice.  I think someone may have commented when I sent it out for testing originally on how they didn’t like the pink.  And with the dark color of the pink, it wouldn’t have enough distinction from the background for a color blind person.  Therefore, I decided to change the color from pink to white.  It provides a better distinction and fits better with the overall color scheme of the page.

The Visited Links are now white which works well with the background change I made to the nav

H1 and Lead Text

The H1 and Lead Text lost real estate to the large Hero Image

When I switched from using Bootstrap to playing with CSS Grid, the H1 and Lead Text suffered a little in regards to size.  I didn’t think too much of it at the time because they were distinct enough to read and at the top of the page.  However, I knew I could do better.  By making them larger, it’s easier for those accessing the site to tell what it’s actually about.

Larger H1 and Lead Text

H1

After enlarging the text, I wanted to give the H1 a little more definition to really make it stand out.  So I added a text shadow to really set apart the different sections of the page.  It looks distinctive and gives it a bit of added appeal.

New and Improved Site

The New Homepage!

By playing around with some of the colors and fonts, I think I’ve improved my discography page.