Привет друг 👋🏻, меня зовут Андрей Лобанов, наверняка ты ищешь верстальщика для верстки твоих макетов чтобы поскорей натянуть на админку, запустить рекламу и получать деньги от проекта?

Чтобы у тебя отпали вопросы, как происходит процесс верстки, давай быстро пробежимся по этапам на примере 👇

Расчет цены и сроков

Для подсчета мне нужны макеты в любом формате, можно просто картинкой, желательно с планшетной и мобильной версией.

Не забудьте

Но нужно не забыть про скрытые элементы дизайна, например всплывающие окна. Скрытые элементы нужно прикрепить отдельными картинками

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

На рассчет цены верстки у меня уходит от получаса до двух часов, поэтому отнеситесь пожалуйста серьезно к подготовке исходников и описанию анимации

Маша

Была в сети 9 минут назад

Привет

По стоимости данный объем сколько выйдет?

https://yadi.sk/d/LK-eyVp4hw

Могу через час посчитать, ок?

Ок

Предоплата 25%

Маша

Была в сети 9 минут назад

Предоплата 25%
Карта: xxxx xxxx xxxx 0342 - Лобанов Андрей Евгеньевич

Через пару минут скину

Пришли

Отлично

Вечером скину результаты

В случае с лендингами предоплата 50%, если же проект большой, то предоплата может разбиться по условным этапам по 25% или 10% по желанию заказчика

Подключение шрифтов

Если шрифты есть в fonts.google.com, то все в порядке, в противном случае вам нужно скинуть редкие шрифты со своего компьютера вместе с исходниками макетов

Почему ты сам не найдешь, сайтов полно!

Дело в том, что шрифты эти на сайтах есть. Но когда подключаешь эти шрифты они не сходятся с теми, какие есть в макете.

Маша

Была в сети 9 минут назад

Скиньте пожалуйста шрифты, какие есть в макете

Lato.zip5.4 МБSansation.zip1.2 МБ

Спасибо

Разбивка на компоненты

Перед тем как начать верстать, нужно визуально просканировать все макеты на одиноковые элементы, например “Логотип”, “Заголовки”, “Текста” или какие то похожие блоки, после сканирования сделать выводы для каких элементов написать общие стили.

Зачем это нужно?

Разбив сайт на компоненты, можно один раз написать стили и переиспользовать сколько угодно на сайте без потери во времени на переписание того что уже написано.

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

Также если вам нужно будет создать новые страницы, то можно использовать уже готовые компоненты

Pixel Perfect

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

100% соотвествия не бывает!

Макеты рисуют не роботы, поэтому иногда блоки в макетах стоят не ровень со остальными блоками, в таких случаях есть погрешности соответсвия с макетом, если макет немного кривоват.

В случае кривоватого макета выравниваю элементы на свое усмотрению, чтобы все было четко выровнено.

Адаптация под планшет и телефон

После успешной верстки десткопа* принимаюсь складывать верстку под планшет и телефон.

Просьба к дизайнерам

Сделайте мобильную и планшетную версию, плииииз 🙏🏻
Это не сложно, текста уже написаны, фото обработаны и цвета подобраны, стоит потратить час - два максимум и вы с легкостью сложите макет.

Если ваши работы будут с адаптивным дизайном под телефон и планшет, это будет вашим конкурентным преимуществом, а конверсия сайта на планшетах и телефонах будет выше

Проверка в разных браузерах и тестирование

В 90-х когда появилась верстка не было теней, градиентов и загруглений в самой верстке, всю эту красоту можно было вставить только фоновой картинкой на сайт, а поверх верстать текст и ссылки. Со временем в новых версиях браузеров* появились возможности нативных теней, градиентов и всех остальных фишек, но браузеры старых версий как не поддерживали фишки так и не поддерживают. Конечно сейчас все используемые браузеры поддерживают тени и градиенты, это было приведено к примеру, но все же остались версии браузеров с своими особенностями. И таких особенностей множество. Поэтому верстать нужно с учетом браузеров которые все еще популярны, это называется кроссбраузерная верстка.

Как проверяю?

Скачиваю все популярные браузеры на компьютер и открываю верстку во всех скачанных браузерах, просматриваю не поплыла ли верстка и проверяю все кнопки на работоспособность.

Проверка на валидность

Верстка состоит из тегов, и каждый тег что то обозначает.
К примеру этот тег обозначает заголовок:

<h1></h1>

Обычно в этот тег нужно поместить то что ищет человек

<h1>Купить подушку</h1>

В этом случае когда кто то забьет в поисковой строке “Купить подушку”, поиск посмотрит в своей базе сайтов у кого заголовок на сайте релевантен запросу пользователя, тот сайт он и покажет выше всех.
Конечно это только один из факторов, но он один из самых важных.

В чем же проверка на валидность? Бывают случаи когда заголовок помещают не в тот тег. Например заголовок могут поместить в обычный тег <div>:

<div>Купить подушку</div>

Этот тег ничего не значит, в этом случае когда кто нибудь забьет в поисковой строке “Купить подушку”, то на вашем сайте поиск не найдет заголовка в теге <h1></h1> и решит что ваш сайт не релевантен и отправит сайт на 2 или 10 страницу поисковой выдачи. Это не единственная ошибка, которую можно допустить при верстке, их множество.

Для кого это важно?

Этот пункт важен для тех кто планирует продвижение в поисковой выдаче, то есть в SEO.

Проверка на скорсть загрузки страницы

Проверяю верстку на скорость загрузки через сервис google-page-speed*. Сервис сканирует страницу и показывает по пунктам что можно сделать, чтобы загрузка страницы была молниеносной

Важно!

Когда пользователи заходят на сайт, важно чтобы страницы грузились не больше секунды, в противном случае потенциальный клиент уйдет к конкурентам, только потому что сайт конкурента загрузился на пару секунд быстрей.

Проверка по чек листу верстки

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

Проверка заказчиком

Заказчик проверяет визуально верстку и код если он технически подкован.

Доработки и правки!

Если вы выявите какие то недоработки то я исправляю, если эти недоработки были оговорены до начала работ, то конечно я доделаю бесплатно, в противном случае если правок не много то я тоже поправлю бесплатно.

Маша

Была в сети 9 минут назад

Добрый день

https://w.lobanof.ru/site/

Здесь будет картинка первого экрана вашего сайта или вы можете предоставить вашу оригинальную картинку для соц сетейЗаголовок сайтаОписание сайта

Если у вас есть замечания, напишите, исправлю

Оплата и передача исходников

Маша

Была в сети 9 минут назад

Андрей, все круто!

Вы можете скинуть исходники?

После оплаты

готово

https://yadi.sk/d/2_sUZnBA

После последней оплаты передаю исходники ссылкой на Яндекс.Диск. Ссылка на верстку доступна в течении месяца Если у вас появятся дополнительные доработки по макету, то я никуда не исчезаю, всегда на связи

Узнать цену верстки