History of the TYPO3 template

The very first TYPO3 versions were delivered with a collection of templates for websites. These had names such as Business, CrCPH, HYPER, Green or Candidate. They served as examples of how websites could be created using pure TypoScript. Here is an excursion into the Internet of the early days with the original twelve TYPO3 templates.

Later these templates disappeared again, they were visually and technically outdated. If you now set up TYPO3 again, only an error message appeared on the website: No Template found!

By adding a TypoScript template data record to the start page, the message "Hello World!" was at least displayed - but this was miles away from a designed website. First you had to create a layout using HTML templates, CSS and TypoScript, and that was a long, arduous process for many users.

Quite a few were frustrated and looked around for other solutions. There was WordPress, for example, which displayed a sample template immediately after installation. The editor could now enter text, save it and it immediately appeared on the website. Success was therefore visible within a few minutes. TYPO3 beginners, on the other hand, often had to struggle for weeks before a satisfactory result was achieved.

To make it easier to get started with TYPO3, we developed the first version of our sample project in 2008. When customers ordered a hosting package, the sample project was installed alongside the "empty" TYPO3 site. This meant that anyone who wanted to could log into the TYPO3 backend, enter content and see the result immediately.

Many of our customers used the template as the basis for their own website. We received a large number of inquiries about how to change the logo, colors, fonts or width of the columns or add further functions. We therefore created corresponding instructions and were able to see many variants based on our template some time later.

The first version of our responsive template was five years old - a long time on the Internet. We therefore developed a new template for version 8 of TYPO3. During development, we took care to consider all aspects of a modern website. The template was designed to be as lean as possible. Bootstrap was not used, as this framework unnecessarily inflates the template.

The most frequently required functions such as news, multilingualism, optimization for search engines, short loading times, search function and perfect display with current browsers were taken into account.

Various layouts for 1-, 2- and 3-column display and different navigations are available. With the integrated fancy box, images can be displayed in a lightbox with a darkened background. We have acquired an 'Extended License' from fancyapps for the sample project, so that this function can also be used in commercial websites based on the sample template.

For the new version, we have again created a series of instructions, which can now be accessed directly in the TYPO3 backend via the help function.

Shortly after the release of TYPO3 9 LTS, we also published a new version of our template.

Here, however, we can speak more of an "evolution" and less of a "revolution". We have not implemented any fundamentally new functions, but instead use the new functions of TYPO3 9 LTS.

The new system extension "seo" is now used for search engine optimization, the previously used extension "cs_seo" has been removed. Readable, search engine friendly URLs are now also generated directly by TYPO3, the previously used extension "realurl" is no longer required.

The popular lightbox effect when enlarging images is also no longer realized via an additional extension.

All in all, the sample project has been streamlined and adapted to the new functions of TYPO3 9 LTS.

With version 10 of our sample project, we have not only revised existing functions, but also integrated numerous new features. The project is now much more modern, flexible and user-friendly.

A central element is the new TYPO3 dashboard, which provides a quick overview of important content and functions. It is supplemented by an integrated cookie management solution based on the open source script "Klaro", which meets the data protection requirements of modern websites. A lot has also been done in the area of image processing: responsive images and various crop variants ensure optimal display on all end devices.

New and improved variants are available for navigation, such as a mega menu for a clearer presentation of subpages. In terms of content, editors benefit from flexible grid containers and expandable content elements that offer more design freedom.

The project has also been fundamentally modernized technically. Under the hood, we use the extended possibilities of TYPO3 10 LTS - including new mechanisms such as the Asset Collectors, with which resources can be managed and integrated more efficiently.

The development of version 11 of our sample project has also been consistently continued: Existing functions were refined and new options were added - both in the visible area and in the background.

Among other things, responsive images with different crop variants, new navigation forms such as mega menus and page teasers with preview images as well as expandable content elements and grid layouts for more complex content ensure a flexible and modern appearance.

Technically, the sample project is based on TYPO3 11 LTS. This version not only brings with it a modernized backend interface, but also allows us to structure assets and resources even more cleanly during development - thanks to the targeted use of the Asset Collector, among other things.

With version 12 of our TYPO3 sample project, we have once again significantly improved the user-friendliness and technical basis. In addition to optimizing existing functions, we added new features that make working with the system even more flexible.

A particular focus was placed on the barrier-free structure of the website in order to give as many users as possible unrestricted access to the content. The project was supplemented by a new content element for hero images - i.e. text over large images - as well as familiar but enhanced functions such as responsive images, flexible grid layouts and expandable content elements.

The sample project also benefits from the modern possibilities of TYPO3 12 LTS in the background. Among other things, we use the Asset Collector to integrate resources in a structured and performance-optimized way.