Наверстайте мне упущенное

1. Наверстайте мне упущенное
Почему умная вёрстка — это важно.
Проблемы при вёрстке больших и маленьких проектов.
Сергей Козлов, фронтенд-разработчик в Эксит

2. 2

3. 3

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

5. 5

6. Технолог — тоже дизайнер “
Хорошо дизайнит тот, кто дизайнит последним
Артём Поликарпов
6

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

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

9. Для клиента
1. Доверие пользователей
2. Удобство пользователей
3. Позиции в рейтинге
== $
9

10. 10

11. Для разработчиков
1. Скорость разработки
2. Простота поддержки
3. Возможность масштабируемости
== $
11

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

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

14. 14

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

16. 16

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

18. 18

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

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

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

22. Типичные стили
p { ... }
.color1, class2, #b1 { ... }
#content > :first-child { ... }
[type=submit] { ... }
01.
02.
03.
04.
22

23. Значение этого элемента?
<a class=" open-menu-item "></a>
• Пункт в открытом меню?
• Открытый пункт меню?
• Открывает пункт?
23

24. Методология — система принципов и способов организации и
построения теоретической и практической деятельности.
academic.ru “
24

25. Популярные методологии
• OOCSS
• SMACSS
• БЭМ
• MCSS
• ...
25

26. Следование методологиям
• Порядок
• Читаемость
• Предсказуемость
• Многократное использование
• Уникальные имена
26

27. Из этого следует
• Быстрее разработка
• Легче поддержка
• Легче развитие
== $
27

28. Значение этого элемента?
<a class=" menu__item menu__item--open js-close "></a>
Открытый пункт меню, который также используется в javascript
28

29. Выводы и советы
• Будьте ответственны
• Думайте!
• Будьте ко всему готовы
• Используйте клёвые инструменты
29

30. Читайте
• frontender.info
• web-standards.ru
• css-tricks.com
• ...
• Блоги крутых чуваков
30

31. Смотрите
• fronttalks.ru
• 404fest.ru
• webstandardsdays.ru
• ШРИ Яндекса
• ...
31

32. Спасибо!
sergey@exitstudio.ru