Привет - друзья. Закончилась рабочая неделя, а значит самое время подвести итог, структурировать мысли и сделать выводы.
1. Одним из важных событий на неделе было взятие проекта на верстку.
Это достаточно большой лендинг, связанный с таможенным оформлением и доставкой груза из таких стран как Китай, Япония и так далее. Все круто, но макеты прислали в Photoshop, а после того, как я поработал в Фигме, то с Фотошопом все "больнее" работать. Нет возможности быстро посмотреть стили (да, можно измерять все, бегать глазами по окошкам или скопировать их у слоя их, но мне это жутко неудобно и долго). С плагинами вопрос не решил, либо дорого, либо уже слишком старые версии. Помню был когда-то CSS Hat, но что-то не нашел актуальной версии. Все за 2014–2016 года. Я так понял, что проект - умер? Подскажите, если кто-то в курсе. Так или иначе решил поискать альтернативу и нашел только сервисы вроде Avacode. Прекрасное решение и именно то, что искал, но, пока, жалко отдавать 20000 рублей.
В итоге остановился на бесплатном сервисе photopea.com. Это довольно шустрый аналог Фотошопа, не требующий регистраций и обладающий той заветной функцией быстрого просмотра стилей. Особенно актуален для верстальщиков - у которых нет подписки на Photoshop. Вот, в качестве эксперимента и решил сверстать сайт, пользуясь исключительно этим онлайн инструментом. Он, кстати, поддерживает не только .psd формат, но и множество других, так что, если у вас нет большой потребности в PS, вы фронтендер и нет желания платить за подписку, то рекомендую обратить внимание на Photopea. Для меня — это прямо находка была.
2. Как же много у меня эмоций вызывают дизайнеры, работающие с макетами сайтов. Обожаю, когда в мобильных версиях появляются элементы, которых не было в десктопной. И понятно, что это нормально для каких-то кнопок, элементов управления, что-то во вкладки преобразоваться, что-то в слайдер, что-то скрывается и так далее, но когда целые блоки или картинки появляются/смещаются так, что это не реально сделать, учитывая адаптивность... Многие люди совершенно оторваны от профессии и не понимают как устроен WEB.
Например, есть заголовок и подзаголовок с текстом в десктопной версии, а на мобильной между заголовком и подзаголовком появляется картинка.
Откуда она там берется? Всегда там была, но скрыта? То есть мы грузим ненужную картинку всегда, даже когда ее не видно? Может быть фоном в див? Но нет, просят индексируемую.
Перенос текста "от балды". Зачастую вообще нет понимания, что параграфы и заголовки — это блочные элементы, которые занимают всю ширину родителя.
В итоге каждая строка текста может быть перенесена совершенно в разном месте... Я понимаю, что есть <br />, но это дичь, как по мне. И ладно бы это было "фишкой" дизайна, в нужном месте, например, в заголовке где-то, но нет же, в обычном описании какого-нибудь преимущества...
Новые пункты в основном меню на мобильной версии из навигации, которая была в футере.
Да, решаемо при помощи js, но там может появиться и строка поиска и кнопки социальных сетей и рекламный баннер из сайдбара.
Про вертикальный и горизонтальный ритм - вообще молчу. Некоторые люди даже с рисуя с сеткой умудряются не использовать ее...
Как по мне, дизайнеру обязательно нужно получить опыт верстки, чтобы он понимал, как это все работает, как элементы смещаются, растягиваются, сжимаются, трансформируются и так далее, тогда бы появилось намного больше любви и уважения между фронтэндерами и WEB-дизайнерами.
Исходя из ошибок дизайнеров, описанных выше, всегда настораживает такой пункт в ТЗ на разработку сайта, как "расхождения с макетом не боле 5%" или "пиксель в пиксель". Зачастую встречаются не одинаковые внутренние отступы у кнопок, в навигации, разные отступы у блоков и заголовков, разный междустрочный интервал. Причем я встречал макет, где был список из 3-х пунктов в несколько строк каждый, где у каждого пункта междустрочный интервал был разный.
Я понимаю, что заказчик не должен быть экспертом во всем этом и мог пропустить такие моменты, оценивая картину в целом. Но иногда, когда встречаешься с неадекватностью, так и хочется все сделать пиксель в пиксель.
И да, я понимаю, что работаю в бюджетном/среднем сегменте и тут квалификация ниже. В более профессиональных кругах, наверняка, таких проблем нет.
3. Впервые установил свой виджет FakeOrder на Tilda. Думал, на конструкторе не будет работать из-за старой jQuery, но нет - все ок. Заказ, кстати, тоже через Kwork.
Писал об этой бирже тут, так что, если кому интересно - ознакомьтесь. Там преимущества и недостатки.
4. Закончил работу над переверсткой армейского интернет-магазина на CMS-Битрикс. Одно руководство посмотрело, написали - все ок. Но нужно, чтобы другое руководство также одобрило. Отложили до понедельника и, если все в порядке, то будем переносить на с демо-сайта на основной.
5. Продолжаю работу над дизайном нового сайта для сайта, связанного с вывозом и утилизацией строительных, бытовых и промышленных отходов без вреда для экологии.
6. Получил обратную связь по проекту SmartCombinator. Это такой маленький онлайн-сервис для комбинирования ключевых фраз. Спасибо за идеи, по развитию и улучшению.
Попросили реализовать очитку полей по клику на кнопку. Сделал.
7. В студии закончили проработку семантического ядра для сайта уличной мебели. Уточняем по ассортименту, анализируем ТОП и подбираем страницы, куда нужны тексты и нужны ли вообще.
Пока, на этом - все. Спасибо, что читаете и делитесь мнением.