• Под какие разрешения рисовать адаптивный дизайн?

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

    1. Мобильные телефоны — 320px. Ориентируемся на viewport айфона, т.к. он самый маленький. У современных андроидов вьюпорт больше, поэтому их игнорируем (растянется на верстке).

    2. Планшеты — 768px. Опять-таки ориентируемся на айпад в портретной ориентации , т.к. у андроид планшетов вьюпорты обычно имеют размер от 800×1200 или совпадают с айпадом. Планшеты с вьюпортом 600×1024px устарели. К тому же ничего страшного, если в вертикальной ориентации сайт на таком планшете будет выглядеть как на мобильнике, а в горизонтальной ориентации — как на десктопе.

    3. Десктоп и планшеты в ландшафтной ориентации — 1000px. Почему 1000, а не 1024: первое, в настольных браузерах полоса прокрутки съедает (обычно) 18px ширины; второе, от 1000px верстальщику удобнее расчитывать размеры в процентах, а до 1024 все равно растянется при верстке.

    В принципе, этого достаточно, чтобы верстальщик справился.

    Если дизайн не имеет максимальной ширины и тянется от края до края окна браузера, то на усмотрение дизайнера можно нарисовать еще один или несколько эскизов для более широких экранов.

    В каком порядке рисовать? Смотря как поставлено тех.задание. Чаще всего в задании описан полный функционал для настольной версии. Тогда проще нарисовать дизайн под 1000px и перекомпоновать под 768 и 320, выбросив или упростив по пути менее значимые элементы сайта. Т.е. двигаться от сложного к простому.

    Верстать при этом удобнее от меньшего экрана к большему (от простого к сложному). При mobile first верстальщику приходится дописывать новые стили для бóльших экранов поверх базовой версии в 320px вместо того, чтобы обнулять написанные для настольных браузеров стили. В результате для мобильника css весит меньше и парсится быстрее.
    Ответ написан
    Комментировать
  • Распараллеливание процесса верстки между верстальщиками?

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

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

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

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

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

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

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

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

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

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

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

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

    Обо всем этом говорят Atomic Design, ITCSS и многие другие методологии.
    Ответ написан
    Комментировать
  • Какую ширину сайта рекомендуется делать в 2016 году?

    sabramovskikh
    @sabramovskikh
    Нужно делать адаптивные сайты на разные разрешения
    Ответ написан
    Комментировать