A new look and a new domain

Last night I launched version 3 of Post Status. The site design was about a year and a half old and in the first two iterations I never put too much thought into it as much as just trying to get something out the door as soon as possible. This time, I tried to build something that could be a foundation for a while.

I’m going to try and walk you through much of my thought processes. Hopefully it gives you insight to what I’ve been up to, as well as perhaps point you to a new resource or two. And if you have advice for me, I’ll take it.

The new design starts with a name

I never really expected Post Status to be my business, but now it is. I realized that some early decisions were mistakes — like not having the .com for the domain. Poststat.us was a fun domain hack and the .com wasn’t available, but it was also a branding issue. The site’s name is Post Status, not PostStat.us or poststat.us or whatever else. That’s always been hard to shake.

A few days ago Greg Wallace pointed me to a Flippa auction for the poststatus.com domain. I was both pleased and annoyed. I tried — in the past year or so — to contact the owner privately multiple times and never got a response, even with a direct offer of cash. Nevertheless, I bid on the domain and even got the seller to give me a buy it now option so I could guarantee the domain. It was $800, but I think I got plenty of value in the transaction. All of that happened just yesterday.

HTTPS everywhere

Another important thing to me was making the entire site utilize HTTPS. I’ll need it for the eCommerce memberships anyway, and it’s a good practice and even has speed benefits. Post Status is now on a custom VPS product that I’m working on with SiteGround.

The site is on a LEMP stack, and utilizes a variation of their GetClouder product. DNS, CDN, and additional caching elements are provided through Cloudflare Pro, which took me a while to settle on. The SSL certification is from DigiCert, which had great reviews.

I’m really excited about using nginx as well as being able to take advantage of SPDY. My site is now more secure, faster, more customizable, and ready for the future. Meanwhile, I was able to knock out two redirects (for the new domain and from HTTP to HTTPS) in one go.

New logo

The logo featured above is probably not finalized, but it’s about where I want it to be. I sketched out logo drafts for months and Sara Cannon helped me put the first version into Illustrator. The one shown in the featured image is a bit thicker than the original, since the thinner one is tough to scale at small sizes.

I’ll probably be tweaking this with the help of someone less like a bull in a china shop within Illustrator as I am, to get it cleaned up and swag-ready (oh yeah!). Either way, I’m happy to finally have a logo for this project, and I think it represents both the brand and the nature of the site pretty well.

New theme

The part of the site I’m most excited about is the new theme design. I’ve had this concept in mind for months, but didn’t really execute the latter half (aka 90% of it) until the last couple of weeks.

In general, finding things based on topic and search should be a lot better, and the reading experience is more focused than ever. I went one column on article pages — something I’ve wanted to do for a while. And I went to a two-column format for archives, minus the latest article that sits in a featured spot on the home page.

The development is based off of Underscores, which I’ve grown to love. I’m using Sass for the preprocessor, though with a different structure than base Underscores. Though I’m no longer using Hybrid Core (I still love it), I am using Get The Image from it to wrangle some default featured images on legacy archives.

One thing you may notice is the icons. Everything is SVG, using Iconic. Iconic makes using SVG super simple. I just insert the SVG of choice with an image tag and the Iconic JS (that’s minified in my primary JS via Grunt) actually changes the image tag to inline SVG. Iconic also has small, medium, and large versions of each icon, which will be pretty cool for some of the larger ones I intend to use for other landing and member page templates. One thing I don’t like is the FOUI (flash of unstyled icon — I just made that up) when I load the page. Hopefully that gets cached and doesn’t happen often, but I sometimes see it working locally.

The call to action for memberships on the homepage is also something I debated a lot. I’m excited about how it came together, mostly because that section will also be the member dashboard for folks once they’re logged in; so the CTAs shouldn’t be too obnoxious for those that follow them.

This design is super alpha and I’m very willing to receive feedback of what you like and hate. I have a lot of known issues too. The bottom half of article pages have a ton of work to do. The footer doesn’t exist yet. And I have to build out templates for new sections of the website.

Typography

Part of the new theme is new typography. I have stayed with Typography.com‘s delivery service — mostly because I am just too in love with Gotham Rounded for my titles.

