Как вы верстаете макет пошагово? Что за чем следует при верстке?

Question

[Антон Середний]

Всегда интересовало как верстают другие мастера? Какие шаги проделываете и в каком порядке?

1) Нарезаете всю графику сразу или постепенно?
2) HTMLкод сначала или css?) Весь HTML или только нужного блока и так постепенно опускаясь вниз?

Прошу описать процесс работы, хочу почерпнуть правильных практик. Спасибо

Answer 1

[deeppines]

1) Анализ макета - смотрю что есть в макете, представляю как буду верстать тот или иной элемент или блок, условно разбиваю макет на секции и блоки, записываю все на листочек.
2) Создаю под каждую секцию и блок свой scss файлик, настраиваю шрифты и размеры, отступы заголовков, все основные цвета сайта выношу в переменные за исключением белого, черного.
3) Нарезаю графику в ФШ по возможности все что могу, если что то пропущено дорезаю в процессе.
4) Дальше в отдельных html страничках верстаю секции и блоки входящие в них (сверху-вниз) + адаптивность элементов.
5) Построение общей сетки страницы и ее сборка из секций.

Использую для сборки проекта Gulp+Bower.

Comments

[dhat]

А как вы потом объединяете отдельные html файлы?

[Роман Романенко]

А зачем под каждую секцию создавать отдельный файл css и html?

[deeppines]

dhat: объединяет Gulp, а точнее плагин gulp-rigger. На эту тему есть статья на хабре https://habrahabr.ru/post/250569/

[deeppines]

Роман Романенко: когда css файл переваливает за 2-3 тысячи строк, то ориентироваться в нем становится сложно, а когда все разбито на отдельные файлики с небольшим и понятным кол-ом кода, то упрощается процесс отладки и поиска. Плюс секции не зависят друг от друга и их легко можно изменять переделывать или выбрасывать не нарушая стили и разметку остальных элементов страницы/сайта.

[dhat]

Lucas Kane: спасибо.

[dhat]

Lucas Kane: но не проще ли, чем какой-то малопопулярный rigger использовать шаблонизатор?

[deeppines]

dhat: Вот тут не подскажу, может и проще, не использовал шаблонизаторы, нет острой необходимости.

Answer 2

[Антон]

1. Использую Brackets, который графику нарезает сам. И вообще, с ним верстать макеты одно удовольствие
2. Сначала html нужного блока

Comments

[Вениамин Смирнов]

В чем удовольствие от верстки на Brackets от того же Sublime?

[Антон]

Вениамин Смирнов: extract

[Антон]

ну и inline css editing, не знаю, есть ли такой плагин для sublime

Answer 3

[Artcl]

Не скажу, что мастер, но делаю так:

• Голый HTML, то есть каркас
  
• Cетка
  
• Далее сверху вниз всё остальное, по мере нужды нарезаю графику
  

Ну и желательно руководствоваться практикой mobile first

Comments

[Антон Середний]

Прямо для всей страницы?) а если ошиблись где-то потом? Переделывать?

[Artcl]

Антон Середний: Ну понятное дело, если есть ошибка то нужно править :)

[safbek]

А как вы руководствуетесь практикой mobile first? если вы не имеете дизайна для моб версии? Или дизайн должен быть?

[Artcl]

mobile first в том случае, если нужна mobile версия

[safbek]

Artcl: Я правильно понимаю, если заказчик не предоставляет дизайна моб версией, то соотвественно и верстки нет? или зависит от верстальщика.

[Artcl]

Мобильной версии нет, если этого нет по ТЗ. Если берешься делать задачу без дизайна под моб версию, то нужно будет самому додумать дизайн отталкиваясь от предоставленного дизайна

Answer 4

[Rou1997]

1. Постепенно.
2. Конечно, только нужного блока.

Answer 5

[Ankhena]

Для разных макетов бывает по разному.

В основном так:
1. Каркас из основных html блоков
2. Нарезаю картинки (стараюсь сразу все, в сложных макетах по частям)
3. Пипеткой основные цвета записываю в переменные.
4. Доверстываю статику подробненько все сверху вниз. Иногда бывает, что в странном порядке, если есть какие-то сложные или интересные блоки.
5. Прикручиваю слайдеры, модалки и т.д.

Два монитора существенно увеличили скорость и удобство п.1., теперь каркас выходит более подробный. На простых макетах получается написать весь или практически весь HTML, а потом уже "раскраску" CSS'ом.

Comments

[Антон Середний]

У вас два одинаковых монитора? по диагонали и качеству картинки? можете детально ответить тут?

[safbek]

Здравствуйте! Вы нарезаете в фотошопе? или используете какую-нибудь программу для нарезки? И еще...при адаптивном дизайне? Делаете все в пх, а затем в % переводите? поделитесь, плиз

[Ankhena]

Антон Середний: совсем разные, для верстки проблемы в этом не вижу. С фото или видео работать могут быть проблемы с цветоподбором.

[Ankhena]

safbek: да, в фотошопе, сейчас ручками, раньше слайсами.

Стразу ставлю нужные размеры, зачем сначала ставить какие-то не такие?
Точнее "не такие" бывает получаются, а потом поправляются при тестировании адаптивности. В основном, когда с макетами какая-то беда.

[safbek]

Ankhena W: Тестировании проводите расширениями вида pixel perfect ? Просто я сверстал макет для практики. В точности переводил в проценты по методу Итана Маркотта, а затем решил как-то сверить и вижу что у меня вообще не совпадают блоки. Подгонять значило практически полностью переделывать. Как вы с таким справляетесь?Спасибо за ответы.

[Ankhena]

safbek: Главное это разум :)
Возможно, когда-нибудь мне попадется дизайнер чьи макеты для адаптивной верстки будут готовы к pixel perfect. Обычно макетов для маленьких экранов либо вообще нет, либо это просто логика перестроений.
Pixel perfect для адаптивных макетов вообще штука загадочная. Надо очень хорошо понимать какой логикой пользовался дизайнер и была ли она у него вообще. Пример: нарисована кнопка на 2/3 ширины маленького экрана. Надо понять кнопка должна занимать 2/3 любого маленького экрана или у нее важнее отступы от текста на ней, а ширина по факту. А если текст на кнопке не влезает в 1 строчку? ;)

Почему-то мне часто попадаются такие примеры:
в макетах padding'и у маленьких блоков остаются неизменными в px. Как были 20px для больших экранов так и остались.
Тут игра в pixel perfect может быть разной :)
Можно оставить их 20px.
Можно сделать масштабируемыми, пересчитать в em или rem для гармоничности. Тогда pixel perfect получится только для одного из вариантов размера экрана, прости дизайнер.
Можно пересчитать в % от ширины блока, где-то такой вариант прокатит, где-то выйдет уродство.

Адаптивность это не пересчет всего в %.
Толщина бордера как была 1px, такой и должна остаться на всех устройствах. (Опять таки в большинстве случаев).

[safbek]

Ankhena W: Спасибо за подробный ответ. Теперь более менее прояснилось для меня!) Хотя понимаю, что мои блоки уж слишком различались(

[Ankhena]

safbek: тренируйтесь, все будет хорошо :)

[safbek]

Ankhena W: Будем надеяться!)