I have rebuilt this site again, creating a custom theme and incorporating everything I've learned in development and design since my previous version. In this post I'll describe the improvements, engineering, and inspirations.
With a bounce rate of 82.35%, I wanted to increase user retention, so I removed a lot of content, like this single post dedicated to cowsay:
_______________ < less cows plz > --------------- \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || ||
This new version includes larger hero images, intentional colors, and improved typography in a mobile-first responsive layout. Everything is balanced to keep load times under 1 second and 1MB.
In addition to improving the design and layout, I improved the tool infrastructure for easier maintainability and a more enjoyable developer experience.
The current resources and tools I’ve used to build this site are:
I’m not a designer but I try to educate myself on design principles as much as I can. One of the ways I do this is by observing the world around me and remixing the best design elements I see into a hopefully unique result.
Here are all the places I drew inspiration from:
- Zach Holman’s site. He’s a funny writer and speaker with a really cool blog.
- Paul Stamatiou. A designer with an amazing site with beautiful typography and photos.
- Medium, Ghost. Great blogging platforms with eye catching hero images and typography.
A Full and Comphrensive Style Test
Inspired by Ghost’s style test, this section will cover all of the theme’s UI elements. It’s mostly nonsensical and only here for testing purposes.
Bright Skies is a free and responsive Jekyll theme with a focus on imagery and typography. The goal of this theme is to minimize distractions and let content be the focus.
This is a right blockquote.
Bright Skies is built on top of many great open source frameworks and tools to make it easier to create maintainable content that loads fast and looks great on many different devices. This is emphasized. 53 = 125. Water is H2O. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation). Underline.
This is a left blockquote.
CSS are our tools.
Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
To copy a file type
Dinner’s at 5:00.
This text has been struck.
Let’s keep it simple. Italics are good to help set it off from the body text. Be sure to style the citation.
Good afternoon, gentlemen. I am a HAL 9000 computer. I became operational at the H.A.L. plant in Urbana, Illinois on the 12th of January 1992. My instructor was Mr. Langley, and he taught me to sing a song. If you’d like to hear it I can sing it for you. — HAL 9000
And here’s a bit of trailing text.
The a element example
The abbr element and abbr element with title examples
The b element example
The cite element example
code element example
del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The kbd element example
The mark element example
q element example
inside a q element
s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The var element example
The u element example