Первым делом хочу выразить большое спасибо другу - талантливому веб-дизайнеру Ване (Иван Рыбкин), за предложенную им концепцию дизайна.
Изначально предложенная им концепция главной страницы с PSD-исходником (Adobe Photoshop):
Используемые шрифты:
- Circe Bold - для заголовков;
- Circe Regular - для остального текста.
Самое забавное в этом моем опыте, то что я привык обычно верстать "по месту" и "по факту" - без прототипов.
Размеры и пропорции фактические и в прототипе
Первое с чем столкнулся, то что пиксели в фотошопе не равны веб пикселям. Пришлось конвертировать в относительные:
Коэффициент пропорции для преобразования: 0.75:
- 0.459cm=17.34px =>13px =100%
- 0.529cm=20px =>15px =115%
- 0.564cm=21.31px =>16px =123%
- 0.635cm=24px =>18px =138%
- 0.706cm=26.68px =>20px =153%
- cm=32px =>24px =184%
- 0.917cm=34.65px =>26px =200%
- 1.023cm=38.66px =>29px =223%
- 1.27cm=48px =>36px =276%
- 1.834cm=69.31px =>52px =400%
- 1.976cm=74.68px =>56px =430%
Левая колонка: размер CSS из PhotoShop. Правая трансформация в пиксели.
К примеру, в макете по задумке веб-дизайнера шрифт в шапке равен 13 px, а в реальности в PSD файле 0.459cm=17.34px.
Ширину блоков высчитывал в процентах относительно общей ширины макета - чтобы получить адаптивную верстку.
Вместо float перешел на flex
Раньше все сайты я верстал с помощью плавающих блоков.
В этот раз я полностью изменил подход и по рекомендациям друзей-верстальщиков использовал флексы.
HTML5 + CSS3 + JQuery. Никаких Bootstrap и других верстальных новшеств я не применял.
Адаптивная версия
Использовал связку с помощью @media запросов + JQuery зависимости от ширины экрана.
К примеру, раньше у меня было много разных шаблонов с разными рекламными блоками РСЯ.
Сейчас же для мобильной версии в 1-2 экране показывается рекламный блок, и 1 фиксированный блок при прокрутке страницы (как на SEONews).
По рекомендациям друга надо верстать под экраны следующей размерности: 320, 768, 1366 и 1920 px.
А вот какой колхоз получился в реальности:
- > 1024px - в 2 столбца.
- < 1024px - Всё в один столбец.
- < 720px - происходят основные трансформации под планшетов и мобилок.
- < 420px - небольшие корректировки на мобильном устройстве.
Почему так? Наследие от старого дизайна...
Включил короткий кеш для CSS
В файле htaccess настроил кеш для конкретного файла стилей с помощью такого кода:
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 60 seconds"
...
<Files "/css/new.css">
ExpiresDefault "access plus 360 seconds"
Header set Cache-Control "max-age=360, private, must-revalidate"
</Files>
</IfModule>Таким образом кеш создается на 360 секунд для этого файла. Т.к. правлю стиле каждый день по нескольку раз.
Объединение шаблонов
Блог создан на моей любимой CMS - ModX Revo. У меня было разделение по типам и направлениям, коду РСЯ и т.п.
Сейчас упростил количество шаблонов - объединил.
Кстати при многократном редактировании шаблонов рекомендую ставить обязательно плагин VersionX - по сути контроль версий кода.
Создание тестового поддомена
Раньше я правил на текстовых шаблонах на боевом сайте, сейчас ушел от такой практики.
Рекомендуется создавать поддомен, к примеру dev.soltyk.ru и проводить эксперименты сначала на подобном сайте. И только после удачных тестов кода переносить на боевой сайт.
Внедрение новых комментариев
На данном сайте я использовал комментарии от ВКонтакте и FaceBook, также были такие системы (плагины ModX) в тестировании как: MODXTalks, Tickets, но к сожалению, они не прижились...
На других SEO-блогах посмотрел, что многие используют бесплатную систему коментирования Disqus.
Полностью переделал шапку
Постарался сделать как было в прототипе, но немного отошел от истины и сымпровизировал, к примеру форму поиска сделал по подобию как на сайте Ашманова.
Добавил адаптивности в шапке, с гамбургерами, анимацией и раскрытием списков. Но есть косяки, которые буду устранять во второй волне.
Быстрый поиск
Внедрил быстрый поиск через плагин SimpleSearch - пришлось немного повозиться с корректной работой AJAX.
В целом нужно еще допиливать.
Корректировки по дизайну
Друг составил список правок и замечаний, часть которых я внедрил.
Т.к. я нацелен не на фиксированную ширину и высоту, высчитывал в относительных пропорция на сколько % необходимо увеличить отступы, смещения и т.п.
К примеру, на мобильном устройстве и ПК с разрешением 2500px опускание на те же 54px будет иметь разный эффект. Если я неправ, поправьте меня.
Самодеятельность
Т.к. очень хотелось побыстрее убить старый тихий ужас и заменить бетой. Не дожидаясь новых рекомендаций внедрил на свое усмотрение стилевое оформление:
- пагинации;
- хлебных крошек;
- рекомендационных блоков;
- списков и параграфов;
- иконки просмотра...
Изменение структуры
Поменял структуру некоторых разделов, поменял URL, скрыл бестолковые без трафика статьи.
CSS: управляем насыщенностью с помощью Filter saturate
Интересный фильтр, который я нашел, может повысить насыщенность цветов.
Выкладываю код:
img {
filter: saturate(165%);
-webkit-filter: saturate(165%);
}Конечно не совсем корректно применять сразу для всех фото такой фильтр, но применив его для аватарки в блоге, захотелось внедрить для всех фото и посмотреть в будущем на поведенческие...
К примеру, фото до:
И после добавления кода:
Скоро будет 2 этап новой версии!
Мне хотелось побыстрее убрать то старое убожество, которое было на блоге.
Работы и правок еще предстоит очень много. К примеру последние рекомендации:
Сегодняшний день стал еще одним важным этапом в жизни этого блога.
Следующие страницы вас также могут заинтересовать:
- Робототехника
- SEO-продвижение образовательного сайта: 7 лет — от старого HTML до AI Search
- Аутсорсинг: что это такое и как он может помочь вашему бизнесу?
- Промышленные роботы: что это, виды, устройство и применение
- Паллетирование: что это такое, технологии, оборудование и роботизация
Обновлено: 23.12.2020