Hi, I'm a designer, and I want everything to look the same everywhere.
When layout is always a lot of interesting and potentially problematic moments that seemed elementary to the designer, but in fact concealed dangerous. All this could have been prevented if the client had not built himself as the architect of the entire system, and the designer did not treat the sites as a magazine, but as sites, thinking through user interaction, creating a competent architecture that is logically consistent and truly user-friendly. . We need someone who has a certain IT culture, at the same time is both a designer, a layout designer, and a bit of a programmer, even an architect of the database. Perhaps this is the one everyone calls the UI / UX designer. Such a person is difficult to find, he is expensive and the path to such a title is a long one. Therefore, in the typical case, everything is easier and instead of the engineering approach, there is some kind of evolutionary approach. Unfortunately, this is enough, it can even be supported, but only if you are not a perfectionist.
To hell with the lyrics, this post is about layout. You may receive a layout in which there is, for example, a menu. The designer decided that the name of the button element always consists of two lines and that elements are always 4. How to add a new element there? Reduce font size in navigation? Reduce the side of the block? And if a new name from one line that spoils the whole impression of the site? Well, in the TOR, the place where you should place a link to the section containing an element can be described. The designer left a space for it, in no case does it contain more than one word, but the element can be in several sections. I saw someone write a whole module on JS, so that at some intervals they would replace sections there ... These are all minor problems, they are easily solved without the participation of the designer.
At this moment, it’s always scary what the designer offers, and he usually has a lot of ideas on this subject, especially in the era of rubber adaptability. Often the designer implicitly assumes that the layout will always be the same size as he sees in the editor. For example, he may not take into account that the bottom of the site will be almost invisible due to the huge header, and the client can then say that the size of the entire site should be reduced so that the visitor can immediately see something lower. Sometimes it may be that the layout was calculated as rubber initially, but at the same time the text size also included the text size, which was not mentioned anywhere else. Very often there is no mobile version, but at the same time I want everything to be displayed also to work quickly.
The ideal option in terms of coder. Everything is simple, no relative size. The most popular example of such a site is VKontakte. You can even select the resolution under statistically frequent for this site. But there is a total problem - large resolutions, where the loss of space and the overwhelming desire to increase the scale are obvious. Almost always, the client will say that it is unpleasant, and the designer will almost always make such a hat, next to which, well, you can’t just leave the side bands. And all would be nothing, but in the content below is also undesirable.
')
By default, this is usually understood to mean blocks with relative sizes. Everything is fine, but you can’t stretch it endlessly, because one day the text will become unreadable and shallow, and the distances, for example, between the main part and the sidebar will break all the impressions once and for all. Therefore, most often rubber is allowed within certain limits, outside of which the mesh behaves as fixed.
This is a whole set of techniques, but simplified and in terms of the grid - this is rubber + media queries. This is just fine, but it requires a lot of effort and most importantly: the designer will have to refuse to see the layout only in the size of his monitor. This will actually result in several layouts with multiple permissions. Perhaps with minor changes, but often insignificant is not enough if you want really high quality. This requires an analysis of the architecture, usability. But it would be perfect. Often I hear that this project is not so large-scale and expensive, and therefore it will be overkill. Although the whole problem is that the initial stage, which was mentioned above, was not passed correctly, and I feel his mistakes not only in the layout, but everywhere in general.
Similar sites, whose grids are described above, can be found everywhere. But I have never seen sites that are "totally rubber."
At some point, I realized that in the current conditions it is foolish to try to solve all these problems, especially if the client is not very interested in them. We need a project of an appropriate scale, a fashionable startup or something like that. But for an online catalog or an online store of medium and small size, a real adaptive layout, awesome UI-design is a rarity. Although I want to do such sites compactly and beautifully, so that they do not have an unscrupulous site on any popular CMS. A couple of times I really spent a lot of personal time on the correct adaptive architecture and I realized that I was not a designer and it was impossible without his help. But there was never such a designer at hand, and if there was, it was lazy and busy (hello).
And then the idea was born about the totally rubber layout. I didn’t look closely for this topic, but I also didn’t see it spread. I have not seen a single site like this. There is an article that describes a similar approach, but for other tasks . Or I’m just inconsiderate and rarely read css-tricks (by the way, a cool example of responsive design). The idea is to not go against the designer and allow all sites to appear as the designer sees them. To do this, you need to make rubber everything, including the text.
The bottom line:
As has already become clear, this coefficient is the ratio of the current width of the window to the width of the layout. This can be done, for example, with jQuery something like this:
Here orig-width is the width of the layout, orig-font-size is the original font size, which was used in the styles as the one relative to which rem is calculated.
I use less and in it the construction of the form:
It is this @ font-size that is equal to orig-font-size. Now dimensions can be done like this:
And do not worry at the same time that something will be wrong.
Someone noticed, and why is there JS, when there are units in the css type vw? Yes, the initial size can be specified and so it will work, but I’m confused by the support of these units .
In my opinion, both minuses are not critical and can be resolved.
Scaling works, but if, let's say, to scale to 110% and re-open the page, it will adjust to the new resolution. At the same time, the site will always try to look the same, and scaling will always work within the same “session”. I think this is not a bug, but a feature. My subjective mental experiment says that if someone uses scaling, he is ready for such behavior and after several visits to the site he is aware and will accept it. And if not, then this is another reason to make websites right, without missing a step, which is written at the very beginning of this topic. For some browsers, this problem can be solved by scaling at the JS level. This is not easy, but possible . I have not tried, because this way seems like a hell of a crutch, there is no single standard for this.
As for floating-point numbers, you have already noticed in the example above rounding up to 4 characters. As everyone knows, this restriction imposed “from above” . Rounding in my case corrected some of the bugs, subjectively they became less. In addition, subpixel rendering is done everywhere differently and presents a specific problem . It looks like a single pixel space. For example, somewhere between a picture and a block, a distance of 1 pixel can form, and not at all resolutions and not in all browsers. This can be partially solved by generating styles for each resolution, which will allow you to control the rounding manually. But not every design is sensitive to this.
This saved me a lot of time and made it possible to practically not go into the questions of the correct display of the layout on different devices. For many sites, I think this is a solution.
It may seem that I have a negative attitude towards designers, but this is not so. The main thing is to understand that it is not a postcard that is being created, but an entire infrastructure.
UPD 07/08/2015:
With rounding numbers, I bent a little. Browsers currently use very intelligent rounding. The main problems arise when using transforms / transitions, for example toster.ru/q/214153 .
The vw / vh units have a feature: yes, they are already well supported, but they make it impossible to use Ctrl +. In this regard, the “crutch” on JS behaves more predictably, although another “feature” with scaling appears, which is described above. I think for some sites, where there are either very strict design requirements, or it is not thought out initially, a choice / compromise is possible. In addition, not all use Ctrl +. And here it is important to note that, with a high probability, scaling partially breaks down when using media queries.
I would like to note once again that the article contains an aggressive use of this technique. But, in essence, this is a way to scale the entire site or individual blocks, as noted in the comments. Therefore, besides the fact that it saves at the layout, which “cannot be stretched in any way, the designer doesn’t like it,” it goes well with rubber and media queries.
To hell with the lyrics, this post is about layout. You may receive a layout in which there is, for example, a menu. The designer decided that the name of the button element always consists of two lines and that elements are always 4. How to add a new element there? Reduce font size in navigation? Reduce the side of the block? And if a new name from one line that spoils the whole impression of the site? Well, in the TOR, the place where you should place a link to the section containing an element can be described. The designer left a space for it, in no case does it contain more than one word, but the element can be in several sections. I saw someone write a whole module on JS, so that at some intervals they would replace sections there ... These are all minor problems, they are easily solved without the participation of the designer.
Grid
At this moment, it’s always scary what the designer offers, and he usually has a lot of ideas on this subject, especially in the era of rubber adaptability. Often the designer implicitly assumes that the layout will always be the same size as he sees in the editor. For example, he may not take into account that the bottom of the site will be almost invisible due to the huge header, and the client can then say that the size of the entire site should be reduced so that the visitor can immediately see something lower. Sometimes it may be that the layout was calculated as rubber initially, but at the same time the text size also included the text size, which was not mentioned anywhere else. Very often there is no mobile version, but at the same time I want everything to be displayed also to work quickly.
Fixed mesh
The ideal option in terms of coder. Everything is simple, no relative size. The most popular example of such a site is VKontakte. You can even select the resolution under statistically frequent for this site. But there is a total problem - large resolutions, where the loss of space and the overwhelming desire to increase the scale are obvious. Almost always, the client will say that it is unpleasant, and the designer will almost always make such a hat, next to which, well, you can’t just leave the side bands. And all would be nothing, but in the content below is also undesirable.
')
Rubber mesh
By default, this is usually understood to mean blocks with relative sizes. Everything is fine, but you can’t stretch it endlessly, because one day the text will become unreadable and shallow, and the distances, for example, between the main part and the sidebar will break all the impressions once and for all. Therefore, most often rubber is allowed within certain limits, outside of which the mesh behaves as fixed.
Adaptive Mesh
This is a whole set of techniques, but simplified and in terms of the grid - this is rubber + media queries. This is just fine, but it requires a lot of effort and most importantly: the designer will have to refuse to see the layout only in the size of his monitor. This will actually result in several layouts with multiple permissions. Perhaps with minor changes, but often insignificant is not enough if you want really high quality. This requires an analysis of the architecture, usability. But it would be perfect. Often I hear that this project is not so large-scale and expensive, and therefore it will be overkill. Although the whole problem is that the initial stage, which was mentioned above, was not passed correctly, and I feel his mistakes not only in the layout, but everywhere in general.
Similar sites, whose grids are described above, can be found everywhere. But I have never seen sites that are "totally rubber."
Totally rubber mesh
At some point, I realized that in the current conditions it is foolish to try to solve all these problems, especially if the client is not very interested in them. We need a project of an appropriate scale, a fashionable startup or something like that. But for an online catalog or an online store of medium and small size, a real adaptive layout, awesome UI-design is a rarity. Although I want to do such sites compactly and beautifully, so that they do not have an unscrupulous site on any popular CMS. A couple of times I really spent a lot of personal time on the correct adaptive architecture and I realized that I was not a designer and it was impossible without his help. But there was never such a designer at hand, and if there was, it was lazy and busy (hello).
And then the idea was born about the totally rubber layout. I didn’t look closely for this topic, but I also didn’t see it spread. I have not seen a single site like this. There is an article that describes a similar approach, but for other tasks . Or I’m just inconsiderate and rarely read css-tricks (by the way, a cool example of responsive design). The idea is to not go against the designer and allow all sites to appear as the designer sees them. To do this, you need to make rubber everything, including the text.
The bottom line:
- Absolutely all the dimensions of what is possible can be specified in rem.
- The body / html font size should be matched with a certain coefficient.
As has already become clear, this coefficient is the ratio of the current width of the window to the width of the layout. This can be done, for example, with jQuery something like this:
window.font_size = $(window).width()/$('html').attr('orig-width')*$('html').attr('orig-font-size'); $('html, body').css('font-size', window.font_size); Here orig-width is the width of the layout, orig-font-size is the original font size, which was used in the styles as the one relative to which rem is calculated.
I use less and in it the construction of the form:
@rounding: 4; @font-size: 14px; .p(@name, @size) { @{name}: unit(round(@size/@font-size, @rounding), rem); } It is this @ font-size that is equal to orig-font-size. Now dimensions can be done like this:
.some-class { .p(width, 200px); } And do not worry at the same time that something will be wrong.
Someone noticed, and why is there JS, when there are units in the css type vw? Yes, the initial size can be specified and so it will work, but I’m confused by the support of these units .
Minuses
- Use scaling.
- Calculate floating point numbers.
In my opinion, both minuses are not critical and can be resolved.
Scaling works, but if, let's say, to scale to 110% and re-open the page, it will adjust to the new resolution. At the same time, the site will always try to look the same, and scaling will always work within the same “session”. I think this is not a bug, but a feature. My subjective mental experiment says that if someone uses scaling, he is ready for such behavior and after several visits to the site he is aware and will accept it. And if not, then this is another reason to make websites right, without missing a step, which is written at the very beginning of this topic. For some browsers, this problem can be solved by scaling at the JS level. This is not easy, but possible . I have not tried, because this way seems like a hell of a crutch, there is no single standard for this.
As for floating-point numbers, you have already noticed in the example above rounding up to 4 characters. As everyone knows, this restriction imposed “from above” . Rounding in my case corrected some of the bugs, subjectively they became less. In addition, subpixel rendering is done everywhere differently and presents a specific problem . It looks like a single pixel space. For example, somewhere between a picture and a block, a distance of 1 pixel can form, and not at all resolutions and not in all browsers. This can be partially solved by generating styles for each resolution, which will allow you to control the rounding manually. But not every design is sensitive to this.
Epilogue
This saved me a lot of time and made it possible to practically not go into the questions of the correct display of the layout on different devices. For many sites, I think this is a solution.
It may seem that I have a negative attitude towards designers, but this is not so. The main thing is to understand that it is not a postcard that is being created, but an entire infrastructure.
UPD 07/08/2015:
With rounding numbers, I bent a little. Browsers currently use very intelligent rounding. The main problems arise when using transforms / transitions, for example toster.ru/q/214153 .
The vw / vh units have a feature: yes, they are already well supported, but they make it impossible to use Ctrl +. In this regard, the “crutch” on JS behaves more predictably, although another “feature” with scaling appears, which is described above. I think for some sites, where there are either very strict design requirements, or it is not thought out initially, a choice / compromise is possible. In addition, not all use Ctrl +. And here it is important to note that, with a high probability, scaling partially breaks down when using media queries.
I would like to note once again that the article contains an aggressive use of this technique. But, in essence, this is a way to scale the entire site or individual blocks, as noted in the comments. Therefore, besides the fact that it saves at the layout, which “cannot be stretched in any way, the designer doesn’t like it,” it goes well with rubber and media queries.
Source: https://habr.com/ru/post/245251/
All Articles