May 21, 2014 at 00:09ZenComment and overcoming of "mad tile" on Habr
Recently, the very large buttons provided for the finger interface on phones and tablets occupy the niche of computer monitors that is not always traditional for themselves. For the convenience of working with the Habr website in a traditional desktop and laptop environment, the tiled design was removed from there using the new version of ZenComment 4+ user styles . All new menus fit 3 expressionless buttons in the upper corners of the window, constantly visible. This approach was traditional for ZenComment user styles. And in the new design of Habr, they traditionally chew on cumbersome controls, leaving drop-down menus.
The movement of the site’s interface towards a capless is commendable, but along with it the “left menu” appeared on the site - a wide vertical bar with several buttons in the entire height of the window, deserving the laurels of the Unuty interface in Ubuntu.
Laurels are laurels, and this strip eats up space on the screen, which is never superfluous. Indeed, the buttons are accessed, according to the experience with the site, is relatively infrequent, therefore, reducing the area of the open buttons does not lose much in the cost of pressing them, but gives more useful screen area. In addition, user style refutes the opinion of the authors of the site that it needs at least 1,030 pixels of width to view, not including the scroll bar. The site easily fits into 380-400 pixels wide, even with a sidebar.
Here's what happened to him under the influence of user styles ZenComment version 4.02 of May 20, 2014. Let's take a look at the initial page taken for screenshots.
(clickable)
What is characteristic here?
1. The Unity-style left menu is 71 pixels wide, as an emotionless web inspector says.
2. Website cap - cheers! - began to occupy the very 20 pixels that the header occupied in previous versions of ZenComment and the HabrAjax script . But it is empty.
3. The sidebar starts working from the 800th pixel from the header.
4. A typical article is 500-800 pixels high.
5. All free space on the left menu is reserved for the “Scroll up” button (it is known that authorized users can disable the action in the settings).
6. The minimum window width of 1030 pixels was selected when horizontal scrolling does not yet appear.
Further, not surprised at the smaller width of the window, we look at the page view under the action of ZenComment, without any user scripts (you can put it without a preview right into the page).
The screenshot area is about 2.5 times smaller, and the same articles fit, plus the entire first block of the sidebar. Reviews of a stunned witness:
1. Stop, where did the menu go ???
2. What are the 3 icons at the top of the curb?
3. Oh, can a sidebar shrink like that? That would be so in my smartphone!
4. The "Next" buttons do not loom in the articles.
5. Images are reduced in proportion to compression and not wider than 50% of the column width.
6. Article - 300-600 pixels, despite the fact that the column is narrower.
7. The adaptability of the fields from the width of the window is visible, in a narrow window there are less field gaps.
8. There are marks of visited links (in color).
Let's reveal the riddles.
In previous versions, the ZenComment menu fit into 1 line and repeated two site menus: navigation and user data.
This version was no exception. The menus on the site are repeated as they are written in HTML. But the second levels of the menu are scattered in more convenient places. By tradition, custom menus are on the right, the rest are on the left.
They did not do anything with the behavior of the menu. Now for use you need to click on the left menu. The entire page dims, the user experiences a shock, his attention is completely switched to several lines of the submenu. In total there are 4 pieces of submenus and 2 action buttons - the main one and the creation of your post. The disadvantages of this menu have already been described in detail before. But we will not do what is unusual for styles. Something they discover by: hover, thanks to which it was possible to reduce the number of start buttons to 3 - the ones that are in the top row, "on the curb."
Having brought the mouse to the button, you have to click to see one of the menus or do one of 2 “very important” actions: go to the main page or write an article. In general, the same as the creators of the site now offer. But some points are smoothed out:
1. The blackout of the page is not strong so that you can continue to read.
2. The menu does not strive to occupy the entire brain of the reader and the page area. It is exactly what it is.
3. The types of menus, as they say, are spaced at different angles.
By hovering the mouse over 2 out of 3 elements, 3 more buttons will open, and the hovering ones will become more contrast:
If events have occurred on the site, the visible buttons “light up” with red circles with the number of events (letter, comment, tracked action). They will always be in sight, only when you open the menu of the 2nd level become paler. For example, the user menu is open:
The entire window is darkened, but not as catastrophically as on the original site. There are no opaque elements, you can read the page, although the readability of the menu above the page is reduced.
But the transition to the menu is infrequent, and the page scrolls perfectly with the mouse wheel, so the transparency of the menu is less evil than the partially invisible content of the page.
Finally, there is another small tracker menu (to the left), and this epic with scattering the submenu is limited. We left the tile design with a minimum of losses.
So, with minimal efforts and 100 lines of styles, rabid tiles were expelled from the page. The script has about 1100 lines, for the design of articles, blocks and other styles. But if someone needs to take advantage of working with the menu - see these 100 lines with the keywords "#navbar". This is the main thing that needs to be done, plus a little work on stretching the layout (layout). If you set a goal to leave pages more similar to Habr, but without a tile, you will need 150-200 lines of styles.
Not all dreams are realized, which is due to the limited possibilities of styles compared to scripts. But "shredding" the site with scripts is the next stage of the action, in which some of the shortcomings will be eliminated. In particular, you need to remove the edit button away. But, due to the styles, I had to leave it “in the aisle”, under the mouse - these are the realities of HTML from other people's sites.
Similarly, it would be better to have an open button not for alerts, but for a menu. But notifications go above the menu in HTML, and I wanted to make more hidden icons. As a result, the path to the menu and the search bar is somewhat complicated (a mouse loop with a click on the path), but tolerated and shorter than the original path from the tile, from the plow.
In order to have fewer lines in the sidebar, they refused to underline it 1.5 years ago. Now the site has refused to underline the sidebar. To ensure that information of little importance does not waste space, line-to-line clearance is reduced in the sidebar - keywords are important there. Repeating blocks insignificant for the regular reader have been removed from the sidebar. Only new current information. Permanent links are minimized. The width of the sidebar is relatively smaller (26%) than that of the original site (31%), but the information does not suffer due to the compaction of lines and fields.
The insignificant buttons are moved to the right side of the comment title, and they open on hover. The answer buttons are rotated 90 degrees, so as not to interfere with reading. Better processing of details will give scripts. Only comments with styles look like this:
The scripts will enable you to view pictures with the mouse zoom (install HabrAjax ), they also help you view articles without reloading the page, in the text editing menu, filtering whitespace in texts and other details. Scripts fully adapted to the new site will be available soon, and the existing version has some minor bugs (for example, autostat input fields by pressing each key).
Fields, as mentioned, are adaptive, and the footer and 3 subscript links to articles were almost doubled at the time. The maximum width of the site is set to 1420 pixels., Which is larger than the official site, so that the pictures look better.
To the delight of perfectionists, a website bug has been fixed (middle blue block in the heading with the word "New").
Nobody forbids to improve the design to users - the license is open, the author does not mind. I can help in the implementation of interesting design ideas, if such will be at the layout level. For example, you can improve the look and usability of menus and buttons.
Habr-ZenComment, version 4 (now - 4.02).
They will be hosted on Github hosting, and it will be read out, there will be versioning, bugtracker, cloning, documentation. In sum, it’s more convenient than userscripts.org that stops working.
Scripts and styles are best used together (if at all satisfied with the approach and format), because they were developed primarily for sharing.
UPD 05/21/2014: Added adaptability to a wide window, which looks something like this:
(View of the left side of the screen with a window width greater than 1520 pixels.)
UPD2 05/31/2014: Made HabrAjax (docs, code, repo) (a new hosting site on Github), fixed HabrPercentageRing , added spoofing icons with long shadows in the ufoCorrect script on 2 new sites.
The movement of the site’s interface towards a capless is commendable, but along with it the “left menu” appeared on the site - a wide vertical bar with several buttons in the entire height of the window, deserving the laurels of the Unuty interface in Ubuntu.
Laurels are laurels, and this strip eats up space on the screen, which is never superfluous. Indeed, the buttons are accessed, according to the experience with the site, is relatively infrequent, therefore, reducing the area of the open buttons does not lose much in the cost of pressing them, but gives more useful screen area. In addition, user style refutes the opinion of the authors of the site that it needs at least 1,030 pixels of width to view, not including the scroll bar. The site easily fits into 380-400 pixels wide, even with a sidebar.
Here's what happened to him under the influence of user styles ZenComment version 4.02 of May 20, 2014. Let's take a look at the initial page taken for screenshots.
(clickable)What is characteristic here?
1. The Unity-style left menu is 71 pixels wide, as an emotionless web inspector says.
2. Website cap - cheers! - began to occupy the very 20 pixels that the header occupied in previous versions of ZenComment and the HabrAjax script . But it is empty.
3. The sidebar starts working from the 800th pixel from the header.
4. A typical article is 500-800 pixels high.
5. All free space on the left menu is reserved for the “Scroll up” button (it is known that authorized users can disable the action in the settings).
6. The minimum window width of 1030 pixels was selected when horizontal scrolling does not yet appear.
Further, not surprised at the smaller width of the window, we look at the page view under the action of ZenComment, without any user scripts (you can put it without a preview right into the page).
The screenshot area is about 2.5 times smaller, and the same articles fit, plus the entire first block of the sidebar. Reviews of a stunned witness:
1. Stop, where did the menu go ???
2. What are the 3 icons at the top of the curb?
3. Oh, can a sidebar shrink like that? That would be so in my smartphone!
4. The "Next" buttons do not loom in the articles.
5. Images are reduced in proportion to compression and not wider than 50% of the column width.
6. Article - 300-600 pixels, despite the fact that the column is narrower.
7. The adaptability of the fields from the width of the window is visible, in a narrow window there are less field gaps.
8. There are marks of visited links (in color).
Let's reveal the riddles.
ZenComment Menu
In previous versions, the ZenComment menu fit into 1 line and repeated two site menus: navigation and user data.
This version was no exception. The menus on the site are repeated as they are written in HTML. But the second levels of the menu are scattered in more convenient places. By tradition, custom menus are on the right, the rest are on the left.
They did not do anything with the behavior of the menu. Now for use you need to click on the left menu. The entire page dims, the user experiences a shock, his attention is completely switched to several lines of the submenu. In total there are 4 pieces of submenus and 2 action buttons - the main one and the creation of your post. The disadvantages of this menu have already been described in detail before. But we will not do what is unusual for styles. Something they discover by: hover, thanks to which it was possible to reduce the number of start buttons to 3 - the ones that are in the top row, "on the curb."
Having brought the mouse to the button, you have to click to see one of the menus or do one of 2 “very important” actions: go to the main page or write an article. In general, the same as the creators of the site now offer. But some points are smoothed out:
1. The blackout of the page is not strong so that you can continue to read.
2. The menu does not strive to occupy the entire brain of the reader and the page area. It is exactly what it is.
3. The types of menus, as they say, are spaced at different angles.
By hovering the mouse over 2 out of 3 elements, 3 more buttons will open, and the hovering ones will become more contrast:
If events have occurred on the site, the visible buttons “light up” with red circles with the number of events (letter, comment, tracked action). They will always be in sight, only when you open the menu of the 2nd level become paler. For example, the user menu is open:
The entire window is darkened, but not as catastrophically as on the original site. There are no opaque elements, you can read the page, although the readability of the menu above the page is reduced.
But the transition to the menu is infrequent, and the page scrolls perfectly with the mouse wheel, so the transparency of the menu is less evil than the partially invisible content of the page.
Finally, there is another small tracker menu (to the left), and this epic with scattering the submenu is limited. We left the tile design with a minimum of losses.
So, with minimal efforts and 100 lines of styles, rabid tiles were expelled from the page. The script has about 1100 lines, for the design of articles, blocks and other styles. But if someone needs to take advantage of working with the menu - see these 100 lines with the keywords "#navbar". This is the main thing that needs to be done, plus a little work on stretching the layout (layout). If you set a goal to leave pages more similar to Habr, but without a tile, you will need 150-200 lines of styles.
Not all dreams are realized, which is due to the limited possibilities of styles compared to scripts. But "shredding" the site with scripts is the next stage of the action, in which some of the shortcomings will be eliminated. In particular, you need to remove the edit button away. But, due to the styles, I had to leave it “in the aisle”, under the mouse - these are the realities of HTML from other people's sites.
Similarly, it would be better to have an open button not for alerts, but for a menu. But notifications go above the menu in HTML, and I wanted to make more hidden icons. As a result, the path to the menu and the search bar is somewhat complicated (a mouse loop with a click on the path), but tolerated and shorter than the original path from the tile, from the plow.
Sidebar
In order to have fewer lines in the sidebar, they refused to underline it 1.5 years ago. Now the site has refused to underline the sidebar. To ensure that information of little importance does not waste space, line-to-line clearance is reduced in the sidebar - keywords are important there. Repeating blocks insignificant for the regular reader have been removed from the sidebar. Only new current information. Permanent links are minimized. The width of the sidebar is relatively smaller (26%) than that of the original site (31%), but the information does not suffer due to the compaction of lines and fields.
Comments
The insignificant buttons are moved to the right side of the comment title, and they open on hover. The answer buttons are rotated 90 degrees, so as not to interfere with reading. Better processing of details will give scripts. Only comments with styles look like this:
Pictures, fields, footer
The scripts will enable you to view pictures with the mouse zoom (install HabrAjax ), they also help you view articles without reloading the page, in the text editing menu, filtering whitespace in texts and other details. Scripts fully adapted to the new site will be available soon, and the existing version has some minor bugs (for example, autostat input fields by pressing each key).
Fields, as mentioned, are adaptive, and the footer and 3 subscript links to articles were almost doubled at the time. The maximum width of the site is set to 1420 pixels., Which is larger than the official site, so that the pictures look better.
To the delight of perfectionists, a website bug has been fixed (middle blue block in the heading with the word "New").
.content_left table.menu tr td.active{border-bottom: 1px solid transparent}
About Custom Design Improvement
Nobody forbids to improve the design to users - the license is open, the author does not mind. I can help in the implementation of interesting design ideas, if such will be at the layout level. For example, you can improve the look and usability of menus and buttons.
User style placement
Habr-ZenComment, version 4 (now - 4.02).
Scripts
They will be hosted on Github hosting, and it will be read out, there will be versioning, bugtracker, cloning, documentation. In sum, it’s more convenient than userscripts.org that stops working.
Scripts and styles are best used together (if at all satisfied with the approach and format), because they were developed primarily for sharing.
UPD 05/21/2014: Added adaptability to a wide window, which looks something like this:
(View of the left side of the screen with a window width greater than 1520 pixels.)
UPD2 05/31/2014: Made HabrAjax (docs, code, repo) (a new hosting site on Github), fixed HabrPercentageRing , added spoofing icons with long shadows in the ufoCorrect script on 2 new sites.
Literature
- New navigation and other changes on χ · e - the original post is an innovation.
- What is wrong with the χ · χ · redesign is the analysis of the usability of new solutions.