I love my wordpress website themes. I love my layouts. And we did a good job of getting them up to speed, literally, but they no longer keep up with Google’s new-new-new-new speed & mobile requirements. So, we’re going for a new one.
This time, we’re going to build our own speed-optimized, amp-friendly WordPress theme with the following goals:
- Spacious, minimalist layout for articles: no stuffing them around ads and navigation. I hate that shit.
- Simple fixed navigation for a “randomizer”, previous & next article, and previous & next within category navigation: Read what I posted next, read what I posted next in the primary category, or read something a random.
- Simple newsletter signup feature: It sounds easy enough, but so many times, if a website hasn’t tucked it out of sight, it’s made the signup gaudy sometimes to the tune of entrance and exit pops. Evil.
- Consistent Google Page Speed test ratings in the 90s Queue up Maverick and Goose.
- AMP (Accelerated Mobile Pages) as more than a plugin with minimal settings.
- Stripped of unnecessary code: Code is Poetry. Poetry is saying as much as you can with as little as possible. Or something.
- Multiple article layouts for days I just don’t want to think about images
- Center-aligned content article area with left-justified text. I hate looking to the left or right to read a damn article. I want to look in the center of the screen
- ADA Website compliance: I’ve never meticulously sorted out these best practices. It’s always tugged at me.
- Easily read by those with epilepsy. Contemplating night-mode. If nothing else, it would be easier on my eyes.
It means we’re going back to the beginning of WordPress design.
As much as Katie can make things dance in PhotoShop and we can both do front end coding (sans complicated javaScript), we’re not great with pHp outside of basic understandings and a lot of copying & pasting. At least, at the time of this original posting.
We’ll be using the following sources (updated as we go):
For Speed and UX, we’re starting here:
- Google Academy of Ads Mobile Sites Certification: Google Partners had a baby and Google had a burr up its ass to separate things, again
- Google Developers PageSpeed Tool Kit: leaning on this heavily.
- testmysite.thinkwithGoogle.com: You would think its the same as the Google Developers speed test, but it’s not.
- ADA Best Practices Toolkit: Always wanted to get this done right.
For the WordPress side, we’re going here:
- AMP Project Website: “go straight to the source and ask the horse…”
- AMPByExample.com: Good test examples.
- AMPforWP.com: AMPforWP.com for building a AMP theme
- Yoast: Initial WordPress integrations
Other WordPress design elements I would like to have while staying in the 90s with speed:
For all sizes – Desktop, Tablet, and Mobile – we’re going to go for the following:
- Fixed menu on the scroll up, but not necessarily scroll down : It cleans up the article content area and doesn’t cut the ceiling off the vertical view. Of course that’s mute in desktop mode if…
- Above the Fold Navigation instead of a Fat Footer : Keep folks from having to scroll all the way to the bottom for navigation. We’ll consider a Mega Menu – if we don’t sacrifice speed & AMP to do it.
- ‘Add to Top’ button: I broke the one I have now. So damned awesome.
- Dynamic featured media: I’ll feature an image, gallery, video, whatever…
- Article title in fixed menu: It starts to put a lot in the title, especially in mobile so maybe only a few characters,
For Desktop & Tablet only:
- Consider side navigation menu on desktop and tablet modes: It’s tempting. I love when sites can do it right, and I don’t want to stuff the side columns with trending articles and ads and shit.
- Expand / Collapse side navigation menu [optional]: If we go with side navigation, then an option to leave it fixed open – if it’s already designed into the layout – would be great. This helps keep navigation clean. And the Randomizer stays open
For Mobile only:
- Randomizer in fixed menu (mobile): I love random buttons. I’ll spend hours pushing the Random button on XKCD. I don’t think I’ve seen the same image twice. Go ahead, click that link again & again. It’s always new.
- Link to latest / top articles in fixed menu (mobile): I love how TechCrunch, Obama.org, and the like do this feature. Check them out in mobile, and click the button on the right side of their top menus.
My design inspirations include:
- Obama.org: At the time of this posting, the speed is slow, the images aren’t optimized, and their internal linking is a little left to be desired, but it’s simple, clean, spacious, and doesn’t try to do too much. So, it gets the point across.
- Current Website: It’s been a trial by fire, a journey of mistakes, and a barren of missed opportunities, but it keeps moving. That’s the best part of my site.
- Current Website: HBR’s menu in desktop gets bulky, but they do quite a bit to give the user as much information above the fold as possible. They have the title in the fixed header. I love it.
Shortcuts to speed this up:
1 – Find a good HTML5 Theme and update it with WordPress tags:
I used to do this all the time when we were setting up BiziPorts. Swapping out static content & DOM elements with our dynamic content tags. Sometimes, the better the theme the more complex the tags – unless I got a lot of shitty themes and didn’t realize it.
I was learning front-end development on the fly back then..
2 – Hunt for everything we need.
Designers are catching up to the AMP revolution, especially since Google’s actually stuck to the methodology.
Google’s been known to test and change on the fly.
3 – Get rid of WordPress
My developer friends would point out my first step should be to get rid of WordPress because of how bulky it can be. Maybe one day I will, but for now I’m supposed to be writing novels more than code. So long as there’s community support, I’ll stick with the WP.