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

В процессе дизайна определяется визуальный облик сайта, его стиль и имидж. Но зачастую (особенно когда дизайн сайта отдаётся фрилансерам) на этапе вёрстки с этим дизайном возникают проблемы. Иногда заказчик их даже сразу не видит: в каком-то одном браузере не работает кнопка, или шрифт плохо читается, или на мобильнике разъезжаются блоки. Но все вместе эти детали способны разрушить даже самый продуманный дизайн, а уж если сам дизайнер не позаботился об удобстве HTML + CSS вёрстки его макета — можно считать, что деньги на дизайн потрачены впустую.

Очень важно, чтобы между дизайнером и верстальщиком (frontend-разработчиком) была надёжная и плотная связь. Ведь они решают одну и ту же глобальную задачу — делают сайт красивым и удобным для пользователя. Поэтому я стараюсь брать в основном проекты не по дизайну в отдельности, а вместе с адаптивной вёрсткой сайта.


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

Google в 2015 году ввёл правила ранжирования, которые понижают в поисковой выдаче сайты, которые сделаны без учёта адаптивности. Поэтому, даже если у вас на сайте мало траффика с мобильных устройств (что странно — в большинстве бизнесов эта доля уже превысила 20%), делать мобильную вёрстку сайта рано или поздно всё равно придётся.

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

Свяжитесь со мной:

оставьте контакты

Чтобы стать моим клиентом,

оставьте свои данные:
я свяжусь с вами

или
Приложите файл

Приложите файл с брифом, ТЗ или просто кратким описанием
вашей задачи

×