Услуги веб-верстальщика: Вёрстка дизайна для темы Вордпресс
Вёрстка дизайна сайта на WordPress может быть разделена на два этапа:
1) Доработка темы WordPress или Woocommerce для нового сайта.
Вёрстка и дизайн касаются большинства страниц сайта.
2) Создание (вёрстка) специальных страниц с индивидуальным дизайном (обычно в виде лендинга) для существующего сайта. Например если нужно продвинуть новый классный товар.
Вёрстка и дизайн касаются одной (главной) или нескольких специальных страниц сайта.
В зависимости от того, что Вам нужно, подбирается оптимальная статегия работы.
Для кого эта статья
Допустим вы оплатили создание дизайна сайта, и теперь ищите вебмастера, который посадит дизайн на WordPress.
Заказать отдельно дизайн, а потом вёрстку – точно не дешевле, чем заказывать простой дешовый сайт с нуля. Потому что верстальщику вероятно надо вникать в ваш дизайн и думать как это заверстать.
О каком дизайне и вёрстке по цене и типу мы говорим?
Речь не идёт о сайте с особым, уникальным функционалом.
Я имею в виду вёрстку рядового блога, интернет-магазина или малостраничника на CMS WordPress с минимальным или средним бюджетом. Тот случай, когда клиент хочет ХОРОШО И ДЁШЕВО. А ещё и БЫСТРО.
ХОРОШО завёрстаный дизайн сайта – тот, который после вёрстки сохраняет дизайнерскую задумку, хорошо смотрится на всех девайсах (смартфонах, широких мониторах, айпадах), причём сайт идеально работает, а текст везде читаем.
Что первично в вёрстке темы WordPress – PSD-дизайн или адаптивная тема?
Вёрстка дизайна для WordPress никогда не делается только в HTML и CSS.
Вёрстка всегда создаётся с условием внедрения дизайна в тему WordPress, с полным тестированием на сайте.
Вордпресс это сверхпопулярная CMS, поэтому для неё создано огромное количество тем оформления.
Для Вордпресс можно найти темы для любых задач и любых стилей.
Скачаные где-то темы с интересующим нас (вас) дизайном на практике часто не работают как надо (показывают ошибки, не имеют идеальной адаптивности). Исправлять чьи то темы можно, но это не всегда имеет смысл. В премиумных темах обычно много кода, в который надо долго вникать и исправлять.
Поэтому с технической точки зрения проще и надёжнее внедрять клиентский дизайн в протестированные ранее идеально работающие темы.
Наиболее подходящие темы я уже собрал и протестировал, чтобы использовать их для будущих сайтов. Смотрите их на главной.
Почему нарисованый дизайн в макете сайта будет отличаться от завёрстаного в теме?
Внедрение вебдизайна в тему происходит с учётом особеностей темы. Для внедрения дизайна подбирается тема с близкими к желаемым параметрам.
Надо понимать главный принцип работы верстальщика: верстальщик не верстает дизайн пиксель в пиксель по макету дизайнера (так как дизайнер обычно вообще не понимает как работают скрипты адаптивности), а внедряет ваш дизайн (как зрительный образ) в имеющуюся тему. Это главное. Если работать иначе, то заказчик (в большинстве случаев) получит косой сайт в плане адаптивности для смартфонов.
Абсолютное большинство дизайнов можно (без потери дизайнерской задумки) и нужно внедрять в имеющиеся темы.
Какие элементы темы сайта будут немного отличаться от макета дизайнера
В каждой теме есть свой скрипт адаптивности для главного (чаще горизонтального) меню и бокового виджетариа, свои отступы между элементами. Вебмастеру совершенно нецелесообразно тратить время чтобы сделать дизайн точно также как нарисовано в PSD макете, особено это касается выезжающего (сворачивающегося) меню.
Меню.
Вёрстку меню в большинстве случаев лучше не трогать, так как для его идеальной адаптивности грамотные люди потратили не один день на написание и тестирования css и яваскриптов. Этот труд надо ценить и уважать. А не ломать, основываясь на своих нездоровых амбициях (хотелках). А вот поменять цвета шрифты размеры можно.
Отступы.
Отдельно надо подчеркнуть невозможность и нецелесообразность в большинстве случаев заверстать дизайн с теми же отступами и размерами пиксель в пиксель как в макете. Веб-верстальщик верстает так, чтобы хорошо смотрелось и складывалось на смартфонах с учётом общей идеи дизайна, а не так как захотелось нарисовать дизайнеру. Нарисовать в Корел Дро или Фотошоп можно любую ><уйню. Но не любую ><уйню можно заверстать имеющимися средствами. А если выражаться без мата, то дизайнерам глубоко фиолетово как мы будем завёрстывать их творение.
Слайдеры.
Далее. Веб-верстальщик подбирает работающие в данной CMS слайдеры фоток, новостей, фотогалереи и пр.. Разумеется кнопочки и вид слайдеров не может совпадать в нарисованом макете и на сайте в реальности. Ну если не писать свой слайдер с нуля. Что естественно вебмастер не будет делать при вёрстке рядового сайта. К счастью для WordPress дохрена плагинов слайдеров, и всегда можно найти что-то похожее на макет.
Выводы:
– если не гоняться за вёрсткой 1 в 1 по макету (так называемая «пиксель-перфект») – то можно заказать адаптивную вёрстку сайта (и создание сайта в целом) вполне недорого и с гарантированным результатом.