• Какое событие происходит при скроллинге вниз и вверх?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Пропишите всем <input type="radio" ... > одинаковый name — это объединит их в радиогруппу.
    Ответ написан
    Комментировать
  • Как сделать, что бы первый экран подстраивался под высоту окна браузера?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Использовать viewport-height единицы измерения для задания высоты обложки:
    .page-cover {
       min-height: 100vh;
    }
    Ответ написан
    Комментировать
  • Как правильно верстать?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    По ссылке не прямой ответ на ваш вопрос, но рассуждение на близкую тему — о балансировке сложности и крайностях.
    Оправданность применения миксинов bootstrap типа .make-row()?

    Мой выбор — multiple classes. Там сложность между css и html распределена примерно поровну.
    Ответ написан
    Комментировать
  • Что показать работодателю при устройстве стажером в веб-разработку?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Сделайте несколько лэндингов / визиток или небольшой информационный сайт. Но это должны быть полностью законченные работы, без лорем ипсумов.

    В стажерах работодатель ценит в первую очередь внимательность к мелочам и аккуратность, способность доводить работу до конца и задавать правильные вопросы по ходу дела. Делать упор стоит именно в этом направлении, нежели пытаться поразить сложными техническими решениями.

    Поэтому работы в вашем портфолио должны иметь доделанный вид, а код соответствовать формальным требованиям (валидация, оформление по стайлгайду). Тексты должны быть без ошибок, графика оптимизирована. И в целом сайт должен набивать в pagespeed нестыдное количество баллов.

    В глазах начальника / тимлида хороший стажер — это такой стажер, за которым не надо переделывать. Тимлид любой таск может сделать быстрее и качественнее, и при этом будет спокоен за результат. Но тимлида на все таски не хватает и он должен делегировать работу. Поэтому стажерам в первое время обычно перепадает наполнение контентом, верстка шаблонов, подготовка графики и т.д.

    Задача стажера на собеседовании — показать, что он может делать несложную работу качественно, что он принесет пользу команде.
    Ответ написан
    Комментировать
  • У кого-нибудь есть описание к "Fluid Responsive Table"?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    thenewcode.com/852/A-Fresh-Approach-to-Responsive-... — эту ссылку нашел в описании к демке.
    Ответ написан
    Комментировать
  • Стоит ли делать залипающее меню?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Фиксировать меню можно, когда достаточно вертикального пространства для основного контента (высота залипшего меню меньше либо равно 10% высоты вьюпорта).

    Если места под контент мало надо скрывать залипшее меню при прокрутке вниз, и выдвигать его при прокрутке вверх. Это позволит убрать ссылку «прокрутить вверх».

    То же самое на мобильниках: листаем вниз — весь экран под контент, как только листаем вверх — вылазит меню.
    Ответ написан
  • Как лучше сделать вывод новостных материалов?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Первый вариант вообще неработоспособный: на тачевых устройствах :hover наступает только в момент тапа, т.е. посетители не увидят названий вообще.

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

    Неплохо бы сделать модули разного размера (как плитка в Windows). Крупным размером могут отображаться главные новости, мелким — менее важные. На странице должна быть иерархия информации по важности и интересности. При неоднородной структуре ленты пользователи пролистывают страницу медленнее, останавливаются рассмотреть крупные блоки и заодно замечают мелкие вокруг.

    Скрывать название новости при наведении тоже не очень. Если посетитель хочет рассмотреть картинку, пусть кликнет саму новость и рассмотрит картинку внутри.

    Не знаю, о чем у вас будет сайт и какая там редакционная политика, но надо продумать дизайн новости без картинки.

    И еще у вас крупная проблема — вы проектируете дизайн используя стоковые картинки и лорем ипсум. Это значит, что при наполнении сайта реальным контентом вылезут десятки проблем, о которых вы не задумались:
    - название новости слишком длинное,
    - название новости слишком короткое,
    - название нуждается в пояснении,
    - картинка слишком светлая — белый по светлому не контрастно,
    - картинка слишком пёстрая — фон мешает читать текст,
    - текст закрывает лицо человека на фотографии,
    - у новости нет картинки
    - и т.д.

    Если у вас еще нет своих новостей, возьмите контент с чужого сайта и сделайте макет с реальными текстами и картинками. Это оголит возможные будущие проблемы. Макет будет выглядеть не так красиво, но зато дизайн будет более жизнеспособен.

    Ссылки по теме:
    artgorbunov.ru/bb/soviet/20160316
    artgorbunov.ru/bb/soviet/20160127
    artgorbunov.ru/bb/soviet/20160420
    artgorbunov.ru/bb/soviet/20160427
    Ответ написан
    2 комментария
  • Сайт без CMS. Плюсы и минусы?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Генераторы статики для такой цели подходят лучше.

    Почитайте тут обсуждение CMS vs. StaticGen:
    Какой лучший движок для информационных сайтов?
    Ответ написан
    Комментировать
  • Какие знаете ресурсы\сайты по дизайну инфографики и иконок?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Ответ написан
    Комментировать
  • Какие современные требования к верстке?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Для оптимизации кода можно ввести количественную меру: «зеленые» значения в pagespeed.

    Конечно, не все пункты из списка pagespeed сто́ит выдрючивать на этапе верстки, некоторые имеют смысл только на боевом сервере. Но если уж на проекте GIT, то закинуть шаблоны на GitHub Pages и потестить скорость было бы здорово.
    Ответ написан
    Комментировать
  • Друзья программисты сегодня я провалил своё первое собеседование с клиентом на создание веб сайта. Объясните джуниоуру как это делается?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Раз всё принимается, Как вы делаете дизайн сайта? тут я отвечал на смежную тему.

    На самых первых переговорах надо рассказать заказчику как вы работаете, какие будут этапы, что клиент получит в конце каждого этапа, какие данные он должен вам предоставить. У заказчика должно составиться общее представление о процессе.

    На первом собеседовании вы продаете себя как специалиста. На последующих чекпоинтах — результаты своей работы.
    Ответ написан
    3 комментария
  • Какой программой сделать палитровый PNG с 8-битной прозрачностью?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Насколько я помню, Adobe Fireworks умеет сохранять в такой формат
    Ответ написан
  • Распараллеливание процесса верстки между верстальщиками?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Распределить работу покомпонентно.
    Любые макеты можно разобрать на следующие компоненты и этапы.

    0. Создается общий репозиторий для проекта.
    Все работы ведутся сразу в нем. Чем чаще делаются коммиты, тем раньше вылезут и будут исправлены проблемы. У каждого компонента есть свой css/less/sass файл, чтобы легче управлять кодом и избегать merge-конфликтов.

    1. Основные строительные блоки:
    - Типографика и стили для контента (таблицы, цитаты)
    - Элементы форм + стили валидации
    - Декоративная графика (иконки, плашки)
    - Модульная сетка (сразу респонсив)

    Каждый верстальщик отвечает за свой кусок работы и создает демо-страничку с перечнем компонентов, которые он сверстал. Работа верстальщиков не пересекается.

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

    Каждый верстальщик делает свою категорию элементов и создает демо-страничку с перечнем компонентов и всеми их модификациями. Работа верстальщиков почти не пересекается, но каждый компонент основан на стилях, написанных на первом этапе.

    После этих двух этапов у команды готов UI-kit проекта.

    3. Предварительная сборка всех шаблонов страниц с реальным контентом

    Работа распределяется постранично. Каждый верстальщик копипастит блоки из UI-кита и наполняет реальным контентом. В конце команда оценивает, где что еще нужно доделать.

    4. Редкие кастомные компоненты и модификации

    На основе проблем, которые вылезли на третьем этапе, каждый верстальщик допиливает блоки, за которые он отвечает.

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

    Обо всем этом говорят Atomic Design, ITCSS и многие другие методологии.
    Ответ написан
    Комментировать
  • Почему периодически не заходит на сайты?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Надо проверить файл C:\Windows\System32\drivers\etc\hosts
    Возможно, туда записана какая-то гадость и все запросы заворачиваются на уровне операционки.
    https://www.youtube.com/watch?v=wH25txgXlas
    Ответ написан
    Комментировать
  • Как сделать такой элемент?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Если на этой странице есть кнопка «Купить», то выбиратор цвета — это радиокнопки, и при нажатии на «Купить» в форму должно передаваться value выбранного цвета.

    Если это просто для демострации, какие цвета существуют, то, пожалуй, можно верстать любым способом.
    Ответ написан
    1 комментарий
  • Не меняется цвет рамки у ячейки таблицы?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Можно пойти другим путем и покрасить фоны https://jsfiddle.net/r0qrmo5q/3/
    Ответ написан
    Комментировать
  • Нужна ли 32 и более колонная сетка?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Не дробите сетку на большое число колонок, это не поможет. Управлять такой сеткой будет тяжело, но всё равно попадутся сайты, которые в неё не лягут.

    Я для себя сделал генератор flexbox-сеток на LESS: под каждый конкретный проект я могу сгенерить сетки с разным количеством колонок, гуттерами разной ширины и разными media брейкпоинтами. Всё настраивается при помощи 5 переменных. По-умолчанию моя сетка старается быть похожей на бутстраповскую 12-колоночную, как самую привычную. Но некоторые фишки я утянул из сетки Zurb Foundation 6.

    paulradzkov.com/flxgrid.css

    К тому же, flexbox настолько гибкий, что колонки могут распределять между собой ширину автоматически.
    Посмотрите пример paulradzkov.com/flxgrid.css/#auto-width-columns

    Можно смешивать колонки с явно заданной шириной (фиксированной или в процентах) и автовыравнивающиеся колонки. Т.е. дизайн сайта не обязан быть выровнен строго по вертикальным направляющим, как с float-сетками.
    Flexbox-cетку можно подстроить под почти любой дизайн, дописав немного кастомного кода.
    Ответ написан
    Комментировать
  • Где можно скачать стили текста для CSS?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Вопрос, наверное, должен был звучать так: «Где скачать веб-шрифты?»

    https://www.google.com/fonts
    https://www.fontsquirrel.com/
    Ответ написан
    Комментировать
  • Как при выборе одного checkbox выбрать сразу группу?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Комментировать
  • Как сверстать шапку?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Это нужно делать градиентом:
    - сверстать 6 цветов градиентом,
    - поставить background-size: 600px 4px — чтобы каждая полоска была равно 100px,
    - повторять фон только горизонтально background-repeat: repeat-x;

    .container {
        margin: auto;
        background: #FFF;
        max-width: 960px;
        background-image: linear-gradient(to right,
            #50B5AD 0%,     #50B5AD 16.67%,
            #FFBBB7 16.67%, #FFBBB7 33.33%,
            #F8506C 33.33%, #F8506C 50%,
            #ADB347 50%,    #ADB347 66.67%,
            #F5CE42 66.67%, #F5CE42 83.33%,
            #A2DBD6 83.33%, #A2DBD6 100%);
        background-size: 600px 4px;
        background-repeat: repeat-x;
    }


    codepen.io/paulradzkov/pen/eZydxg
    Ответ написан
    Комментировать