I do have some performance concerns, as Zack Tollman outlines, but I have reduced the font’s package size considerably — from 9 fonts to 6, and they are smaller sets as well.

I’m still using Gotham Rounded for the logo, buttons, and for main headers and titles. It’s just so pretty. But I’m only using a single weight, since the use is quite controlled.

I’m also using a single weight (light italic) of Sentinel, an incredible slab serif, for archive titles, taglines, and pullquotes. Sentinel is replacing four weights of Archer. I thought about not using any serif, but I think Sentinel is worth it.

The body font is the biggest change. I’ve gone from Gotham Rounded to Gotham Narrow. It’s a more traditional sans-serif, and I think it’s both slightly more serious and slightly more readable. I toyed with the idea of listing (but not hosting) a series of sans-serifs for body, to gain speed improvements by downloading the best available local fonts from the reader; but I discovered I’m too picky for that. That said, the four weights I’m using of Gotham Narrow are lighter than Gotham Rounded was.

Performance

Performance has been a primary concern throughout the redesign. I’m trying really hard to consider whether I need things.

One takeaway is that performance is a multi-faceted, challenging endeavor that spans design, development, and infrastructure.

All in all, Post Status is way faster now.

Some of that is hardware, with nginx on a VPS and SPDY support with HTTPS. But the theme is faster too. I’m using no images unless they are in a post. I’m not using an icon font, but instead using SVG. I’m using Grunt to concatenate and minify various theme scripts. Fonts are still a burden, but one I decided was worth it.

And then there are plugins. Oh, plugins.

Wrangling Jetpack has been tough. I’m probably screwing up some features on the site, but I’m basically dequeuing everything Jetpack spits out. However, I’m confident I’ll be able to wrangle Jetpack okay, as I’m really only going to use Related Posts and Sharing as front-facing features; and though neither is shown here today, both are manageable without Jetpack’s styles and scripts.

Gravity Forms is another one I still have to wrangle. A simple newsletter signup form (a single email field) is causing four stylesheets and two Javascript files to be loaded on every page. That can’t happen, so I have some work to do there.

Generally, finding, dequeuing, and enqueuing styles and scripts from plugins is just annoying. I totally understand why folks tend to just not bother. I would love to see product makers start offering guides on how users can responsibly enqueue such things on their own.

Especially with something like forms, I don’t want to remove a script that prevents the form from working properly. But I do want to remove pointless stylesheets that don’t matter at all to my simple forms. I don’t mean to pick on Gravity Forms, as I freaking love Gravity Forms. I just want to figure out how to make complex plugins more performant. Every http request matters, you know?

All in all, every page load is under pretty well under 1MB uncached, and making between 25-50 requests. I’d like to keep it that way, and really I’d like to make sure full page loads are under 1 second always, and usually under 500ms. I have a lot of work to do!

So much left to do

Today is an early Alpha of the new site. I’ll walk you through some of what’s left or still in progress:

Deployments. My deployment method for this site is terrible. I spent a lot of time learning about Composer (will have posts on that) and I may use it, but either way I’ve got work to do on proper repo management and deployments. This is especially the case since I’m trying to both manage the site’s private repo as well as share the theme and functionality plugin as their own repos for others to use, see, and contribute to.

Memberships and membership functionality still have a long way to go. I’m using WooCommerce,  Subscriptions by Prospress and (most likely) a product that’s in Alpha/Beta from SkyVerge for content restriction and other member features. I’m using the Mailchimp API to create a custom email to send to members with new private content; that’s been fun to learn.

I’ve created two new content types (Notes and Resources) that are going to be members only. Notes are like the old links, but now a members only blog and newsletter. Resources will be mostly members only with some free stuff, and will be evergreen informational content. Then I’m creating a Profiles content type to create static pages for people and companies (think Crunchbase for WordPress), as well as a cross-relational tool for posts about those folks.

The goal with the new Post Status is to provide useful and informative free content for everyone, but go above and beyond for members.

I’m working hard to make that content accessible, digestible, high quality, and trim enough for busy WordPress professionals.

Okay, this is way more than you needed to know. If you read all that, you are my ideal customer.

I can’t wait until I can show you guys the rest of the site! I’m having a blast spending all of my working time on my own project. It’s a professional euphoria I’ve never known until now.