Вы получили готовую вёрстку вашего сайта и не понимаете, как можно ее оценить или проверить? Для начала с ней стоит познакомиться.
Вёрстка пришла в разработку сайта из издательского дела. Легко вспомнить, что в книгах, газетах, журналах и любых печатных изданиях текст организован в блоки и подчиняется определенной структуре. Расположение каждого элемента заранее продумано, чтобы процесс чтения был максимально комфортным, а восприятие информации – быстрым.
Вёрстка сайта также служит удобству пользователя, но есть важное отличие: отображение текста, картинок и т.д. может отличаться в разных браузерах и на различных электронных устройствах. Рассмотрим в статье эти и другие нюансы, которые важно учитывать при приёме вёрстки вашего сайта.
Что такое вёрстка?
Архитектура программного обеспечения включает back-end (разработку функционала) и front-end (разработку визуальной части). Вёрстка относится к front-end, так как отвечает за взаимодействие с пользовательским интерфейсом.
То, как на странице сайта будут размещаться заголовки, подзаголовки, изображения, таблицы и текст, зависит от вёрстки. Верстальщик берет дизайн-макет, созданный дизайнером, и «оживляет» его, переводя в читаемую браузером разметку. Для этого создается структура HTML-кода, размещающего элементы веб-страницы в окне браузера в соответствии с макетом. Эти операции требуют знания специальных языков: JavaScript будет задавать веб-сценарий реакций страницы на действия пользователя, а CSS обеспечит оформление и размещение элементов.
Если все сделано верно, пользователь сможет взаимодействовать с контентом, а поисковые роботы после проверок продвинут сайт в выдаче.
Вёрстку делят на виды по нескольким типологиям. Начнем с табличной и блочной вёрстки.
Первая появилась еще во время зарождения интернета. Главный принцип – использование таблиц, наполненных информацией. Поэтому структура страницы напоминает Excel. Табличная вёрстка уже устарела, но ее все еще используют для типовых проектов с возможностью детализации и индивидуализации под различные устройства.
Чтобы закрепить свободное пространство и корректно расположить элементы на странице, создаются пустые таблицы. У них большой вес и по сравнению с блоками они плохо ранжируются.
Блочная вёрстка подразумевает объединение элементов в самостоятельные, независимые друг от друга блоки. Их можно перетаскивать, менять местами и прятать. При перезагрузке они не исчезнут.
Адаптивность
Адаптивность вёрстки – способность адекватно менять содержимое сайта под любое электронное устройство, параметры экрана и поведение пользователя. Поисковики легко распознают аккуратно свёрстанные адаптивные сайты и могут поместить их в ТОП выдачи.
Вёрстка может быть:
- Адаптивной;
- Неадаптивной;
- Разработанной для мобильной версии.
Адаптивная вёрстка позволяет влиять на расположение элементов и удобна при просмотре со смартфона.
Мобильная вёрстка — разновидность адаптивной. Разработка отдельной мобильной версии стоит дороже остальных вариантов, так как этот процесс потребует дополнительного времени специалиста на реализацию каких-либо нестандартных пожеланий по структуре и функционалу. Она обеспечивает корректное отображение на любых устройствах, но такое решение нужно далеко не всем клиентам.
Если заранее проводилось исследование и выяснилось, что ваша целевая аудитория заходит на сайт со смартфона в 65% случаев (и выше), то сначала разрабатывается макет для мобильного устройства, а затем его блочная вёрстка растягивается для десктопного варианта.
Логично, что адаптивная версия обеспечивает максимальный комфорт тем, кто заходит со смартфона, а десктопная – предпочитающим использовать ПК.
Хорошая вёрстка должна быть кроссбраузерной и практически идентично функционировать во всех браузерах: Google Chrome, Firefox, Opera, Safari и др.
Мы обсудили нюансы вёрстки, которые лежат на поверхности, а теперь перейдем к более глубоким вещам.
Критерии оценки качества вёрстки
Вам не потребуется оценивать вёрстку наугад или подключать интуицию — для определения качества есть конкретные операции и инструменты, о которых мы расскажем подробнее.
Проверка валидности кода на W3C
Вёрстка строится на HTML-коде, он отвечает за размер, порядок, форму и шрифт текста, влияет на отображение всех элементов на веб-странице.
Для HTML-разметки есть специальный термин – валидность. При идеальном развитии событий она должна проверяться еще на этапе создания шаблона, потому что исправлять ошибки спустя какое-то время – отдельная работа.
Проверить эту характеристику вам поможет сайт-валидатор W3C, который был создан разработчиками кода в помощь программистам и frontend-разработчикам. Ресурс задает определенные правила, транслирует стандарт кода, который будет понятен для любого ПО. Если код соответствует стандарту W3C, то сайт будет корректно отображаться в поисковиках. С помощью валидатора вы узнаете, есть ли ошибки, опечатки и сколько их. Найденные неточности можно показать вашему специалисту и попросить принять меры, если это критично.
Не стоит паниковать, если вам кажется, что ошибок много. Присмотритесь к их видам: критичны далеко не все – некоторые являются только предупреждениями.
К каждой ошибке даётся комментарий. Например, вам могут посоветовать отказаться от использования устаревшего тега. Но если вы откроете код вместе с вашим верстальщиком, то может выясниться, что элемент кода устарел, но кроссбраузерной альтернативы пока не изобретено. И это ретро- решение выполняет важную функцию для контента, убрать его нельзя.
Некоторые ошибки могут появиться при переносе сайта с HTML на систему управления контентом (CMS).
Еще одна часто встречающаяся ситуация – невалидный код могут содержать виджеты с других ресурсов. Разработчики популярных сайтов с огромным количеством посетителей иногда отслеживают валидность кода менее тщательно, чем владельцы небольших ресурсов.
Добиться идеальной чистоты – непросто и делать это не обязательно. Если вы проверите на W3C Вконтакте, Эльдорадо, Вайлдбериз или ваш любимый сайт, то там гарантированно найдутся ошибки. И эти расхождения со стандартом абсолютно не мешают сайтам продвигаться в поисковых системах и занимать там топовые места. Отсутствие ошибок еще не значит, что ресурс великолепен. Можно провести аналогию со стандартами красоты: многие популярные люди им не соответствуют, но окружающие их просто обожают.
Некоторые СЕО-специалисты считают, что достижение идеала по W3C поможет ощутимо продвинуть сайт. Если это единственный фактор ранжирования, над которым вы работаете, то фантастических результатов ждать не стоит: для СЕО-продвижения важен комплексный подход.
Исправить серьезные ошибки будет полезно, но маниакально стремиться избавиться от нейтральных замечаний – трата времени, которая не даст особого результата.
Лучше с самого начала найти верстальщика, разбирающегося в методологии разработки и умеющего писать чистый код, позволяющий добиться высокой валидности.
Онлайн-проверка скорости сайта на Google Page Speed
Поскольку вы уже вошли во вкус проверок сайта с помощью специальных инструментов, то протестируйте его скорость с помощью Google Page Speed. Если веб-страницы грузятся долго, потенциальный клиент не будет ждать дольше 3-4 секунд и просто перейдет к вашим конкурентам. Поисковые роботы тоже отследят нюансы со скоростью и могут вовсе скрыть сайт из выдачи.
Google PageSpeed протестирует ресурс в мобильной и десктопной версии, даст ему оценку по стобалльной шкале и промаркирует определенным цветом. Красный – критичные ошибки, желтый – есть над чем поработать, зеленый – не о чем беспокоиться.
Программа определит производительность сайта и даст рекомендации по его оптимизации. Гнаться за показателем в 100 баллов можно только из перфекционизма или спортивного интереса. Иногда зеленой зоны можно добиться, только отказавшись от картинок, видео и cms, поэтому не стоит на нее ориентироваться.
К полезным советам стоит прислушаться. Например, большой вес картинок, действительно, является недочетом. Достаточно уменьшить вес изображений без потери качества, воспользовавшись сервисом Tiny PNG или любым подобным.
Не нужно реализовывать абсолютно все рекомендации в ущерб функционалу.
Опасайтесь сомнительных контор, которые обещают мгновенно обеспечить 100 баллов в Page Speed для вашего сайта. Иногда это делается не с помощью исправления ошибок, а обманными манипуляциями, вроде поддельной главной страницы или специальной строчки кода. Если Google уличит вас в подобном авантюризме, то вы получите бан и иные малоприятные санкции.
Чтобы разобраться, так ли обязательны 100 баллов и зеленая зона в принципе, можно проверить сам сервис Page Speed. Он набирает совсем немного единиц и находится в красной зоне. Значит, для самих разработчиков это не так важно.
От Page Speed можно получить полезные советы, но стоит ориентироваться на здравый смысл и не пытаться выполнить все рекомендации до одной.
Соответствие стандарту БЭМ
Верстальщик заранее продумывает архитектуру будущего сайта, чтобы можно было создать чистый, масштабируемый код, обладающий логикой.
Вам хотелось бы глубже разобраться в терминологии и получить информацию из надежного источника? У Яндекса есть БЭМ-стандарт (блок, элемент, модификатор). Изначально он создавался для внутренних потребностей компании, потому что с ростом команды потребовался единый стандарт и терминология для организации рабочих процессов. Теперь эти знания доступны всем желающим.
К нему обращаются при работе над крупными и средними проектами, где вёрстка может потребовать значительных временных затрат. Если у вас небольшой сайт, над которым работает грамотный верстальщик, то опора на БЭМ-стандарт станет плюсом для СЕО.
Единообразие и аккуратность кода – огромное преимущество. Если вам придется поменять верстальщика, то внести изменения в код сможет любой грамотный специалист, а не только тот, кто его писал.
Правильная сетка
При восприятии информации человеку важно не только содержание, но и форма подачи. Для того, чтобы пользователю было удобно взаимодействовать с веб-страницами, они строятся на основе сетки.
Модульная сетка – система для организации объектов в пространстве, включающая ряды и колонки заданного размера. В её ячейках можно размещать текстовые блоки, заголовки, картинки и т.д. В сетку закладывается и воздух, потому что большой объем однородной информации может запутать пользователя. Больше узнать о пользе негативного пространства вы можете из нашей статьи.
Главная функция сетки – обеспечение порядка и гармонии в пространстве веб-страницы.
Монотонная сетка из одинаковых квадратиков быстро утомит пользователя, а значит снизит конверсию сайта. Поэтому важно, чтобы в столбцах и отступах была динамика.
Вы можете развивать свою насмотренность в сфере веб-дизайна, изучая разные типы сеток:
- В стиле Pinterest;
- Masonry (кирпичная кладка);
- Сетка F (направление взгляда);
- Сетка n+1;
- Коллаж из модулей;
- Асимметричная и т.д.
Обязательно обсудите специфику выбранной сетки с вашими разработчиками, чтобы подобрать оптимальный вариант.
Сетка должна соответствовать макету и адекватно отображаться, независимо от разрешения. И на экране смартфона, и на широкоформатном мониторе она должна правильно подстраиваться под пространство. Ширина, размер шрифта, отступы – при качественной разработке всё продумывается заранее для каждого разрешения. Благодаря сетке, элементы могут переноситься на новые строки или менять свои размеры, в зависимости от расположения.
Можно ли ускорить процесс разработки?
Если с реализацией проекта необходимо уложиться в жесткие сроки, рассмотрите решение, позволяющее ускорить процесс вёрстки сайта. Поинтересуйтесь у ваших разработчиков возможностью использования Bootstrap. Это HTML, CSS, JS-фреймворк, где собраны инструменты, упрощающие и ускоряющие вёрстку. Специалистам не потребуется писать код с нуля, потому что в основе Bootstrap лежит готовая вёрстка.
Фреймворк Bootstrap обладает следующими возможностями и свойствами:
- Быстрое создание качественных адаптивных дизайнов сайтов, за счет использования классов и компонентов, протестированных многими веб-разработчиками;
- Обеспечение стабильности интерфейсов, которые «не поплывут» от смены разрешения экрана;
- Соответствие современным трендам дизайна;
- Отсутствие необходимости погружаться в код;
- Кроссбраузерность;
- Кроссплатформенность;
- Оптимален для создания мобильных версий, благодаря сетке.
Когда-то Bootstrap разрабатывался, как библиотека компонентов Твиттера, но со временем стал популярным открытым фреймворком, который можно скачать и бесплатно использовать как в личных, так и в коммерческих целях. С ростом количества пользователей возросло и количество багов, которые специалисты своевременно устраняют, развивая сервис.
Процесс работы с Bootstrap достаточно прост для специалиста с базовыми навыками:
- Скачать;
- Подключить к странице, получив большое количество классов и готовых компонентов;
- Создать сетку;
- Наполнить контентом.
Фреймворк предоставит классы для создания сетки, обеспечивающей адаптивность макета веб-страницы, а также служебные классы и предназначенные для стилизации контента. Готовые компоненты представлены выпадающими списками, кнопками, хлебными крошками и т.д.
Для каких проектов это решение не подходит?
Bootstrap нельзя полностью использовать для сайтов с уникальным дизайном, но в этом случае можно позаимствовать сетку. Также он не подходит для создания маркет-плейсов, крупных новостных сайтов и ресурсов со сложными компонентами, где в дальнейшем планируется редизайн. В иных случаях использование Bootstrap будет удачным решением.
Для корректной работы стоит использовать максимально новую версию, так как она поддерживает последние стабильные версии браузеров.
Если вам требуется быстрый старт проекта и качественная адаптивная мобильная версия, то выбирайте профессионалов, работающих с Bootstrap.
Как принимать вёрстку?
Чтобы проверить качество вёрстки, протестируйте её в нескольких браузерах на устройствах с различными разрешениями экранов. Если есть статистика по посетителям сайта, то попробуйте те форматы, которые у них популярны. Оцените внешний вид и убедитесь, что реализованный функционал точно совпадает с ТЗ и нет расхождений с макетом. Интерактивные элементы должны быстро откликаться на действия пользователя.
Заказывали редизайн сайта? Потребуется точно такая же тщательная проверка.
В веб-студиях, где работают профессионалы, вас всегда спросят, с каких устройств ваши клиенты чаще заходят на сайт. В зависимости от ответа будет выбрана очередность создания версий, в которых не должно быть расхождений по качеству. Грамотный верстальщик всегда адекватно сделает десктопную версию, даже если основной является мобильная.
Иногда возникает потребность проверить вёрстку, а смартфона с необходимым вам разрешением нет под рукой. Из ситуации есть выход: воспользуйтесь эмулятором разрешений экрана, например, от Google Chrome. Сайт должен хорошо выглядеть при любой ширине экрана. Не забудьте, что при его использовании необходимо обновлять кэш при каждой смене разрешения экрана в эмуляторе.
Учитывайте, что использование эмулятора дает только представление о будущем сайте: обязательно встретятся отличия между смоделированным вариантом и настоящей вёрсткой. Разработчики знают о подобных нюансах, как и клиенты, обладающие необходимыми знаниями и опытом.
Выводы
Верстальщик создаёт структуру всех элементов на сайте по заранее разработанному макету. От вёрстки зависит, как будет располагаться ваш контент и насколько удобно с ним будет взаимодействовать.
Воспользовавшись перечисленными в статье сервисами, вы сможете составить общее представление о качестве вёрстки, даже если у вас нет профильных знаний в этой области.
Выявленные ошибки могут быть критичными и привести к нестабильной работе веб-страницы и просадке по СЕО, а могут оказаться просто рекомендациями, причем не всегда полезными. По этой причине стоит работать над качеством сайта, а не над выбиванием оценки в 100 баллов из очередного сервиса.
Хотите, чтобы вашим сайтом занимался грамотный верстальщик, способный изначально создать чистый и беспроблемный код – обратитесь к профессионалам.