Всё началось с простой мысли: главная картинка на daglex.ru мне надоела, хотелось что-то своё, про то, что написано в тексте «о себе». За два вечера замена одной картинки превратилась в большую уборку: новая шапка, единый стиль, переделанная форма вопросов, порядок на сервере и, самое неожиданное, починенная почта, которая годами работала через раз.
Расскажу по порядку, что и зачем поменялось.
Новая шапка: от очевидного к вопросу
Раньше в шапке стояла фотография: красивая, но не про меня. И текст на ней читался не везде одинаково хорошо.
В тексте «о себе» я пишу, что мне интересно всё между очевидным и непонятным и что интересный вопрос лучше банального ответа. Это и стало идеей новой картинки. Слева ровная золотая линия с делениями, как у линейки, на фоне аккуратной сетки: это очевидное. Потом линия делает петлю, уходит в звёздное «непонятное» и становится вопросительным знаком. А точка под ним нарисована как диафрагма объектива, в честь фотографии.
Картинка сделана в формате SVG, поэтому остаётся чёткой на любом экране и весит всего 40 Кб вместо 355 Кб у старой фотографии. Композиция сдвинута вправо, чтобы линия не пересекала текст. На телефонах, где для неё нет места, показывается спокойный звёздный фон без вопросительного знака.
Единый стиль: золото вместо синего
Новая шапка задала тон: тёплый графит и золотая линия. А остальная страница жила в старой гамме с ярко-синими кнопками и ссылками, и они спорили с картинкой. Поэтому я прошёлся по всей главной:
- Кнопка «Подписаться» стала золотой, в цвет линии.
- Ссылки на белом фоне окрашены в тёмную охру. Названия заметок и теги при наведении тоже загораются охрой, а не сереют, как раньше.
- Заголовок «Мои жизненные принципы» стал светлее и наконец читается, а над каждым принципом появился короткий золотой штрих, как деление на линейке.
- Случайные цвета убраны. Одна разделительная линия, например, была тёмно-зелёной, единственной зелёной на всём сайте.
- Конвертик у «Задать мне вопрос» и стрелка у «Читать другие заметки» нарисованы заново в новых цветах.
Страница «Задать мне вопрос»
Форма для вопросов жила в совсем другом оформлении, потому что брала стили из темы блога. Теперь у неё та же шапка и меню, что и на главной, тёмный фон и та же линия с вопросительным знаком внизу. Для страницы вопросов лучшего символа не придумаешь.
Поля ввода при наборе загораются золотой рамкой, а неверный адрес почты подсвечивается красным. Заодно нашлась ошибка, которая жила там годами: если человек заполнял почту последней, кнопка «Отправить» так и оставалась серой. Исправлена и настройка масштаба для телефонов, так что теперь формой удобно пользоваться и с мобильного.
Картинка для соцсетей
Раньше, когда кто-то делился ссылкой на daglex.ru в Telegram или ВКонтакте, красивой карточки не появлялось: в коде стояла заглушка. Теперь там своя картинка в том же стиле, что и шапка.
Порядок на сервере
За годы на сервере накопилось много лишнего. Оформление главной лежало в папке с непонятным именем themes/newblog, хотя к блогу оно отношения не имело. Из шести файлов стилей работали два, а из 67 файлов всего реально использовались 16.
Теперь всё оформление главной лежит в одной папке site с понятными именами файлов и памяткой внутри. В корне сайта остались только страницы, служебные файлы и три папки: site, blog и world. Переезд сделан аккуратно: сначала копия, проверка и только потом удаление старого, так что сайт ни на минуту не ломался.
Главная стала быстрее
Список последних заметок на главной берётся из блога. Раньше для этого страница при каждом открытии делала 13 запросов к блогу и только потом начинала отображаться. Теперь готовый список сохраняется в файл и обновляется раз в 15 минут. А если блог вдруг не ответит, главная не упадёт, а покажет последний сохранённый список.
Почта, которая работала через раз
Самое неожиданное открытие случилось с формой вопросов. Письма с неё годами приходили через раз: то сразу, то с опозданием, то никак. Когда мы заглянули в скрипт отправки, выяснилось два факта.
Первый неприятный: через старую форму можно было рассылать спам от имени моего сервера кому угодно. Теперь адрес получателя задан внутри сервера и подменить его нельзя, всё написанное посетителем очищается, а для спам-роботов поставлена невидимая ловушка.
Второй объяснил пропажу писем. Сервер отправлял их «от daglex.ru», но нигде не было записано, что он на это имеет право. Для Яндекса и Gmail такое письмо выглядит как подделка, и они вполне законно его выбрасывали. Теперь форма отправляет письма через настоящий почтовый ящик в Яндекс 360, как обычная почтовая программа, и письма приходят сразу. А чтобы ответить человеку, достаточно нажать «Ответить».
Паспорт для домена: SPF, DKIM и DMARC
Оказалось, что у домена daglex.ru не было ни одной записи, подтверждающей подлинность писем. Теперь их три, и каждая делает своё:
- SPF — список доверенных курьеров: кто имеет право отправлять письма от daglex.ru.
- DKIM — цифровая печать на каждом письме: по ней получатель видит, что письмо настоящее и по дороге не менялось.
- DMARC — инструкция почтовикам, что делать с письмом, не прошедшим проверку.
Записи добавляются в DNS домена, а проверить их можно прямо из Терминала на Mac.
Яндекс 360 подтвердил, что подпись работает.
И финальная проверка на mail-tester.com: 10 из 10. Ещё накануне мои письма терялись, а теперь домен проходит все проверки подлинности.
Что в итоге:
Хотел поменять одну картинку, а в итоге сайт получил новую шапку и единый стиль, стал быстрее и аккуратнее внутри, а почта наконец работает как должна. Интересный вопрос и правда оказался лучше банального ответа: стоило спросить «а как тут всё устроено?», и нашлось много того, что давно просило внимания.
Следующий на очереди раздел «Мир»: хочу, чтобы он стал частью одной системы вместе с блогом. Но это уже другая история.