With the entry of Apple in the devices with slim bezels, it’s quite apparent that a “new” (cough) era for devices is here. A great era for designers and an even more amazing one for the end user. Why? Well, we have a few thoughts on this!

More Content

We’ve been in the mobile website business since 2008. Then screen sizes were 3 inches, and the biggest ones were 320×480 pixels. There was a tone of space back then. However, now, that’s starting to become quite small. First off, let’s clarify something. The iPhone 2, 3g, 3gs, 4, 4S were all 320×480. And now I know you’re saying that some of them were retina, and that made them bigger. Well, not quite! The actual, real points, for the above devices was 320×480.

For example, the iPhone 7 Plus, and 8 Plus, are full HD displays, right? Right! Due to the pixel density you can fit 1080×1920 without an issue. But the real resolution was 414×736.

However, reaching the conclusion of this, the larger the device, the harder to grab it. And we’ve noticed form our analytics that most of our users love devices as large as the iPhone 7 or Galaxy S7, S8. But we never saw a huge increase in Phablets like the S8+ or Note 8 or iPhone 7 Plus. Therefore, it was clear for us that our users, and most of their users are focused more on devices with a maximum screen size of 4.7 inches. But, from a UI perspective, this has always been a nightmare. Trying to fit in a menu, a header, slider, and as much information as possible for our users in such a small space has been a hassle.

Bezel-less devices

iPhone X, S8, Note8, Xiaomi Mi Mix, LG G6, are now setting the standards for bezel-less devices. Therefore, this makes our job, a lot more amazing an a lot more beautiful. Why? Because, due to the fact the device slimmed down in size of bezels, and increased in screen size, we actually have more content space to work with, in a smaller body.

A great example for this would be the iPhone X. The device has a 5.8 inch screen, and the body size of an iPhone 7. The iPhone 7 however has a screen size of 4.7 inches. Therefore, you get an extra 1.1 inches of content space. And as little as that sounds, content and design wise, this is a huuuge win for developers!

User Experience.

The most amazing part of having more screen space, is the user experience. In the case of the iPhone X and Samsung, you get the Super Retina / AMOLED screens. They produce amazing blacks and amazing colours. Therefore,  making a restaurant menu, written on a blackboard for example, will make your entire screen a dark slab with a beautiful gorgeous text on it. This is just a basic example, the usefulness of this and the quality output will be amazing in the hands of the right designers!

Mass Adaptation.

Although we’re super excited to see these devices come to life, this is just a small step. For example, when iOS released iPhone 5 and iOS 6, they were the first to implement a lot of CSS functions. Functions that made it possible for us to build basic elements such as CSS3 buttons. They have gorgeous effects without the extra load of images. basically removing the need for a @2x in codes, making pages load much faster. Elements look much crisper, but the full implementation of CSS3 has happened only when Android 5 was released. This happened nearly 4 years later. Hence, for us it was still hard to give the best output, as a lot of fallback was required.

This era is here. And it will evolve in the near future, immenesly. However, until this becomes mainstream, we can only take these devices into account. And only after big bezel devices go out of style (if ever) we’ll be able to fully see the amazing designs possible for these screens in the overall web. However, let’s not forget. These things may only touch apps, since at the moment Google AMP is becoming the newest standard for web design, pushing out design and power. So this is something we’ll have to live and see evolve!