pavelkarinin
@pavelkarinin
Front-End Web Developer

Верстка с нуля: какие основные этапы работы?

Прошло много лет с тех пор, как я впервые сверстал что-то вразумительное с нуля... каюсь на таблицах)). Сейчас, пребывая на этапе, когда моя профессия уже не должна меня кормить, а верстой я занимаюсь исключительно ради собственного удовольствия, тем не менее, мне интересны (уверен, что и новичкам тоже) ваши подходы, вот в каком срезе.

Вы получили доброкачественный серьёзный макет, предположим, что это визитка крупной компании с кучей услуг, которая хочет максимально широко представиться пользователю. Этот макет надо сверстать и уже оговорены все условия, уже проведены все первичные уточнения с дизайнером и др. и т.п. Как вы выстраиваете свою работу? С чего начинаете? Какие основные и дополнительные этапы всегда присутствуют в вашем распорядке при работе? Одним словом – опишите ваш time-line… и как вы его организуете. Мне интересен опыт других, а новичкам будет полезно это узнать.
  • Вопрос задан
  • 10264 просмотра
Решения вопроса 7
Vlad_IT
@Vlad_IT
Front-end разработчик
Использую vscode+webpack+pug+scss+бэм. Из физических инструментов, основной моник: lg ultrawide 29um69g, рядом прикручен моник от ноутбука повешенный вертикально, подключенный через универсальный скаллер.

0) Запускаю Spotify :-)

1) Произвожу установку всех необходимых модулей для сборки. В моем случае у меня набор конфигураций для webpack (отдельные файлы для pug, scss, static и.т.д., выбираю что нужно).

2) Запускаю avocode, загружаю в него макет. Определяю в нем переменные (в то же время записываю их, чтобы сразу кинуть в scss файл) для цветов, размеров шрифтов и.т.д. чтобы при получении кусочков кода из него, он сразу расставлял переменные.

3) Запускаю VS Code, открываю нужную папку.

4) Пишу размету на Pug. Пишу с БЭМ, если встречаю повторяющийся блок, то открываю файл _mixins.pug, в который пишу миксины для повторяющихся блоков, например товаров, пунктов меню, каких-то блоков и.т.д. Pug умеет делать циклы, это ускоряет сильно.

5) Когда HTML готов, начинаю делать каркас. Если дизайн сделан по сетке, определяю контейнеры, колонки, строки в свои классы (не пишу в html тучи классов аля col-md-6, а пишу в SCSS инклуды в нужные мне блоки, типа @include make-col(2) и.т.д.).

6) Экспортирую картинки из Avocode. Очень делается просто, указываю папку и просто кликаю экспорт и ввожу название файла и расширения. Преимущественно для иконок использую svg, если нет svg, то ищу эту иконку в интернете (дизайнеры редко рисуют иконки сами, но зато любят вставлять их не в векторе). Если иконка простая, могу сам ее в inkscape обвести, ну и если нет, то экспортирую png в размере (благо авокод это позволяет, если конечно дизайнер не вставил в исходном маленьком размере). Когда есть контакт с дизайнером, трясу его, ибо растр это плохо для иконок.

7) Пишу стили блоков из страницы. На этом этапе можно на втором монике параллельно смотреть футураму или
Арчера :-) Но чаще на широком монике слева браузер, справа VS Code, а на втором монике Avocode (может меняться местами с браузером). Мысленно нарезаю страницу на блоки. Для каждого блока (БЭМ) создаю отдельный scss файл (кто-то даже для элемента создает, но мне лень), из него сразу выписываю все селекторы. Иногда могу сначала выписать все селекторы со страницы (но так лучше не делать, т.к. во время работы может потребоваться изменить что-то в разметке), но чаще для одного блока выполняю этот пункт и за ним сразу выполняю пункт 8, потом для нового блока опять 7 и 8 и.т.д.

8) Пишу css код вместе с Avocode, у него беру нужные мне параметры (а он уже подставил в них переменные), и вставляю в мой код. И параллельно сверяю со скрином макета используя вот это расширение https://chrome.google.com/webstore/detail/perfectp...

9) Пишу адаптив. Я не могу привыкнуть к методологии mobile-first, поэтому пишу всегда сначала полную версию сайта. Я понимаю, что это чревато всякими проблемами и это типа не модно, но мне норм.

