Yes, I stayed up past 3 am last night working on a website revamp. Yes, that was too late. No, I couldn’t stay away from it today.

But YES, I am very pleased with where I am now!

I thought I was just going to dive in for a few minutes to do a little more customization of the Twenty Twelve WordPress theme I installed yesterday. But instead, I got annoyed with the wasted white space at the top of the page and started poking around looking for a new theme. And after a bit of searching, I installed a theme called Twenty Fourteen — and I kind of love it!

As you can see from the screenshot above, Twenty Fourteen allows for a header image that’s flush with the top of the page. I understand the use of open space is a big part of giving websites a free, minimalist, airy feel. But it feels like too much if there’s so much open space above and below the header image that you have to scroll to read the first paragraph or two in the first post. So I dig this!

The title and nav bar then live on the same horizontal line, which again saves vertical space. And excitingly, the items in the navigation bar can be turned into nested, green drop down menus! I’m using those to provide handy links to some of my most current or prominent work. There’s a glitch that doesn’t let you keep scrolling those drop down menus if they’re longer than your screen, so I had to keep the number of items in them down. But that’s more manageable anyway.

The theme also provides columns on the left and the right, which gave me enough room to add a widget on the right with covers and links to some of my new work. And I was able to get my branding in by sticking my Pak Man Productions logo onto the top of the left column, where it feels just right.

Everything shifts dynamically to render nicely on any screen — on handheld devices, the line of menu items under the header image becomes a single button with a dropdown menu and full blog entries shrink into clickable headlines. The left column goes away and its contents get added to the bottom of the page when you narrow your screen past a certain point. And when you go even further, the right column goes away and gets added to the bottom as well. It requires a bit of thinking to make sure all the critical info is in a good place to be seen on all devices with these varying ways of displaying things, but it’s great that I’ve now got a site that people on all devices can enjoy without fuss.

The whole thing also inspired me to finally clean up and add some descriptions to the category pages for my most prominent work. So now when you click on “Wave” in the dropdown menu, for example, you get a little description of the character’s origins and where she appears and where you can buy the books.

Finally, I’m much happier with the way this theme displays the categories and date of each post. It’s just cleaner and better designed to differentiate posts from each other and clearly show when they were written. I think I’d still prefer if the date were at the top and the categories were beneath the headline, and I’m not sure I love that the headlines render in all-caps. But those are quibbles. It’s a big improvement over where we were just 24 hours ago.

I’m staying off Twitter as much as possible these days, but if you read this and have thoughts or notice any bugs or glitches, please do feel free to tell me on Twitter!

Well, it’s been a while since I’ve been up ’til 3 am goofing around with web design, so I guess I was due for it. Going to bed now, but wanted to keep track of what I did tonight.

1. I switched my WordPress theme from a modified Codium Extended to a theme called Twenty Twelve. Actually pretty similar, but Twenty Twelve is a little more generous with spacing, which helps make the difference between posts and other elements clearer.
2. I got rid of the custom header I’d added in HTML to the Codium header php page. It had the benefit of incorporating custom graphics for menu buttons and it incorporated my logo. But it wasn’t a native part of the theme and it broke some formatting on iPhones. I need to acknowledge that a huge percentage of people are viewing the internet on mobile, so it was time to let it go.
3. I tweaked some of the layout of the standard Twelve Twelve theme — putting the menu beneath the header graphic instead of above it. Or did I put the title over the graphic instead of below it? Can’t remember exactly. But I like the current arrangement better.
4. Futzed around with social media buttons that weren’t rendering on Safari. I think it was a problem with clear backgrounds on gifs. Redid them as jpegs with filled in white backgrounds and they rendered. Weird!
5. Fooled around with various ways to get my logo in there. I’d like to find a place for it, just for branding. No success just yet. Ideally, I’d have it in place of the HOME link in the menu. But these WordPress themes don’t allow you to replace text menu links with images. And I don’t know CSS well enough to figure out how to tweak the pages to slot it in. I fooled around and tried to see if I could just toss in some of my old HTML to do it, but… nope. I could throw it into a widget in the right hand column, maybe with a little “About” text. But that feels inelegant and a waste of space. I also tried incorporating it into the main graphic on the page, which probably could work. I can also put in a variety of main graphics that I think will do a slide show thing, so it could be part of that, maybe.

So I think I like the results. It’s cleaner and works better on multiple devices. But is it… blander? Less organic? I dunno! Maybe! I think overall it’s a bit better than the last version. But here are a few things I’d like to work on more:

1. Maybe the basic font size could be a little bigger?
2. That logo thing.
3. In the previous version, I had a space for a second line of menu links where I listed a few of my best known books and the link to the Bill Mantlo donation page. Don’t have that space here because I’m working with the basic templates instead of a custom header. Maybe I can work that into a widget on the right?
4. There miiiight be a little too much white space between posts?
5. I should make a few more banner images and see what they look like with the randomizer turned on. I don’t know if it does a moving slide show or if a different one shows up when you go to a different page.
6. The really ambitious thing would be to learn how to build a custom header that works organically with the CSS instead of being an old school HTML hack. If I figured that out, I could have a nice header that included my logo and had a big more designed feel to it.
7. A thing I need to wrap my head around is that this particular design is really an image delivery device. The visual punch of the site will come from the images I post, not from the overall design of the page. So it’s a touch hard to gauge it when most of the latest posts are mostly text. Gonna have to live with it a bit and see.
8. I should rearrange the meta tags along the bottoms of the posts. Right now they say, “This entry was posted in CATEGORY on DATE by Greg.” I can delete “by Greg.” And maybe lead with the date. Pretty sure I made this kind of tweak in the Codium theme, but I haven’t found where to do it here yet.
9. Another big ambitious thing would be to figure out how to add breadcrumb navigation to individual pages. Like “Home > Category > Individual Post Title.” Used to have that way back when I was running the site on MoveableType, but I’ve never figured out how to reproduce it in WordPress. Literally no one’s asking for it, but it feels like it could be nice.

All right. It’s way too late. Off to bed, more later!