What to fix in the layout before release in production?

This article is a checklist of what you need to remember to correct in any project. List of useful things. The whole text is divided into two parts. The first is about simple page elements, such as text, buttons, images, forms, and others. The second part is about performance, scalability, security and availability.

Part 1

Text

Font size and leading

The optimum line height ( line-height ) 1.4 - 1.8 of the font size. This value is better to indicate multipliers, rather than specific values ​​in pixels. So it will be scaled relative to any font size.

Line length

Limiting the length of a string makes it easier for you to jump from one line to another. It is convenient to read the text if it is reduced to a minimum of 6 words, and a maximum of 12. It is enough to use min-width and max-width .

The length of the line affects the leading. On phones, line-height should be less than on a large monitor. There is an interesting adaptive approach ( css-gateways ), which smoothly adjusts the font size and leading under the screen.

Limit long words

The text in the string may turn out to be unexpectedly large, in which case it can be limited using text-overflow .

Width Alignment

Many people know how bad the width alignment looks like ( text-align: justify ). The text becomes difficult to read because of the large spaces between words. There are no such large spaces in books and newspapers due to hyphenation in words. To enable such a transfer you need to use the property hypnens , it automatically hypnens soft hyphenation in words. Unfortunately, this works far from everywhere, but you can use the plugin and the dictionary to it .

Printer

Due to the fact that the keyboard does not have the necessary keys, the web uses characters that do not comply with the rules of the Russian language.

• These are the correct quotes "", and these are computer quotes. "
• This is a dash - and this is a hyphen -
• In typography it is also customary not to break the preposition and the word to which it refers, even if the preposition appears at the end of the line. To make a correct transfer, it is enough to replace the space between the word and the preposition with an unbreakable space  

All these problems can be solved with the help of online printers , plug-ins and pre-installed extensions to the computer.

Advanced Typography Techniques

• Intervals
• Loading
• Smoothing

Feedback (guidance, click, scroll)

Blocks

The user-friendly interface responds to every action, be it mouseover or click. Non-standard clickable element in some cases, you can add:

