unsplash-1454165205744-3b78555e5572-resized

publish | |


The Code of BC

When Blossom Creative was still sinking it’s roots into the ground, we started talking about the website, weighing the options of a pre-made/templated site, or building something custom. While most start-ups can do just fine with a pre-built site, we realized that as a creative agency, the site would not only provide a look into who we are, but also into what we can do; building a custom site from a white canvas allowed us to do just that.

I’d like to walk you through some of the inner workings of the development of our site, as well as a few of the challenges we encountered.

Platform: WordPress

I’m a long time user and confident advocate of WordPress. There’s a long running debate with lots of articles and discussions of the pros and cons of using WordPress to house sites that aren’t primarily blog-like, so I won’t be going into too much detail on comparing it to other platforms, but instead, let’s focus on why we like WordPress and are excited to use it on our own site.

One of the biggest factors for me when choosing WordPress (for any client) is it’s ease-of-use. While I’ll most likely be (probably obsessively) overseeing the site, it’s a major factor to use the same platform for our site that we’ll be developing (most) of our client’s sites on. And not only is WordPress known for it’s ease-of-use, it’s also easy to develop for. I started developing custom themes and plugins about ten years ago, and I’ve never been frustrated with WordPress’ infrastructure or process. That’s a big win for a developer that manages and tends to the requests of multiple clients simultaneously. It’s extendability via plugins, as well as the support of it’s massive community is a huge plus, and provides our clients with confidence in taking ownership of their sites.

Now, let’s get down to the finer details of development…

Framework: None

I might get a lot of heat for this, but I’m going to say it: our site doesn’t use a framework. Not a single one. Our theme is custom written by my own hands, from my own brain. I’ve several reasons why I didn’t use a framework (and don’t plan to), but the main reason is performance: on the sites I’ve worked on that were using a framework, on each page, more than 90% of the framework’s CSS wasn’t being used. I’ve read several debates about frameworks and the benefits of them, and I’m not denying that there are some benefits, but the greatest benefit to writing everything yourself, is you know exactly what is in the site’s code at all times, and you’re not depending on someone else’s brilliance for the integrity of your site… that can be a huge plus to clients who want a lean, custom website design, especially when the team you’ve hired to maintain is the same team that built it.

Templates and Stylesheets

One of the goals of our development, particularly WordPress development, is to tie front end to back end as tightly as we can; again, making the site easy to use and fun to manage. We have three stylesheets to structure and style our site, each one serving it’s own purpose:

  1. structure and style on the front end
  2. structure and style the content of the front end and content editor
  3. style the content editor

There’s some overlap that occurs between these three, so let me explain a little further.

Stylesheet A is the default stylesheet of our custom WordPress theme. It contains all of the top-level structuring for our front facing pages, as well as styling for things like the header and footer. Stylesheet B is shared between the front end, as well as WordPress’ content editor. This allows us to define the styling for our text, as well as some structuring of elements in one stylesheet, and have it applied in multiple places easily. Stylesheet C is very small, and contains only styling specific to the content editor.

You’ll notice pretty quickly, that many of our pages have different structures and design elements; our case studies in particular all have their own individual and unique template. If you know WordPress at all, you know WordPress by default only supports templates for pages. Just like our clients, our case studies are much more complicated than can be contained on a basic page, so we’ve setup a custom post type with a custom templating system: each case study requires a custom template, a custom stylesheet, and a custom PHP class (to add and manage the backend functionality).

Plugins and Scripts

We’ve got several custom WordPress plugins that makes managing our site easier; a few of them are available on GitHub.

You may have noticed, that our site moves pretty quickly, even though there most of our pages contain several images. We use Imsanity and WP Smush plugins to optimize our images, W3 Total Cache to help with some finer points of optimization, and CloudFlare on top of it all, operating as a CDN (and security). On top of all those, we run BackWPup for daily and weekly backups that are uploaded off-site.

In order to maintain a quick page load time, we’ve included (the awesome) lazysizes script for lazy loading of images (and some content), and the webfontloader script to asynchronously load in our fonts. We also use Modernizr to do some basic browser support detection, but nothing major.

And of course, as all WordPress sites should, we use Yoast’s WordPress SEO plugin, an (unmentioned) number of security plugins, and a custom-written plugin that records major events within WordPress in a Slack channel.

One Final Thing

Remember the days when you uploaded an icon to the root of your site, and that was it? Those days are gone. Now there are multiple devices that need a slightly different resolution to properly display an icon, and even a few browsers and operating systems that need specific images. For Blossom’s site, I used my favorite favicon generator to create all of the variations and theme settings. It is incredibly handy and comprehensive; if you are (or your developer is) not using it, get to it! Never underestimate the power of a quality icon on your customer’s browser or device.

All that said…

There’s still a lot of optimization and work to be done, and we’ll keep writing about the decisions and choices we make. We’re really excited about committing ourselves to developing quality websites that look and function beautifully, and sharing and collaborating with our clients and friends on our ideas and experience.

Thanks for reading!

 

Blossom Creative