ДЕЛАЮ ВЕРСТКУ ДЛЯ ПОРТФОЛИО - ДЕЛАЮ КАК ДЛЯ СЕБЯ!

Кратко, для тех, кто ценит свое время!

Чем я занимаюсь:

• Простая и сложная верстка сайтов
• Верстка по макету, пиксель перфект.
• Адаптивная верстка под любые разрешения экранов
• Кроссбраузерная верстка под разные виды браузеров
• SEO и семантическая верстка, оптимизация верстки под поисковые системы
• Оптимизация скорости загрузки, верстки под Google PageSpeed

Какие типы сайтов верстаю:

• Лендинг пейдж
• Интернет-магазины
• Сайты-визитки
• Порталы
• Блоги
• Корпоративные сайты
• И т.д.

Используемые технологии:

• HTML5 + PUG
• CSS + SASS
• FLexbox/Bootstrap
• Figma/Avocode.
• БЭМ
• Gulp
• JS/Jquery
• Git
• Open Graph/Schema.org

Подробно, для тех, кто любит детали!

Верстка - это проект:

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

• Файлы разделены по типу (HTML, CSS, JS, изображения, шрифты и т.д.) и вынесены в отдельные папки.
• Списки подключаемых стилей и скриптов вынесены в отдельные файлы и могут подключаться как модули.
• Основные блоки типа хедер, футер, меню и т.д. вынесены в отдельные файлы, что позволяет применить изменения блока одновременно для всех страниц проекта.
• Стили разбиты на логичные подразделы:  основные, вспомогательные, общие, вендорные, модули, ui-элементы и т.д.
• Компоненты размечаются по методологии БЭМ. Стили каждого БЭМ-компонента вынесены в отдельный файл.
• Все изображения разложены по отдельным папкам. Папки именованы соответственно блокам, в которых они используются.
• SVG-иконки собраны в спрайт и подключаются отдельно.
• Код разметки разбит на секции, которые для удобства выделены комментариями.
• Для фирменных цветов, шрифтов, брейкпоинтов и т.п. используются SASS-переменные, их значения можно легко менять из одного файла для всего проекта.
• Все имена и названия являются осмысленными и понятными.

Почему верстка будет качественной?

Проверенные технологии.

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

Гибкая сетка

При помощи flex-элементов я могу реализовать почти любую сетку расположения элементов: стандартную на 12 колонок, кастомную сетку на 16, 18, 24 колонки или любую другую. Но также возможны и совершенно немыслимые соотношения:  отдельная колонка может занимать, например, 128/1170 часть контейнера! А это значит, что при ширине контейнера 1170px колонка будет иметь ровно 128px по ширине, как и указал дизайнер, но, при растяжении/сжатии контейнера, колонка будет сохранят правильную пропорцию и выглядеть гармонично. Значения можно менять для любых разрешений экрана на другие немыслимые, делая красивые переходы под планшеты и мобильные устройства. 

Идеальные шрифты

Так же изюминкой сайта могут быть гибкие размеры шрифтов, которые будут плавно меняться в заданных пределах. Как это работает? Размеры реагируют на вьюпорт (область просмотра). Например, для экранов шириной от 1920px до 1170px, можно указать размер шрифта от 48px до 32px. Размер шрифта будет точно соответствовать в крайних точках (ровно 48px для ширины экрана 1920px и ровно 32px для ширины экрана 1170px) и плавно меняться от 48px до 32px при изменении ширины экрана (например,  37.76px при ширине экрана 1440px). Вне указанных пределов, можно сохранить динамику изменения или же зафиксировать размер. Так на 1024px шрифт уменьшается до 28.8853px, на 787px - 23.424px, либо останется 32px для всех расширений меньше нижней границы в 1170px. И, самое приятное, что таких пределов может быть столько, сколько нужно, чтоб шрифт выглядел идеально. 

Чистый код

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

Скорость загрузки

Я отлично разбираюсь в оптимизации важных параметров под новые требования Google PageSpeed: First Contentful Paint, Largest Contentful Paint, Cumulative Layout Shift, Total Blocking Time и т.д.. Из-за медленной скорости загрузки

на 11% меньше просмотров страниц,  снижение удовлетворенности клиентов на 16%,  потеря конверсии на 7%. Фактически, 47% потребителей ожидают, что веб-сайты загрузятся за две секунды или меньше. А 40% покидают страницу, которая занимает три и более секунд.  

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

А что еще?

Приятные бонусы, которые делаю хорошими не только код, но и отношения:

• Целый месяц сопровождаю проект после завершения работы
• Все правки бесплатно
• Сайт будет продемонстрирован на моем тестовом сервере
• Все резервные копии проектов хранятся на случай, если с вашей копией что-то случится
• Добавлю простую микроанимацию, которую, как обычно, не указал дизайнер)

Еще сомневаетесь? Тогда примеры работ ниже.