Anton Peck

Home

Rise of the Skeleton

In my previous update, I described the process and motivation in my effort to do a complete reboot of my website. In this post, I’ll go over the skeleton theme that I built, and what my next steps will be.

What you are currently looking at is the starting point. I call it ‘Skeleton’. It’s goal is to be clean (in both appearance, and markup), fast-loading, and most importantly: it is a container for me to focus on writing new content quickly. I enjoy writing, and very much want to set a new personal standard in the quality of the material I deliver here.

Structure

In this phase of my project, the process was fairly straight-forward. I began with a minimal amount of HTML markup, then isolated sections of the code out into what would become a theme for the live system.

There are no front-end frameworks at play on this site. Nor will there ever be. I’ve had enough background in working with both Bootstrap and Foundation to realize that rapid prototyping can too quickly become your final product. Few thins are more frustrating that trying to make a Bootstrapped-site not look like Bootstrap. Some of you might enjoy that, but personally I like to start from scratch.

There’s also no CSS-reset being used. This is a hat-tip to Jonathan Snook, who has smooth-talked me into modifying the styles I need. I encourage you to read this post from his archives, when you get a chance.

Then there’s jQuery. The widely-popular JavaScript library. This one was tempting for me to include, because you can actually do quite a bit with it. But after taking a step back, and asking myself “Do I really need jQuery?” I realized the answer: Nope! Leave it out.

Next Steps

Aside from sketching out my UI/UX strategies for this website, my biggest priority is two-fold: To continue writing content, and to add a section of brand-new artwork. Because I am anxious to sharpen my mind with creativity. I’ve no doubt that a few of you are looking for new artwork here as well.

Hello Again

Blogging. That not-so-ancient form of communication that geeks used to do before the swirling follow-fest that is the modern face of social networking. A time when a person could take a deep breath, and type their heart out on a satisfyingly clacky keyboard for as long as they wanted to. Without distraction. Without pressure. Sometimes the topics would be like a breath of refreshing air, other times it would just be a cacophony of words that meant something only to the writer. Life was good. Some of us remember those times. A few of us even ache to have a bit of that back. Even though it never really went away. It just sort of fell asleep behind other, louder things.

Blogging isn’t something that very many people seem to care about anymore. Although there are many who still do post entries. I thought I did, but the state of my website told a very different story. I slacked off in a big way. I walked away from this site and allowed it to starve to death. No entries. No art. No wisdom. And no creativity.

Which is why I’m doing something about it. Right now. This is the beginning of a complete reboot of this site. I’ve even pulled the plug on my ExpressionEngine installation and moved over to Statamic to manage my content.

Why Switch to Statamic?

Why would I want to switch out the CMS? Well, mostly because it feels like the right thing to do for the goals I have. I enjoy trying out things like this. Also, because ExpressionEngine is (in my opinion) a better tool for large complicated sites than it is for small personal domains, I found EE to be a little heavy-handed for my needs. The revelation came about while I was doing an update and digging through the mess I had created over the years in my channels. I wanted, no, needed to start clean. Statamic is just the right size for my needs. No database, and I can write my entries in Sublime Text (distraction-free). It feels gloriously old-school, but manages to remain classy and modern.

This is also an opportunity for me to start a new design. Which is something that I have been wanting to do for some time, but have procrastinated the issue for far too long. I believe the words are “No time like the present.”

I encourage you to join me in this redesign. This is going to become a social experiment, and everyone will be invited to participate in my progress, as it will be ongoing, uncensored, and completely live. If you are feeling especially ambitious, I dare you (double-dog dare you) to do the same thing to your own website design. Tear it down (but please be careful with your content - yours may be far more valuable than mine ever was), and start from a skeleton to build it all back up. I can’t wait to see what we learn from the journey.

Statement of Work

Like any proper project, I’m going to start by listing out the steps that will be taken to go from naked to fully designed in a reasonable amount of time (about 3 weeks). Since this is a blog post, let’s just go with the understanding that this is like a miniature Statement of Work. An overview of what is to come over the next few weeks.

  • A clean slate. Since this is a fresh installation, it’s still using one of the default themes created by Jack McDade. I will be creating a new theme that starts with barely anything, and work from that. The raw skeleton.
  • Share and invite. Once the skeleton is established, everything related to the design and content (with the obvious exception of the Statamic system files) will live on GitHub as a public repository. My methods will be exposed to the world. Take them, comment, critique, or just watch. Herein lies the heart of my experiment.
  • Content strategy. A vital early step. All of the components of the site will be considered. Static pages will be written. Longer-term content (such as yet-to-be-created artwork) will be added to the puzzle. Article types will be more thought out. Will I write about more technical stuff, or will the topics be centered around creativity? We shall see!
  • Sketch and wireframe the interface. I like to draw my ideas on paper. Before I start writing any code past the skeleton, there will be sketches made of each section that needs to be created. These drawings will then be scanned, and posted both here and in the GitHub repo.
  • Visual design. I have an idea of a personal brand that I would like to explore. But not until the other work is done first. This will likely be created in Adobe Illustrator (although I’m not sold on the tool of choice yet). Services such as Dribbble will be leaned on to encourage feedback on the process at this stage.
  • Front-end development. The non-fancy stuff. Basic design and code to be added that is expected to be accessible from any browser or platform.
  • Add-on development. The progressive enhancement stage. Improved CSS. A sprinkle of JavaScript. Just the icing on the cake at this point.

Ultimately, the most important part of all of this is the following word: Speed.

The site needs to be light and fast. Like, freaky fast. So fast that it’ll load before you get your Jimmy John’s sandwich. This means that I don’t expect to use any libraries or client-side frameworks. No remote script loading. Fancy fonts will be handled appropriately, and be hosted locally. JavaScript will be vanilla.

This all won’t be without some challenges. Having a background in both art and design, I predict that eventually the two will clash. The artist in me will want to post large illustrations that look good on high-resolution displays. The designer in me, however, will insist on making sure that the bandwidth remains light. Especially on mobile devices, where fast page loading is a priority. Compromises may need to be made.

Ready to Rock

I’m looking forward to what will be coming here. I’m ready to share my journey with you. Nothing would honor me more than to have you join me in my plans. I want you to yell at me when I make mistakes. Applaud when you see something you like. Correct me when I’m wrong. Or, just smile and wave as you drive by the installation.

I wrote this all while listening to Rdio and typing on a 13” MacBook Pro. Software of choice for writing? Sublime Text 2. Because this is how I do blogging.