As a follow-up on my first post, here some details on how the customization of my Format website worked out for me and on a few obstacles I faced. This post is only relevant to you if you are about to set up your own Format site.

General Typology and Layout

There were a few font size settings or simple layout tasks (such as the formatting of the menu), which I would expect to be configurable in the user interface. However in some cases this was not the case, and I had to inject CSS settings, partly also in areas where custom CSS is not officially supported.

Update May 27, 2018: Format has continuously improved their user interface and with a recent update I was able to remove some of those customizations and make those settings in the user interface instead.

Text Box in Grid View

I liked the feature to display text in the grid view, but Format’s implementation was lacking. It did not really use the available space well, and did not work well on mobile devices. Since I liked everything else about Format, I set out to solve this issue. It took me quite a few days of reverse-engineering the Format code, learning how to work with Liquid and coming up with a satisfying solution, but in the end I succeeded. The customized text box now shows the text in different size and length depending on the end device (mobile or desktop).

Text Box Before …

… and after the Customization.

Website Icons

Format does not support the many ways and sizes website icons nowadays have to be included in a website to support all kinds of browsers and mobile devices. In the end I designed the icons using Inkscape, used realfavicongenerator.net to generate the required code and some Windows scripting based on the Inkscape command line and png2ico to generate the icons in all required shapes and sizes. The files icons files are hosted outside of Format in my old hosting account. Format allows to add custom code into the header element, and I used this option to inject my custom icon declarations. It is unlikely that anybody well ever notice, but at least my inner need for perfect solutions was satisfied. ;-)

Small icon for desktop browsers …

… and a larger icon, for example for the home screen of the Safari browser on iOS.

Google Analytics

Enabling Google Analytics led me to another issue: Format does not have a feature to exclude your own visits. For many people this will be a non-issue, but again here I was not able to bring myself to compromise. What worked in the end is that I use a private URL for accessing the site, which then can be used in Google Analytics to exclude my own visits.

Update May 27, 2018: The new GDPR regulation of the European Union is now in affect. At the moment it does not seem possible to set up a commercial Format site that uses Google Analytics in a GDPR-compliant manner. I am in touch with Format and will update this article with my findings.

Conclusion

If you have some experience in web development and are willing to invest some time, then the advanced customization options of Format can be a powerful tool to satisfy even a fusspot like myself. Where Format still has room for improvement is the documentation of their code. It would have been great to get an overview of the general structure and some best practices for the customization (e.g. how values of parameters set in the UI could be used in your own custom CSS code).

If you have any questions regarding the customization of your Format site, I’ll be happy to try to help. Feel free to contact me.

All the best, Robert