As every year we thought to gather some data and insights about the extent of use of resolutions, browsers and devices, to help our customers decide (or: to support our recommendations..) whether to support a particular browser that will technologically delay the whole site (Explorer), whether to invest in planning and designing a particular responsive (e.g. tablet in portrait mode), and what is actually the most common screen size in a desktop environment.
Browser compatibility
On the considerations of whether to support the Internet Explorer (IE) browser or not, we wrote in a separate post: Should a new site be adapted to the Internet Explorer browser?
In that post we also presented graphs of the extent of use of different browsers:
The graphs reflect a clear control of the Google Chrome browser, but the real victory is that both the Safari browser (available for Apple devices only) and the Microsoft Edge browser (starting in 2020) – all built on the same Google browser engine called Chromium. So except Firefox browser whose usage is dwindling – all modern browsers, for desktop and mobile, are all based on the same chromium engine. There are still a few differences in their implementation, but in general this is wonderful news for the world of browser compatibility, a matter that was not easy to achieve until a few years ago.
Responsive
The browser compatibility dilemma has been replaced by the device and resolution dilemma, or what is called in professional parlance: responsive and adaptive. Lets start with a quick look at the distribution of the type of devices between desktop, tablet and mobile in a global section:
The local data in Israel are not much different, with the tablet dropping to 1.7% and the mobile receiving the additional percentage.
Now lets see the distribution of resolutions in mobile, when user holds it in Portrait mode:
Regarding the last graph, the last figure tells the story of the mobile – an innumerable multiplicity of resolutions, which leads us to treat the mobile in Portrait mode as a range and not as a specific resolution. It is customary to refer in the range of 320 as the smallest (iPhone 5 and friends) to 414 (iPhone+ and various kinds). We tend to round to 450 in favor of new devices that could come out.
There is no shadow of a doubt that every website nowadays should come out with a minimum of one resolution for desktop and a responsive break point for mobile in Portrait mode, which is a width range of 320-450 pixels as stated.
Now the new dilemmas are:
- Should we adjust to mobile in Landscape mode (568-900)?
- Should we adjust to tablet in Portrait mode (768-1080)?
- Should we adjust to tablet in Landscape mode (1024-1366)?
In addition, given that the most common desktop resolutions are in the range of 1366-1920:
- Should we adjust only to the minimum resolution of 1366?
- Should we create another breakpoint to full screen of 1920?
- Finally, should we also consider situations where the user does not hold the window over the entire width of the screen, i.e. he has a 1920 screen but he splits the windows into 2 equal halves, then his window width is 960 pixels?
Adaptive
In order not to make the subject even more complex, we will mention very briefly that the responsive method means taking the desktop version of the site, and actually shrinking fonts, narrowing lines, breaking cubes that were next to each other in a way that would appear one-below-the-other. Basically, the responsiveness of the site to the width of the screen.
In the “adaptive” method, another layer of adjustment is added, where we decide to change some of the elements in a way that will be adapted to the type of display and not just the size of the display. For example, a fairly basic and necessary adaptability is to turn the main menu into a “burger menu” instead of an open menu, usually for reasons of real estate shortages. Another example – turning certain cubes into a slider instead of breaking one below the other. Far-reaching ones will also mention the possibility of producing different behavior between iPhone and Android users and conforming to the conventions of each platform.
So what’s the bottom line?
As long as there is time and budget, of course adjusting to any possible resolution is the only method that will give you full control “over the pixel” of how the site looks on all possible end devices.
On the other hand, in projects that are a little more budget-sensitive, the minimum required is one desktop resolution, and a break point for mobile display in Portrait mode. Even in this basic configuration, this does not mean that the intermediate resolutions will not be addressed at all. We can simply decide what users will see these intermediate resolutions, within the break points we have created. For example:
- For Mobile Landscape users together with the Portrait tablet – we can choose to present the version of the mobile. It may feel very ventilated and wide, but the site will be fully functional.
- For the Landscape tablet user – we can choose to display the desktop version, while activating the scaling feature in such a way that the tablet makes a zoom-out to the site. Since the user is pretty close to the screen anyway, the result is completely reasonable.
- Finally we left with desktop users holding the window on a half screen, and here perhaps hides the real compromise. Basically we can simply add a horizontal scroll bar that will allow the user to scroll sideways and see the full width of the site. While this is a technical solution to a design problem, given that there is no statistical information on the amount of people using their browser window this way, for small projects this may be the least bad solution.
It is important to remember that things are not black or white – as part of the initial tech-spec that is done at the beginning of each project, it is important to understand what the target devices / resolutions are, then you can decide which additional break points to create, it not all-or-nothing.