paritybit.ca

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

commit a59cfab74abe616c83540dc229c6d92778ef5367
parent 18e3111add1fef0412863a7fd361e8690a4b8013
Author: Jake Bauer <jbauer@paritybit.ca>
Date:   Mon, 20 Jan 2020 23:53:56 -0500

Draft of redesign blog post

Diffstat:
Apages/blog/website-redesign.md | 54++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 54 insertions(+), 0 deletions(-)

diff --git a/pages/blog/website-redesign.md b/pages/blog/website-redesign.md @@ -0,0 +1,54 @@ +## Redesigning paritybit.ca + +[//]: # "" + +[//]: # "main.min.css" + +[//]: # + +<div class="byline"> +<b>Written By:</b> Jake Bauer | + <b>Posted:</b> [DATE] | + <b>Last Updated:</b> [DATE] +</div> + +### What I Did + +Added regions with <header> <nav> <main> <footer> thanks to http://wave.webaim.org/ and using https://www.w3.org/WAI/tutorials/page-structure/regions/ as reference. + +Left underlines in links in text so that they are easier to differentiate other +than relying on boldness and colour. + +Making sure to choose colours with a minimum contrast ratio of 4.5:1 but aiming +for 7:1. + +Checking the colourscheme using colourblind filters (toptal). + +Changing the layout of the site so that it scales a lot better between different +screen sizes. Also bringing in the width so that it's easier to follow the text +with your eyes. + +Using descriptive links instead of "click here" or "this". + +Making fonts larger so it's easier for people on mobile and on desktop to read. + +Optimising page loading times by shrinking images (pngcompressor.com), minifying +CSS, keeping requests down to a minimum (except where embedding images would +make an html document larger thereby teachnically making it worse for someone +who is browsing in pure-text mode). + +Obsessively checking the site with contrast checkers, colourblind filters, +accesisbility checkers, and schema validators. + +Dark and light modes using pure css, no javascript. + +### References + +[](https://www.w3.org/WAI/fundamentals/accessibility-intro/) +[](https://webaim.org/resources/contrastchecker/) +[](https://anybrowser.org/campaign/) +[](https://www150.statcan.gc.ca/n1/pub/11-627-m/11-627-m2017008-eng.htm) +[](http://romeo.elsevier.com/accessibility_checklist/) +[](https://contrast-finder.tanaguru.com/) +[](https://www.w3.org/WAI/tutorials/page-structure/regions/) +[](https://www.w3schools.com/css)