Какие типы верстки сайтов существуют. Преимущества и недостатки.

Фиксированная верстка

Самый простой способ верстки веб-сайта — фиксированная верстка. С помощью этого типа Вы создаете сайт с заранее заданными размерами страницы — он имеет постоянную ширину. Фиксированные макеты придерживаются этих размеров независимо от типа браузера или устройства.

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

Плюсы фиксированного макета страницы:

• Легко настроить

Минусы фиксированного макета страницы:

• Не реагирует на устройства или браузеры;
• Требуется создание отдельного мобильного сайта (дополнительная работа)

Резиновая верстка

Следующим в этом списке типов верстки веб-сайтов является резиновая верстка. Этот макет, также известный как "жидкая" верстка, использует гибкие единицы для верстки, а не фиксированные единицы, которые используются в фиксированных макетах. Так как единицы являются гибкими, страница всегда будет заполнять ширину экрана устройства, независимо от того, какое это устройство.

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

Плюсы резиновой верстки:

• Легче настроить, чем адаптивный дизайн
• Никакая информация не обрезается на страницах

Минусы резиновой верстки:

• Если браузер очень широкий, информация растягивается до размера экрана и может выглядеть непривлекательно.
• Если браузер меньше, информация смешивается, чтобы уместиться на экране, что затрудняет чтение и просмотр.

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

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

В адаптивных макетах сайтов есть заданные параметры того, как веб-сайт будет корректироваться. Например, установленный параметр может выглядеть так: "Если браузер имеет ширину 500 пикселей, установите для основного контейнера контента ширину 400 пикселей". Или, если у Вас есть веб-сайт с макетом из двух столбцов, адаптивный макет изменится на дизайн с одним столбцом на маленьком экране браузера.

Плюсы адаптивной верстки сайта:

• Легко настроить
• Занимает меньше времени на разработку, чем отзывчивая верстка
• Может настроить Ваш сайт в соответствии с размером каждого браузера

Минусы адаптивной верстки сайта:

• Ширина устройства между заданными значениями может привести к тому, что на Вашем сайте будет слишком много или недостаточно места.
• Не полностью отзывчивая верстка

Отзывчивая верстка

Следующим в нашем списке типов верстки сайтов является отзывчивая верстка (отзывчивый макет). Этот формат макета является наиболее популярным, так как он позволяет Вашему сайту подстраиваться под все устройства и идеально заполнять размер браузера. Отзывчивый дизайн построен с ориентацией на мобильные устройства.

Сначала создается мобильная верстка сайта, а затем макет изменятся для большего размера браузера. Поэтому вместо того, чтобы пытаться урезать свой веб-сайт и сделать его меньше, вы начинаете с малого и расширяете его.

Плюсы отзывчивой верстки:

• Получите веб-сайт, созданный для мобильных пользователей
• Обеспечивает бесперебойную работу на всех устройствах
• Не нужно создавать отдельный мобильный сайт

Минусы отзывчивой верстки:

• Требуется больше времени для создания

Итог

Учитывая все возрастающую долю мобильного трафика в Интернете, наиболее предпочтительными являются 2 варианта верстки: адаптивная и отзывчивая. Какую из них выбрать зависит от проекта и Ваших предпочтений.