• Hand cursor instead of cursor:pointer arrow (if you can't make a link)
• Add hover. At least just opacity: 0.8 .
• Add a role attribute with button or link values
• Remove random text selection ( user-select: none ). Suitable for dropdowns and other items on which you can click several times in a row.
• Add handler for pressing enter
• Provide focus

• Provide spinner if the state of the element depends on an asynchronous event.

  
  
  
  
  

Click Area

The larger and closer the object, the easier it is to click on it. There is even a mathematical rule that describes it. For example, in Google search results, the link is not only the page number, but also part of the logo. It saves from accidental blunders.

To increase the click area, you need to use padding instead of margin . Gray shows padding padding.

Do not put other elements on top of clickable elements, for example, a magnifying glass icon over an input path. In extreme cases, add the pointer-events icon or solve it in a more supported way (in the case of a magnifying glass, add it via background-image ).

Correct link format

If the link is a postal address, enter mailto: in the link. Then by clicking on it, an email client will immediately open. The same can be done for the phone with the prefix tel:

Scroll on iphone

By default, the horizontal scroll in the iPhone is steep and awkward. You can enable the usual inertia scroll with the -webkit-overflow-scrolling: touch property.

Inputs

Form tag

For the form to work in any browsers, even without js, you need to use the form tag for its intended purpose. The form can be improved for a very long time, up to sending data even offline .

Types

Different values ​​of the type attribute (email, number, password, etc.) enable the correct keyboard on the phones and help validate the data.

Autofocus

If the page is the main search element, you can add autofocus to it using the autofocus attribute. It will immediately be possible to enter text without first focusing.

Picture

picture and srcset

Recently, there are new opportunities for working with images . They avoid unnecessary downloads for responsive images. The phone will no longer load heavy graphics for the computer. Unfortunately, there are problems with support, but you still need to know about it.

Table

Adaptability

The table is not initially provided for the width of the phone screen. There are several options for changing the table for small screens.

• Decrease font size
• Wrap the table in a block and make it a horizontal scroll
• Turn over. Make the table instead of short and wide narrow and long
• Replace the table with multiple lists

Making the table comfortable is not easy. I advise you to read articles about the display of large tables and rearrangement .

Components

Proximity theory

Objects located close to each other are perceived as connected. If you put a heading in the middle of several articles, it will be difficult to figure out which of the texts the heading refers to. By the way, on Habré is just such a mistake. The heading of a paragraph should be closer to its paragraph, and not be equidistant from everyone. There are many other examples with errors in proximity theory .

Empty block

It happens that banner advertising does not come in a banner position, then there remains a large incomprehensible space. To remove it, just use the pseudo-class :empty :

 .banner:empty { display: none; } 

Almost, but not quite

The layout (in terms of design) of a pleasant site does not fall apart on the go. The elements are exactly aligned, the dimensions are well chosen. Look at the article “ Almost, but not quite ”, it will help to look at any site with a fresh look.

Part 2

Scalability

Maintainability

Some simple practices:

• Use less fixed sizes. This will make it possible to easily integrate some components into others.
• Use inherit and currentColor . They are supported in any browser and allow you to inherit styles.

• Do not use short spelling properties . For example, background: red changes not one, but 10 styles at once, including background-color , background-size , background-repeat and others.
• Do not use many third-party libraries and tricky preprocessor capabilities. They prevent other developers from quickly getting into the essence of the code.

Architecture

An important condition for code scaling is uniformity. An outside developer should penetrate the code as quickly as possible and continue to write it in the same style. There are many methodologies for names of selectors, including BEM .

A good example of uniformity is bootstrap. Even a developer unfamiliar with the project will easily continue to write code. He will not need to delve into, he probably already knows everything. It is important from the very beginning to decide on the style guide of the project and write in the same style.

Typical page

If the project is rather large, ask the designer to assemble all the main components into a separate data sheet. Pages can be assembled from ready-made elements as a designer. Such sample sheets can grow into entire guides and component libraries. This is a great approach for large companies. Examples:

• Yandex Component Library
• Contour Interface Guides

Performance

Selectors

The browser processes properties from right to left. The selector .section a div first finds all the div elements on the page, then all the links to a and only then determine which a are included in the .section element. The class selector is much more optimal, for example, .section__link . It is simpler, less specific and works a little faster. Do not worry that the class names can get very large, it does not affect anything .

The second problem with selectors is unused selectors . A selector to search for an unused item bypasses the entire tree and finds nothing. Time is wasted.

Animations

Heavy animations severely slow down the page. The best properties for animating are transform and opacity . They have less impact on performance.

There is a way to optimize complex calculations by transferring a part of complex calculations from the CPU to the graphics processor. Such hardware acceleration can be enabled by the transform: translate3d(0, 0, 0) property transform: translate3d(0, 0, 0) . It will create a separate layout layer with which the graphics processor will work. There is another similar approach - to warn the browser in advance about future changes to the element using will-change .

You should not abuse translate3d and the property will-change , most of the optimization the browser will do for you. Read also a detailed analysis of animations on the GPU .

Heavy properties

You should not use large radii, excessive resizing of images ( background-size ) and complex shadows. The browser will have to do a huge amount of recalculations. For example, Airbnb increased scrolling performance simply by removing the blur of shadows.

Download speed

Compress styles

Concatenate, minify and cache style files.

Critical styles

Critical CSS is the minimum set of blocking CSS required to render the top of a page. The rest of the CSS will be loaded asynchronously later. However, this practice has drawbacks:

• Critical styles can't be cached in browser
• It will not be possible to cache HTML files if pages are generated dynamically.

Prefetching

The browser can be warned about the use of resources on the page from another address. Then the browser converts the URL of these resources to IP in advance and will not waste time searching for DNS.

 <link rel="dns-prefetch" href="//example.com"> 

In addition, the browser can be warned about the files that are sure to be needed in the future. The browser by this time will download and save them to the cache.

 <link rel="prefetch" href="image.png"> 

There are several other prefetch techniques , but these features are not yet well supported by browsers and have many limitations.

Security

Target

A page opened through target = "_ blank" gets partial control over the page that opened it through the js property window.opener. This trick can be used to translate a user to a phishing page. To avoid vulnerabilities, add the attribute rel = "noopener noreferrer" to links with target = "_ blank".

Semantics

Layout

HTML5 native elements contain valid semantic attributes. It is important to typeset a table with <table> , a form with a form , a button with a <button> , etc. Do not forget to put the alt attribute in each picture.

ARIA and roles

The roles and attributes of ARIA help to use the site from a screen reader and other non-standard technologies. On the accessible site there should not be controls inaccessible from the keyboard. Each such element must have its own description. This description may be invisible and specified through the aria-label attribute.

Try to navigate the interface using the tab button, go to the site from an e-book or push-button phone (if you have one). Check that all controls are focused. Do not simply disable the outline property. For example, Yandex paints it in its corporate color.

The focusing order can be edited with the tabindex attribute. You can completely cancel the semantics of an element with the help of role="presentation" (for example, so that the table used for the layout is not perceived as a table with data). A large number of other recommendations can be read in this article about accessibility .

Print

Try printing your interface.

Micromarking

There are various dictionaries and syntax microdata. They help different robots work more easily with your page. Schema.org entities can be useful for search engines, and using Open Graph, you can customize the beautiful display of a link to your website in publications on social networks.