Дополнительные

услуги

УЗНАЙТЕ

СТОИМОСТЬ

ВЕРСТКИ

Прикрепить ссылку на ваш макет в фигме или на облако с файлами дизайна и я вышлю вам предложение

Вопрос-ответ

Что такое адаптивная верстка?

Адаптивная верстка - это верстка способная видоизменяться при изменении разрешения. Тут важно различать лишь два подхода в ее реализации:

  • Устаревший метод с использованием адаптивных сеток (это библиотеки размерностей, в которой переопределяются размеры блоков на каждый пиксель монитора). Самая распространенная из них Bootstrap. Для многих она стала синонимом адаптивной верстки, но данная технология уже устарела, т.к в уже CSS3 добавили адаптивные свойства и адаптивную верстку можно сделать без сетки.  Главный минус верстки на адаптивной сетки в ее тяжеловесности, это сильно замедляет загрузку сайта.
  • На адаптивном блоке flexblock. Данный блок был добавлен в css более 6 лет назад и уже поддерживается всеми браузерами. Он позволяет элементу самостоятельно подстраиваться под разрешение, а верстальщик лишь определяет его модель поведения.

Я давно уже не делаю верстку на адаптивных сетках, а использую только чистый CSS3 и если вам принципиально нужна верстка на bootstrap, то это не ко мне.

Чем отличается мобильная версия от адаптивной?

Мобильная версия сайта - это самостоятельный сайт на субдомене, как правило, с приставкой m. (прим.: m.site.ru). Адаптивная версия - это тот же сайт, в котором верстка перестраивается по законам адаптивности. Адаптивная версия гораздо дешевле мобильной, но менее качественная, т.к. перестраивается по законам, а не как хотелось бы. Мобильная версия сайта - это уже премиум сегмент, она гораздо предпочтительней для сайтов и имеет ряд преимуществ:

 

Мобильная версия:
+Преимущества

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

-Недостатки

  • Значительно дороже адаптивной версии. 
  • Любые правки верстки необходимо вручную повторять и для мобильной версии, т.к. она самостоятельная и не связана с десктоп версией.
  • Обязательно требуеться дизайн мобильной версии

 

Адаптивная версия:
+Преимущества

  • Гораздо дешевле мобильной версии
  • Быстрее делается
  • Не требует мобильного дизайна, может сама перестроиться по заданным законам.

-Недостатки

  • Менее презентабельна. В адаптивной версии главная задача отобразить 100% контента, а вот за красоту, она не несет ответственность.
  • Тяжелая в загрузке. В мобильную версию загружаются все скрипты и картинки из десктоп версии,  даже если они для нее уже не нужны.
  • Хуже в продвижении
Чем верстка отличается от сборки?

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

Что лучше использовать верстку или сборку на конструкторе?

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

Каких стандартов придерживаетесь в верстке?

Я верстаю по БЭМ - методологии и с компонентным подходом. На каждый отдельный глобальный элемент создается свой файл стилей, так же разделяются UI и layout. Все стили пишу на Less (по запросу могу на SASS). Иконки оформляю в шрифт, остальные изображения предпочтительно в svg.  Для больших проектов использую шаблонизаторы nunchak или pug . Работу веду через GIT.  Javascript только нативный или jquery. Анимация на GSAP, CSS3 keyframe или SVG (очень дорого!!!). GULP использую только по запросу, так как верстаю сразу на хостинге.  

Что такое PixelPerfect?

Pixel Perfect - это сленговое названия минимального расхождения верстки от дизайна, всего до 5%. Сегодня pixel Perfect больше отдельная услуга, нежели эталон качества, т.к. при обычных условиях расхождения верстки с дизайном достигает 15-20%, что считается все равно нормой. Идеального сходство добиться невозможно в принципе, т.к. интерпретация шрифта в разных браузерах разная, что вносит небольшую коррективу в расхождения, иногда в пол пикселя. Глазом это невидно, но помноженное на кол-во элементов, начинает уводить верстку от изначального макета.

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

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

 

В каком формате я получу верстку?

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