Basics of Web Authoring and Design

Module 6 Updates


Browser Testing
I signed up for a free trial with Sauce Labs, and it showed that my site is responsive on mobile (likely thanks to the grid system I used) and that it also looks fine on the major browsers (Chrome, Edge, Firefox, and Safari). When I checked for accessibility with Wave, it gave me no errors, and the CSS Validator showed only two errors in my code, which was exciting for me! The HTML Validator showed a few more than that, but still not as many as I would have thought. In addition to what was pointed out to me, I noticed a few issues other issues with accessibility, findability, and usability that stood out to me once I had done some reading, which I have now corrected.

Fixing the Sidebar
On one of my pages, the sidebar ended not even halfway down the page because I hadn't found a way to make my two columns equal height. This negatively affected the readability of this page and could annoy readers. After searching for hours online and trying several methods that didn't work well with the code I already had in place, I finally found a website that recommended adding "display: flex" to the parent to ensure that both columns would be the same height and then adjusting the width in each particular column. This gives my site a much cleaner look and won't interrupt the users' reading.

Adjusting Images
One of my images was too large and extended out of the column it was in, which caused a column of white space to appear on the right side of the page. This did not look good and could annoy readers. Using the guidelines given to us in a previous module about resizing images, I played with sizes until I found a size that was still large enough, but no longer extended past the page. Once I set this new size, the column of white space disappeared. I also realized that I hadn't added titles to my images, so that anyone who was unable to load or view my images wouldn't know what I was trying to show them. To correct this, I added descriptive titles to all of my images.

Adding Keywords
I also added keywords to my site pages, as was recommended on our module page. This will make it easier for search engines to find my page and display it when other people search for those keywords.