Проект - простой сайт-одностраничник (лендинг).

Проект разрабатывался по техническому заданию и макету дизайна, но исполнителю критически не хватало базовых скиллов и бодрости, чтобы продолжать проект дальше. Мы составили список ошибок, который хотели бы исправить в ближайшее время. Если сработаемся - будет необходима постоянная поддержка проекта (уже сформирован список задач на новую версию). Также есть ряд других проектов по вёрстке и фронтенду.

С чем необходимо иметь опыт:

Адаптивный HTML и CSS, БЭМ, метод “ленивой” загрузки, PageSpeed. 

Необходима готовность выполнить задание оперативно - за сегодня или максимум - завтра.

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

Тестирование должно происходить либо на вашем сервере, либо на нашем (но тогда необходимо заливать проект на github)

Для старта работ необходимо

1. Изучить текущую версию проекта по ссылке https://systems.ingello.com,

2. Изучить Макеты в фигме: https://www.figma.com/file/QMmyFTYwtiFXFTelcuRw0a/INGELLO-Copy?node-id=0%3A1

3. Изучить список неисправностей (30 пунктов ниже) и ознакомиться с ТЗ. ТЗ будет нужно только для ознакомления - чтобы не сломать что-то, что уже работало. (Если найдёте другие баги или недоработки - сообщайте и добавляйте к стоимости работ.) https://docs.google.com/document/d/1D9sBKI9NC1Lb-8xY_LuydR6MX-5KnaF2KQPZZGWwFp8/edit?usp=sharing 

4. Написать цену и сроки, задать доп. вопросы.

5. Созвониться и пройтись по списку задач, обсудить вопросы.

Общие вещи для всех адаптивов:

1. Важно чтобы ленивая загрузка (lazy load) везде работала по стандартному принципу. Нигде не должно быть пустых мест или полу-загруженных картинок. Изначально должна супер-быстро загружаться картинка-миниатюра (очень низкого качества), а потом подгружаться картинка высокого качества. На данный момент это работает не везде. Например, слайдеры проектов могут без мини-версии подгружать основную картинку, из-за чего можно увидеть, например, половину картинки или просто пустоту. Далее будет несколько детальных примеров в списке ошибок с отметкой “(Лейзилоад)”.

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

3. Зеленая зона пейдж спид инсайтс (соблюдать рекомендации)

4. Добавить анимацию:
   -анимация на слайдерах стрелочки (мигание)
   -анимация при скролле страниц
   -анимация при прокручивании слайдера

5. Верстка - Блок Элемент Модификатор (БЭМ)

6. Адаптивная верстка (большой монитор, обычный монитор, планшет, мобильная.)

7. Добавить мета-теги для микроразметки ( картинок, видео и отзывов, вопросов и ответов
   смотри примеры тут: https://www.iseo.ru/press/blog/mikrorazmetka_dlya_raznykh_tipov_saytov/)
    и “гугл-вопросы” и SEO (мета тайтл, мета дискрипшн, и т.д)

Десктопная версия (ноутбучная и для большого монитора)

1. Когда переключаю слайды нажимая на картинки - состояние пагинации пропадает (все точки не активны). Последняя точка должна быть чуть меньше предыдущей, если она не последняя (обсудить). А переключаться они должны с такой же анимацией, как при листании слайдера стрелочками. 1.1. Также при переключении слайдера иногда зависают две активных точки вместо одной. Для этого нужно просто переклацывать слайды один за другим и ошибка проявится. 

2. (Лейзилоад) Пропадает слайд на время и не воспроизводится видео при клике на него. Нужно инициировать запуск видео и картинку убирать только при его загрузке, чтобы не появлялось пустоты, как на скрине ниже.

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

4. Нужно сделать по макету (добавить отступы)

Планшетная версия (тестить на планшете или эмуляторе, консоль браузера не подходит)

5. Якорные ссылки не работают (по крайней мере в планшетной версии)

6. Планшетная версия не выглядит по дизайну. Шрифты и иконки все меньше. Блоки не по макету расположены. Необходимо сверить с дизайном всё - отступы, размеры, расстояния.

7. Планшетная версия периодически недогружается. Иногда у слайдеров не показывает стрелочки и точки. А иногда показывает. 

8. В планшетной версии один блок отзывов загружается коряво. Через какое то время становится нормальным, но это может быть минут 5 - долгое время. Опять же с лейзилоад такого быть не должно. Ну и по размеру они разные, один выше… Тестировалось на эмуляторе айпада. 768 х 1024

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

Для примера. Это дизайн. 

Это - вёрстка. И такая же разница на всех кнопках и иконках. В хедере - тоже.  

10. Этот блок не такой как в дизайне (см. дизайн планшета).

Моб версия (тестить нужно именно на мобильном)

11. После загрузки сайта, если кликнуть на главный экран - он прыгнет вверх (возможно, связано с пунктом 5 про якорные ссылки).

12. Цифра 10 в блоке о нас наезжает на картинку, которая над ней. Согласно макету должен быть отступ. 

13. Пропадает картинка при клике на видео секунд на 5-10. (Это уже писал, но на всякий случай еще раз пишу, чтобы обратили внимание).

14. В слайдере этапов первый слайд немного больше другого, что создаёт эффект ступеньки при перелистывании. Слайды должны быть одинаковые. 

15. (Лейзилоад) В слайдерах этапов не работает лейзилоад. Мини-картинки в слайдере (заглушки) должны загружаться ДО того, как мы до них долистали. Они должны загружаться сразу как мы доскролили до слайдера, а прогружаются уже качественные картинки. То есть лейзилоад не работает. (это кассается всех адаптивных версий). В том и фишка лейзилоад, что всегда есть и=минифицированная заглушка на несколько килобайт, даже если основная картинка еще не загрузилась - должна показываться она, а она загружается очень быстро.

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

17. Лишняя линия на картинке сверху (в макетах этого нет, возможно нужно скачать заново картинку)

18. При загрузке моб версии иногда (если в ссылке есть хештег на пункт меню), при старте пролистывания (или если кликнуть по экрану), экран сразу сам скролится к видео, как будто мы по ссылке меню нажали. А должно сразу скроллится к этому блоку, без старта пролистывания. (Этот баг скорее всего связан с пунктом 11. При необходимости предоставим видео.) 

19. Параллакс дёргается на моб версии. Немного скролим блок и видим, как его дёргает. При необходимости предоставим видео. 

20. Микроразметка в Гугле не отобразилась. Блок с сайтом в гугле должен иметь ссылки из меню. Также нужно проверить микроразметку вопрос-ответов для гугла - верно ли она сделана. Дескрипшен в гугле некорректен - склеил слова без пробела.

21. Нужно добавить счётчики (код предоставим)

22. Нужно поправить блоки под данный макет из фигмы в моб. версии

23. Ответы на другие вопросы смотрите здесь - убрать этот текст из всех версий. 

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

25. В моб версии кнопку из верхнего правого угла перенести в нижний правый (обсудить размер и отступы)