About this site


Since this is my first post, I figured it would be nice to have a small introduction to the current website’s inner workings.

Many things may still change from time to time, as I explore new ideas and improve others, but I decided to publish it as it is right now because otherwise I would have kept changing things forever. And that would be no good. For my sanity. But I’ll still keep changing it forever, anyway.

Edit: I published the design so fast that I actually forgot to include a 404 page. Big mistake! don’t do it. Ever.

First things first: type

I’m using Raleway (served by Google Fonts) for most of the text and titles, and Palatino for blog posts. Since the day I discovered Raleway I’ve been in love with its clean style and personality and, in my opinion, it looks great, specially for big uppercase headlines. Then there’s Palatino. It’s a web-safe font and its serifs make readability easier, especially for long blocks of text, like this one. See what I’m doing? making it even longer, just because I can!

Responsive choreography

To make sure all texts on the site had a comfortable line length I used my LineTest.js plugin. It automatically adds asterisks at the 45th and 75th characters of a text so you have a guide to accomplish the perfect line length across different widths and devices.

A few months ago I found myself at work manually counting characters and inserting asterisks on every paragraph to test line lengths. I was spending too much time repeating the same process, so I decided to make this little plugin. It’s not perfect, It’s not something you are going to use on a production website, but It definitely helps when designing your media queries.

Remember: don’t add media queries for specific devices like iPads and iPhones, add them where content needs to reflow.

Animations

On the front page you can see some animations trigger as you scroll down the page. Those were acomplished with jQuery Waypoints and Transit. Waypoints allows you to fire javascript events when a certain element scrolls into view on the user screen, and Transit uses simple javascript rules to fire CSS3 animations. Two nice plugins that I’m glad I discovered. It’s as simple as that! ;)

The glue that holds everything together

…and actually makes it all work. That’s WordPress, yes. I’ve used it on many websites before, so I’m already used to developing in it. It may have started as a blog system back in its day, but nowadays its possibilities are almost endless and it’s got some great official documentation if you ever need to extend it beyond simple theming.

I try to use as few plugins as I can, so I don’t run into trouble when a WordPress update comes out. Right now I’m only using W3 Total Cache to make everything load faster and Contact Form 7.

On top of that, I should also give credit to HTML5 Boilerplate which I use regularly along with jQuery and Modernizr. They make my life easier every day.

Oh, and by the way, (shameless plug incoming) I’m proudly hosted at MrDomain, which features a great custom designed control panel for your domains.

I’m not missing anything, am I? That’s it for today then. See you on the next post, my new friends!