Верстка как связующее звено

1. Дизайнер
2. Верстальщик
3. Программист
4. Пользователь

1. Не забывать про экранные разрешения
2. Использовать тип наложения слоя «обычный»
3. Давать слоям названия
4. Комментировать то, что нарисовал
5. Прикреплять к проекту несистемные шрифты
6. Удалять мусор в виде неиспользуемых папок и слоев
7. Называть файлы по-английски или транслитом

7. Не склеивать слои без необходимости
8. Использовать папки
9. Раскрашивать папки
10. Использовать сетку
11. Кегль шрифта задавать целым числом
12. Перед отправкой проверять орфографию
13. Для адаптивных дизайнов делать макеты под несколько разрешений

14. Стараться не менять дизайн после начала верстки
15. Не требовать пиксельного соответствия макету

1. Соответствие макету
2. Не забывать о типографике
3. Предусматривать разные состояния активных элементов
4. Прощать мелкие пиксельные огрехи и исправлять их

					<ul>
					    <li><a>Товар 1</a></li>
					    <li><a>Товар 2</a></li>
					</ul>
					<div>Попап для товара 1</div>
					<div>Попап для товара 2</div>
				

					<ul>
					    <li class="first">Пункт меню 1</li>
					    <li>Пункт меню 2</li>
					    <li>Пункт меню 3</li>
					    <li>Пункт меню 4</li>
					    <li class="last">Пункт меню 5</li>
					</ul>
				

					<div>
					    <div>Товар 1</div>
					    <div>Товар 2</div>
					    <div class="clearfix"></div>
					    <div>Товар 3</div>
					    <div>Товар 4</div>
					</div>
				

					input {
					    border: 2px solid #000;
					}
					p {
					    margin: 10px 0;
					}
				

					<form class="form">
					    <div class="form-label">Имя</div>
					    <div class="form-input">
					        <input type="text" />
					    </div>
					</form>
				

					.full-news { ... }
					    .full-news-title { ... }
					    .full-news-content { ... }
					    .full-news-comments { ... }
				

					.news-title {
					    width: 100%;
					    height: 3em;
					    text-overflow: ellipsis;
					    overflow: hidden;
					}
				

					var input = document.getElementById('input');
					var text = input.value + '...';
				

					TypeError: input is null
				

					<!-- Это попап для товара -->
					<div class="popup" style="display: none">
					    <div></div>
					    <div></div>
					</div>
				

1. Один цикл вместо двух
2. Не использовать классы first и last
3. Не разбивать списки по строкам
4. Не применять глобальных стилей
5. Делать однотипный код для форм на всех страницах
6. Обеспечивать гибкость
7. Продумывать переполняемость блоков

7. Проверять отсутствие ошибок скриптов на других страницах
8. Комментировать скрытые блоки

1. Создавать свои файлы со стилями и скриптами
2. Делать мелочи самому
3. Проверять, прежде чем кричать

1. Валидность
2. SEO: семантика, микроформаты
3. Доступность
4. Кодировать UTF-символы
5. Юзабилити
6. Убирать console.log()
7. Смотреть в будущее

7. Оптимизацию загрузки сайта

• «Правила хорошего тона в «Фотошопе»
• «Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать»
• «Префикс или постхак» (перевод)

Андрей Мотошин, Zoom Group

• htmlhero.ru
• andrew[at]htmlhero.ru