What is good: how we developed the criteria for assessing the quality of the layout of web projects

The importance of criteria in the learning process

Feedback collection

What is the result?

Basic criteria

1. Made HTML-markup of all pages and all elements on the pages.

Pupils must understand that the pages must be completely folded.

2. One style file for all pages (taking into account normalize.css it is possible two).

Since we do not consider automation, we have softened the criterion and allowed to connect normalize with a separate file.

3. Layout is displayed identically in the latest versions of Chrome, Opera, Firefox, Safari browsers, as well as in Internet Explorer 10+.

Yes, our choice is IE10 +. We tell pupils how to fight back from the layout for older versions.

4. The site should normally look at the minimum resolution for this layout:

• With a larger screen size, the layout should remain centered and not have a horizontal scroll.
• On screens that are smaller than the width of the layout, the layout should not change its structure.

Good	poorly

5. At the root of the document should be a folder css , img , js or similar. The main page is called index.html . There are no capital letters and spaces in the names and extensions of the files.

Good	poorly

6. Uniform writing and formatting of code in HTML, CSS and JavaScript.

We do not insist on choosing a particular coding style. The main thing is uniformity.

 <header class="page-header"> <nav class="main-menu"> <ul> <li class="active"> <a href="index.html"></a> </li> <li> <a href="contacts.html"></a> </li> </ul> </nav> <div class="login"> <a href="/login" class="login-button"></a> </div> </header> 

 <header class="page-header"> <nav class='mainMenu'> <ul><li class="active"> <a href="index.html"></a> </li> <li> <a href="contacts.html"></a> </li> </ul> </nav> <div class='logIn'> <a class="login_button" href="/login"></a> </div> </header> 

7. There are no blunders in the markup. For example:

• Links are made not by the <a> tag, but by other tags.
• Using line elements to create large (grid) blocks.
• Paragraphs should be paragraphs, not <br><br> .

This criterion is the most subjective, as there are many controversial, but acceptable options for marking elements. But there is also “absolute evil”, which you don’t want to admit to the code. We will welcome your examples of such typical errors.

8. You can not build a grid using tables and positioning.

Not using display: table , but using tables.

9. You can not use !important in CSS.

10. When filling with content like on the layout, the elements of each page should correspond to the layout:

• A difference of 5 pixels in height and 2 pixels in width is allowed.
• The absence of stylization of custom form elements is allowed.
• Differences in font mapping associated with anti-aliasing on different platforms are allowed.
• The correct fonts must be connected, and their sizes and thickness must correspond to the sizes in the layouts and TK.

Criteria for compliance with the layout made softer than the full "pixelperfect". What do you think is right?

11. The correct image format is selected:

• JPEG for photos.
• Everything else in PNG.

12. The document must be tested for validity .

Additional criteria

1. You can not use translit in class names, attributes, and so on.

 .login-button { ... } .container { ... } .footer { ... } 

 .knopka-vhoda { ... } .kontainer { ... } .podval { ... } 

2. You cannot use #id for styling.

3. You can not use the nesting of selectors for more than two.

4. Used by normalize.css .

5. You must explicitly specify an appropriate vertical-align for all blocks with display: inline-block .

6. It is necessary to specify alternative font options and family type at the end of the listing.

7. It is necessary to arrange CSS prefixes in the correct order.

8. It is necessary to explicitly prescribe the background color for a block that has a background image. The color should match the predominant color of the background image (until the image is loaded, the page looks like a layout).

If you do not prescribe the background colors, then without pictures, some of the text may become invisible.

But if you carefully set the background color of the blocks, then the lack of images is not terrible.

9. It is necessary that all states of elements from styleguide.psd be used.

Of course, not all designers make such style guides, but for educational layouts we prepared them so that students could get used to thinking about stylizing different states. Below is a fragment of a styled piece of one of the layouts.

10. It is necessary that when interacting with the elements (pointing, pressing), neither the element itself nor the blocks surrounding it would change their position.

Nothing should “jump” just like that.

11. It is necessary to use:

• Sprites for images or icon font.
• Minimize CSS code.
• Minimize javascript code.

We are talking about the simplest techniques for optimizing the layout and we want students to start using them.

12. It is necessary to specify the size of all images in the <img> tag.

13. Layout passes the test for overflow content. Layout does not break:

• When adding more text to the elements.
• When using pictures with unsuitable sizes.
• Text should not fall out of objects.
• Overflow of content blocks does not lead to a grid violation.

It is bad when the content drops out of the parent container and becomes invisible. For example, when white links in the menu fall on the white background of the page.

In this case, when adding items, the menu block should increase in height. It may be ugly, but menu items are always visible.

14. It is necessary to connect all the scripts immediately before </body> .

15. It is necessary to use the minimum possible number of HTML elements.

This is also a subjective point, and therefore advanced in the additional criteria. With it, we force students, for example, to use pseudo-elements to create decorative details.

16. It is necessary to use the Progressive Enhancement approach, for example:

• Buttons that cause pop-ups, by default, are links that lead to separate pages.
• Interactive map without JavaScript shows a static image with the map.

What can be improved: the opinions of professionals

A good and complete list, I advise all specialists to go over all its points before handing over the project. This will ensure that the project looks neatly outwardly, and also, importantly, will make the code itself convenient for reading and parsing.

I think the list for beginners is quite adequate, there are many important points in it. Of course, it can be supplemented.

I will not offer new criteria on the move, but, for example, I would transfer two criteria from additional to basic ones.

You must specify alternative font options and family type at the end of the listing.
Layout passes the test for content overflow. Layout does not break:

• When adding more text to the elements.
• When using pictures with unsuitable sizes.
• Text should not fall out of objects.
• Overflow of content blocks does not lead to a grid violation.

Especially the second. Often they don’t think about it at all.

The list is adequate, it is possible to check the quality of learning the material, and in order to assess general knowledge, their quality regardless of the course of the Academy, the criteria should be better formulated as follows:

• Layout should be as clear as possible for the typesetter, and for the developer, not to the detriment of standards and generally accepted page formatting rules;
• The same applies to the file structure for layouts, so that you can judge the contents of the folder by its name;
• When setting the parameters of adaptive layout, you need to keep in mind all possible screen sizes described in the requirements;
• It is necessary to treat with particular attention to all resources supplied to the release layout (scripts, styles, images - everything must be prepared for the web).

> Differences of 5 pixels in height and 2 pixels in width are allowed.
To specify such things in pixels means to provoke unhealthy meticulousness, which is not needed in the real world. Suffice to say "as close to the layout as possible."

> The document must be validated by validator.w3.org
I'd rather recommend validator.w3.org/nu - it focuses less on formal validity.

> The correct image format is selected: JPEG for photos, everything else in PNG
There is no "correct" format, there is only "suitable" and here it is possible to mention SVG.

> It is necessary to connect normalize.css to the layout with a separate file
normalize.css or reset.css , both approaches have the right to life.

> You must specify alternative font options and family type at the end of the listing
This is more than an additional criterion, I would transfer to the main ones.

> It is necessary to arrange the CSS prefixes in the correct order.
Such a requirement is confusing, there is no “correct” order for prefixes, there is one principle: the property without prefix a) should be b) should go last.

> Sprites for images or icon font
Too complicated and dubious requirement, especially about icon fonts - a very dubious technology. Sprites are not a layout, sprites are optimization and build, which you cannot do with your hands, just automate.

> It is necessary to use the Progressive Enhancement approach, for example
A form with a button, an interactive map - some not very intelligible and unnecessary particulars. It is better to formulate: the important functions of the site should work without JS, period. Well, the "progressive improvement."