Minor Website Update
This week's website update will be a little short. Today I will be attending a wedding, so that has taken priority! But, I do have some updates to share with you all, so let's get to them.
A small tweak that I made yesterday, which you may have already noticed, is to the font size and style of some text. The main text is slightly bigger, to be more easily read. The headers in blog posts have also been bumped up in size a little bit, and they now have a more consistent look.
My main progress with the website has been taking the style of my experimental social page, which I've detailed before, to some other pages. So far, I have brought the loading slide-up animation to my about me, public CV, and blog-list pages. The about me and public CV pages are simple, as they each have one large "card" that slides in, so I won't go into those in-depth. (Although the public CV page has also been updated to delay the loading of the Office viewer, so the loading should be a bit more smooth).
My experimental blog-list page has gotten the most attention. It's certainly not done, but it has a number of improvements that I think will help improve the user experience. The slide-up animation is obvious and familiar, so there's no need to discuss that.
First is the navbar that I now have on the left. The navbar is actually one of the columns on the page, which has been adjusted to be fixed and against the left edge of the page. (I considered having it on the right, but on smaller screens squarespace put it below the blog post list rather than above, and I want it to be easily discovered on mobile).
Right now it doesn't have a loading animation. That's going to change though, at least I hope. My plan is to have it slide in from the left as the other content slides up. I may also have it shrink down in some way, with the Categories and Tags dropdowns showing initially, then shrinking to reduce space. On hover, they would then become visible again. This is because the navbar sometimes overlaps with the footer when scrolled down, and shrinking things might help to prevent that. The purpose for waiting to shrink them is so the user knows they are there and available. But, I'll have to implement it before I decide if it works well.
The other change is the removal of the title area (where it says my name) at the top of the page. If you're on my site, chances are pretty good that you know it's about me and the content is from me. So, I set the title area to be hidden (it's included by default in the template I'm using, I'm not narcissistic and added it to every page), which allowed me to move the content up. The result is better use of the screen real estate, and more of a focus on the content rather than my name.
My plan is to go through the other "experimental" pages and hide the title area as well, once I get another opportunity to work on the CSS some more. I also need to update the mobile view of the experimental blog list page (I focused mostly on desktop first).
On that blog page, I also updated the dropdown lists to have more touch-friendly links on mobile, spaced apart and with bigger tap areas just like I did for the site's navigation menu.
In terms of the CSS, I'm also trying to go through and clean things up a bit as I get closer to finalizing the look and feel. I haven't updated my CSS post yet, so the most recent code isn't available, but I'll plan to do that soon. At a minimum I want to get it cleaned up first, but I'll also hopefully have the resources and research pages updated as well.
Once those things are done, I'll be ready to invite people to test them more extensively and, if things go well, make them the defaults!
Feel free to take a look at what I have so far, and let me know your thoughts! As always, everyone is welcome to leave a comment, and comments can be anonymous (I've opted to not use a different comment service that would require an account).