Obligatory Redesign Post

I finally updated my blog. It’s been, well, six years in the making. Three years if you only start counting from when I first framed out my radial navigation experiment. One year if you go by my content style experiments. Six months if you base it on my WordPress site import tests.

It is almost expected that when someone who does web pontificating updates or re-launches his or her own site, a blog post explaining the rationale and techniques behind it should follow. This is mine.

The Styles

A few months ago I started experimenting with styles for my site. I used CodePen to spin up core design patterns I use in my posts and create both HTML and styles that I would use going forward. One of the benefits to using this approach is that I could test on just about any device and then quickly make edits right in the pen.

One of the drawbacks is that my older posts won’t benefit from the styles as I update my HTML5 use techniques. Not to mention the inline styles I had embedded to get around limitations on Blogger (the previous platform for my blog).

I’m embedding some examples so that you can see my last versions of each (prior to modifications used to integrate them into this site) and maybe steal some bits for your own use. I also have a collection at CodePen which includes each of these.

Hyperlink Styles

This contains alternatives to underline styles for hyperlinks using CSS text shadows, the currentColor property, scaling units, sub- and super-script examples, block links, and so on. I also support for Windows High Contrast Mode.

See the Pen Hyperlink Styles by Adrian Roselli (@aardrian) on CodePen.

Direct link to hyperlink styles pen.

Quoting

Using the semantic blockquote (integrating footer and cite) with styles for floating left and right. I also included styles for Twitter’s embedded blockquotes (when drawn sans JavaScript) to match the site (though it is a bit of a mess, partly because they don’t use footer or cite).

See the Pen Blockquotes by Adrian Roselli (@aardrian) on CodePen.

Direct link to the quoting pen.

Inline and Block-Level Code

Styling code is always so… boring. I tried to make big blocks of code look like an old monochrome CRT monitor. I also added styles for the kbd element.

See the Pen Inline and Block-Level Code by Adrian Roselli (@aardrian) on CodePen.

Direct link to the code styles pen.

Lists: Ordered, Disorded, Definition

I use lists in page content a lot, often with nesting. I also use definition lists, which I think are under-utilized on the web. When I build a site map I do it from a nested list and style it to look the tiniest bit like a tree view.

See the Pen Lists: Ordered, Disorded, Definition by Adrian Roselli (@aardrian) on CodePen.

Direct link to the lists pen.

Tables and Figures

I use tables in some posts and I now open many posts with a figure, with and without figcaption. I wanted to make sure my styles would also work when floated to either side of the page.

See the Pen Tables and Figures by Adrian Roselli (@aardrian) on CodePen.

Direct link to the figures/tables pen.

Putting It All Together

Once all my styles were built I put all of them on one page to see how they played with one another. At first, not so well. Having a pen that I could load on multiple devices proved invaluable for testing and addressing some of the biggest issues.

See the Pen Combining the Styles by Adrian Roselli (@aardrian) on CodePen.

Direct link to the collected styles.

Radial Menu

In 2012 I played around with a CSS-only touch-friendly radial navigation menu. I had planned to integrate it into my site redesign (which languished for lack of design inspiration).

Since then I had wanted to add keyboard support and allow the menu to adjust itself when the window was too narrow or too short to display all the options, as well as convert to a more traditional fly-out menu for wider displays. This variation only allows for five main items, with up to six sub-items for each (except first and last). The positioning and animation are shoddy at best, but it gets the job done. It is keyboard-friendly and it supports Windows High Contrast Mode.

In the version I implemented on this site I use an aria-label pattern Heydon helped inspire to both announce to a screen reader user which navigation item reflects the current page (and/or section) and as a hook for styling.

See the Pen Next Version of Radial Menus by Adrian Roselli (@aardrian) on CodePen.

Direct link to the radial menu pen.

Legacy Content

There is quite a lot of content that doesn’t play well with my styles. Partly because I inconsistently apply HTML in some areas, partly because I used inline CSS to deal with Blogger styling limitations, partly because I got lazy here and there. As such, anything older than a month may look wonky, and older than six months may be downright broken. I hope to slowly clean that over time, but 400+ posts spanning 16 years makes for a long process.

Changing CMS Platforms

The best part about this whole update is now managing everything through one interface. I was resistant because WordPress doesn’t give me all the tools I wanted, but managing two sites is just a hassle.

From Blogger to WordPress

I have a love/hate relationship with WordPress. To me it is a blogging platform, not a web content management system. To others it is a security hole into their networks.

WordPress, by design, embeds so much into the default HTML it outputs that it raises the hairs on the back of my neck (which tells me I am not shaving far enough down my scalp). Factor in all HTML added by plug-ins, themes, and even code examples from the WordPress Codex, and it is a perfect storm of bloat and, in so very many cases, invalid inaccessible mark-up.

Compare it to Blogger, on the other hand, where I have no access to the underlying HTML.

I was on Blogger for far too long. In 2009 when I moved my own writing to a platform other than (mostly) static HTML, it and WordPress were the same in my mind. Except Blogger had Google behind it with its impressive search engine market share.

Part of making the switch was that I wanted to have full control over the HTML and little reliance on plug-ins. I’ve added filters to the navigation menu to remove all the classes (and add the ARIA features I want). I’ve added functions to make paths root-relative (most of them). I’ve rolled my own sub-navigation logic. I’ve got a good deal of control over the HTML output. And so on.

Ongoing work will involve yanking out reliance on JetPack on the front end (the additional CSS file alone is enough to drive me nuts), rebuilding the HTML behind displaying recent comments and most popular posts, and additional clean-up to the HTML that WordPress core puts out.

Fun fact: Blogger’s awful way of serving a mobile-friendly page (with a ?m=1 query string) conflicts with WordPress as the m is a reserved …letter in query strings. That means all those tweets and links that included the ?m=1 (or ?m=0 for the forced desktop view) were returning 404 pages.

As I cannot seem to do what I need to the .htaccess file on my new host, I installed the Redirection plug-in and added the following two regex values to strip the offending query string: (?:[?&]m=1$)|(?:([?&])m=1&(.+)) (for ?m=1) and (?:[?&]m=0$)|(?:([?&])m=0&(.+)) (for ?m=0). I hope this saves someone else some hassle.

From QuantumCMS to WordPress

My own company (Algonquin) built a content management system (QuantumCMS), one that pre-dates WordPress. Over 15 years later WordPress is finally starting to approach feature parity with it.

For the most part the transition was smooth, though the security settings leave a little something to be desired. As well as the file manager. I was spoiled with a file manager that fit the way I work, but I will adapt.

Feedback

I’m not going to use the current trendy cop-out of a years-long live redesign. There are issues with this site and I have a long list of things to update, but I am sure I’ve missed plenty as well.

If you find something amiss, or just want to heckle, use the comment form below, the contact form, or ping me on Twitter. In particular, let me know if you see an accessibility issue. I’ll jump on those far faster than my pile of IE8 work.

Bugs (as of July 1, 2015)

The first bug report goes to James Williamson who notes my radial menu doesn’t work in iOS (though it works in the CodePen version, suggesting I relied on CodePen too much for testing).

@aardrian I hate to be that guy but I can't get the menu to work. Thanks for the insights on your design process!

— james williamson (@jameswillweb) July 1, 2015

Update: July 4, 2015

It turns out I had already solved the radial menu problem on iOS back in 2012 in my original post outlining the idea:

You may note that I put an onclick = "void(0);" on the h1. Without this, the menu just wouldn’t work on iOS. Otherwise I am relying on my Android devices to read a touch as a hover.

Note that I don’t use an h1 in the updated menu. I wrote that back when I was buying into the document outline algorithm, which doesn’t exist.