Technical case study: !frappant

,

My employer has undergone a company re-branding, in which Satzart AG, Satzart Premedia and !frappant Webfactory became !frappant. Colleagues developed a new “corporate identity”, which meant a overhaul of the company website, frappant.ch. We took the opportunity to build a fresh installation on the latest version of the TYPO3 CMS, which has been a core tool for over a decade, and serve it over a secure connection via HTTP/2, made possible by Swiss hosting provider Cyon.

My role in the project was the development of the front-end of the website, working with the design team to share my experience and to work towards a modern and clean technical basis. Where former versions of the website were based partially on older technology and aimed at supporting older web browsers, evidence-based research within the Google Analytics data for the previous versions of the websites indicated that we could focus on more modern browser technology amongst our visitors.

We therefore developed for the newer versions of primary modern browsers – Chrome, Firefox, Safari, Edge and Opera – as well as the second tier of Internet Explorer 10 and 11. Finally, we ensured that the major functionality and design was at least usable in the very outdated Internet Explorer 9. CSS Flexbox played its part in the technical structure, although a fuller implementation won’t fold in until later in the year.

The main new technique I learned and implemented for the website was the Zurb Foundation framework, albeit only for the basic grid layout. For semantic reasons, I chose to use the option to compile the layout through version 6 of the framework’s own Sass structure. I wanted to avoid “divitis” as much as possible, and stick to using the modular/atomic coding structure I began implementing to my work last year. I’ll write more on these topics in more detail soon.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.