Архив leokrokholev.com · проверка №3

Восемь готовых страниц: проверка перед тем, как собирать остальные

Инструкция рассчитана на человека, который видит проект впервые. Читайте подряд: сначала вводная часть, потом шаги. Каждый шаг говорит, что нажать и что должно получиться.

О чём проект — в двух абзацах

Есть старый сайт-портфолио дизайнера, сделанный лет десять назад в программе Adobe Muse. Он живой и работает, но внутри у него тяжёлый устаревший код. Мы делаем точную копию: снаружи всё должно выглядеть и вести себя ровно как раньше, а внутри — чистый современный код без старого хлама.

Всего на сайте 93 страницы. Готовы и выложены восемь — их и проверяем. Если восемь приняты, дальше тем же способом собираются остальные 85. Поэтому важно поймать общие огрехи сейчас: то, что не так на восьми, будет не так и на всех.

Три слова, которые дальше встречаются постоянно

Оригинал: Старый сайт как есть, на домене archive.leokrokholev.com. Эталон. Его мы не трогали.
Копия: Наша новая сборка, на домене leokrokholev-copy.pages.dev. То, что проверяем.
Раскладка: Расположение блоков на странице: где картинка, где текст, какие отступы. Именно её мы обязаны повторить.

Как проверять и как отвечать

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

Чинить и разбираться не нужно. Ваше дело — описать, что видите. «Не смог проверить» — нормальный ответ, он полезнее пропуска.

Если что-то не так — пишите, где именно: название страницы и место на ней («на projects, третья плитка сверху справа»). Без этого найти проблему тяжело.

Про буквы. Шрифт на копии другой — и это ожидаемо. У оригинала шрифт вообще не загружается: он был платный, аренда кончилась в 2018 году. Оригинал показывает случайный системный шрифт, копия — выбранный взамен Montserrat. Поэтому сравнивайте расположение блоков, а не начертание букв.

Это уже известно — проверять не нужно

Готовы только 8 страниц из 93. Пункты меню BLOG и CONTACT, а также плитки работ на главной ведут на страницы, которых пока нет, — откроется страница «404, ups, this page not found». Это правильное поведение, а не поломка.
Страница CONTACT и её форма. Не собрана. В оригинале форма всё равно не работает — сервер, который принимал письма, давно выключен.
На телефоне сайт не резиновый. Текст не подстраивается под ширину экрана, страница показывается уменьшенной целиком. Это следующая наша задача, и раздел 5 как раз про неё — там нужна ваша оценка, а не сообщение о самом факте.
Если сузить окно браузера на компьютере — раскладка разъезжается: меню наползает само на себя, картинки наезжают друг на друга. Так же ведёт себя и оригинал, вплоть до пикселя — мы это измерили. Причина: у старого сайта всего четыре готовых макета фиксированной ширины (320, 360, 950 и 1200 точек), и в окне промежуточной ширины ближайший из них просто не помещается. На настоящем телефоне этого не происходит: там срабатывает подбор макета под экран. Проверять сужение окна не нужно — кроме одного случая: если страница станет полностью пустой, вот об этом сообщите обязательно.
Страница Refuge почти пустая — так и в оригинале. Шапка с меню, большое пустое серое поле, внизу иконки соцсетей и копирайт. Никаких картинок проекта на ней нет и никогда не было: в архиве это незаполненная заготовка. Мы проверили — на оригинале ровно то же самое, вплоть до пикселя. Она включена в проверку именно как пустая: важно, что шапка и подвал стоят на своих местах.
Пункты меню не подсвечиваются под курсором — так и в оригинале.
Свайп пальцем по большой картинке не листает её — так и в оригинале.

Все адреса, которые понадобятся

Слева — копия (проверяем), справа — тот же адрес на оригинале (эталон). Открывайте в двух вкладках рядом.

Страница	Копия	Оригинал
Главная	copy /	archive /index.html
Projects	copy /projects	archive /projects.html
Logo	copy /logo	archive /logo.html
Coca-Cola	copy /cocacola	archive /cocacola.html
About	copy /about	archive /about.html
After Effects блоговая	copy /after-effects	archive /after-effects.html
Refuge	copy /refuge	archive /refuge.html
404 любой неверный адрес	copy /no-such-page	archive /404.html