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.

Social Media Manipulation

Destin Sandlin from the Smarter Every Day YouTube channel has a series of videos which discuss the challenging battle Social Media platforms have with dealing with organized manipulation of their communities.

Manipulating the YouTube Algorithm
Twitter Platform Manipulation
People are Manipulating You on Facebook

Goodbye Google+

Online communities come and go.

Recently Google retired Google+, their fourth attempt at social media networking.

Like I’ve posted before, websites still have a place alongside a social media presence.

The best practice is to have a website where (as long as you keep the domain and hosting) you own the location and can direct traffic from your social media presence to your content. While Google does allow you to “Take Out” and download your content and contacts, you now need to find an alternative location for your interaction with that audience.

The users of Google+ have been moving away for a while, where did your Google+ audience move to?

Moving your website, don’t forget to redirect

It is a new year and so perhaps you have created a new website to promote your business or organization online. [If you haven’t and you should or have made a new year’s resolution to improve your online presence, please contact Vista Interactive for help.]

When you are replacing existing content, then it is a good idea to redirect website traffic from that old content to the new location. Links stay around for ages – in people’s contact lists, in their old emails, social media posts, forums and on websites.

We recently had a former client create a new version of their website on a URL. As standard practice, we redirected all traffic from their old website’s URL using a 301 (permanent) redirect. for the whole site. This would ensure that any old links would take website visitors at least to the new site to the right content if the new site had the same structure.

A Google search for the former customer’s main keywords gave their new site in the top two results and their old site in the next two, so the top four results were going to their new site. Of course, the Google results for the old site still had the old descriptions and old links but these were redirecting to the new site. This should be acceptable but the former customer wanted to remove the old descriptions and asked us to remove the old site completely from Google’s index and park the old domain. We did this and so now a search for their main keywords lists only the new site, but they have lost a couple of top search engine results and potential traffic from people who still have the old links.

Keeping your old domains might be a useful strategy. We changed our name and branding in 2004 from BilgiLink to Vista Interactive, but we still use the old domain bilgilink.com for some internal stuff as well as redirecting visitors from this old domain to our current Vista Interactive site.

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.


Thanks for testing Gutenberg!

👋