Верстка веб-сайта – это один из этапов разработки сайта, на котором верстальщик преобразует все нужные будущие составляющие сайта (заголовки, изображения, текст, видео) в HTML-теги и поверх накладывает CSS-стили.
Работа верстальщика важна, от нее зависит:
- Скорость загрузки веб-сайта.
- Соответствие стандартам HTML.
- Нормальность отображения в браузере.
- Соответствие требованиям поисковиков.
- Оптимизация под разные дисплеи пользователя.
Наши верстальщики имеют большой опыт в данной сфере и могут помочь решить ваши проблемы по созданию сайта. Просто обратитесь в компанию «Лаборатория Бизнеса», и вы получите отличный результат работы высококвалифицированных сотрудников.
Что такое валидная верстка?
Определение верстки плотно пересекается с валидностью. Валидная верстка веб-сайта – это зачастую «чистый», красивый код, который «нравится» поисковикам.
Как сказано выше, это определение очень важно для SEO-оптимизации сайта, потому что грамотно выстроенный код оказывает хороший эффект на поведение поисковых роботов. Также валидный код гарантирует, что верстальщик не совершил логических и синтаксических ошибок во время программирования.
Страница, у которой есть даже несущественные ошибки в коде, не пройдёт валидацию. Не стоит забывать, что самый хороший валидатор – браузер, так как восприятие сайта браузером – это восприятие сайта пользователем.
Главные правила верстки веб-сайта
Рассмотрим базовые правила качественной и правильной верстки сайта.
- Необходимо, чтобы верстка была кроссбраузерной (Firefox, Google Chrome, Internet Explorer, теряющий в недавнее время свою популярность и других). Сайт нужно протестировать на различных разрешениях экрана, от 1024 на 768.
- Верстка всех страниц, которые имеет сайт, должна пройти валидацию. Применение разнообразных CMS, модулей и готовых скриптов, добавление на сайт наполнения разного формата часто делают прохождение валидности трудным делом.
- Внешний вид страницы, которую сверстали, должен максимально согласовываться с дизайном: размеры шрифтов, расстояния между строчками, отступы – все это должно быть согласно настройкам PSD-макета. Достигнуть точности до пикселей часто весьма проблематично, поэтому возможен разброс отдельных частей в пороге 3-6 пикселей.
- CSS-стили должны быть в другом документе. В HTML-коде могут находиться только идентификаторы и классы.
- Необходимо, чтобы логотип сайта ссылался на главную страницу.
- Нужно, чтобы на HTML-страницах находились комментарии к главным элементам: меню, заголовок, шапка, контент, футер и т.д.
- Идентификаторы и классы нужно называть согласно их назначению, они должны быть понятными (menu, footer, header и т.п.).
- В таблицах стилей убедительно рекомендуется применять одни и те же единицы измерения для всех величин.
- Нужно, чтобы текст на кнопках был на одном языке, был написан прописными буквами, или начинаться с заглавной.
- Нужно, чтобы у кнопок был стандартный дизайн, их следует делать либо графическими элементами, либо настраивать при помощи таблиц стилей.
- Нужно, чтобы HTML и CSS-код был как можно меньше. Следует сторониться лишних классов и идентификаторов и использовать свойства наследования.
- Заголовки следует писать только при помощи особых тегов h1, h2 и т.д.
- Нужно, чтобы атрибуты всех тегов находились в кавычках.
Основные подходы к верстке сайта
Есть несколько главных подходов к верстке веб-сайта:
- Фиксированная верстка. Если поменять размер окна браузера, то блоки не изменят свою ширину, а на экранах с низким разрешением будет полоса прокрутки.
- Резиновая верстка. В зависимости от размера окна браузера, ширина блоков изменится.
- Адаптивная верстка. Исполняется при помощи разных скриптов и сделана под конкретные разрешения (320, 768, 1024 и т.п.). Размер изменяется рывками после того, как достигает определенного уровня.
- Отзывчивая верстка. Это симбиоз адаптивной и резиновой версток. Эта верстка – самая тяжелая с технической точки зрения, но в это же время самой результативной.
- Версия веб-сайта для мобильных устройств. В сущности, это разработка отдельного сайта с другим дизайном, версткой и адресом.
Помимо подходов, есть и разные типы верстки. Рассмотрим их ниже.
Табличная верстка
Эта такая верстка, при которой за структурную основу для размещения текста и графики документа применяют таблицы (HTML-тег <table>).
Данный метод верстки был самым известным до того, как появился стандарт CSS, потому что в то время не существовало другой легкой возможности точно разместить составляющие на страничке. Таблицы же, за счет того, что могут автоматически менять свой размер в соответствии с наполнением, и за счет возможности, наоборот, задать точные размеры ячеек, дают возможность быстро и просто расположить изображения к тексту или объединить несколько частей коллажа в одну большую картинку.
Приведем ниже списки достоинств и недостатков табличной верстки.
Достоинства:
- Легкость при создании колонок, а это хорошо сказывается на поведение при изменении размера окна браузера и дает возможность делать многоколоночные макеты веб-сайта.
- Склеивание рисунков. Зачастую рисунки делят на отдельные части, чтобы уменьшить их размер, создать эффект анимации и т.п. Все рисунки помещают в отдельные ячейки таблицы, параметры которой задают так, чтобы границ между ячейками не было заметно.
- Так как высоту и ширину таблицы разрешено указывать в процентах, табличная верстка обычно используется при разработке резинового макета.
- По сравнению с некоторыми CSS-параметрами, таблицы в разных браузерах показываются почти идентично, а это делает процесс создания страничек проще.
- Из-за одновременного выравнивания содержимого ячеек таблицы и по вертикали, и по горизонтали, возможности по размещению разных элементов дизайна относительно друг друга и на странице увеличиваются.
Но есть и небольшие недостатки:
- Для того, чтобы содержимое таблицы грамотно показывалось браузером, она не отображается, пока не загрузится целиком. Если таблица объемная, то загрузка сайта будет происходить долгое время.
- Чересчур большой код из-за иерархической структуры тегов, а это увеличивает трудность внесения поправок в отдельные параметры.
- Неэффективная индексация поисковыми роботами. Наполнение веб-сайта с табличной версткой размещается относительно далеко друг от друга, это усложняет выведение интернет-сайта в топ показов поисковиков.
Блочная верстка сайта
Слои, создающиеся при помощи тега <div> – это весьма удобные структурные компоненты, их оформление устанавливается при помощи таблиц CSS-стилей.
У блочной CSS-верстки существуют, как плюсы, так и минусы, несмотря на преобладание положительных моментов.
Плюсы:
- У блочной верстка объем кода намного меньше, по сравнению с табличной версткой, это не только позволяет быстро обрабатывать страницу, но и снижает нагрузку на сервер.
- Удобность смены дизайна при помощи редактирования файла стилей.
- Преимущества по SEO. Вместо кода первым делом определяется контент и семантически правильно размечается.
- Увеличенная удобочитаемость кода, это помогает подходить под стандарты валидности.
- Задачи по специфическому оформлению и месторасположению деталей сайта могут быть легко воплощены в жизнь.
- Возможность разработать адаптивный дизайн, который будет правильно отображаться как на компьютерах, так и на мобильных устройствах.
Минусы:
- Высокая трудность освоении. Табличной верстке научиться может и начинающий специалист, но таблицы стилей дают большую массу разных возможностей, на что необходимо много времени для изучения.
- Кроссбраузерность. Чтобы решить эту проблему, нужно приложить много усилий, больше, чем с табличной версткой.
Верстка слоями: преимущества, недостатки, область применения
Слои – это части HTML-кода, внедряющиеся в страницу сайта накладыванием друг на друга с точностью до пикселя. Изменение параметров слоев происходят при помощи JavaScript и VBScript, это дает возможность применять разнообразные эффекты.
Преимущества верстки:
- Быстрота открытия страниц браузерами.
- При помощи позиционирования разных слоев относительно друг друга существует возможность делать живые и оригинальные эффекты анимации.
- Свойства слоев можно настроить при помощи CSS-стилей.
- Благодаря поддержке системы декартовых координат, расположение слоев на странице веб-сайта можно указать так точно, насколько это возможно.
Недостатки:
- Необходимо очень хорошо знать языки и технологии веб-программирования (VBScript, CSS, JavaScript).
- Сайт может по-разному отображаться в разных браузерах.
- С технической точки зрения, верстка слоями похожа на позиционирование, но, чтобы избежать проблем с браузерами, тег рекомендуется менять на <div>.
Верстка слоями дает дизайнерам возможность использовать свою фантазию безгранично, но у нее есть определенные сложности с технической точки зрения.
У страничек со слоями нет общепринятого стандарта отображения браузерами, по этой причине одна и та же страница в браузерах Safari и Firefox может выглядеть по-разному.
Выводы
Общих правил верстки нет, каждый раз нужно применять индивидуальный подход. Но, табличный метод верстки, хоть и имеет минусы, используется широко и показал себя очень надежным.
Заказать создание сайта, отвечающего всем необходимым требованиям и последним тенденциям, вы можете в компании «Лаборатория Бизнеса». Специалисты компании подберут такой метод верстки сайта, который подойдет именно для вашего бизнеса.