Разработка сайтов для коммерческого использования предъявляет особенно жесткие требования к верстке и дизайну сайтов. В этой статье описаны основные принципы верстки и связанные с этим особенности дизайн макетов.
ТАБЛИЧНАЯ ВЕРСТКА
Долгое время была основным способом вёрстки сайтов, но и сейчас она довольно широко используется в различных случаях. При помощи таблиц создают рамки, выравнивают элементы, делают модульные сетки и цветной фон.
При такой верстке слои представляют собой элементы структуры, которые размещаются на странице методом наложения друг на друга с высокой точностью. Параметры слоев можно изменять динамически при помощи скриптов.
Скрипты дают возможность динамически изменять параметры слоя. Что позволяет создавать на веб странице различные эффекты, например, выпадающие меню, плавающие окна, разворачивающиеся баннеры и прочее.
БЛОЧНАЯ ВЕРСТКА
Осуществляется при помощи верстки блоков с тегом <div> и таблиц стилей CSS, которые их описывают. Табличная вёрстка гораздо проще в исполнении, чем блочная вёрстка, но последняя в настоящее время используется гораздо шире.
Например, еще недавно в качестве основного инструмента верстки применялись таблицы и фреймы. Но сегодня фреймы, уходят в прошлое. Стандарт HTML 5, который используется верстке очень широко, уже не включает поддержку фреймов.
Для коммерческих сайтов очень важно, чтобы верстка была выполнена качественно, так как ошибки в верстке сайта могут негативно повлиять на СЕО продвижение. Но нельзя забывать о том, что ресур в первую очередь должен быть удобен для целевой аудитории.
Типы дизайн макетов по принципу вёрстки:
- Фиксированный – жесткий дизайн макет
- Резиновый - эластичный дизайн макет
- Адаптивный – подстраиваемый дизайн макет
Фиксированный тип дизайна — либо табличный либо блочный. В таком типе дизайна ширина столбца или рисунка задается в пикселях, то есть зафиксированы точно.
Преимущества фиксированного дизайна:
- Фиксированный дизайн намного легче разрабатывать и можно заранее знать, как будет выглядеть веб страница
- Дизайнер имеет возможность задавать четкий размер блоков сайта.
Недостатки фиксированного дизайна:
- У сайта есть только одно оптимальное разрешение экрана, а на других разрешениях на странице может отобразится горизонтальный скроллинг.
Резиновый тип дизайна — такой, в котором ширина столбца или рисунка задаются в % от разрешения экрана.
Что важно знать прежде чем заказать сайт или интернет магазин
- Правила верстки: адаптивная, блочная, css верстка
- Качественная верстка сайта – гарантии от веб студии «АВАНЗЕТ»
- Создание современных сайтов: CSS верстка
- Что нужно, для того чтобы открыть интернет магазин
- Разработать сайт компании - создание корпоративных сайтов
- Заказать бизнес сайт - получить эксклюзивное решение под ваши задачи
- Мобильные сайты дают дополнительно 30% потенциальных клиентов
Вам нужно разработать современный сайт и выбираете исполнителя?
Тогда не теряйте время, напишите нам прямо сейчас!
Оставить заявкуПреимущества резинового дизайна:
- Сайт будет отображаться по всей ширине экрана и заполнит всё пространство браузера.
- Такой тип дизайна будет одинаково выглядеть на мониторах с разным разрешением.
Недостатки резинового дизайна:
- Разработка резинового дизайна – это сплошной эксперимент. Нельзя предсказать, как будет вести себя структура сайта в различные моменты.
- При больших разрешениях экрана появляются слишком длинные строки, что существенно портит вид и неудобно для пользователей.
Адаптивный дизайн – использует принцип верстки, который адаптируется (подстраивается) под текущий размер экрана. При этом происходит перемещение блоков, либо замена одних блоков другими, отображаемыми только при назначенном разрешении экрана.
Преимущества адаптивной вёрстки:
- Сайт специально разрабатывается под различные размеры экранов, что конечно увеличивает трудоемкость разработки
- Веб страницы будут корректно отображаться как на планшете, так и на большом мониторе - это максимально удобно большинству пользователей
Недостатки адаптивной вёрстки:
- Трудоемкость работы дизайнера в несколько раз выше, так как требуется тщательная проработка нескольких макетов, предназначенных для разных размеров экранов.
Таким образом мы сделали небольшой обзор по видам компьютерной верстки и сравнение по типам дизайн макетов. У каждого типа дизайна есть как свои минусы, так несомненные плюсы. Поэтому выбор типа дизайна зависит от той задачи, которую должен решать разработчик при создании коммерческого сайта.
Вам нужна разработка современного сайта, чтобы привлечь максимум клиентов, но остались вопросы, позвоните нам чтобы получить консультацию, или заполните форму, чтобы заказать сайт. Желаем успеха и процветания вашему бизнесу!
04.01.2018
