This site is a collaborative effort between myself and my beautiful lovely talented wife, Jess! I designed the look and feel of the site and all the different themes, and Jess wrote all the CSS and scripting to bring it to life.
It’s built on the WordPress content management system, with Bricks Builder and Advanced Custom Fields Pro. Bricks provides the page builder so I can scaffold each page and its content, and Advanced Custom Fields gives me the ability to create custom post types and custom variables to use for displaying dynamic data. Jess’s custom CSS changes the way the content is displayed on the front of the site (especially as you swap between themes,) so I can design different types of themes without making any changes to my underlying content.
Since I plan to keep hosting the site online for a very long time, I’m trying to build it with longevity in mind and have developed some personal “best practice” guidelines to follow.
Best Practice Guidelines
Separate content from design
I might need to change the design of the site in the future, so I wanted to build the site in such a way that it will be as easy as possible to make global design changes.
I use a page builder to scaffold my page content and create content templates completely separate from the site’s visual design. The site’s content exists as completely unstyled HTML at the base layer, beneath any CSS styling that later gets applied. This means it’s easy to control or change the design all from within a single, global CSS file. I can also more easily export my content in plain formatting if I ever need to, without exporting any pre-formatting styling along with it.
Limit the number of plugins
As much as possible, I don’t want to rely on 3rd-party developers who could stop maintaining their code at any time. I want to be able to service the site myself if something breaks, and keep the site loading quickly and efficiently without a ton of bloat from unnecessary and unoptimized scripts.
(Yes, I could have built the entire site from scratch with just HTML and CSS, but I’m not interested in doing that.)
Minimize file sizes
Normally I would save my art files as PNG to avoid compression and keep them high-quality, but my priority here isn’t to preserve the integrity of individual art pieces: it’s to keep the site’s database size in check so it doesn’t grow exponentially as time goes on.
Generally speaking, before uploading an image to the site, I’ll save it as a JPG file, downsize it so the largest dimension is no more than ~1600px, and compress the file size to between 50kb and 250kb.
There can of course be exceptions when needed, but the point is to be mindful of how much storage space each image file uses.
Accessibility
I can design the “2004-neon-purple-tiny-text-on-a-black-background” website of my dreams, but it has to be accessible if I want people to actually be able to read it. This has boiled down to 2 things in the choices I’ve made with the site:
- Good bones: beneath any styling, the page’s underlying content needs to be fundamentally well-structured and readable. Having an intuitive navigation, properly-organized headings, meaningful alt text on images, etc. allows screen readers and other assistive technologies to translate/interpret a page correctly, regardless of what the styling visually looks like.
- Adaptive design: create themes that are responsive on different screen sizes, can flex with different zoom levels, and adjust to different contrast needs. I can curate whatever type of aesthetic I want someone to experience on the site, but it has to be able to adapt to and accommodate their unique needs.
Sourcing and crediting
Although nearly all the images on the site are my own, there will be some exceptions (like photos that others have taken of my costumes.) I want explicit permission to include someone else’s photos on my site, and to provide clear and proper credit with a link back to the source in a way that suits the photographer’s preferences.