Release 0.9.0

Accessibility and Design

Release 0.9.0 was a non-functionality release, as I focussed my lil' brain on Accessibility, the User Experience (UX), and the design of the website. Also this is my first publicised "patch note" so go easy, ok.

Accessiblity

• Fix burger menu's accessiblity issues
  • Add label content, but make hidden for non screen-readers.
  • Make top of burger clickable. The burger wasn't fitting to its elements container, as a negative margin was used.
• Add "Skip nav" functionality
  • Added a hidden button for keyboard tab-targetting that skips over the navigation, straight to the content.

User Experience

• Styled <code> tags
  • So they can be used in-line to aid with any development guides.
• Make mobile nav/burger fixed
  • This allows the navigation to be opened/closed and visible from anywhere on the page, not just the top.

Design/User Interface

• Font
  • Increase the font-size.
  • Increase the whitespace used around the site.
• Colours
  • Altered colours to improve the visual hierarchy of the elements.
• Remove hr above navigation
  • Due to the nav now being atop the page, this wasn't needed to seperate the content.
• Restyle mobile nav
  • Instead of having the nav just pop-up atop the page, it now displays as a sidebar.
• Add background and border to burger
  • As it's not fixed it needed to be visually differentiated from content.
• Scrollable table
  • Super basic overflow-x on a parent of table so tables fit on screen, but all content can still be accessed.
• Add   to tags
  • Multiple word tags were breaking, and looked pretty bad, so made them non-breakable.

Dev

• Colour simplification
  • I changed the colours to all be 3 digit HEX values, saving a few bytes for the CSS.
• Add test.html page
  • For testing elements without navigating through the site, it's public too because why not.
  • Side note: This got me thinking about writing a lil' CSS framework.

Known Issues

• When the burger menu is active, the page is still scrollable
  • Easily fixed with JS (and a basic overflow), however I want to stay away from JS as much as possible. I believe the approach I took is the best-case scenario, as users at least know if they're scrolling with the sidebar styled nav.
• Burger nav animation
  • Changes to clickable area of burger icon meant the animation needed tweaking, and it looks worse. It's not really important though.
• h1 in nav
  • I was contemplating moving this into the main, but have yet to do so. Not sure if this is technically an issue, but will need to look into it.
• Scrollable table
  • I'd like a better solution than this, preferably one that doesn't require an additional element.

Final words

This release should offer better accesibility, and a nicer look and feel all around.

All changes were made as semantic as possible, and the site has been kept accessible, and usable for those not running CSS/JS at all (for instance terminal browsers, and neo-luddites with everything disabled).