How does the 18:9 screen format affect the design and creation of mobile applications?

It's been just over a year and a half since the Xiaomi Mi Mix was introduced, a smartphone that came with very small bezels and was launched in 17:9 format. Months later, despite complaints about black bands appearing in some apps designed for the then standard format, the LG G6 was launched in 18:9 format and, later, the Samsung Galaxy S8 with a similar format.

What is 18:9 screen format?

The 18:9 format is a new screen ratio used in some smartphones such as those mentioned in the previous paragraph. Until recently, smartphones had an aspect ratio of 16:9. The current trend is towards reducing frames at the top and bottom while maintaining the thickness of the phone with the consequent lengthening of the panel.This reduction of frames so that the front is all screen has been called “infinite screen” by some companies such as Samsung.

This reduction in frames means that manufacturers add more pixels to the length of the screen, and that is why some content creators have to change the way they generate them. To give you an example, when you watch a movie on your computer, you see some black lines at the top and bottom, and that is because the movies are recorded in a more widescreen format. In the case of 18:9, it is the screen that is now wider for content that is still published in the previous format, so We will frequently observe the appearance of black bands on the sides.

On YouTube, videos are usually posted in 16:9, which is why on older smartphones they are displayed in full screen without any black bars. If you use a smartphone with an 18:9 screen, you will see the black bars mentioned above. To avoid them, YouTube allows you to enlarge the image to fill the entire screen at the cost of cropping the image slightly at the top and bottom.

As with any new innovation, there is a period of adaptation at first, so this type of screen has some disadvantages. There are mainly two problems with this new type of aspect ratio. We will start by talking about the one that is perhaps the most well-known.

How does this new screen format affect the use and creation of mobile applications and content?

As mentioned above, YouTube videos are usually recorded in 16:9 format and not 18:9, which would cause a lack of content on both sides of the screen. As you can see, this lack of content is not filled with non-existent elements. What will happen is that You will have to see small black bands on both sides of the screen at all times.

There is also another problem, and it is likely that you will see somewhat less information than on other, somewhat smaller screens, as if we compare a Samsung Galaxy S8 with a Galaxy S7, where you can see a loss of information.

In fact, There are some contents adapted to this new proportion. For example, there are some series like “Narcos” or “House Of Cards” that are adapted and can be viewed taking advantage of the maximum screen size.

We should also note that this is not typical, as most Netflix content is not yet adapted. This is because increasing the size to this format would result in some loss of quality, so a large investment in audiovisual material is needed to achieve this adaptation.

As for applications, the same does not happen, since, for example, In the case of LG, it has an application re-scaling system so that we can use them without having to support banding at all times. This causes minimal loss of information.

How to adapt the design of mobile applications and games?

In some video games this rescaling also exists, although It causes more information to be lost on the equipmentWhile in Real Racing 3 or similar style games the losses are not noticeable, in Clash Royale it can even affect the gameplay as the content is cut off. That is why it is better to display the black stripes for games, as it can be more comfortable.

The way to adapt it is simple: when you open a game and pull down the notification bar or remove the touch buttons, you will see an icon at the top right, if you click on it, a window with different options will appear. If you select full screen, the game will be displayed completely. On the other hand, if you select other compatibility options, the aforementioned black bars will appear.

In the case of the applications themselves, it is also simple. You just have to go to settings, screen, application scaling and select the screen format you want, just like with games. It should be noted that this only happens with LG, as the rest of the manufacturers have other rescaling systems.

In order for the image to fill the entire screen surface in applications that allow full screen, it is necessary to activate 18:9 modeWhat this function does is enlarge the image, but this can cause us to lose information on the sides depending on the applications.

Having the option to resize is very much appreciated when enjoying games in full screen, but it is not a very intuitive solution since it has to be configured on an application-by-application basis, and not all of them have the expected effect. In this sense, the scaling on the LG G6 is more of a temporary patch until there is more content that is truly adapted to this format.

The system applications do appear adapted to the new proportionWe see this in native tools like the phone app, clock, notes, voice recorder, and many others. Very few of these apps have full-screen mode, so the bottom navigation bar is visible, though depending on the app, its background may be transparent.

This is a situation reminiscent of the arrival of the first 4K TVs: the advantages of the new resolution standard were clear, the problem was that there was not enough content to take advantage of it. However, this is a temporary situation. The main applications on the market are already being adapted to the 18:9 format and the market trend towards bezel-less mobile phones will make it the new standard.