Проверка web

Последнее обновление: 16 мая, 2020

Без категории

Перед проверкой необходимо очистить cookie и cache

  • Ссылки и кнопки на странице
    • Адреса всех ссылок заполнены
      • На странице не должно остаться ни одной ссылки с незаполненным href, или с адресом в виде решетки. Задача верстальщика — в т.ч. уточнить назначение каждой кнопки и обеспечить переход по клику к якорю или переход на другой сайт. Если адресс ссылки невозможно прописать — пропишите временный адрес (к примеру https://www.google.com/), чтобы в любой момент было легко найти все незаполненные ссылки и дозаполнить.
    • Исходящие ссылки открываются в новом окне
      • Проходя по исходящей ссылке, пользователь покидает сайт. Если ссылка открывается не в новом окне, а в существующем — повышается вероятность того, что он уйдет безвозвратно. Такое положение дел доставляет неудобства даже человеку, который хочет вернуться, а для того кто сомневается в выборе вашей компании/сайта и вовсе может стать поводом для отказа.
      • Итого, все исходящие ссылки на странице должны (1) сопровождаться target _blank и (2) быть рабочими (нужно перепроверить внимательно каждую ссылку).
    • Эффекты анимации
      • Каждая ссылка / кнопка должна иметь три состояния, отличающиеся визуально: обычное, при наведении мышью, при клике мышью (hover, :active и :focus). Внешний вид состояний запрашивается у дизайнера, при отсутствии возможности это сделать — выполняются на усмотрение верстальщика.
    • Для якорных ссылок
      • Корректность указания номеров блоков
      • Переход на нужный блок с учетом отступов
      • Контактные данные (телефон и мессенджеры) выполнены в виде соответствующих ссылок
    • Заголовки/подзаголовки на странице
      • 1 заголовок h1
        • Заголовок H1 обязан присутствовать на странице и должен быть один. Он должен быть крупнее обычного шрифта, содержать информацию относящуюся к сути страницы, в идеале — с ключевыми словосочетаниями.
      • До 20 подзаголовков Н2
        • Ключевые логические блоки страницы можно/нужно отделять подзаголовками. Не следует размещать на 1 странице более 20 шт подзаголовков Н2. На странице может быть 1 подзаголовок Н2, или несколько, или вообще не быть. Подзаголовок Н1 должен быть обязательно.
      • Подзаголовки Н3-Н5
        • Общее количество подзаголовков (Н1-Н5) на странице не должно превышать 100 шт. Даже количество больше 50 — не есть хорошо, но красный предел — 100 шт. Для различных регионов могут быть разные рекомендации о том, насколько глубокую вложенность делать заголовками. В рунете принято делать не глубокие структуры (Н1-Н3), при работе с сайтами на английском и немецком языках уместно делать структуры до Н5, и это будет нести значимый вклад в эффективность продвижения.
      • Проверка при масштабировании
        • Проверка отображения контента и изображений при масштабе 100%
        • Проверка отображения контента и изображений при масштабе 125%
          • 125% — масштаб, который установлен по умолчанию в ОС Windows на современных настольных ПК и ноутбуках с HD-экранами. При просмотре с таким масштабом могут не помещаться иконки изображений внутри оберток, в которых они находятся.
        • Проверка соответствия дизайна и верстки
          • Изображения
            • Размеры изображений, качество их обрезки. Все изображения, которые можно подать в svg-формате, нужно подать именно в нем, чтобы обеспечить высокое качество и корректное масштабирование.
          • Шрифты
            • Соответствии используемым в дизайне: размер шрифта, семейство шрифтов, расстояние между символами, междустрочный интервал.
          • Отступы, расстояния между элементами на странице
          • Присутствующие на странице элементы
            • Проверка наличия всех предусмотренных и отсутствия лишних элементов в дизайне.
          • Кроссбраузерность, адаптив
            • Кроссбраузерность
              • Кроссбраузерность должна проверяться в различных операционных системах, на различных устройствах. Проверка кроссбраузерности на эмуляторах не даёт необходимого эффекта. Рекомендуем проверить в: Firefox, Chrome, Opera, Safari, Edge.
            • Адаптивность
              • Адаптивность проверяется не только на стандартных (общепринятых) ширинах экранов, но и на всех промежуточных. Т.е. тянем диагональ «руками» и смотрим за трансформацией блоков. Даже на не используемых официально диагоналях всё должно выглядеть достойно. Самые популярные разрешения: 1024×600, 1024×768, 1152×864, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080
            • Работа на мобильных
              • Проверка должна выполняться в landscape- и portrait-режимах на Android и iOS (на смартфонах и планшетах, на используемых по умолчанию и популярных браузерах)
              • Удобство работы пальцем (размеры элементов должны быть достаточно большими)
              • Расстояние от рамок экрана: текст и управляющие элементы не только должны помещаться в рамках экрана (по ширине) но и не подходить вплотную к краю экрана.
              • Наличие адаптированного под мобильные устройства меню.
              • Установлен тег Viewport
            • Работа функционала на мобильном
              • Обеспечение удобства пользования без эффекта hover.
                • Если на пк мы можем двигать курсором, то движение по экрану мобильного не приносит нужного эффекта. Это нужно предусмотреть и обеспечить возможность просмотреть информацию путем клика (а не наведения) или другим образом адаптировать функционал.
              • Тест форм обратной связи
                • Обязательные для заполнения поля
                • Правильные input type
                  • Для input type email, url и tel должны быть указаны правильные параметры, т.к. на мобильных устройствах для различных полей ввода показываются разные клавиатуры.
                • Связанность Label и input/select
                  • Клик по Label должен активировать связанный элемент input/select. Наличие Label без связанных элементов — ошибка.
                • Защита от спама
                • Правильный адрес к обработчику
                • Правильная работа обработчика
                • Переход на страницу благодарности с указанием действительного статуса отправки сообщения
              • Тест на не эталонный контент
                • Поведение верстки при изменении объема контента
                • Отображение в блоках списков, заголовков
              • Наличие полей для метатегов
                • Title
                • Description
                • OpenGraf
                • Favicon
              • Наличие и правильность robots.txt
              • Наличие страницы благодарности
              • Наличие страницы 404
              • Использование микроразметки
                • Контактные данные
                  • Должны соответствовать контактам в Google My Business компании
                • Хлебные крошки
                  • Не должны содержать ссылки на текущую страницу
                • Изображения
                  • Лого в формате SVG
                  • Favicon
                    • Рекомендуем создать favicon в размерах 32×32, 48×48 и 64×6, а также apple-touch-icon
                    • Прозрачный фон (если в данном случае не требуется иное).
                  • Базовая проверка верстки
                    • Кодировка
                      • Во всех файлах установлена одинаковая кодировка: UTF-8.
                    • DOCTYPE: HTML5
                    • Отсутствие длинных каскадов (независимость css)
                      • Минимальное количество перечеркнутых правил при просмотре через инспектор.
                    • Корректная работа с выключенным JS
                      • Сайт должен сохранять привлекательный вид, основной функционал должен работать. Полезно не только для случаев, когда JavaScript, но и при медленном интернете или «слабых» устройствах.
                    • Правила хорошего тона
                      • Копирайт в подвале сайта
                        • С содержанием названия (торговой марки) и типа предприятия
                        • С указанием периода работы предприятия
                      • Лого в шапке – ссылка
                        • На всех страницах кроме главной клик по лого должен переводить на Главную страницу сайта.
                      • Структура каталогов
                        • Отдельные папки для css, js, графических элементов дизайна.
                        • Изображения для контента лучше хранить в отдельной папке.
                      • Подключение css в head
                      • Подключение js в конце html
                      • Оптимизация графики
                      • Отдавать браузеру минимизированные css, js, html
                      • Отсутствие закомментированных через html блоков кода, временно закомментированный, потенциально нужный код – комментируем на стороне сервера, к примеру через php
                    • Типографика
                      • Использование woff для web fonts
                      • Правильные кегли для одинаковых заголовков подзаголовков
                      • Удаление неотображаемых символов, лишних пробелов
                    • Цвета
                      • Цветовое единство всех заданных элементов страницы.
                      • Одинаковый шрифт для шрифта (если иное не предусмотрено дизайном).
                      • Единство шрифта, цвета обводки и т.д. на различных страницах.
                      • Скругления и тени одинаковые на различных элементах.

 

 

Чек-лист
по проверке frontend

Отметьте те пункты, которые считаете выполненными в Вашем проекте. Отправьте заявку, чтобы с нашей помощью получить 100% эффективности Вашего проекта. Перед проверкой необходимо очистить cookie и cache.

Соответствиед дизайна и верстки

Присутствующие на странице элементы

Проверка наличия всех предусмотренных и отсутствия лишних элементов в дизайне. В исключительных случаях отклонения от дизайна могут быть утверждены, если они делают сайт лучше.

Отступы, расстояния между элементами на странице

Отступы и расстояния должны соответствовать дизайну или корректно трансформироваться на любых устройствах и разрешениях, в т.ч. после перезагрузки страницы.

Шрифты

Соответствии используемым в дизайне: размер шрифта, семейство шрифтов, расстояние между символами, междустрочный интервал.

Изображения

Размеры изображений, качество их обрезки. Все изображения, которые можно подать в svg-формате, нужно подать именно в нем, чтобы обеспечить высокое качество и корректное масштабирование.

Цветовое единство всех заданных элементов всех страниц сайта.

Favicon должен быть в размерах 32×32, 48×48 и 64×64, а также apple-touch-icon. Фон лучше сделать прозрачным (если дизайном не предусмотрено иное).

Цвета

Размеры изображений, качество их обрезки. Все изображения, которые можно подать в svg-формате, нужно подать именно в нем, чтобы обеспечить высокое качество и корректное масштабирование.

Ссылки и кнопки на странице

Адреса всех ссылок заполнены

На странице не должно остаться ни одной ссылки с незаполненным href, или с адресом в виде решетки. Задача верстальщика — в т.ч. уточнить назначение каждой кнопки и обеспечить переход по клику к якорю или переход на другой сайт. Если адрес ссылки невозможно прописать — пропишите временный адрес (к примеру https://www.google.com/), чтобы в любой момент было легко найти все незаполненные ссылки и заполнить.

Исходящие ссылки открываются в новом окне

Проходя по исходящей ссылке, пользователь покидает сайт. Если ссылка открывается не в новом окне, а в существующем — повышается вероятность того, что он уйдет безвозвратно. Такое положение дел доставляет неудобства даже человеку, который хочет вернуться, а для того, кто сомневается в выборе вашей компании/сайта и вовсе может стать поводом для отказа.

Итого, все исходящие ссылки на странице должны (1) сопровождаться target _blank и (2) быть рабочими (нужно перепроверить внимательно каждую ссылку).

Атрибут rel=»nofollow» для внешних ссылок

Атрибут rel=»nofollow» «говорит» поисковым ботам о том, что им не следует переходить по ссылке для индексации контента.

Эффекты анимации

Каждая ссылка / кнопка должна иметь три состояния, отличающиеся визуально: обычное, при наведении мышью, при клике мышью (hover, :active и :focus). Внешний вид состояний запрашивается у дизайнера, при отсутствии возможности это сделать — выполняются на усмотрение верстальщика.

Для якорных ссылок

Названия блоков должны быть заполнены корректно, переход на новый блок производится с учетом отступов, так чтобы плавающее меню не закрыло заголовок блока и не были доставлены другие возможные неудобства.

Телефоны, мессенджеры, контакты

Контактные данные, которые принято делать ссылками – выполняются ссылками. Обязательна проверка работы ссылок перед отправкой верстки на сдачу. При отсутствии части данных допустимо установить тестовую информацию (к примеру, контакты нашей компании) и проверить работу ссылок.

Заголовки и подзаголовки на странице

1 заголовок h1

Заголовок H1 обязан присутствовать на странице и должен быть один. Он должен быть крупнее обычного шрифта, содержать информацию, относящуюся к сути страницы, в идеале — с ключевыми словосочетаниями.

До 20 подзаголовков Н2

Ключевые логические блоки страницы можно/нужно отделять подзаголовками. Не следует размещать на 1 странице более 20 шт подзаголовков Н2. На странице может быть 1 подзаголовок Н2, или несколько, или вообще не быть. Подзаголовок Н1 должен быть обязательно.

Подзаголовки Н3-Н5

Общее количество подзаголовков (Н1-Н5) на странице не должно превышать 100 шт. Даже количество больше 50 — не есть хорошо, но красный предел — 100 шт. Для различных регионов могут быть разные рекомендации о том, насколько глубокую вложенность делать заголовками. В рунете принято делать не глубокие структуры (Н1-Н3), при работе с сайтами на английском и немецком языках уместно делать структуры до Н5, и это будет нести значимый вклад в эффективность продвижения.

Проверка при масштабировании

Отображение контента и изображений при масштабе 100%

При проверке важно помнить о различной высоте/ширине экранов, а также требованиям верстки под Retina.

Отображение контента и изображений при масштабе 125%

125% — масштаб, который установлен по умолчанию в ОС Windows на современных настольных ПК и ноутбуках с HD-экранами. При просмотре с таким масштабом могут не помещаться иконки изображений внутри оберток, в которых они находятся.

Кроссбраузерность, адаптив

Кроссбраузерность

Кроссбраузерность должна проверяться в различных операционных системах, на различных устройствах. Проверка кроссбраузерности на эмуляторах не даёт необходимого эффекта. Рекомендуем проверить в: Firefox, Chrome, Opera, Safari, Edge.

Адаптивность

Адаптивность проверяется не только на стандартных (общепринятых) ширинах экранов, но и на всех промежуточных. Т.е. тянем диагональ «руками» и смотрим за трансформацией блоков. Даже на не используемых официально диагоналях всё должно выглядеть достойно. Самые популярные разрешения: 1024×600, 1024×768, 1152×864, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080. Нельзя игнорировать узкие варианты вроде 1920х700 (появляющиеся, к примеру, на стандартном ноутбуке в Chrome, приналичии закрепленной панели инструментов вверху и панели с информацией о скачанных файлах внизу).

Работа на мобильных

Проверка должна выполняться в landscape- и portrait-режимах на Android и iOS (на смартфонах и планшетах, на используемых по умолчанию и популярных браузерах).

Удобство работы пальцем (размеры элементов должны быть достаточно большими)

Расстояние от рамок экрана: текст и управляющие элементы не только должны помещаться в рамках экрана (по ширине) но и не подходить вплотную к краю экрана.

Наличие адаптированного под мобильные устройства меню.

Установлен тег Viewport.

-webkit-text-size-adjust: none

Вебкит браузеры могут изменять размер шрифта в блоках. блокируем это через -webkit-text-size-adjust: none.

ширина контента 100%

ширина контента 100% при viewport меньше дектоп разрешения страницы

Обеспечение удобства пользования без эффекта hover

Если на пк мы можем двигать курсором, то движение по экрану мобильного не приносит нужного эффекта. Это нужно предусмотреть и обеспечить возможность просмотреть информацию путем клика (а не наведения) или другим образом адаптировать функционал.

Формы обратной связи

Обязательные для заполнения поля

Указываем через HTML-5.

Правильные input type

Для input type email, url и tel должны быть указаны правильные параметры, т.к. на мобильных устройствах для различных полей ввода показываются разные клавиатуры.

Связанность Label и input/select

Клик по Label должен активировать связанный элемент input/select. Наличие Label без связанных элементов — ошибка.

Защита от спама

Устанавливается наше авторское решение.

Обработчик

Обработчик должен размещаться отдельно от страницы Благодарности. Во всех формах проверяется ссылка на обработчик, в самом обработчике — корректность его работы.

Переход на страницу Благодарности

Переход на страницу благодарности должен осуществляться с проверкой и указанием действительного статуса отправки сообщения.

Тест не эталонным контентом

Вид сайта при изменении объема контента

При увеличении объема контента больше или меньше указанного в дизайне должен сохраняться привлекательный внешний вид страницы.

Отображение списков и заголовков

Должна быть обеспечена возможность в любой блок контента добавить список или подзаголовок, даже если они не предусмотрены в дизайне.

Базовая проверка верстки

Кодировка

Во всех файлах установлена одинаковая кодировка: UTF-8.

DOCTYPE: HTML5

Отсутствие длинных каскадов (независимость css)

Минимальное количество перечеркнутых правил при просмотре через инспектор.

Корректная работа с выключенным JS

Сайт должен сохранять привлекательный вид, основной функционал должен работать. Полезно не только для случаев, когда JavaScript отключен, но и при медленном интернете или «слабых» устройствах.

Поля метатегов

Title, Description, OpenGraf, Favicon

meta name=»robots» content=»noindex, nofollow»

для служебных страниц типа 404, у нас ремонт и прочих

Использование микроразметки

Контактные данные

Должны соответствовать контактам в Google My Business компании

Хлебные крошки

Не должны содержать ссылки на текущую страницу

Правила хорошего тона

Копирайт в подвале сайта

С содержанием названия (торговой марки) и типа предприятия. С указанием периода работы предприятия.

Единая концепция box-sizing border-box

Лого в шапке/подвале – ссылка

На всех страницах кроме главной клик по лого должен переводить на Главную страницу сайта.

Структура каталогов

Отдельные папки для css, js, графических элементов дизайна. Изображения для контента лучше хранить в отдельной папке.

Комментирование неотображаемых блоков

Отсутствие закомментированных через html блоков кода, временно закомментированный, потенциально нужный код – комментируем на стороне сервера, к примеру через php.

Графика

Все изображения оптимизированы

Документы Система Вакансии