10) Медиа-запросы пишу прямо в блоках, для каждого блока/элемента/модификатора может быть отдельный медиа-запрос. Но для начала определяю breakpoint'ы для разных экранов (чтобы их не было сотни разных), если использую Bootstrap, то беру его breakpoint'ы.

11) Добавляю анимашки. Даже если заказчик не просил отдельно (и если не указал отдельно, что нельзя), он все равно будет доволен, а с animate.css+onscreen.js это вообще работа 10 минут. Сложные анимации обговариваю отдельно, чтобы не сделать ненужную работу.

11) Все снова сверяю, пишу скрипты где надо. Для слайдеров в 99% случаев подходит slick (с доработками конечно, но там хорошее API), для других случаев могу написать свой.

12) Сдаю заказчику и жду ответа сидя на тостере/пикабу.

Это чисто мой опыт, опыт фрилансера, не знаю, как делают другие и не могу на 100% утверждать что это 100% правильный способ. Я так и не смог заставить свой конфиг webpack правильно вставлять спрайты svg.
Надеюсь чем-то поможет мой ответ.
Ответ написан
pavelkarinin
@pavelkarinin Автор вопроса
Front-End Web Developer
На этот вопрос есть подписчики, не ожидал, что столько, но это говорит о том, что вопрос интересен и это хорошо. Поэтому хоть и я его автор, но отвечу тоже. Я, как человек, который пережил эпохи Mosaic, Netscape и IE (старички меня поймут), отвечу ещё и по той причине, что часто, нет … очень часто сталкиваюсь с тем, что действительно "талантливые" начинающие Front-End тратят попусту свое время, из-за незнания такого, казалось бы, вопроса ни о чем (как выразился Froggyweb) об организации своего workflow и начинают не с того, с чего стоило бы начинать в результате это приводит к тому, что некоторая работа просто дублируется, переделывается и т.д. лишь потому, что изначально об этом не подумал.

Дизайнеры "лепят" макеты кто во что горазд, и кто на чем может, и кто как может, особенно начинающие. Клиенты, с целью сэкономить, частенько прибегают к услугам именно начинающих дизайнеров, иногда явно очень талантливых, но ещё не постигших некоторых норм поведения в плане того, в каком виде следует представить макет верстальщику. Ведь для клиента: красиво, вроде все кнопочки есть, картиночки есть и ссылочки на месте - все хорошо. Нам же приходится это расщеплять.

Я работаю на трёх мониторах: центральный - вёрстка, левый - результат, правый - дизайнерский макет + чего ещё что надо по ходу пьесы, типа киношки, статейки и т.д.;

Среда:
в Visual Studio - для сложных и крупных проектов, плотно подсевших на Back-End;
в Visual Studio Code - для проектов попроще;
хе-хе в Блокноте - для совсем простых))

Музыка – это святое, тем более я её тоже иногда пишу, но слушаю всегда чужую на SoundCloud))

Создаю папку решения

Создаю в ней подпапку всегда с одним и тем же имеем: _native_design, в которую (в зависимости от формата портирую дизайн)

Выбираю явственно общие компоненты страниц (шапка, контент, меню, боковые меню, подвал и д.р.) и для каждого создаю простой пустой файл scss с названием, соответствующим компоненту.

На этих компонентах выбираю неизменяемые и изменяемые элементы и определяю для них селекторы в соответствующих файлах scss (тут всегда туго с названиями, поскольку от природы я не очень одарён)

Часто встречающиеся типовые элементы также удостаиваются собственного каскада, выделенного в отдельный файлик)) для записи в него миксинов и т.п.

Исходя из сетки, и из минимально необходимой версии браузеров (речь конечно же об IE), создаю файл _base.scss который наполняю сбросом стиля, и объявлениями для grid (ну все это не вручную, а сниппетами, импортами, инклудами, которые у меня подготовлены почти на все случаи жизни).

Стараюсь придерживаться отлично зарекомендовавшего себя принципа "one base", который подразумевает единую основу для всего макета, т.е. есть одни базовый каркас (основа), и эта основа является местом для навешивания на неё всего необходимого. Часто вижу ошибки в этом плане, когда доходит до того, что ради одно "нестандартного" компонента страницы, встречающегося НЕ на каждой странице, используется отдельный (и не один) базовый стиль (по сути, файл), в котором 90% каскада продублировано с другим и т.п.

