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.

How to create a strong web presence from scratch

If you have a brand new business or one that has never had an online presence before, here are some of the key things you will need to create a strong web presence from scratch.

A website is not magic. It takes a lot of work to get people visiting your site and interacting with you.

Following is a top-level overview of the things you need to work on to get started with a strong web presence.

Branding

You should have most of your branding created before you embark on building your web presence. As soon as you start online, your image and reputation will begin to be established and it should be consistent with your offline presence. You will need scalable versions of your logo and branding images designed for the web.

Domain names

You will need at least one domain name that is meaningful and relevant to your website. Choose a name that is memorable. Avoid abbreviations.  Choose the right top-level domains – there are many extensions other than .com which may be appropriate.

Hosting

You will need a server for your email and website. Purchase a hosting package suitable for your needs with room for growth.

Email

Email is still the number one method for internet communication. Choose appropriate email addresses. Create email signatures.

Website

This will be the hub of your online presence. Here you will create and organize your key content.

Website Structure

Use a content management system (CMS) to easily manage your website. A good CMS will separate the content from the design and logic so you can grow and expand your website. There are usually many CMS extensions or plugins for adding new features. Often these are open source so you can also create your own customizations if required.

A CMS will help display repeating information such as your consistent branding and website navigation around your unique content on each “page” of the website.

Website Pages

Each page of your website should focus on a single idea. The content you provide should be easily read by your visitors, so try to create it from their perspective. What information are they looking for? If you are using jargon, is it understood? Each page should have a call-to-action that prompts your visitor to do something.

Photos and Videos

Use genuine photographs of your products and people. Show people using your products. Can you use video to explain your products and services?  Attach descriptions and alternative text to describe your media.

Collect Info

Create forms on your website to allow people to contact you. Collect their information with permission and use it to keep in touch with a mailing list. Don’t spam.

Make sure you get a security certificate for your website if you are collecting personal information.

Install visitor tracking so you can collect statistics about the traffic on your website. Analyze where your visitors are coming from and what they are doing on your website. Use this information to optimize your site.

Get known

Search engines will index your website content so you should optimize it for both human visitors and search engine robots.

You may also need to purchase advertising to get traffic to your website.

Promote your website on your offline marketing material.

Social Media

Create appropriate profiles on relevant social media sites. Connect with people and share relevant information. Don’t spam. Re-use the articles and content on your website and link back to it. Show genuine interest when you interact and be helpful. When people are frequently asking the same question, create content to answer that question on your website and direct people there for the answer.

Repeat

You will need to revisit many of these processes as you get feedback from your web presence. As new technologies are developed you will need to upgrade your website to cope. You will also need to keep your website and social media content fresh for your visitors.

Get help

If you don’t have the expertise in some of these areas, get help. We have years of experience in helping people get their web presence started, so contact us for help.

Collaborative blogging

In 2007 I created a blog to share mainly with my brothers about any innovation, technology, contraptions or gadgets we found interesting.

Growing up we were always interested in anything mechanical, electronic or sciencey. Our parties usually involved some complicated arrangement of lights, sound and video technology. Living on the opposite side of the world, I wanted to keep in touch with them and their gadgets and so I created the Muzgadgets blog and invited my brothers as authors. Of the almost 300 articles, they have written one or two posts each. I had hoped that they would contribute more.

For any technical support issues we have with Vista Interactive, we also have a support blog. For our customer base in Turkey, I asked a friend to translate any posts into the Turkish version. He did a few, but because our support blog posts are infrequent – only when we have issues – he lost interest and the Turkish version is lagging behind.

Here’s hoping that that Vista Interactive team will collaborate with me and contribute their posts on this Vista Interactive Blogging Experiment.