Layout

Behind the Curtain

For those who might be interested, Pixelyzed.com is now at its 6th major iteration. It has gone through several phases through the years as my interests and expertise have evolved. On the technological side, the site has been powered by WordPress since April 2010. Here’s a quick rundown of the tools and elements that I used to design and build the site. They have change pretty dramatically in the last 2 years.

How Pixelyzed.com Was Created and Built

The site’s original design and graphics were created by me for this version using GeneratePress and GenerateBlocks. The design is NOT provided by a pre-designed WordPress theme or a pre-made template of any kind.

As of this version (6.0), Pixelyzed.com is now powered by the amazing GeneratePress (Premium) theme. Custom CSS and PHP coding was done in PHPStorm. This design is a complete departure from the previous one used which was built on the Genesis framework but is now kept deliberately simpler and lighter.

Regarding typography, fonts used were reduced to just one: Maven Pro. It’s probably my favorite font I’ve used on the site. I chose it for its incredible legibility and I just love humanist rounded fonts. The logo is also a simplified evolution from the previous version. The color scheme has changed completely as I think it now better reflects the return of my focus on the site’s technical content.

Making Pixelyzed.com Bilingual

The biggest change in this version of the site is that I finally made it bilingual. Version 6.0 brings a new French version with translations of my main content adapted to the French Canadian audience and the larger francophone WordPress community. As I’ve been doing for all our multilingual client sites since 2010, I’m implementing the multilingual feature with the WordPress multisite functionnality instead of a plugin like WPML. For me it’s by far the simplest way to build multilingual sites as everything remains basically 100% native WordPress other than the addition of one simple free plugin (Multisite Language Switcher) that adds one meta box with one drop down field per additional language in the editing screens of pages and posts to select content in other languages and link them.

In my experience, this solution brings the least potential of conflicts or other technical issues compared to the usual multilingual plugins but, also, there’s a complete canonical separation of content (very important for SEO). It also improves performance as each language’s sub-site in the multisite network gets its own set of database tables for wp_posts and wp_posts_meta instead of the garbled mess most plugins like WPML create. With multisite, all contents in different languages are cleanly separated and can be managed more easily and again, directly in WordPress’ native UI and not the often arcane UIs of multilingual plugins which may or may not support the specific plugins or theme you are using. This had a significant impact in my agency as this made it easier to train our clients in using their sites and managing their various contents.

A Little History of Pixelyzed.com

This site has gone through many transformations since the original version went live in December 2005. I have not kept any screen captures of previous versions but the original 1.0 version was up for a long time and many people often complimented me on it. It was of its time with pixel fonts and looked rather blocky. I look back at it rather fondly now but I decided to retire it when I converted the site to WordPress in April of 2010. I also often use this site as a testing area for new themes or plugins and that is what has often motivated the creation of a new version.

Version 2.0 (on WordPress) was transitional and there actually were 4 distinct versions if I take into account the 2 free themes I used immediately after converting the site to WordPress while I was learning the ropes (these would be like 2.0 beta :). The “real” 2.0 version was on the Thesis framework for a while then was converted to the Headway theme framework with slight changes in the design. In any case, version 2.0 was up too long and I was never satisfied with any of the iterations I’d designed myself to replace the original 1.0 design or the free transitional WordPress themes… but client work took precedence and it stayed up.

Version 3.0 was launched in June 2011. I finally settled on a design I liked in June 2011 and that became version 3.0. This version was powered by the Headway theme framework after version 2.0b had been powered briefly by Thesis again. Version 3.0 was mostly an exercise in simplification of the layout and that design evolution process continued into version 4.0 that was powered by the WooThemes Canvas theme.

Version 4.0 was also sort of transitional. I was moving away from both “Headway” and “Thesis” for several reasons and WooThemes Canvas was a stop gap solution until I found another more reliable theme framework for my business. That solution was iThemes Builder which I’ve used in my business for almost 2 years but it was never used on Pixelyzed.com. Canvas stayed until I changed to a new theme framework again in mid 2013.

Version 5.0 of this site was built on the Genesis framework with a custom design that was an evolution of the previous version visually and was a throwback to the colors of the original 1.0 version. I have relied exclusively on the Genesis framework for this site and in my business from mid 2013 up to early 2018. Version 5.0 was stable with little technological changes for all the time it was up and it enabled me to concentrate on writing blog posts when i had time to put in this site.

But our business’ needs pushed me to look for other theme solutions. At first I only wanted to see if there was alternatives to Genesis I could use in case Genesis didn’t meet my agency’s needs anymore. A simple matter of not having all our eggs in the same basket. Genesis is still a solid and powerful theme but our team was growing and I wanted to make on-boarding new team members easier and I also wanted to find something that enabled us to iterate basic visual changes faster than using only code hooks, filters and CSS and also worked with page builders anf now Gutenberg better out of the box.

Finally, I wanted something that would be easier to maintain long term as, with the release of Gutenberg. It also became clear that Genesis child themes were really NOT as future proof as StudioPress had been saying for years. More on that in a future article.

So in came GeneratePress which was integrated to our toolset in early 2018 and has delivered for us even better than I’d hoped. GeneratePress is just as powerful and flexible as Genesis for developers but much more usable for less technical users. For me this means being able to integrate a custom designs faster than I could with Genesis (especially combined with GenerateBlocks Pro) and having lighter child themes that will rarely if ever need to be updated. Genesis child themes do more of the heavy lifting as the Genesis parent theme has been gutted of functionality to make it “leaner” and things like Gutenberg support and other new WordPress features need to be added to the child theme instead of being handled by the parent theme. That alone made me rethink our use of Genesis and we have not started a new project with it in years. With GeneratePress, new major features come from the parent theme (like Gutenberg support for example) and they are implemented without breaking existing sites and with no changes necessary to our child themes. Sometime in 2021, I also started working with the WordPress Block Editor (Gutenberg) to replace Elementor and other page builders and GenerateBlocks has also become integral to my workflow supported by Kadence Blocks or Stackable for specific features.

In this current 6.0 version, Pixelyzed.com is powered by GeneratePress (Premium) and GenerateBlocks (Pro). Visually, it’s a pretty big change from version 5.0 other than reusing the same font and keeping the same basic logo. It has simplified typography and layout as well as better responsive design and UX. The design changes include the removal of full image backgrounds, fewer colors, larger body type and and even flatter design than 5.0 was with no gradients, shadows or rounded corners.

Under the hood and functionally, it’s another step forward from what I had before. GeneratePress makes tweaking the site easier and brings in more modern features than the Dynamik child theme of Genesis I was using before does. With fixed headers, built-in hooks and layout features that rival Dynamik’s and more. And it manages to be even lighter on resources than the Genesis/Dynamik combo was. Its visual controls are also built right into the Customiser so visual changes are immediately visible right on the page. GeneratePress also better supports WooCommerce out of the box (and without the need for a special “connect” plugin) which was important for me as I work on resources I want to eventually sell on this site…

I will keep tweaking things in the coming months but I really hope you like Pixelyzed.com 6.0.

Thank you for visiting!