Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, Интерлаб

340 views

Published on

Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, Интерлаб с19 апреля 20131 / 30

Published in: Marketing
  • Be the first to comment

  • Be the first to like this

Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, Интерлаб

  1. 1. Современная верстка садекватными трудозатратамиМаксим Тимохин, технолог, Интерлабс19 апреля 20131 / 30
  2. 2. ПроблемаТребования к верстке постоянно растут, а вместе с ними исебестоимость проекта:• адаптивность: был один дизайн, а стало N;• кроссбраузерный CSS3;• улучшенная типографика.На что обратить внимание в технологическомпроцессе, чтобы сократить издержки?2 / 30
  3. 3. Главная беда дизайна«Дизайн сайта — набор страниц»адаптивный дизайн только усугубляет проблему:• на уровнe CMS: единая контентная область, WYSIWYG.• на уровнe дизайнера: главная и рабочая страницы и т.д.• на уровне клиента: сделайте точно так, как я хочу.Дизайн сайта — система компонентовCMS — часто ограничивающий фактор3 / 30
  4. 4. Работа с дизайнерамиРеализация адаптивного дизайна будет проще, если:• мыслить в контексте всего сайта, а не отдельной страницы;• мыслить элементами, образующими визуальный язык;• понимать технологические ограничения;• использовать сетки и вертикальный ритм;• минимизировать количество и варианты блоков;• понимать, что pixel-perfect дизайн невозможен.Звучит банально, но менять стереотипы тяжело.4 / 30
  5. 5. Типографская сетка5 / 30
  6. 6. Типографская сеткаВ обычном дизайне полезна, в адаптивном — необходима:• различные виды сеток (%, px) для адаптивных вариантов;• различная размерность сеток для адаптивных вариантов;• не больше двух-трех сеток на медиа-вариант;• сетки для всего сайта, а не для отдельных страниц;• несложно реализуется CSS-препроцессором.Результат формализованное горизонтальноепозиционирование блоков в различныхадаптивных вариантах.6 / 30
  7. 7. Комбинирование сеток7 / 30
  8. 8. Сетка: % или px?• пиксельные сетки технологичнее и проще;• фиксированные адаптивные вариантыменее затратны в реализации;• процентные сетки универсальные, носложнее: размеры вложенных элементов,ошибки округления и и.д.• процентные сетки необходимы нанебольших мобильных разрешениях.8 / 30
  9. 9. Вертикальный ритм9 / 30
  10. 10. Вертикальный ритмЕдиный шаг для вертикальных размеров элементов:• вертикальные отступы;• вертикальный размер изображений и блоков;• элементы переменной высоты — в контейнер;• выбор шага определяет baseline для основного шрифта;• легко реализуется CSS-препроцессором.Результат улучшение внешнего вида страницы,системность в выборе размеров, возможностьварьирования на этапе разработки.10 / 30
  11. 11. Дизайн: антипаттерныОсновные проблемы адаптивной верстки — на этапе дизайна:• «над этим я не думал, разберемся при верстке»;• подгонка сетки к уже отрисованному дизайну;• единая сетка для всех блоков с массой исключений;• нарушение порядка блоков в различных вариантах;• расчет на ограниченный размер контента;• избыточный второстепенный контент в начале страницына мобильном устройстве;• избыточное использование таблиц и сложныхинтерактивных элементов.11 / 30
  12. 12. Роль верстальщикаВерстальщик необходим, но в новых условиях долженэволюционировать:• «страничная» CMS — неизбежная верстка контента;• верстка шаблонов страниц;• верстка компонентов, в т.ч. типовых контентных блоков;• клиентский JavaScript;• минимальное участие в клиентском контенте за счетиспользования типовых контентных блоков.Верстальщик → Развитие CMS → Frontend-developer12 / 30
  13. 13. Прототипирование версткиMaster page – минимальный статический прототип для простыхсайтов:• одна страница со всеми интерфейсными компонентами;• HTML с минимальной (php,node...)-шаблонизацией;• можно использовать как style guide;• упрощает выявление конфликтов между компонентами;• упрощает тестирование на мобильных устройствах.• поощряет минимализм (хотя иногда уже поздно)13 / 30
  14. 14. Структура CSS-классов• БЭМ1 — большие проекты, набор общих блоков;• у нас — небольшие проекты с сильно отличающимсядизайном, используем сильно упрощенный вариант.Главное: независимость блоков друг от друга и ихструктурирование внутри проекта.• префиксная система имен классов;• упрощенная концепция блок-элемент-модификатор.1http://ru.bem.info/method/14 / 30
  15. 15. Префиксная система именnamespace-...-block-element-subelement-...--modificator• модификатор всегда используется с основным классом• модификатор не разбивается на пару «свойство-значение»• разработчик может вводить промежуточные пространстваимен, отсутствие конфликтов между ними — на его совести;Результат стандартизируем имена классов, исключаемконфликты между своими и чужими классами.15 / 30
  16. 16. Структура блоков версткиИспользуем наиболее подходящую семантическую основу,большая часть стилизации с помощью классов стандартнойструктуры.<class="app-menu"><ul><li class="menu-item"><a href="#">...</a></li><li class="menu-item menu-item--sel"><a href="#">...</a></li></ul></div>Результат семантическая верстка, стандартная структураблоков.16 / 30
  17. 17. Генерируемый кодГенерация кода необходима при разработке клиентской части:• генерация CSS из более высокоуровневого кода;• минимизация количества и объема CSS-файлов;• структурирование и оптимизация JavaScript-кодасредствами AMD/RequireJS2 и т.д.Результат снижение затрат на поддержку и развитиестарых проектов, повышение качества новых.2http://requirejs.org17 / 30
  18. 18. Простейшая генерация кодаК любому проекту можно добавить генерацию кода, есть многомодных инструментов, но проще всего — make:www/css/%.css: src/less/%.lesslessc $< > >@Для существующего проекта просто переносим CSS-файлы вsrc/less/ и получаем преимущества в виде переменных,макросов и т.д.Результат сокращаем код, постепенно рефакторим CSS,если надо — приводим в чувство JavaScript18 / 30
  19. 19. Выбор CSS-препроцессора• основные претенденты: SASS, LESS, Stylus;• SASS — логично, если решение на Ruby;• Compass – полезно, даже если не использовать SASS;• Любой CSS-файл – валидный исходник на LESS;• LESS распространеннее, Stylus функциональнее изкоробки;Мы выбрали LESS, Stylus тоже хороший выбор.19 / 30
  20. 20. Особенности LESS• полная синтаксическая совместимость с CSS;• вложенные пространства имен, удобноj для библиотек;• нет условий и циклов, но есть pattern matching и рекурсия;• динамическое формирование имен классов, хотя издокументации это неочевидно.Главное не генерировать избыточный CSS, в клиентскомкоде максимально используем определениеклассов, а не макросов.20 / 30
  21. 21. LESS-фреймворк• тривиальная часть — CSS3, шрифты и т.д.• инициализация верстки: reset или normalize, чаще второе;• медиа-варианты и версии для браузеров без Media Query;• генерация сеток, средства отладки;• базовые настройки отображения элементов форм;• всевозможные костыли для IE.Результат типовые решения для всех проектов, упрощениеподдержки, снижение порога вхождения дляразработчиков.21 / 30
  22. 22. Файлы проекта• правила CSS группируются в файлы произвольно;• фреймворк подключается одним @import;• каждому результирующему CSS-файлу соответствуеткорневой less-файл, подключающий фреймворк и другиеless-файлы;• корневых файлов может быть несколько: под разныеразрешения, разные версии IE и т.дРезультат правила можно группировать покомпонентно,строить библиотеки компонент и т.д.22 / 30
  23. 23. Медиа-варианты@boot-media-variants: 9; // количество диапазонов;...@boot-media-3-name: tablet; // определение диапазона;@boot-media-3-min: no; // есть стандартные, но@boot-media-3-max: 767px; // можно переопределить@boot-media-3-ie: no; // если необходимо....#media { // стандартный namespace.for(all) {// общие правила}.for(tablet) {// правила для планшета}} // результат можно вывести в отдельные файлы или общий файлРезультат покомпонентное определение вариантов, генерациявариантов в оптимальном порядке и варианта без MQ.23 / 30
  24. 24. Элементы форм• в разных проектах выглядят совершенно по-разному;• при этом общие проблемы взаимного позиционирования,размеров и т.д;• проблема использования готовых решений типа Bootstrap– геометрия и внешний вид неразделимы.Решение: • базовыe классы – позиционирование;• стандартные макросы – геометрия;• оформление – свое в каждом проекте.• оформление и размеры – модификаторы.24 / 30
  25. 25. Поддержка IE// В файлах компонент.#ie {.for(7) { /* правила для IE7 */ }.for(lt9) { /* правила для IE8 */ }}// В результирующем файле#boot > .classes(ie, 7);Также с осторожностью используем некоторые полифиллы, вчастности PIE3 (CSS3) и boxsizing4 (border-box).3http://css3pie.com4http://github.com/Schepp/box-sizing-polyfill25 / 30
  26. 26. Сетки@grid-desktop-variant: fixed; // пиксельные и процентные@grid-desktop-class: g-d; // префикс CSS классов:@grid-desktop-size: 12; // g-d-r,g-d-s4, g-d-o2.@grid-desktop-column: 60px;@grid-desktop-gutter: 20px;#media {.for(desktop) {#boot > #grid > .classes(grid-desktop);}.for(wide) {#boot > #grid > .classes(grid-wide);}}Результат автоматическая генерация классов сеток,реализация адаптивных сеток, возможностьбыстрой корректировки геометрии сеток.26 / 30
  27. 27. Инициализация блокаГлобально используем normalize, внутри отдельного блокавыполняем по необходимости reset для семантической базыблока:.app-menu {#boot > .reset(ul, left); // локальный reset#boot > .rhythm(15px, margin, 1, 0); // baseline для 15px// margin-top в 1 шаг.app-menu-item {// padding в 1 шаг и корректировка для border#boot > .rhythm(padding,1,1,1px,1px);border: solid 1px #ccc;}}27 / 30
  28. 28. Инициализация верстки1 определяем основной размер шрифта и вертикальный шаг;2 переопределяем настройки типографики если нужно;3 определяем диапазоны медиа-вариантов;4 конфигурируем сетки в различных медиа-вариантах;5 верстаем нестилизованные блоки с классами блоков иячеек сетки;6 проверяем раскладку в различных разрешениях,контролируем границы блоков;7 дальше разбираемся со стилизацией каждого блока.28 / 30
  29. 29. ИтогоЧто необходимо сделать, чтобы технологический процесс быладекватен современным требованиям к верстке?• работать с дизайнерами: компонентный подход,стандартные паттерны, технологические ограничения;• стандартизировать структуру разметки и CSS-классов;• использовать адаптивные типографские сетки;• внедрить генерацию клиентского кода вообще иCSS-препроцессор в частности;• реализовать набор типовых решений с помощьюCSS-препроцессора.29 / 30
  30. 30. http://www.interlabs.ru

×