После такой подготовительной работы начинается HTML, и когда он готов, перехожу к непосредственно блокам в каскад, разумеется, в постоянном контакте с HTML – это самый долгий этап во всей работе, я думаю все это прекрасно понимают.

Шрифты, тоже достойны внимания, т.к. не все дизайнеры знают, что это такое с точки зрения Web, и используют их не по назначению (такое бывает), что требует согласования.

Потом начинается работа с адаптивностью. Я всегда сворачиваю контент, т.е. начинаю с широкого формата, потом desktop, tablet, mobile. Тут ничего сложного нет, особенно когда есть сетка, исходя из того насколько много компонентов плотно зависят от размеров, выбираю как прописывать медиа-запросы, т.е. либо запрос внутри селекторов блоков, либо селекторы внутри запроса. Как правило, используется 4-6 точек + по две на каждую основную точку, т.е. на 1px больше и на 1px меньше, но не всегда, зависит от макета. Не забываем про DPI.

Потом начинается работа с картинками. Ее я выношу отдельным этапом из-за умений или неумений дизайнера. Поскольку графика не всегда векторная там, где она таковой желательно должна быть, не всегда сразу это обнаруживаешь, тогда начинаешь трясти дизайнера, чтоб доводил до ума. Тут я думаю особо вопросов быть не должно. Оптимизация растра, оптимизация вектора и т.п.

Потом начинается JS, т.е. наполнение интерактивом уже не средствами CSS, а именно скриптовым.

Потом начинаем крутить-вертеть макет везде, где-только можно, исходя из требований клиента о поддержке минимальной версии браузеров. Тут сложностей особо не бывает, так как с браузерами в плане поддержки стандартов уже полегче, и юзеры стали обновлять чаще свои браузеры. Так или иначе изначально верстаешь с оглядкой на тут самую минимальную версию. Хотя бывают еще запросы на поддержку IE7, особенно часто от клиентов из средней Азии.

Короче, как-то так… ради ответа, открыл Word и накатал этот текст. Уверен, что что-то пропустил, о чем-то не сказал, но не судите строго))

UPD:
Забыл сказать: про измерения скорости загрузки и скорости отрисовки. Этому стоит уделять внимание особенно в макетах со сложной композицией! Следует помнить о том, что перед отрисовкой браузеры проводят серьезный анализ DOM и каскада стилей, есть способы оптимизировать эти моменты, это важно для мобильных устройств, если у сайта нет для них отдельной версии. Это же касается и JS в части вашего ручного кода.

UPD2:
Ребят, я Skype указывал не для того, что вы присылали мне на него вопросы. Есть уточнения, пишем сюда или создаем новый вопрос на Тостере. Спасибо за понимание.
Ответ написан
NooNoo
@NooNoo
Aut cum scuto, aut in scuto
Mikhail @NooNoo
Рубрика "Давай глянем,что там у нас есть". Я использую такие штуки в работе:
Препроцессор: LESS
Работа с макетами: PH или Sketch.
Сборщик: Gulp
Методология: БЭМ (но начал заглядываться на SMACSS)
Консоль: консоль :D
Место хранения репозитория: GitHub.

1) Создаю репозиторий на гите.
2) Создаю локально структуру проекта. (папки для картинок и тд).
3) Открывают макет
4) Создаю первые наброски в html (создаем классы по выбранной методологии), в голове держим,что mobile first. Подключаю основные фалы препроцессора (шрифты, глобальные стили, миксины, класс visually-hidden, переменные)
5) Выстраиваю сетку. (flexbox или гриды)
6) Начинаю стилизовать мобилку -> планшетную -> десктопную версию.
7) Отшлифовка кода и поиск более рациональных решений, где это допустимо.
8) Донастройка сборщика, который все в итоге соберет продакшен версию.

