Flyouts, besides being something that happens in baseball when a ball hit high in the air is caught, refers to menus on web pages that pop out when you hover your mouser cursor over them. This site has one under the menu item, “Work.”
Mostly, though, I’m talking about website work in general, not flyouts in specific. One of the joys of launching the magazine has been reconnecting with some atrophied web design skills. I’ve been using WordPress for a very long time and have mostly been able to ignore advances in HTML and CSS. It’s amazing what simple page templates and a half million plugins can accomplish.
Well, not any more.
In designing the Magazine site, I had very much hoped to keep it simple, stupid. For a while, I even managed to accomplish that. Things got a bit twitchy when I decided to handle memberships and payment through the web page, but a plugin got me over that difficulty as well.
It was when I began designing the template that would be the basis for each issue’s individual page I ran into some difficulties. I had a particular design scheme in mind: image of the issue cover on the left; three download links for electronic copies of the issue below that; stories/poems/articles in two columns on the right and organized by category; and optimized for both web and mobile viewing. This turned out to be a design which no web plugin could accomplish all by its lonesome.
I went back to old HTML design tricks I’d learned in the nascent days of web 1.0 – Tables! Tables were the great design element of the early days of the web, allowing you to create complicated layouts even without using CSS (but much better if you could use CSS once that developed). They took us from our squalid little Geocities styles to some sweet new looks.
I tried fighting the square tables peg into the round hole of modern web design. After several aborted attempts and finally physically writing up the design on paper, I got a working prototype on the web. And it looked pretty darn good I thought in Firefox and Chrome.
It looked like total ass on a mobile device.
Which is why we no longer use tables, kids. They aren’t flexible enough. They can’t float and resize and be responsive to the demands of smaller screens, while still looking beautiful on larger ones.
I shifted gears and switched from the “classic” WordPress editor I had been using to the more recent Gutenburg editor. The classic editor looks far more like a typical word processing program, but Gutenburg lets you really dig into WordPress design by treating things like “blocks.” You have “blocks” of text, and “blocks” of images, and “blocks” of other shit, all of which you are suppose to be able to shift around and manipulate as needed. But the Gutenburg interface is absolute dog shit and impossible to use. I hate it, and turned it back off after a few hours of struggling with its ridiculousness.
I finally turned to a more recent WordPress tool, the page designers. These robust plugins allow you to do more than tweak your webpages. They can allow you to design an entire WordPress template if you’re so inclined. I was not, but I was inclined to see if I could use one to modify the issue template page. I gave a few of them a try before I finally settled on one and started using it.
It took a few more days for me to get the hang of the one I choose, Elementor. Not just a He-man villain, he now doubles as a robust and complicated page designer. But I immediately had a far better experience than anything Gutenburg had offered me. It still took a few hours to get the overall hang of it, but I soon had the design I wanted in sight. Another two days of tweaking it, and the layout I had originally envisioned finally appeared before my eyes. Better even, because I found far more things I could change now using Elementor that I’d never realized I could change before. A whole host of typography had opened up to me I hadn’t expected, right down to letter kerning.
Since finishing the update, I’ve turned to other aspects of my website and have been tweaking them. This is mostly modifying the CSS code to make minor changes to design elements, like getting the letter G in the word “magazine” to subtly overlay the yellow menu bar at the top of the page. In general, though, I have a FAR better understanding now of current CSS practices and web coding than I ever had in the past and it’s been enjoyable updating my skills. As frustrating as it can be sometimes, I love learning new stuff!
All of which is to say… keep learning, my friends! It’s worth it. More than when you ever learned as a kid, because now you get to choose the things you learn.
Trollbreath Magazine will be available come September 1st, and you’ll get to see all that work revealed. Here’s hoping the audience finds it as satisfying as I have!