Stellify, realigned

It’s taken me ages, but I’ve tidied up a bit around here. Welcome to the new-ish, old-ish Stellify: let me show you around.

Stellify banner

Not a redesign

The desire to redesign is aesthetic-driven, while the desire to realign is purpose-driven. One approach seeks merely to refresh, the other aims to fully reposition and may or may not include a full refresh.

Cameron Moll

If design is about constraints, I had a bunch of self-imposed ones, the biggest being: I didn’t want to scrap the last design. I still love Calluna Sans, the color palette, and my aerial photos a lot, not to mention my Archives and 404 pages. It just needed more breathing space and stability.

Also seeing the relaunched sister sites of Faculty and Chris Shiflett designed by Frank Chimero further encouraged me to stick with the photographic left-hand column. I decided to use a couple of new photos, but the old ones might return eventually.

I’ve also talked about the friction that keeps people from blogging more often, and this is the other big decision I had to make: was my workflow still working for me, or should I adapt a new one?

Although I was extremely tempted to go the static site generator route (Eleventy is the chillest to set up, please do yourself a favor and use that one), I did not enjoy the idea of migrating. I’m sticking with WP, but I’ve stripped from wp_head and wp_footer as much I possibly could. If I didn’t need any front-end mods I could’ve dropped them completely; anything else that doesn’t need blog data is essentially static. The only plugin dependencies I have are:

  • Get The Image, because it lets me scan the post for any inline images instead of relying on uploading / attaching media to it.
  • A Lazy Load incarnation that can work with old posts that don’t use the data-src convention. Maybe I’ll figure out a way to not rely on it someday…or find-replace the whole database?
  • Automating my abbreviations is optional, but I’ll keep it.

Have a conversation

Lower half of the old homepage.
Lower half of the old homepage

Before, I enjoyed having a bunch of things on the homepage as an overview of whatever I was up to at the moment—Twitter, Flickr, and the now-defunct Google+, which I used to curate interesting links. All these made for a bogged and disparate page, though I still want to do some form of /now page someday. It would be so much easier if everyone just used RSS.

I’ve never really done a proper introduction before, so I had the idea of aligning my greeting / overview / description with the rough outline of my site. I value the thoughtful combination of design + code + words, and I build for the web inside and outside work to make it a more meaningful place. This informed how I would write my intro, and the 3 things I wanted to highlight: work, projects, & the blog.

I was also inspired by what Jason Fried said in a podcast: that at Basecamp (37signals at the time) they decided to go beyond the work and highlight their own ideas and values as a way to distinguish themselves, and filter whom they’d work with:

When we came out of the gate in ’99, it’s actually the same today, if you look at most agency sites you’re gonna see a bunch of screenshots of work, and it makes sense cause if you’re looking to hire a agency you’d want to see their work.

The thing is, I think from a customer’s perspective, all decent work looks the same. It’s very hard to tell, no one’s gonna put bad work up. If you’re good, it all looks the same good, and so it’s very hard to make a decision about which good is better, you know?

So what we decided to do is not show any work, and instead share our ideas. What do we believe in, what do we think, what’s our opinion about the industry, what’s our opinion about design, what’s our opinion about this and that. And we knew that that would be unique because most companies don’t share their opinions, they’re afraid to share their opinions, or they don’t have them in the first place.

And by not showing work you can be weird to begin with, it would set us apart. All these writings were very short, these were tweets before there was Twitter, couple of sentences, and you can come away from that thinking “I don’t get these guys, I’m never gonna hire them” or “Wow, there’s something here that’s interesting, let me find out who they are.” And then we can show you our work. So it was just a matter of a filter, basically, and standing apart.

Everyone feels they can stand apart because their work is better than someone else’s; I think objectively it’s actually hard for a customer to say whose work is better than another’s. It comes down to just like pretty pictures at that point. I think it’s hard to make a judgment call.

Jason Fried

It’s also succinctly reinforced in this tweet:

A good portfolio is not just a collection of things you made. It is a collection of how you think.

Mitch Goldstein

Starrify

I wanted to inject more stars, inspired by the idea of using unicode symbols as decorative elements inserted via ::before and ::after pseudo-elements, which I did for another project. However, I learned that it’s not a very good idea to just insert anything in the content attribute because screenreaders read that, so I used SVG.

Bring it back home

In the midst of veteran blogs like CSS-Tricks, Signal v. Noise, and A List Apart choosing WordPress, dissatisfaction with Medium festering, and calls for self-hosting & owning your data reigniting, we’re seeing so many people return to their personal sites. I feel like I keep talking about this comeback, but in the past year or so the trend has been stronger than ever.

These ones have been eating away at my soul inspiring me to finish updating mine:

Handy helpers

I like a good colophon, and you can peek under the hood for a few more details.

Nothing too nerdy in the CSS department; a few layout lifehacks I’ve learned recently are Flexbox Holy Albatross, Layered Links, and Font-display.

Insert Beta label here?

As with every “launch”, things don’t all go as planned, so this is a work in progress. Always has been.

Now, I’m off to deal with my heap of drafts.

⋆ Hi! Thanks for stopping by ⋆

Design × Code × Words for a better Web,
made in the Philippines by Sophia Lucero.