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.