Вкратце как-то так)
Ответ написан
Krasnodar_etc
@Krasnodar_etc
little front
1) Определение инструментов, их настройка
2) Выделение общих/переиспользуемых компонентов
3) Самое сложное - придумывание названий
4) Вёрстка
Ответ написан
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Начинается с https://www.mosne.it/playground/mosne-flexbox/
и этим всё и заканчивается. Он - полностью покрывает все потребности.
UPD: Когда админка или SPA - иногда подрубаю свой велосипед: xmoonlight.github.io (включая includeHTML)
UPD2: А вот это для тех, кто любит кодить на jQuery: смотреть ролик.
Ответ написан
@skeevy
Junior Forntend (?)
0) Включаю музыку, проверяю обновления пакетов и npm =)
1) Клонирую из собственного форка немного переделанный OptimizedHTML
2) Визуальный анализ макета, загрузка в AdobeAssets/Avocode
3) Составление типографики, подключение шрифтов
4) Экспорт графики "как есть", дергаю дизайнера перед сдачей, если необходимо. В целом, оптимизирую графику сам, но ближе к концу
5) Набрасываю первоначальный html, когда готов - работаю над стилями.
6) После подготовки десктопа, работаю над адаптивом. Как правило, много времени не занимает, если сам не сделаю говнокод, благо, sass спасает =)
7) Оптимизирую графику, если необходимо. Прогоняю GooglePageSpeed на своем тестхосте и на github pages
8) По результатам прогона оптимизирую все остальное (крайне редко)

Иногда приходится выполнять и другие действия, но в целом моя работа выглядит примерно так

P.S. Инструменты:
Редакторы: Brackets, SublimeText3. Очень редко Atom (смотрю в сторону VS Code)
Консоль: cmder
Макеты: PSD, sketch через invision.com
Сборщик: Gulp
Методология: БЭМ
Хостинг: GithubPages, собственный хост на hostland
Ответ написан
sashabeep
@sashabeep
Давно я не видел такого звездеца
  1. Визуальная инспекция макетов.
  2. Сборка foundation(он мне зашел лучше bootstrap) через их кастомайзер с предопределенными константами и нужными компонентами. Для некоторых проектов использую только сетку от него. Локально собирать - нафиг он мне сдался, там и так всё, что надо мне есть.
  3. Подкидываю свои css-утилиты для часто используемых блоков, отступов и других мелочей. В зависимости от количества блоков, модификаторы типа фон, цвет и т.п. кладу в отдельный CSS, также, разумеется, есть отдельный css с брейкпоинтами.
  4. Код обычно пишу сверху вниз, каждый блок адаптирую сразу, потом возвращаться лень. Выдумывать классы - дольше всех, как тут выше заметили. Часто реюзаю куски простой вставкой кода.
  5. Для модальных окон прижился lightcase, для каруселей - flickity или owl.
  6. Для иконок чаще всего юзаю FontAwesome, потом в конце верстки через Fontello создаю свой набор для экономии
  7. Не использую препроцессоры, сборщики и т.п. потому что шаблоны в Evolution CMS это тупо размеченный html-код, для сборщиков и препроцессоров нужен не шаред и т.п. Двигаются понемногу в строну twig, но еще лет 5 точно текущий шаблонизатор будет в строю. Базовый шаблон в движке при установке уже содержит некоторое количество готовой верстки, и при указании на CSS примерно 30% дизайна готово без правки шаблонов
  8. Картинки жму в imageOptim
  9. После интеграции шаблонов сжимаю в cms стили и скрипты в один файл, прогоняю pagespeed на реальном движке и стучу в бубен, если меньше 90


Код пишу в Brackets, рисую в Sketch
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
Hyubert
@Hyubert
JS
- win+r
- cmd
- cd ../
- git clone
- npm i
- sblm project_name
- npm start
Ответ написан
@Froggyweb
Много страниц ? Надо делать шаблоны.
Много повторяющихся элементов? надо выносить общие правила.

Вопрос ни о чем. Есть проблема - загугли, не нашел - спроси.

Ответ на вопрос - погулять с собачкой, выпить чашечку кофе на набережной написать npm i....
Ответ написан
alex-1917
@alex-1917
а тут ВСЕ ответы помечаются как решения?
тогда тоже чирикну....)))

1. создаем пустой файл
2. копируем исходный код любого сайта
3. добавляем по вкусу css и js с пункта 2
4. выталкиваем заказчику.
5. коньяк...
Ответ написан
Underdoggit
@Underdoggit
Почитал, но не нашел человека который использует bootstrap4 как css фреймворк? Интересно почему? Неудобен? Или он умирает?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы