Услуги Верстка PSD → HTML
Последние работы из портфолио

Что такое HTML-верстка?

HTML-верстка, или просто верстка применительно к веб-разработке — это процесс преобразования графического представления того, как должен выглядеть будущий сайт в рабочий шаблон для этого сайта посредством языка разметки гипертекста HTML, каскадных таблиц стилей CSS и в некоторых случаях языка программирования JavaScript.

Услуги

  • Верстка HTML шаблонов (в т.ч. адаптивных) на основе ваших дизайн-макетов;
  • Правка HTML и CSS кода - исправление ошибок отображения на уже существующих сайтах;
  • Создание адаптивной версии сайта на основе уже существующей;
  • Доработка шаблона в случае необходимости добавления новых блоков на сайт;
  • Все остальное, что так или иначе связано с версткой. Пишите.

С системами управления контентом не работаю. Иначе говоря таких услуг, как адаптация шаблона под CMS ("натяжка на движок") на текущий момент времени не оказываю, хотя опыт подобного рода работы имеется.

Опыт работы

Фрилансер. Верстаю под заказ более 10 лет, начиная с 2009 года.

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

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

Приходилось работать как с частными лицами, так и с организациями.

Заинтересован в постоянном долгосрочном сотрудничестве.

Что вы получите

Соблюдение сроков

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

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

Оперативную обратную связь

Cообщения, поступившие на электронную почту, вижу сразу и отвечаю настолько быстро, насколько это возможно. Пишите

Наиболее оптимальный способ верстки

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

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

Попиксельная верстка (Pixel perfect)

Идентичность шаблона макету — "pixel perfect", "попиксельная верстка", "верстка 1 к 1 с макетом". Стараюсь придерживаться этого правила там, где это возможно.

Особо следует отметить, что непосредственно разработка ведется под Google Chrome вследствие того, что он является наиболее часто используемым браузером.

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

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

Кроссбраузерность

Проверяю корректность отображения шаблона в последних версиях следующих браузеров (Windows):

  • Google Chrome (и аналоги - Yandex Browser, Opera, Comodo Dragon и т.д.)
  • Firefox
  • Edge
  • Internet Explorer

Мобильные версии адаптивных шаблонов (Android):

  • Google Chrome

К сожалению на ОС, отличных от Windows и Android, вживую проверить возможности обычно нет.

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

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

Валидность

HTML-код является "правильным" с точки зрения W3C по стандарту xHTML 1.0 Strict, либо HTML5.

Активное применение возможностей CSS

Максимально возможное использование каскадных таблиц стилей в реализации элементов дизайна.

Активное использование наследования, дочерних и соседних селекторов, а также псевдоэлементов и, как следствие, отсутствие большого количества мусора в виде лишних классов и снижение в HTML-коде количества разметки, вводимой только для создания элементов оформления.

Предпочитаю обходиться минимумом классов. Любимые многими методологии по типу БЭМ использую достаточно редко и лишь там, где это действительно имеет практический смысл с моей точки зрения. В большинстве случаев, с которыми я сталкиваюсь, применение этой методологии (в полной мере) практического смысла лишено и лишь приводит к замусориванию исходного кода страницы.

Блочная верстка

Так называемая "верстка слоями", "верстка div-ами". Компактность HTML кода. Минимально возможное количество разметки для достижения нужного результата. А, соответственно, несколько большая скорость загрузки страниц, простота понимания разметки для программиста при адаптации под CMS ну и, в конце концов, лучшее отношение поисковых систем к сайту.

Адаптивная верстка

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

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

В этом случае вам необходимо предоставить мне PSD макеты, в которых будет отрисовано оформление сайта в нескольких вариантах - от мобильного телефона до десктопа.

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

Контент в начале страницы (по запросу)

Вынесение блока с контентом в самое начало HTML там, где это возможно. В этом случае при загрузке страницы основное ее содержимое подгружается самым первым, потом уже идут разного рода блоки навигации и т.д. и т.п. Лучше для поисковиков. Только по предварительной договоренности и за дополнительную плату.

"Неломаемость" верстки

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

Возможность работы с сайтом при отключенной графике

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

Использование "спрайтов" (png, svg)

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

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

Оптимизация графики

Ищу необходимый баланс между "весом" изображения и качеством его отображения для растровых изображений.

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

JS, jQuery, ...

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

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

Нестандартные шрифты

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

PageSpeed Insights

Тестирую верстку посредством сервиса PageSpeed Insights, оценивающего скорость загрузки сайта. Максимальных баллов не обещаю, но стараюсь вывести в зеленую зону, либо как можно ближе к ней.

Исправление ошибок

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

Исходники в комплекте с итоговым шаблоном (по запросу)

Все исходники, т.е. файлы sass (синтаксис scss), несжатые изображения и т.д., а также конфигурационные файлы под Gulp, будут предоставлены исключительно в случае, если вы укажете на такую необходимость в момент оформления заказа. Никакой дополнительной платы за них не беру, в случае необходимости предоставления исходников использую несколько иные методы работы.

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

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

Что требуется для заказа верстки?

Макет

Макет в формате PSD, в котором отражено то, как должен выглядеть будущий сайт.

В случае адаптивной верстки необходимо предоставить, в идеале, как минимум три варианта оформления под различные ширины - десктопный (от 992px), планшетный (576px - 991px) и мобильный (до 575px). Указанные диапазоны могут отличаться.

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

Техническое задание

Описание необходимого поведения элементов сайта.

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

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

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

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

Дополнительные материалы

Желательно прислать вместе с макетом:

  • Используемые в макете иконки отдельными файлами в формате SVG. Обязательно изначально отрисованные в векторном редакторе, а не растр, обернутый в SVG.
  • Исходные файлы используемых шрифтов. Если шрифт платный, он должен быть вами легально приобретен. В противном случае, настоятельно рекомендую использовать вместо него любой из бесплатных шрифтов с сервиса Google Fonts.
  • В случае наличия неоднородного фона, полученного путем повторения одного и того же изображения, приложить соответствующий паттерн.

Заказать HTML верстку