По завершению этапа вы должны получить набор файлов, которые уже можно открывать в браузерах.
Что такое верстка макета
Верстка — это перевод иллюстраций в язык понятный браузерам. На этом этапе верстальщик переводит изображение, нарисованное дизайнером в язык гипертекстовой разметки или просто в html. Прописывает все необходимые стили: цвет ссылок, цвет текста, виды заголовков и так далее.
Качественная верстка сейчас, как ни странно, это большая проблема. Верстка макетов считается самой простой работой, и самой низкооплачиваемой. Хотя от нее зависит очень много (вплоть до сложности продвижения!).
Найти квалифицированного верстальщика очень сложно. Как правило, на этом специализируются начинающие программисты, и потом просто уходят в более высокооплачиваемые разделы веб-программирования.
Опять же, после завершения данного этапа требуйте, чтобы вам отдали макеты всех страниц, которые до этого отрисовал дизайнер в утвержденном макете.
Это делается по всем тем же причинам.
Хороший верстальщик делает 1 макет средней сложности за 1 день. Обычно все макеты внутренних страниц сайта отличаются от главного макета в слабой степени. Структура размещения информации та же, меню, заголовок и подвал сайта остаются обычно неизменными. Поэтому «доверстка» остальных страниц занимает еще 1−2 дня при их количестве 5−10 штук.
На этапе верстки уже могут быть запрограммированы отдельные простые эффекты, если они присутствуют: выпадающие меню, изменение цвета ссылок, кнопок и т. д., в общем все то, что делается силами CSS или простых JavaScript скриптов.
Требования к верстке.
Эти требования вы смело можете выдвигать студии на стадии верстки ваших макетов, если вы их не прописали в договоре. Они являются стандартом в индустрии. Если же веб-студия отказывается их выполнять или просит за это отдельные деньги— они не честны с вами. Можно взять макеты, которые у вас на руках после прошлого этапа и смело искать другого исполнителя.
1. Кросс-браузерность.
Это слово обозначает, что во всех основных браузерах последних версий (Chrome, FireFox, Safari, Internet Explorer v7 и выше) макеты отображаются одинаково и соответствуют нарисованным дизайнерами. Конечно, в зависимости от браузера. макет может немного отличаться в силу технических возможностей браузеров. Например, в сафари широкие «пушистые» тени превращаются в странный обрезанный круг.
Здесь обычно грамотные менеджеры задают такой вопрос: «Нужна ли поддержка устаревших браузеров» или «Поддержка Internet explorer 6»?
Здесь кроется такой подводный камень. Существует процент пользователей, которые до сих пор используют устаревшие браузеры (самый распространенный — это IE6), которые не поддерживают современные стили разметки. Верстка с поддержкой устаревших версий браузеров добавляет трудозатрат и сильно усложняет верстку, что, в свою очередь, повышает стоимость разработки. Так что тут надо задуматься, стоит ли заказывать эту поддержку.
Обычно стоит отказываться от такой поддержки, мотивируя тем, что с каждым годом процент этих пользователей уменьшается и стремится к нулю. Некоторые красивые эффекты вообще невозможно воспроизвести в старых браузерах, не отказываться же теперь от них совсем?
2. Максимальная валидность.
Это означает, что сайт сверстан с минимальным количеством синтаксических ошибок в html с точки зрения стандарта. Проверить верстку на соответствие стандарту можно забив соответствующий запрос в гугл.
3. Соответствие макетам.
Пожалуй, это самое простое требование, но нерадивые верстальщики могут его игнорировать и верстать не так как нарисовано, а так как им проще. В студии WebValley, в которой я работаю, за это соответствие отвечает, как ни странно, дизайнер — он в первую очередь утверждает сверстанные макеты. Он промеряет все до пикселя и полутонов шрифтов, если ему что-то не нравится — все отправляется на доработку. И да, я и есть тот самый дизайнер) При таком подходе качество макетов на выходе получается очень высокое, дизайнер знает свой макет от и до. Ему сразу видно, где и в какую сторону произошел перекос.
Но если студия спустит это на тормозах, вы легко сможете проверить сами, поиграв в игру «Найди 10 отличий».
Это надо чтобы все страницы сайта действительно были выполнены в одном и том же стиле. Часто получается, что от страницы к странице почему-то начинает «прыгать шапка» сайта или «подвал», изменяется ширина колонок и цвет основного шрифта. И получается, что хороший стиль, который разработал дизайнер полностью отсутствует у сайта. Помните, макеты дизайнера пользователь вряд ли когда-то увидит — он всегда видит код, созданный верстальщиком в формате «картинки».
Так что к этому моменту необходимо отнестись максимально внимательно.
Как проверить качество верстки
Не углубляясь в дебри веб-разметки и верстки, проверить можно так:
1. Откройте файлы макетов в самых популярных браузерах. Сейчас самые популярные — это Opera; Google Chrome; FireFox; Yandex браузер; Safari (пользователи продуктов Apple).
Установить на свой компьютер все эти браузеры очень просто, достаточно их просто скачать и следовать инструкциям. Во всех браузерах страницы должны выглядеть одинаково! Текст не должен съезжать, все элементы быть на своих местах. Внимательно это проверьте.
Зачем это?
Люди, которые будут посещать ваш сайт, могут пользоваться разными браузерами. И если им не понравится что-то в оформлении или не будет работать какая-нибудь функция, они не совершат покупку или регистрацию, и вы потеряете клиента.
Учитывая, что конверсия сайта и так обычно небольшая, таких вещей не должно быть!
2. Откройте в тех же браузерах (или хотя бы в каком-нибудь одном) макеты на других разрешениях монитора.
Например, на ноутбуке, нетбуке, на большом экране, на среднем. Попросите подчиненных или знакомых попробовать это сделать. Можно просто на своем мониторе попытаться увеличить или уменьшить разрешение. Тут бывают очень неприятные вещи. Сейчас доля тех же нетбуков, у которых диагональ всего 10 дюймов неуклонно растет, а значит и число потенциальных посетителей вашего сайта с таким разрешением экрана.
И если на таком разрешении не будет видно важного элемента (кнопка «купить», поиск и т. д.) или дизайн просто «рассыпается», то вы опять потеряете клиента.
Мобильная версия сайта — это тема отдельной статьи. Лучше заказывать дизайн и разработку мобильной версии отдельно, оценив ее реальную необходимость.
На Тильде, как правило, ну лично наша студия, сайты выполняются сразу с адаптацией под 5 разрешений. Иногда можно сэкономить, и адаптировать под десктоп и мобильную версию и сделать так, чтобы на планшете была мобильная версия. Однако в век текущих и будущих технологий да и вообще в период личного брендинга — это не самое лучшее решение. Лучше потратить 5–7 тысяч дополнительно на адаптацию, чем потом смотреть сайты конкурентов и кусать локти. Ведь когда проект делается комплексно, это дешевле, чем заказывать разработку сайта поэтапно.
После того как все макеты сверстаны и утверждены, собственно, и начинается разработка «движка». Если эта статья вызвала у вас отклик и вы ищете разработчиков, мы будем рады помочь вам с созданием хорошего конверсионного сайта.
— Алексей, CEO WebValley.
