Наверстайте мне упущенное — Сергей Козлов

Наверстайте мне упущенноеПочему умная вёрстка — это важно.

Проблемы при вёрстке больших и маленьких проектов.

Сергей Козлов, фронтенд-разработчик в Эксит

2

3

Правило №1Задача дизайнера — не подбирать цвет кнопок, а продумывать как всё

будет работать

4

5

Хорошо дизайнит тот, кто дизайнит последним

Артём Поликарпов

Технолог — тоже дизайнер“

6

Правило №2Сверстать можно [практически] всё, но что потом с этим делать?

7

Зачем же нужнахорошая вёрстка?

Для клиента1. Доверие пользователей

2. Удобство пользователей

3. Позиции в рейтинге

== $

9

10

Для разработчиков1. Скорость разработки

2. Простота поддержки

3. Возможность масштабируемости

== $

11

О чём нужнопомнить

1. СемантичностьСтарайтесь использовать элементы по своему назначению

13

14

2. Минимальная достаточностьНе засоряйте код лишней разметкой. Используйте ровно столько,

сколько необходимо. Но не экономьте на спичках.

15

16

3. Динамический контентПользователи не знают HTML, они пользуются WYSIWYG-редакторами.

17

18

4. SEOПроверка вёрстки на прочность.

19

5. Разные браузеры, контент и т.д.Всё может оказаться совсем не так.

20

6. Методологии.Установите для себя правила и принципы и старайтесь всегда

следовать им.

21

Типичные стилиp { ... }

.color1, class2, #b1 { ... }

#content > :first-child { ... }

[type=submit] { ... }

01.

02.

03.

04.

22

Значение этого элемента?<a class=" open-menu-item "></a>

• Пункт в открытом меню?

• Открытый пункт меню?

• Открывает пункт?

23

Методология — система принципов и способов организации и

построения теоретической и практической деятельности.

academic.ru“24

Популярные методологии• OOCSS

• SMACSS

• БЭМ

• MCSS

• ...

25

Следование методологиям• Порядок

• Читаемость

• Предсказуемость

• Многократное использование

• Уникальные имена

26

Из этого следует• Быстрее разработка

• Легче поддержка

• Легче развитие

== $

27

Значение этого элемента?<a class=" menu__item menu__item--open js-close "></a>

Открытый пункт меню, который также используется в javascript

28

Выводы и советы• Будьте ответственны

• Думайте!

• Будьте ко всему готовы

• Используйте клёвые инструменты

29

Читайте

• frontender.info

• web-standards.ru

• css-tricks.com

• ...

• Блоги крутых чуваков

30

Смотрите

• fronttalks.ru

• 404fest.ru

• webstandardsdays.ru

• ШРИ Яндекса

• ...

31

Спасибо!

sergey@exitstudio.ru