Category: Content Management Systems

Posted on

Building a user-focussed website application in TYPO3

A long term customer had been using custom Perl software with their TYPO3-powered website. Several Perl generated HTML pages were embedded in their TYPO3 website to capture input from forms and generate license numbers and provide access to downloads of their nutrition calculation software for dietitians and health professionals.

The Perl software was not easy to maintain and during our investigation of the data we found problems with the data storage and hacking attempts. While this software automated some processes, there was still significant manual processing required by our client’s admin team and they wanted to change some of these processes and workflow.

At the same time, their website was using a old version of TYPO3 which was no longer supported and was also difficult to use. The design was not compatible with modern devices and screen sizes.

Screenshot of the old website from an iPhone
Screenshot of the new website from an iPhone

We worked with the client to upgrade their TYPO3 website to the latest version with a responsive design and develop a new user-focussed system for managing licenses and downloads that was fully integrated in TYPO3 with a custom TYPO3 extension .

Upgrade process

Typically when we upgrade a customer’s TYPO3 website, we duplicate their existing site and then apply the upgrades for each newer version of TYPO3, often stepping from 4.5 to 6.2, 7.6, 8.7, and then arriving at the latest release of 9.5. Each upgrade step requires updates to extensions and sometimes design template changes. On sites with many extensions there are sometimes compatibility issues.

In this case, we did not need the previous design and the website was using very few extensions so we could jump directly from version 4.5 to 9.5 by generating an export of only the content from the original website and importing it into a new TYPO3 9.5 installation. The customer needed to review all of their content anyway and so this was a good opportunity to restructure the website and improve on the placement of the content and navigation.

New features

To make the website more useful to our client’s users, the main feature we added was a personalized section of the website using TYPO3’s built-in front end user features. We added a few extensions. One to manage front end users and let them register their own accounts, another to secure downloads and restrict access to specific user groups and another that allows our client to send direct email newsletters to their users.

Pages with Usergroup Access Rights set in the TYPO3 page tree
Access tab of the Page properties in TYPO3 for the above page

All pages and content in a TYPO3 website can be public or restricted to groups of users and so we were able to customize the content and deliver it to only those who had access. In our case, after registration, new users of the website can download a demo version of the nutrition information system software. If these users then go on to purchase a student or full version of the software then they get access to downloads and content related to that version of the software. Our client can send a custom newsletter to student users inviting them to seminars about using the software or to upgrade to the full version.

Custom extension

To complete the features for the users to manage their licenses and software downloads, we wrote a custom TYPO3 extension to replace the Perl software and integrate with the TYPO3 front end user features.

The Perl software was storing user and license information in a flat file. A relational database is more useful for storing information and offers better structure and retrieval of data. Therefore our solution uses tables in the TYPO3 database for the website, and we extended existing tables and added a new table for licensing data.

The licensing part of the this extension produces a license number for the user calculated from the software version and a key generated by their installation of the nutrition information system software and stores this in the database.

User mini profile and license information. From here, the user can edit their profile or update their license if they are reinstalling the software .

Data import

Our client had over 12000 existing users of their software and so their data needed to be imported into the TYPO3 database. We first examined the data in a spreadsheet and tidied it to prevent errors, removing duplicate information and invalid dates. [The Perl software had been wrongly generating invalid dates when the license expired 3 years after a leap day.] We could then map the data in the spreadsheet columns to the columns in the TYPO3 database and import the records.

Results

The new, easier-to-use design and the user focussed features have made the website more useful for our client’s customers. This is reflected in the analytics which show that there has been an increase in the number of both new users and returning users to the website and the amount of time these users are spending on the website. Past analytics show that there are busy periods for the website at different times of the year and some of this increase in website traffic can be attributed to our client’s marketing push, but there is a marked increase compared with the same time period last year.

Google Analytics comparing users from when the new version of the website went live with the same time period of the previous year.

You can view our client’s new version of their website at https://bebis.com.tr.

If you need a TYPO3 upgrade or a custom TYPO3 extension for your website, please contact us.

Posted on

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.

Posted on

Welcome to the Gutenberg Editor

So WordPress has a new editor: Gutenberg! This is the default new post with some tweaks from our playing with it. 

Customizing the text, like above, now gives more options with sizes, drop caps and colors for text in WordPress.  

First time Gutenberg user.

Of Mountains & Printing Presses

The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content—somewhat similar to LEGO bricks—that you can move around and interact with. Move your cursor around and you’ll notice the different blocks light up with outlines and arrows. Press the arrows to reposition blocks quickly, without fearing about losing things in the process of copying and pasting.

What you are reading now is a text block the most basic block of all. The text block has its own controls to be moved freely around the post…

… like this one, which is right aligned.

Headings are separate blocks as well, which helps with the outline and organization of your content.

A Picture is Worth a Thousand Words

Handling images and media with the utmost care is a primary focus of the new editor. Hopefully, you’ll find aspects of adding captions or going full-width with your pictures much easier and robust than before.

Beautiful landscape
If your theme supports it, you’ll see the “wide” button on the image toolbar. Give it a try.

Try selecting and removing or editing the caption, now you don’t have to be careful about selecting the image or other text by mistake and ruining the presentation.

The Inserter Tool

Imagine everything that WordPress can do is available to you quickly and in the same place on the interface. No need to figure out HTML tags, classes, or remember complicated shortcode syntax. That’s the spirit behind the inserter—the (+) button you’ll see around the editor—which allows you to browse all available content blocks and add them into your post. Plugins and themes are able to register their own, opening up all sort of possibilities for rich editing and publishing.

Go give it a try, you may discover things WordPress can already add in to your posts that you didn’t know about. Here’s a short list of what you can currently find there:

  • Text & Headings
  • Images & Videos
  • Galleries
  • Embeds, like YouTube, Tweets, or other WordPress posts.
  • Layout blocks, like Buttons, Hero Images, Separators, etc.
  • And Lists like this one of course 🙂

Visual Editing

A huge benefit of blocks is that you can edit them in place and manipulate your content directly. Instead of having fields for editing things like the source of a quote, or the text of a button, you can directly change the content. Try editing the following quote:

The editor will endeavor to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

Matt Mullenweg, 2017

The information corresponding to the source of the quote is a separate text field, similar to captions under images, so the structure of the quote is protected even if you select, modify, or remove the source. It’s always easy to add it back.

Blocks can be anything you need. For instance, you may want to add a subdued quote as part of the composition of your text, or you may prefer to display a giant stylized one. All of these options are available in the inserter.

You can change the amount of columns in your galleries by dragging a slider in the block inspector in the sidebar.

Media Rich

If you combine the new wide and full-wide alignments with galleries, you can create a very media rich layout, very quickly:

Accessibility is important — don’t forget image alt attribute

Sure, the full-wide image can be pretty big. But sometimes the image is worth it.

The above is a gallery with just two images. It’s an easier way to create visually appealing layouts, without having to deal with floats. You can also easily convert the gallery back to individual images again, by using the block switcher.

Any block can opt into these alignments. The embed block has them also, and is responsive out of the box:

You can build any block you like, static or dynamic, decorative or plain. Here’s a pullquote block:

Code is Poetry

The WordPress community

If you want to learn more about how to build additional blocks, or if you are interested in helping with the project, head over to the GitHub repository.

Help build Gutenberg

Thanks for testing Gutenberg!

?