Knurld

Project Description

Christopher Carfi referred Jeff Nolan to me after things started to go south with the original developer for the Knurld site. The existing site was just a holding page, as voice-biometrics startup Knurld had focused on building out its developer site rather than its marketing site. Working on a totally new site has advantages and disadvantages, both of which amount to the same thing: there’s no existing content.

Knurld needed a functional new site up and running by the beginning of January, which meant working through the Christmas season. I hadn’t made any plans, so was free to put in some long days.

Despite the newness of the site, I inherited some technical debt. At first I thought I could salvage some of the code, but realized eventually that I would have been better off starting over and building the site on Genesis. By that time it was too late, as there was a rush to launch.

Design Challenges

I suspect that the original developer chose Twenty Thirteen as his parent theme for its color: both the designs provided for the Knurld site and the Twenty Thirteen theme include a lot of orange. The color scheme wasn’t the issue with the design, though; it was the fact that the design agency hadn’t thought at all about the need for the site to work on multiple screen sizes. The home page was a particular challenge to make workable for mobile devices. There were also multiple layouts for static pages in addition to archive and single pages for posts. But there were also several designs missing: comment forms and comments, single resource items, an archive page for the team post type, and so forth.

Here are the site designs I received from Red Rider Creative.

You’ll notice that not all of the pages I produced look exactly like the designs. We decided that the “One”, “Two”, “Three” on the home page just created clutter…after I’d written the CSS to display the title overlapping the number, of course. Duplicating the mockup of the resources page exactly would have required a lot of extra code, some of it for displaying resources we didn’t even have yet.

Are Blog Posts Blog Posts, or Are They Resources?

The resources page was a key part of the vision for the site. As envisioned in the design, and in the initial resource categories, resources would fall into several areas: blog posts, case studies, ebooks, guest posts, videos, and webinars. The previous developer had created a resource custom post type with each of these set as a resource category.

That created a problem with regard to blog posts. Anyone at all familiar with WordPress would expect to use Posts to create blog posts, guest posts included. That meant either eliminate posts from WordPress (I know people who do this for clients, but didn’t like it as an option here), or restructure the way resources were handled. And we wanted to be able to show a regular blog page with categories and tags.

What I ended up doing was replacing the resource categories with a resource type taxonomy that was available both for resources and for blog posts. That way posts could be managed under “Posts” and other resources under “Resources.” It also let me remove the author and date information from resource posts but include it on blog posts, and show the blog hero image on blog posts and the resource hero image on resource posts.

I then used the Taxonomy Images plugins to assign an icon to each resource type, and the Menu Image plugin to create a sidebar menu for filtering resource results. (The sidebar has been removed from the current site, possibly because there are still not many resources there nearly 6 months later.) I wrote a little additional code to display the taxonomy image on each single entry and also on the archive page.

Then, of course, I had to write the loops for the resource archive page to include both blog posts and resources.

Resources Screenshots

ACF to the Rescue

I’ve created a lot of widget-based home page layouts for Genesis sites, but that wasn’t an easy option when basing the theme on Twenty Thirteen, and sometimes widgetized home pages can be confusing for clients. Adding yet more widgets for additional page templates could create a nightmare of confusion.

I wanted to make it as easy as possible to enter the right content in the right place for the different layouts, and to provide some flexibility in terms of the number of columns in each section, so I turned to Advanced Custom Fields (ACF) Pro. Here are the edit screens and the pages they produce.

Home Page

Blog Page (Posts Page)

This is the page “Blog” selected as the posts page under Settings | Reading.

Default Page

Flexible Layout Page

A single screenshot showing all of the column options for the flexible layouts is too long, so I’ve broken it down, then included screenshots of two pages that use this layout. (Yes, I did use flexbox a lot when building this site.)

Top and Bottom Banner Page

We used this on the top-level About page to include a contact form below the main content.

I included some annotated screenshots of these fields in the project Basecamp, but intended to follow up with detailed documentation. The project changed hands, however, and the new management wasn’t interested in having me complete the documentation…which may explain the number of new pages that don’t have hero images at the top.

Custom Page Templates

Displaying all those custom fields required a number of custom page templates. Twenty Thirteen has a lot of template and template-part files, but only one template for static pages. I ended up with

• A default page template (no additions but a hero image behind the title and excerpt)
• A contact page template that displayed contact information and contact  form in the left column with Google Maps in the right column (the client was using WordPress-to-lead for Salesforce CRM for its contact forms, so this was one of those rare cases where I didn’t use any Gravity Forms)
• A top-and-bottom banner page, which added a hero image and text at the bottom of the page as well as at the top
• A flexible layout page that offered the possibility of multiple hero sections, two-column sections, three-column sections, and four-column sections
• A home page template with custom fields for all those asymmetric content areas.

And that’s just for the static pages. I also needed single and archive pages for resources, and a taxonomy archive page for resource types, and I had to modify many of the standard templates. When you look at the parent theme and child theme files side by side, you could be forgiven for wondering why I didn’t just use a starter theme rather than making a child theme. Next time I would either do that or just use Genesis. Either way there wouldn’t be as much previous code to combat.

You’ve seen the other page templates above; here is the Contact Page. (Apparently I never made a screenshot of the edit screen for this one.)

Conclusions

First, I should definitely trust my instincts and develop with Genesis, which allows me to do a better job faster and with less code. Second, for managing complex page layouts like this, Advanced Custom Fields is a great tool, and I would have used it extensively even had I built the site on Genesis. Third, Flexbox is made of awesome: using it makes creating responsive layouts a lot easier. And fourth, once I had a site over to a client and they hand it over to someone else to maintain, I have no control over it and what happens to it is really not my business. And finally, designers need to keep mobile devices in mind when creating innovative layouts, and develop mockups for small screens.