Какие этапы верстки сайта?

Question

[freeman0204]

Скорее всего это дело вкуса, но все же. Поделитесь тем как вы верстаете сайт?
Вот то что я думаю.
1. нужно вырезать все иконки и картинки на сайте и сделать png спрайт.
2. Подобрать шрифты, если таких не в виндовс и сгенерировать их через www.fontsquirrel.com/tools/webfont-generator например.
3. Стоит ли сначала сверстать только сетку? Без наполнения просто разметить с помощью флоатов и клеарфиксов сетку всей страницы?
4. Когда идет наполнение сначала нужно заняться, размерами шрифта, как думаете? Так как если сначала по выставлять отступы, и думаете что выровняли по макету, а потом меняете размер шрифта и он например стал больше и опять нужно менять отступы.
5. Потом уже смотреть на кроссбраузерность.
6. Адаптивность думаю будет в пункте 3, там где создание сетки.

Может эти пункты покажутся странными, но пока я так вижу.
Что вы посоветуете?

Comments

[freeman0204]

Больше ни у кого нет никаких мыслей?

Answer 1

[Pretor DH]

1. Пишеш полностью контент, текст и ставишь инлайн рисунки. Смотришь в браузере. Это будет то, что увидит клиент если вдруг при загрузке слетит CSS, такое бывает довольно часто у клиентов и при правильном кешировании страница останется в таком виде у клиента. Клиент должен увидеть весь контент. Обязательно прописываем viewport;
2. Ставим обнуление: reset.css или normalize.css их великое множество, на ваш выбор;
3. Пишем Таблицу блочной модели: для html, section, article, aside, header, footer именно так без класов, она должна быть универсальна. Здесь можно задать отдельно представление для первой и последней секций, и например для чередующихся, если нужно. При сборке эта часть должна быть сразу за reset.css;
4. Пишем таблицу модели управления: для "menu", "input", "button", "a" (во всех ипостасях) и т.д. Навигацию я делаю через анчоры, дивы по образу Л.Артема. "Li" и не использую для меню в принципе! Они по логике ложатся в таблицу представления. Использовать их нужно для списков в тексте, а не для навигации (только лишние элементы разметки. Лично моё мнение - никого к этому не принуждаю).;
5. Дальше таблица представления: h1, ... , ul, li, p, blockquote, addr, figure, table... Задайте базовый шрифт и размер в блоке html. Дальше у вас все шрифты ИСКЛЮЧИТЕЛЬНО в "em"-ах.

Теперь Сайт должен смотреться довольно неплохо на всех устройствах, включая іМафоны...

6. Только теперь, можно крутить модель оформления - её можно верстать сверху в низ, или по-элементно. По ходу дела прописывая класы в HTML. Это вашая рабочая таблица. Если сделали все правильно - возвращайться к предидущим вам не придется.
7. Таблицы адаптирования: на основе таблицы блочной модели и модели оформления, пишем правила для каждой ширины в сторону возрастания.

Графику фоны, красивости рекоментую заводить в векторном SVG. Лично я не рисую в фотожопе. Только вектор. Картинки автоматически приобретают любое разрешение, с минимальным трафиком. Фотки, а без них не обойтись, проганяйте через панду. Формат для картинок с прозрачностями png, все остальное в JPG.

Все. Ваша страничка ПЭРФЭКТНА.

Answer 2

[Дмитрий Сергеевич]

1. Инициализирую из ГИТа свой дефолтный шаблон с сетками, скриптами, шрифтами и прочим.
2. Делю макет на секции. Затем сверху вниз верстаю секции.
3. Прикручиваю JS.
4. Выравнивание все с помощью Пиксельперфект.
5. Затем настраиваю адаптивность.
6. ???
7. Profit.

Answer 3

[Сергей]

Я делаю сверху вниз в 2 этапа, но с одним исключение
1) Сначала хтмл хедера и футера, потом ксс для них
3) html для контента
4) Весь оставшийся CSS

Answer 4

[Иван Дрожжин]

Я тоже работаю сверху вниз. Так лично мне удобнее. Когда вся страница сверстана подгоняю отступы (так же сверху вниз) с помощью PerfectPixel.