Before/After TYPO3 Upgrade Case Study

A long term customer, Cumhuriyet Anaokulu, a German/Turkish preschool in Izmir had been promoting their school using one of our EkspressWeb TYPO3 starter websites. As technology improved and with more people using mobile devices to view websites, they needed an upgraded design to reach these people as well as an upgraded version of the TYPO3 CMS framework.

Infrastructure

TYPO3 is continuously developed and while EkspressWeb was built on version 4.5, the current version at the time of the upgrade was 8.7. Work is currently being done on TYPO3 version 10 with an expected LTS release in April 2020. See the TYPO3 roadmap for more information.

As we do with most live websites, we duplicated the original website to a development subdomain and applied the TYPO3 core updates (4.5 to 6.2 to 7.6 to 8.7). In addition to the core updates, many of the extensions were also updated to their latest versions.

Content

TYPO3 is good at separating content from design and so with the exception of some custom content elements for layout, the customer was able to reuse all of their existing content.

Design

The original design templates made navigating and reading the content on mobile devices difficult. Google’s Mobile-Friendly Test tool was helpful in highlighting the major problems with the original design. Most of these were solved with the TYPO3 Bootstrap package extension and customizations of this to maintain the style of the original site with a fresh look.

Before

Original site, based on EkspressWeb starter package

More views of the old website can be found on the Wayback Machine.

After

Upgraded site with fresh design, based on Bootstrap package
Mobile navigation was almost impossible on the original site. Now there is a dynamic menu with access to all pages.
The site is now easily readable on tablet devices.

Development

The website uses standard TYPO3 extensions for delivering the content and no custom software development was required for this project.

Results

You can view the current Cumhuriyet Anaokulu website at https://www.cumhuriyetanaokulu.org/startseite/

For help on upgrading your TYPO3 website, please contact us.

Respect the user’s language choice

I regularly travel to different countries and language regions and often need to access information online. Although I understand parts of some other languages, I prefer to use English because I operate fastest in English. I have my browser set to English and this delivers my preferred language to the websites I visit. But they don’t all respect that.

I am amazed at the number of international websites that use my location information and then assume I want to use the major language associated with that location. I don’t! I want to use my preferred language.

If you have a multi-lingual website, please make it user-friendly (or ask your web developer to help).

Design matters

Good design matters even when you are the only one using it.

A recent upgrade to Parallels Plesk on our main server added a lot of new features and solved some problems for our email users.

The upgrade changed the theme for the control panel and so our previous branding looked ugly with the new design. Even though I am the person who uses the control panel the most often, it was important to update our branding on the control panel to keep it looking professional and avoid the distraction of the ill-fitting logo.

Before:

Our logo in the top left corner had a transparent background.
Our logo in the top left corner had a transparent background.

Previous branding on Plesk detail
A closer view

After Plesk upgrade:

Branding on Plesk detail
With the background color change, the old branding is unreadable and ugly.

After uploading our standard logo:

New logo on Plesk detail
The new logo looks better, but the white background is uncomfortable.

After new branding:

Final branding on Plesk detail
With a transparent background and recoloring the text, the new branding fits much better.

I could have spent more time getting it pixel perfect, but I am pleased with this solution.

As you can see, design is often a process of making things fit for their purpose.

In this case, our design fits these purposes:

  • links this Plesk control panel with the rest of the services we offer
  • instant recognition of who is responsible for the control panel
  • not distracting from the main purpose of the control panel

What irks you about the design of the tools you use? Do you need some help to fix it?