With this post, I'm going to remove the styles from the site completely and focus on the HTML elements and structure alone.
For now, I'll focus on the HTML elements for the overall page alone then dive into the individual parts in future posts.
For posterity, here's what my current site's home page looks like with a bit cut out so we can see the top/bottom of the page.
Removing the styles, I fortunately have something that's still functional and not a complete mess. Things will just be a bit unstyled for a while as I work through things. If I actually have any followers anymore, they likely read my stuff through an RSS feed and the styling doesn't matter anyway.
This isn't really the best. Looking at current HTML documentation, I should probably replace the page section with a main element, and the sidebar section with an aside element that exists within the main element.
Additionally, as stated in the main element's HTML documentation, adding an id to it allows it to be a target for a skip navigation link. I want that, so I'll go ahead and add it along with the skip link at the top of the document.
I'm not sure if I'll need the class for the footer element. So I'll drop that for now and add it if needed later.
Resulting Page Structure
This leaves us with a much more modern html structure.
First, let's examine what's in the <head> area of my current site. Note that whatever's wrapped in {{ }} tags is Craft CMS code.
<!DOCTYPE html>
<html lang="{{ craft.app.language }}">
<head>
<!-- Internet Explorer? Well, won't need this! -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Next part is pretty standard. -->
<meta charset="utf-8" />
<title>{{ siteName }}</title>
<meta http-equiv="Content-Type" content="text/html; charset={charset}" />
<meta name="description" content="{{ craft.app.globals().getSetByHandle('siteInfo').siteDescription }}" />
<meta name="keywords" content="Wade, Winningham, Wade Winningham, Updrift, Ruby on Rails, PHP, MySQL, Craft CMS, HTML" />
<meta name="author" content="Wade Winningham" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<meta name="referrer" content="origin-when-cross-origin" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="manifest" href="/site.webmanifest">
<!-- Links to rss/atom feeds for those who use RSS Readers -->
<link rel="alternate" type="application/rss+xml" href="{{ url('feed.rss') }}">
<link rel="alternate" type="application/atom+xml" href="{{ url('feed.atom') }}">
<!-- Link to an Adobe webfont. I'll drop this in the redesign. -->
<link rel="stylesheet" href="https://use.typekit.net/mbc8gkz.css">
<!-- CraftCMS embedding the css file -->
{% set stylesheet = rev('main.css') %}
{% if stylesheet %}
<link rel="stylesheet" href="/{{ rev('main.css') }}">
{% endif %}
<!-- The rest of this is page view tracking for Matomo -->
<!-- which I host myself rather than use Google -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//updrift.com/matomo/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
</head>
Referrer
Based on the info in this article on referrer best practices, one meaningful change I can make is to set my referrer policy to strict-origin-when-cross-origin for the reasons within that post.
While that seems to be the default for most browsers today, it's not guaranteed, so seems best to be explicit.
Viewport
The viewport value is stale. Been forever since I'd have set that. One item, the user-scalable=no can be bad as the documentation indicates it can cause accessibility issues. Which makes sense as it doesn't allow for scaling the screen for those with visibility issues.
So I'll reset that to a safer value of width=device-width, initial-scale=1 and can adjust it if necessary when I get more into the layout and design later.
Manifest
A site.webmanifest file isn't required, but nice for Android devices. So I'll keep it basic.
{
"name": "Updrift",
"short_name": "Updrift",
"description": "A blog from Wade Winningham on tech, development, and building web sites and appliations.",
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
Last year, I had the intention to re-launch this website.
Here we are at the end of 2023 and that didn't happen. I'm a year late now. Another year won't pass me by with no action, so I'm cranking this side project up.
What kind of content will be on this site?
Updrift has always been intended to be my work-side. What do I do for work? I'm a developer, which would imply this site would have developer related posts.
The topics will be varied. Programming related mostly, but I'll probably write about my search for a new office desk, as well.
What's first?
First up, is a new logo. My original one feels a bit outdated to me and the orange-y color doesn't lend itself well to both light and dark backgrounds.
Old Updrift Logo
The icon was reminiscent of a wave or swirl of wind.
Introducing the new Updrift logo, which makes use of Dan Cederholm's Cartridge Font available at simplebits.com. My wife, Pamela Winningham, came up with the new icon which is patterned after a parachute riding the air currents. She also hand-kerned a few of the letters.
New Updrift Logo
What's next?
Soon, I'll strip away the styles on this website completely and start building a fresh site design step-by-step. Documenting everything here along the way.
My goals are:
Hand coded CSS. No frameworks like Bootstrap, Foundation, or Tailwind.
Limited Javascript. At first I was thinking absolutely none, but I would like to keep track of simple metrics like web views. That typically entails some javascript or possibly some hidden image. May use some to colorize code examples, as well.
Accessible. I'm amazed more business sites don't pay attention to making their sites and applications easier to use by everyone. Individual developers tend to pay more attention to it. Businesses mainly seem to care after a lawsuit is initiated.
That's mainly it. So expect a mess for a while. I'm sure once I start, it'll be slow going.
I plan to stick with using CraftCMS which I'm still happy with.
