Welcome to seanbuchholz.com version 3

July 15th, 2018

Welcome to the newly-redesigned seanbuchholz.com! This update has been a long time coming (basically since the last relaunch back in January), and finally includes a ton of things I wanted to get into the last version and didn't have time for.

Let's take a closer look.

Look and Feel Improvements

The core of the visual theme I've kept over various iterations of this site has been the idea of blueprints and architecture. In this version, I've taken that idea to a semi-skeuomorphic place with elements evoking glass and paper. The header panel at the top of the page, for instance, and the sliding overlays on the Projects (on hover-enabled devices) are glasslike and transparent, while the background is a gently textured paper, like a well-worn sketchbook. These elements keep the site grounded in real-world design, even as digital images like the graphic on the home page keep the site, and my work, sufficiently contemporary and tethered to the present.

Out with the old, etc.

Other minor visual enhancements include new graphics on (at the time of writing, almost) all the items in the Projects Gallery, better picture grid displays, and a few subtle improvements to things like buttons and links.

Feature Improvements

Two of the key features I've wanted to add to the site for a long time have finally made their way to you: a pricing and services menu, and a free estimate builder. Both of these should make it about a zillion times easier to craft a quote for your next new website or logo.

I've also added a Privacy Policy, which might not seem like a feature, but which will make future GDPR compliance much easier if I ever find myself doing business with clients in the EU.

Under-the-Hood Improvements

This has been the most gratifying part of the whole process, if I'm being honest. Caveat lector—the rest of this section might be a little "inside baseball" if you're not familiar with web development terminology.

The first, and biggest, change to the scaffolding of the site is the use of CSS Grid, a newish feature that has recently become supported across all the major browsers. The previous version of the site was built on Bootstrap, and so relied on Bootstrap's built-in grid classes for the page structure. This was great for rapid prototyping, but awful for responsiveness and long-term maintainability (I've talked about this before). The idea, at the time, was that it was so easy to write a Bootstrap-based site that going in and making the changes to make it responsive would be simple and take no time at all.

The reality is that I just never bothered. Going back through all the markup and adding more CSS classes seemed like an unsurmountable task. I had no interest in making my HTML less semantic and maintainable, so I never did it.

CSS Grid takes away all those concerns, because once the HTML elements have their class names and IDs, all of the magic of Grid happens in the stylesheet, not in the markup. That means that I only have a single document to edit if I need to adjust a breakpoint here or reflow a block there.

One of the other really fantastic things about Grid is that it works in tandem with Flexbox, another awesome feature that was added to the CSS spec a while ago. What Grid does in two dimensions, Flexbox does in one, so where Grid is great for laying out the elements on a page, Flexbox is just as adept at placing elements inside, say, a footer, or flowing the DOM into a long vertical scroll like a mobile phone screen. In fact, this site uses Flexbox almost exclusively at small sizes, and only jumps to Grid on larger screens. All of this is managed with a handful of media queries, and my markup stays clean and semantic. Grid and Flexbox are really, frankly, pretty incredible features and those of us building sites in 2018 are super lucky to have access to them.

This site is (and has been) built on Kirby, a document-based CMS that uses PHP file methods to manage its backend. The last version of the site was built in a rush (I had an external deadline, believe it or not, for my own website) and I didn't take the time to really dig into the CMS as much as I'd have liked. I was able to get the gist of it enough to hang a site up on it, but not enough to really understand how and why it behaved the way it did. SBWD v3.0.0 makes generous use of Kirby's incredibly powerful features and the flexibility afforded by PHP to do some really cool conditional logic. The part I'm most proud of in this respect is the SEO metadata, which thanks to some very cool built-in Kirby methods detects the page template and uses that information to inform the meta property and content values.

All this is to say that I'm incredibly fortunate to have tools like Grid and Kirby, and I know I've barely scratched the surface of what they're both capable of in terms of creating bold, responsive, amazing websites.

What's Left

All these updates and features are great, but there's still a lot of work to do. First and foremost, I have a handful of responsiveness tweaks to make—primarily to do with better handling of hover-enabled versus touch-only devices. I still need to add in a few more breakpoints to better fit the site on larger phones and phablets. Both of these enhancements happen entirely inside the stylesheet, and are genuinely trivial changes to make, so I have no concerns about not getting around to them like before.

Features-wise, there's a little bit more work to be done. The current quote builder tool was created using JotForm, and I'd like to migrate my existing Design Questionnaire to that system as well. The Services page, though it's a huge step up from the previous version, could also stand to be improved both from a development standpoint and from the point of view of marketing and conversion.

All told, though, I'm very happy with the way this update has turned out. Watch for v3.1.0 in the future with the addition of some further enhancements and new features. In the meantime, drop me a line and let me know what you think of the new site!