Add release 0.9.0 patch notes
Nathan Steel
3 years ago
parent
661ffb7fb0
commit
853064e755
@ -0,0 +1,128 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Nathan (Aney) Steel">
|
||||
<meta name="theme-color" content="white">
|
||||
<meta name="theme-color" content="green">
|
||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
||||
<title>Release 0.9.0</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<a href="#main" class="vh">Jump directly to main content</a>
|
||||
<h1>Release 0.9.0</h1>
|
||||
<input id="burger-toggle" type="checkbox"/>
|
||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
||||
<hr/>
|
||||
<nav>
|
||||
<a href="/">home</a>
|
||||
<a href="/about.html">about</a>
|
||||
<a href="/projects.html">projects</a>
|
||||
<a href="/blog/">blog</a>
|
||||
<a href="/sitemap.html">misc</a>
|
||||
<a href="/support.html">support</a>
|
||||
</nav>
|
||||
<hr/>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
<h2>Accessibility and Design</h2>
|
||||
<p>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.</p>
|
||||
|
||||
<h2>Accessiblity</h2>
|
||||
<ul>
|
||||
<li>Fix burger menu's accessiblity issues
|
||||
<ul>
|
||||
<li>Add label content, but make hidden for non screen-readers.</li>
|
||||
<li>Make top of burger clickable. The burger wasn't fitting to its elements container, as a negative margin was used.</li>
|
||||
</ul></li>
|
||||
<li>Add "Skip nav" functionality
|
||||
<ul>
|
||||
<li>Added a hidden button for keyboard tab-targetting that skips over the navigation, straight to the content.</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
|
||||
<h2>User Experience</h2>
|
||||
<ul>
|
||||
<li>Styled <code><code></code> tags
|
||||
<ul>
|
||||
<li>So they can be used in-line to aid with any development guides.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
Make mobile nav/burger fixed
|
||||
<ul>
|
||||
<li>This allows the navigation to be opened/closed and visible from anywhere on the page, not just the top.</li>
|
||||
</ul>
|
||||
</li></ul>
|
||||
|
||||
<h2>Design/User Interface</h2>
|
||||
<ul>
|
||||
<li>Font<ul>
|
||||
<li>Increase the font-size.</li>
|
||||
<li>Increase the whitespace used around the site.</li>
|
||||
</ul></li>
|
||||
<li>Colours<ul>
|
||||
<li>Altered colours to improve the visual hierarchy of the elements.</li>
|
||||
</ul></li>
|
||||
<li>Remove hr above navigation<ul>
|
||||
<li>Due to the nav now being atop the page, this wasn't needed to seperate the content.</li>
|
||||
</ul></li>
|
||||
<li>Restyle mobile nav<ul>
|
||||
<li>Instead of having the nav just pop-up atop the page, it now displays as a sidebar.</li>
|
||||
</ul></li>
|
||||
<li>Add background and border to burger<ul>
|
||||
<li>As it's not fixed it needed to be visually differentiated from content.</li>
|
||||
</ul></li>
|
||||
<li>Scrollable table<ul>
|
||||
<li>Super basic overflow-x on a parent of table so tables fit on screen, but all content can still be accessed.</li>
|
||||
</ul></li>
|
||||
<li>Add <code>&nbsp;</code> to tags<ul>
|
||||
<li>Multiple word tags were breaking, and looked pretty bad, so made them non-breakable.</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
|
||||
<h2>Dev</h2>
|
||||
<ul>
|
||||
<li>Colour simplification<ul>
|
||||
<li>I changed the colours to all be 3 digit HEX values, saving a few bytes for the CSS.</li>
|
||||
</ul></li>
|
||||
<li>Add test.html page<ul>
|
||||
<li>For <a href="/test.html">testing elements</a> without navigating through the site, it's public too because why not.</li>
|
||||
<li>Side note: This got me thinking about writing a lil' CSS framework.</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
|
||||
<h2>Known Issues</h2>
|
||||
<ul>
|
||||
<li>When the burger menu is active, the page is still scrollable<ul>
|
||||
<li>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.</li>
|
||||
</ul></li>
|
||||
<li>Burger nav animation<ul>
|
||||
<li>Changes to clickable area of burger icon meant the animation needed tweaking, and it looks worse. It's not really important though.</li>
|
||||
</ul></li>
|
||||
<li>h1 in nav<ul>
|
||||
<li>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.</li>
|
||||
</ul></li>
|
||||
<li>Scrollable table<ul>
|
||||
<li>I'd like a better solution than this, preferably one that doesn't require an additional element.</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
|
||||
<h2>Final words</h2>
|
||||
<p>This release should offer better accesibility, and a nicer look and feel all around.</p>
|
||||
<p>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).</p>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<hr/>
|
||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue