“Layout checklist”: how to save yourself from edits and please the customer

What are we checking? First of all, it is the appearance and performance of the site. The site should look like the layout from which it was designed, look good on different screen widths. All interactive elements should work, there should be no errors in the console. Website performance must comply with the terms of reference.

Then we check more specific things: code quality, download speed. The site must be validated, designed in accordance with modern requirements: semantics, accessibility, modularity of the code.

The appearance and performance of the site

1. The integrity of the layout, compliance with the technical specifications. All pages that are in the layout and all hidden layers, modal windows, forms should be laid out.
2. Externally, the site looks like a layout. All pictures are present. The dimensions of the elements and blocks correspond to the layout. If this was discussed with the customer, then the site should correspond to the layout with an accuracy of several pixels.
3. The necessary fonts are connected. The sizes, thickness and font styles correspond to the layout. The correct line spacing is also indicated.
4. All interactive elements work in accordance with the terms of reference: links lead where necessary, modal windows pop up, the form is submitted. Of course, in the event that it was your job, not a programmer. Otherwise, make sure that the modals have the styles of the class responsible for its appearance, and the form has the method and action attributes.
5. Interactive elements have hover, click, and selection states (: hover,: active, and: focus). All links except menu items should have a reaction to: visited. If the states are spelled out in a layout or style guide, they must be in accordance with the designer’s intention. If they were not provided for in the design, the conditions remain at the discretion of the layout designer. When interacting with interactive elements, neither the element itself nor the blocks surrounding it change their position, if this was not provided for in the technical task.
6. Cross-browser compatibility. The site should look the same and work the same in different browsers. In which exactly – it is usually discussed in the terms of reference. Sometimes the customer requires support for older versions of IE, sometimes it does not require IE and Edge at all. But the usual set: the latest versions of Google Chrome, Mozilla Firefox, Opera, Safari, Microsoft Edge, Internet Explorer.
7. Adaptability of layout. The site should look normal on a wide variety of screen widths: from the smallest mobile to a widescreen desktop. The appearance of the site with such different sizes can vary greatly. The designer displays these differences in the layout. The layout is designed to make the site exactly match the design at certain intervals of screen sizes. And it didn’t fall apart at any screen width.

Code quality

Now let’s check those details that are not visible with the naked eye.

1. Validity. Layout must pass validator validation (https://validator.w3.org/) The validator should not show critical errors, but warnings are acceptable.
2. The semantics of layout. The site should be designed using special semantic tags, taking into account the HTML5 specification. So the structure of the site looks more logical. Also, the use of semantic layout improves site indexing by search engines.
3. Availability. Your site should be designed in accordance with modern accessibility requirements. In addition to moral bonuses, the implementation of this paragraph will also give you a plus to indexing by search engines. For accessibility, it is necessary to use semantic tags, structure markup using headers, prescribe the alt attribute for captions to pictures, it should be possible to focus on interactive elements and form elements when moving from the keyboard.
4. Uniformity and accuracy of the code. The code must be written or formatted so that it is easy to read and understand. Perhaps your project will someday be developed by another developer. He must write so that it is easy for him to understand the code. The structure of the project is a matter of taste and habit. But it’s good practice to give clear names to folders and files. It’s also good practice to leave comments in html, css and javascript files with instructions for what this or that piece of code is responsible for. Also, commented out and unused pieces of code, extra files, old versions of files should not remain in the layout.
5. The site should work correctly when adding text content. Layout must be reliable. Even if you are not building an online store or blog, the site owner may need to change the content. In this case, the layout should not move out or fall apart. When adding text content, the look and layout of the blocks should remain similar to how it was drawn in the layout.
6. The basic health of the site should be maintained when javascript is turned off. The main functionality of the site should be available with javascript disabled. This does not apply to the decoration of the site: effects and animations. But all pages should be accessible, and forms can be accessed without pop-ups.

Page Speed ​​Optimization

Check in the developer tools how many seconds the site is loading. Ideally, the download speed should be 3-4 seconds.

Make sure that:

• css scripts are connected in, and javascript – at the end of the html file, before the closing tag
• The correct format is selected for the images and they are compressed. If there are a lot of images, and they should be in good quality, it is advisable to use the LazyLoad library to upload them.
• css and javascript files, if there were several during development, are combined into a file and compressed. If javascript is not used on every page, then you do not need to connect it to these pages.

Even smaller checks

Small but necessary details that should be provided in order to make the site comfortable to use.

1. IN DOCTYPE: HTML5 and UTF-8 encoding are registered.
2. The company logo must be in SVG format and as a link.
3. Images should be scaled depending on the size of the window (max-width: 100%; height: auto;).
4. The phone is marked up with a link with the tel attribute.
5. All external links should open in a new window.
6. In forms, label and input / select / checkbox must be related. By clicking on the description of the form field, the cursor should become inside the input field. The correct types for inputs should also be specified: type = “email / url / tel”. When working with the form from the phone, depending on the type of input, a different keyboard should be displayed: regular or numeric.
7. Form validation should be provided: when trying to send a blank or incorrectly completed form, notifications should appear about the need to fill in the fields.

You can learn more about layouts at our six-month course “Profession: Programmer” Find out the details!