When monitors with cathode-ray tubes started disappearing, new monitors with a variety of sizes and resolutions started appearing at the market. Later it became necessary that the websites would be beautifully displayed on the most popular resolutions and would be adapted to them. At the end of 2010, we started working on the solution for this problem.
We experimented a lot and concluded that a decrease or an increase of the font didn’t give the desired effect. It was necessary to change the size of all the blocks, icons, images, fonts, and even background images. We examined all the popular resolutions at that moment and their usage statistics. We divided them into 4 groups and for each group determined the size of the workspace, padding, and recommended sizes.
One of our regular customers agreed to try to build his website using our new technology and we began development. For the first time we drew layouts for more than one screen size. For us, and for the customer, it was important to understand what the website should look like on all possible resolutions. Also we had to provide a high-quality mapping for the website where one size flowed into another. We made it a rule that all 4 sizes for the user website should look the same, but it shouldn’t be just a proportional shrinking of the entire layout. We conducted some additional tests and found out that on bigger screens it was more important to increase the font size rather than the size of the images. As for tablets, it was interesting to see that the font size had to remain large to make reading easier. The size of the images could be reduced significantly.
The next step we needed to automate the process. We took main.css as the foundation. We decided to add comments to the styles that should change depending on the screen size. The comment included changes to style properties for each size. Then, during the deployment a small php script forms a file for each size and stores it in the data folder. In this way, each project contains 4 sets of styles and images. Pictures have to be created manually because each size requires pictures of different proportions. This does not apply to the background images, but we also store them in 4 sizes for faster downloads on small screens and better quality on the large ones.
After the successful launch of the first website that used 4size technology, we applied for copyright registration and after 6 months we obtained a copyright for this technology. At this moment we’ve developed more than 25 sites using the 4size. These were mostly the websites for public companies, for which it was important to have a high resolution showcase.