Dragon Project Revision and Reflection
Course Reflection
I'm so proud of my progress this semester! I did a great job staying on track and participating in class even though I had a lot going on.
If I had to start over, I would experiment more and be less critical of myself on the final project. I would also curb the procrastination sooner to spend more time developing my final project.
Dragon Site Revisions
Home Page
My test user described my home page as boring, especially with the overview text section being immediately below the fold. The first thing I did was change the H2 wording to be more engaging. To spiff up the section, I embedded a video and included a launch countdown calculator in the section below. This added visual interest through movement from the clock and color from the background image I used. The accessible image carousel was also a great way to add engaging content. I provided an additional opportunity to explore photos by including the SpaceX Flickr button.
They mentioned the 3 column article text looking unappealing to read, so I restyled the text and included headers to make it more scannable. I then polished up the article post container with a border radius and increased the padding.
Contact Page
My user noted the contact page looked out of place and possibly sketchy since it wasn't consistent with the site's style. Luckily, even with the free Wufoo, I was able to create a custom theme using my stylesheet. I thought that was pretty cool!
I'm happy with the results, and once I did buckle down and review our course content, everything started coming together. This project has been a fun way to practice HTML, CSS, and JavaScript, and I think I'll continue to play with a V3.
I can speak well about web best practices now, and I have the confidence to take on hand-coded web projects. I'm empowered to keep learning and develop my own web sites, like an interactive family tree with audio recordings.
Thoughts on Progressive Enhancement
I'm starting to understand why progressive enhancement is a better approach than graceful degredation. Progressive enhancement is a more accessible and fair approach to web design because it focuses on creating usable experiences for the broadest audience no matter their browser, device, or disability barrier. Progressive enhancement creates robust layers of experience starting with the most basic and most important layer, the content and structure. If this is the only available layer to the user, then it's still usable since they can access the content to reach their goals.
I like Aaron Gustafson's take in this additional article Progressive Misconceptions. I think it's helpful to think of progressive enhancement as graceful degradation at it's best. We don't need to use JavaScript or CSS to convey meaning. Instead, we can use HTML for content, CSS for presentation, and JavaScript for behavior. Javascript can be used to test browser functions to tailor the programmatic enhancements for that particular situation. I am starting to see the importance of considering non-javascript experiences during the development process.
Progressive enhancement embraces the idea of experience as a continuum rather than some singular ideal. It recognizes that every person is different and we all have special requirements for Web access. Some may depend on our browser, the device we’re on, and the network we are using. Others may be the result of a limitation we have dealt with since birth, are dealing with temporarily as the result of an injury or incident, or are simply a factor of our current situation. We all experience the world differently and progressive enhancement not only respects that, it embraces that variability.~Aaron Gustafson
References
- Understanding Progressive Enhancement
- Progressive Misconceptions
- Is progressive enhancement dead yet?
Additional Reading
- Graceful Degradation Vs Progressive Enhancement
- Yes, That Web Project Should be a PWA
- Does JavaScript make my site less accessible?
- Seperation Dilemma
Thoughts on Web Accessibility
Before I started this class I was familiar with the basics of document and web page accessibility. Learning about web standards and semantic HTML has taken my knowledge to the next level because now I better understand how screen readers interact with the code. Learning about accessibility is an empowering and marketable skill, especially since accessibility will likely become protected by law.
Why bother making your site accessible?
It's easy to brush off accessibility or get a negative attitude about it. I know because I've experienced push back at my institution. "How many blind people actually visit our site?" The truth is, it doesn't matter how many people. We know someone is and they matter. It's also required by law! Section 508 requires federal institutions to make all digital information accessible to everyone including disabled people. AND it's the right thing to do. Not to mention making your website accessible improves the overall user experience and also boosts your SEO.
Web accessibility has the power to include others and improve someone's life by making information available and usable. I try to incorporate accessibility into my workflow through writing in plain langauge, writing descriptive hyperlinks, using structure and styles in my documents, and adding alt text, especially when I'm creating training materials or working on external-facing resources. As long as I'm learning new things about accessibility I'm on the right track.
Access-a-buddy status here I come!
Areas for Learning: ARIAs (Accessible Rich Internet Applications)
I still need to learn more about using arias effectively. I played around with using the role tag and found that it was unnecessary for most situations using semantic HTML5. I was going to add a button role to my nav link in my CSS project, but I realized that I could change it to be a button tag instead and therefore wouldn't need the role tag. (I realize that messing with the HTML might not be a part of the assignment but I'm nerding out on it.)
Accessibility for the Modern Web
This was an interesting talk on web accessibility, and it brought up a lot of good points. Businesses need to stop exculding an entire segment of their audience. Accessibility and usability testing should be at the forefront of any design process.
Why do we need to incorporate these accessibility hacks?
Because of the decisions someone else made.~Derek Featherstone
Derek sure has come up with some clever fixes though!
It reminds us that accessibility is something to focus on throughout development and testing. It's not an add-on for later, but hacks can be made to improve the user experience. Accessibility needs to be adopted as part of the workflow and businesses need to be held accountable for inaccessible products.
It's important to continue learning and working towards accessibility in everything we develop.
Guidelines are the baseline, not the finish line.~Derek Featherstone