Web Design
Jim Porupski is a landscape/wildlife photographer located in Upstate, NY. I reached out and offered to build him a portfolio website as part of a class project.
Duration January 2021 - April 2021 (4 months)
Individual Project for UMSI’s Advanced Web Design with Colleen Van Lent
Process & Tools Sketches, Wireframes, HTML, CSS, JavaScript
My Role To build a several-page responsive website. This website was designed with mobile-first in mind that includes a breakpoint for tablets and desktops.
Overview
To build and design a several-page website. This website was designed with mobile-first in mind which includes three breakpoints one for mobile, tablets, and desktops. The navigation changes are based on the breakpoints. This site was primarily coded from scratch with very little given code.
This site meets was constantly checked for web accessibility standards WCAG2.1 it meets color contrast, readability, alt-text for images, and keyboard accessibility. For the site to meet readability standards, the text must have enough color contrast from the background element and or be at a large enough point size. Alt-text for images is what screen readers use to read back for those who have low vision or are blind. Keyboard accessibility allows someone who might not be able to use a mouse to successfully navigate the site.
Features
This site features the following:
● Carousel homepage that transitions between images (works on Chrome, and Edge)
● A dark theme that detects the user's preference (switches and CSS styling)
● A responsive site at 3 breakpoints for mobile, tablet, and desktop
● A jump to content tab when using a keyboard to quickly jump to the main page content
● Navigation that changes based on mobile, tablet, and desktop
● Mobile pages don't show the parallax image in an effort to increase page load times (About, Gear, and Contact pages)
● Passes Axe, Wave, and W3 Validation for web accessibility
● A dark theme that detects the user's preference (switches and CSS styling)
● A responsive site at 3 breakpoints for mobile, tablet, and desktop
● A jump to content tab when using a keyboard to quickly jump to the main page content
● Navigation that changes based on mobile, tablet, and desktop
● Mobile pages don't show the parallax image in an effort to increase page load times (About, Gear, and Contact pages)
● Passes Axe, Wave, and W3 Validation for web accessibility
Findings
Building this photography website I found it challenging to try and describe the image. For example, do I just describe what is in the image such as a waterfall in the summer or do I also say what the waterfall's name is? I learned that describing alt-text is about the context of where the image is used in this case.
When coding the site from scratch it is important to test the site constantly on different web browsers since they each read the HTML and CSS differently. This can cause your site not to work as intended for someone on a different web browser.
Using the validators they were great at quickly identifying contrast issues and errors in my tags. However, they were not always correct. In order for me to enable and disable the dark theme, I used two different logo images (turning one on and off) this threw an error in one of the validators. That being said I noticed that a lot of sites have accessibility issues.
Below is a link to view the entire website.