This is part 2 of our redesign story. Check out part 1 to read about the design process…
The other side of the Apple Canyon Designs redesign is the changes made to the code. I moved the site from Perch CMS to Craft CMS a year or so ago. There were two main reasons for the switch: Firstly, I wanted to get to know Craft a bit better. At the time, a big chunk of the ExpressionEngine community seemed to be moving over to it, so I wanted to see what all the fuss was about. Secondly, I wanted to make use of Craft’s relationships, whereby it’s easy to relate pretty much any one bit of data to another and output it on the site however you want. For instance, relating articles we’ve written about web design to our web design service entry, and the same for photography and video articles and service entries. This way I can show recent posts under each of the relevant services that we offer. This can be done in most CMSs but Craft was built around making these types of relationships very easy to code and allows for a great deal of flexibility in templating.
Craft has a native field type called “Matrix” which functions like Advanced Custom Fields in WordPress. I can’t imagine building a site and not using this style of field type now. It gives editors so much more creative control when adding pages or posts while still allowing the developer to be very precise in what can be output on the front end of a site. Combined with Craft’s live preview option, where you can have the editor on the left of the screen while the preview updates with changes on the right, it makes adding content in Craft a pleasure. Craft aims to be a first-class Content Management System, and it really is when compared to its competitors. You can pretty much do everything that you can do in Craft in WordPress too, but it’s just so much easier working in Craft and you don’t have to use/battle the structure of WordPress. The template files are much more coherent with no messy PHP code sprinkled throughout and there’s no sprawling functions.php to contend with. Craft templates are built using Twig, which is very similar to Liquid, the template engine used in Shopify. It feels kinda rickety putting so much raw PHP in WordPress template files and even more so having worked in Twig and Liquid. It sometimes feels like stepping back in time when switching from a Craft to a WordPress project. There are options in WordPress to use plugins such as Timber to replace the loop (the chunk of code used to get to a series of grouped entries, such as blog posts) with Twig, and this looks pretty promising, but then you have to figure out how to integrate it with all the other third-party plugins you want to use and it's another layer of complexity.
I used the Craft plugin Reasons to allow for conditional fields when creating new entries. This is something Advanced Custom Fields provides by default in WordPress and hopefully Craft will implement this in the core soon. There’s an open feature request for it. Go vote! I needed this feature when creating the articles section, as I wanted to give the author (Melissa or I) the option of having a large image at the top of the page with the title over it (like on this article), or to have the title first and the image following. IF the author wants to use the large hero image THEN I want to show them more options to control text size, color etc. But I only want them to be able to see those options if they are using the large image, otherwise it’s at best irrelevant and at worst very confusing.
None of this is to say that Craft is a better CMS than WordPress. It’s not. It totally depends on the project. For instance, I built our sister business’s site — The Quail & The Dove Wedding Films — in WordPress as there was a certain plugin I wanted to use for contracts that you can only get with WordPress. Therefore WordPress made total sense for that project. However, with all things being equal, I’d much rather work with Craft for a project than any other CMS I’ve used so far.
With the redesign, we added an articles/blog section. We’ve been meaning to do this for years. And now we’ve done it. Well done us. This is one area where WordPress does excel as the platform was developed for blogging and still has blogging at its core. I didn’t build out certain pages for Apple Canyon Designs, such as author pages, which come by default in WordPress. It wouldn’t have been a big deal to do so, but it didn’t seem worth it. It would certainly take a bit longer to replicate all the functionality you get with WordPress for a blog in Craft. However, it made me decide which functionality I actually wanted, and only implement that rather than go with everything that came out of the box.
For the portfolio, I wanted the option of filtering the entries by service type — photography, web and video. I used David Desandro’s Isotope for this. I’ve used Masonry before, but this was the first time I’ve used his commercially licensed software. David's stuff is always so well made and documented — and the price is very reasonable — I was happy to shell out a few bucks for it. I don’t know how many users of the site will use the filtering, but I think it’s a nice feature for potential clients who are only interested in, say, our video production work.
I decided to implement lazy loading for the image gallery thumbnails on all the photography portfolio sections. I’ve never been 100% sold on lazy loading as it’s totally reliant on javascript. But it makes such a difference for performance to only load in all the images in a gallery when the user scrolls down to where they appear on the page rather than right away. I might even be tempted to look at lazy loading for the other images on the site. Right now I’m using Luis Almeida’s Unveil.js as it’s such a cute little file with only 59 lines of code unminified. It's nice and lightweight and works great for simple images. For the rest of the site I would need to look at Alexander Farkas’s Lazysizes. It's a much larger file, but it can handle picture and srcset as well as the humble old img tag. It also looks very well thought out and thorough.
We're excited to have the new site up and we look forward to writing articles about what we're up to. If you're the old fashioned type, you can subscribe via RSS. If you're not, then please check back in from time to time or follow us on Instagram for the latest and greatest from the world of Apple Canyon Designs.