toujou tutorials

Responsive & mobile first: View module

With toujou, you can check your pages before publishing or editing just like you’re used to in TYPO3. In this section, we’ll explain how to use the view module along with how to test and optimize the performance of your website for all devices.

To do list View module

View

On the left side of backend menu you will find the red icon for view. By clicking on it you can directly check your work on each subpage in different viewports.

To do list

We recommend following the next steps within your TYPO3 back end before publishing your website and checking individual subpages.

Within the view module described below you can check

the arrangement of content elements
the cropping/focus of images on smaller devices
the paragraph and line breaks in texts/headings/tables

Element selection/arrangement

In each element description, you can read about the inherent behaviour of the image to text or the text to text with more than two blocks, teaser cards, maps, etc. before you commit to using a particular elements for your content.

While toujou does manage and optimize the elements automatically on all devices, you will need to check to ensure that the combination of elements you’ve selected are working together properly for your content. Is the order of the content still logical? Does your content which was arranged from left to right for a desktop view still make sense when viewed top to bottom on other devices?

Tutorial: Element library

Exemplary image processing in the image editor

Image editing

With TYPO3 8.7, the image cropping tool has been enhanced to create multiple variants of cropped images for each file. With toujou, pictures are uploaded once and can be used individually as a source for various elements as often as you like.

Within the image editor, you can now define four cropping configurations for one image – each for widescreen, desktop, tablet & smartphone.

Tutorials: Image editing File list

Exemplary text overhang before and after editing in the source code

Text editing

The excessive length of individual words in texts, tables or headlines that do not break by themselves (no automatic hyphenation) or unwanted line breaks are ‘errors’. These ‘errors’ are sometimes only noticeable in the mobile view of your website. You can correct these ‘errors’ by editing the source code.

Tutorial: Source code

Instructions for the view module

Working in the view module

By clicking the view icon in the module overview of your website, a display window opens to the right of the page tree.
If you have not clicked any page, you will be asked to do so.

View page/initial view

Click any page in the page tree. In our example: a blog post.
The display window usually shows the last selected pixel size or a custom size.
Maximized allows you to use the available space in full width.
You can display any page in the page tree by clicking on the page title.

Options within the view module

You can select pre-configured pixel sizes from the drop-down menu above the display window.
There are predefined sizes at your disposal that give you an overview of the viewports of your website for various devices in portrait and landscape format.
If you want to take advantage of the full width of your screen, hide the module list and/or the page tree display at the top left by clicking on the menu icons.

Custom view

Select Custom from the drop-down menu.
Enter the desired size in width x length in pixels (px) in the upper right corner of the input mask with the currently displayed values.
The custom size automatically remains saved until you enter new values.
You can use the smartphone button to the left of the drop-down menu to switch between portrait and landscape orientation of your current view.

Views per viewport

The desktop view is probably the one editors and webmasters, who work with the site on a regular basis will know best. Checking the mobile view of your website is necessary, particularly to check the placement of header images, texts, buttons and the arrangement of elements.

Pieces of advice for mobile views (tablet/smartphone): Depending on your individual configuration in the theme module, the contact button (telephone handset) can be displayed in the upper right corner to ensure your visitors find it quickly. You can also place your logo or page title in the middle of the black bar between the burger menu and the contact button for high visibility.

Computer view

The screenshot shows an example of how your page presents itself to visitors on widescreen monitors and laptops.
For example, check how the logo, header image, navigation, headline, and the first lines of your text are displayed on computer screens with 1280px width.

Tablet view

Here it becomes clear how toujou’s automatic responsive design works:

The ratio turns from landscape to portrait,
the navigation is no longer visible, but can now be found in the ‘burger menu’,
the header image takes more room and the teaser text breaks at an earlier point.

Smartphone view

This is where the menu and contact button move closer together
The header image moves further up.
Headline and teaser text break several times and there is room for a picture, which was not visible before.

What does responsive web design mean?

Responsive web design means that your website uses the same URL and code regardless of the device. The key difference is not to have to manage a desktop website along with a mobile version. Your website stays the same, only the way your website is displayed on different screen sizes changes.

How is responsive web design implemented in toujou?

By default, toujou is programmed so that you as an editor or webmaster are not required to do any web design. All you need to do is to set your design settings once and then you can concentrate on inserting your content. The content elements and theme settings you use automatically adapt to the devices as described above.

Why should I check my website for responsiveness?

Currently, mobile devices are more popular than stationary PCs. To ensure that your content is presented properly not only on smartphones, but on all available devices it is best to check your website. Ideally, problems like text being too small, click areas that are too close together or too broad content areas should not occur but it is always good to check.

What can I do to improve the appearance of my website?

Your task is to prepare your content so that it »makes sense« on all devices. For this we have provided the above to-do list with useful tips, and the pathway to all the tutorials on the topic.

What should be considered conceptually for mobile devices?

Of course, you’ll need to consider the search engine optimization (SEO) of your website along with the quality of your fonts and media. Always have a good placement of headlines, buttons and other eye-catchers. Build your website so that visitors can easily navigate your website to accomplish their goals. Your website design should take them by the hand to assist them while they browse through your blog posts, submit reviews, find products, your address, your opening hours for contact and/or purchase. Keyword: conversion!

What tools can I use?

Any online research will provide you with countless free tools to directly review your site. Depending on what you’d like to have reviewed, it is best to choose the tool that can be of real help in handling specific areas of your website that you may need help with (speed, performance, editorial, links, URLs, etc.). By sticking to a specific subject you’ll prevent yourself from getting overwhelmed by all the free tools and topics.

What role does the performance of my website play on mobile devices?

The main pages of a website should load as quickly as possible. In technical jargon, this is referred to as the »First Contentful Paint« (FCP). Why is it important to load the FCP quickly? More than half of users bounce off websites if loading times are over only 3 seconds. Keep in mind both the amount of data output on your side, and also the average mobile phone data connections on the recipient's side.

With toujou, you are not only protected, but also on one of the fastest systems. In the »Chrome UX Report« of September 2018, TYPO3 scored the best compared to 23 other website systems. Source: https://discuss.httparchive.org/t/cms-performance/1468.

How do I check the performance of my website?

The list of tools that can help you optimize your website is quite long, but the built-in Google Chrome browser »Lighthouse Report« can provide you with important information about your website’s performance. It will tell you areas where you need to improve (for example, the size of files, video delivery on major landing pages, etc.). To use this tool, go to your site in Chrome. With a right-click, a context menu opens in which you click on Examine, an edit field will then open on the right. Click on the tab Audits in the top menu. Everything else will be explained to you as you go or use this link:

https://developers.google.com/web/tools/lighthouse/.