Will Moyer 3.0
As probably every web designer knows, redesigning your personal site is a special kind of Sisyphean hell.
In your head, you imagine how amazing and cutting-edge your design will be. There’s no budget, no client requests, no time frame. The only constraints are self-imposed. What could be more liberating to your creative genius, right?
Wrong. Redoing your personal site is a nice way of reminding yourself how great constraints are. They help you keep things focused and on task, they define the scope of the project, and allow you to concentrate on solving problems. They even help you be more creative.
Without those constraints, you end up as your own worst client. But after hours or days or weeks of sketching, blindly coding, or messing around in Photoshop, you eventually have to buckle down and make some actual project decisions about your redesign. After all, you can’t leave the current one up, that thing is hideous.
So for the new WillMoyer.com, I had three goals:
- integrate my portfolio and blog
- create a great reading experience for my articles
- give a visual nod to the previous versions of the site
As much as it pains me to stop the endless tinkering, adjusting, and second guessing myself, there is a time to accept that you have completed those goals and to launch. Done is beautiful, right? Real artists ship.
Here is the obvious nod to the old sites. There’s the centered text and the same “Hi, I’m Will” introduction. It also has the gridded background from before, only this time it’s inverted. (I kept the original for the header and footer.)
At the same time, I’m using some pretty intense CSS3 effects on that text. It’s even textured using the
mask property, although it’s only supported in WebKit for now.
And look, a spinning SVG atom.
I love the Rutherford atom. It symbolizes precision, symmetry, and attention to detail. Of course, it represents science and rationality too. Plus, it’s just nerdy and cool.
My old portfolio was a Tumblr site for the web and graphic design work. And I was essentially using Flickr as my photography portfolio. The new one integrates them and it’s cleaner and more straightforward.
Using WordPress’s awesome custom post types, I can easily keep all of this portfolio content separate from my blog, while still running it off the same database.
Each “portfolio post” has a full content section which I can use for writing up descriptions and case studies and including more images. And when I attach a “featured image,” that’s what shows up on the actual portfolio page.
It’s pretty elegant and I can’t imagine another content management system that makes it as easy as WordPress.
I’m really happy with the reading experience on the site. I spent a ton of time setting the type, which is in the beautiful face Mate by Eduardo Tunni. It’s an open font and similar to Elena and Chaparral.
The font size is 14px on small screens, 18px on large, and 16px in between. The line height is a generous 1.75, but my measure is a bit wide, so I think it works well.
The paragraphs are set to be justified and hyphenated rather than the typical ragged-right of the web.
I’ve used the italic version of Mate liberally. It’s in blockquotes and the site navigation and sometimes the lede. And in side notes.
That reminds me: sidenotes.
“The academic habit of relegating notes to the foot of the page or the end of the book is a mirror of Victorian social and domestic practice, in which the kitchen was kept out of sight and the servants were kept below stairs. If the notes are permitted to move around in the margins – as they were in Renaissance books – they can be present where needed and at the same time enrich the life of the page.” Bringhust, page 63
Expect me to be abusing this feature.
I also established a pretty nice scale using the suggestions for pragmatic, practical font sizing in CSS from Harry Roberts. You can see it below:
I created a couple other possible page layouts (see About, using the new CSS multi-columns) that I can toggle easily from within WordPress. The possibilities are endless; between the header and footer I’m free to customize any post whenever and however I want.
There are some things left to do. The portfolio posts don’t actually have descriptions and case studies yet, so right now the portfolio page is essentially an image gallery. I plan on writing up the descriptions over time.
The new blog doesn’t fully replace my Tumblr, since I chose not to move over a lot of the posts. The level of quality I want here doesn’t fit with a lot of the random reblogs and quotes I previously posted. While I won’t write on Tumblr anymore, if someone wants to find certain old posts, they’ll have to visit that site.
I have paired WordPress down to a neat and clean code machine. Seriously, view my source. Though, I can’t quite get WordPress to stop spitting out so many classes on my navigation items. If I do, I also lose the active states that you need for menu highlighting. I’ll take suggestions from any WP devs out there.
Thanks for reading this post and checking out the new site. If you have any feedback, I’d love to hear it.