Видео-презентация

Акции веб-студии

Создание и продвижение сайта Landing Page в ТОП с гарантией

Создание и продвижение сайта Landing Page в ТОП с гарантией - эксклюзивная технология веб студии АВАНЗЕТ....

Подробнее

Акция 2017 создание сайта - масштабируемого landing page

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

Подробнее
Все акции

Полезная информация

Мобильные сайты интернет магазины могут использовать Viber для прима платежей

Знакомьтесь, хорошие новости от Яндекс.Касса: теперь мобильные сайты интернет магазины могут использовать...

Подробнее

Создание сайтов с гарантией продвижения в ТОП в Краснодаре

Создание сайтов в веб студии АВАНЗЕТ – это комплекс услуг, который гарантирует...

Подробнее

Прием платежей для интернет магазина: новое в Яндекс.Касса

Совсем недавно появилась новая возможность для интернет магазинов осуществлять прием платежей при...

Подробнее

Хакерские атаки – угроза безопасности для веб-сайта

Основная угроза для безопасности сайтов — это хакерская атака. В этой статье...

Подробнее

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

Великолепные рекламные тексты, которые в деталях описывают ваш продукт или услугу, красивые...

Подробнее

Безопасность веб сайта и обновление CMS

К сожалению, многие владельцы интернет ресурсов не предполагают, что безопасность веб сайта...

Подробнее

Разработка сайтов – особенности дизайна и принципы верстки

Разработка сайтов для коммерческого использования предъявляет особенно жесткие требования к верстке и дизайну сайтов. В этой статье описаны основные принципы верстки и связанные с этим особенности дизайн макетов.

ТАБЛИЧНАЯ ВЕРСТКА долгое время была основным способом вёрстки сайтов, но и сейчас она довольно широко используется в различных случаях. При помощи таблиц создают рамки, выравнивают элементы, делают модульные сетки и цветной фон.

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

Скрипты дают возможность динамически изменять параметры слоя. Что позволяет создавать на веб странице различные эффекты, например,  выпадающие меню, плавающие окна, разворачивающиеся баннеры и прочее.

БЛОЧНАЯ ВЕРСТКА - осуществляется при помощи верстки блоков с тегом <div> и таблиц стилей CSS, которые их описывают. Табличная вёрстка гораздо проще в исполнении, чем блочная вёрстка, но последняя в настоящее время используется гораздо шире.

Например, еще недавно в качестве основного инструмента верстки применялись таблицы и фреймы. Но сегодня фреймы, уходят в прошлое.  Стандарт HTML 5, который используется верстке очень широко, уже не включает  поддержку фреймов.

Особенности дизайна и принципы верстки сайта

Для коммерческих сайтов очень важно, чтобы верстка была выполнена качественно, так как ошибки в верстке сайта могут негативно повлиять на СЕО продвижение. Но нельзя забывать о том, что ресур в первую очередь должен быть удобен для целевой аудитории.

Типы дизайн макетов по принципу вёрстки:

  • Фиксированный – жесткий дизайн макет
  • Резиновый - эластичный дизайн макет
  • Адаптивный – подстраиваемый дизайн макет

Фиксированный тип дизайна — либо табличный либо блочный. В таком типе дизайна ширина столбца или рисунка задается в пикселях, то есть зафиксированы точно.

Преимущества фиксированного дизайна:

  • Фиксированный дизайн намного легче разрабатывать и можно заранее знать, как будет выглядеть веб страница
  • Дизайнер имеет возможность задавать четкий размер блоков сайта.

Недостатки фиксированного дизайна:

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

Резиновый тип дизайна  — такой, в котором ширина столбца или рисунка задаются в % от разрешения экрана.

Преимущества резинового дизайна:

  • Сайт будет отображаться по всей ширине экрана и заполнит всё пространство браузера.
  • Такой тип дизайна будет одинаково выглядеть на мониторах с разным разрешением.

Недостатки резинового дизайна:

  • Разработка резинового дизайна – это сплошной эксперимент.  Нельзя предсказать, как будет вести себя структура сайта в различные моменты.
  • При больших разрешениях экрана появляются слишком длинные строки, что существенно портит вид и неудобно для пользователей.

Адаптивный дизайн – использует принцип верстки, который адаптируется (подстраивается) под текущий размер экрана. При этом  происходит перемещение блоков, либо замена одних блоков другими, отображаемыми только при назначенном разрешении экрана.

Преимущества адаптивной вёрстки:

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

Недостатки адаптивной вёрстки:

  • Трудоемкость работы дизайнера в несколько раз выше, так как требуется тщательная проработка нескольких макетов, предназначенных для разных размеров экранов.

Таким образом мы сделали небольшой обзор по видам компьютерной верстки и сравнение по типам дизайн макетов. У каждого типа дизайна есть как свои минусы, так несомненные плюсы. Поэтому выбор типа дизайна зависит от той задачи, которую должен решать разработчик при создании коммерческого сайта.

Заказать разработку сайта

Что важно знать прежде чем заказать сайт или интернет магазин


Новинки Портфолио веб-студии Аванзет

Наверх

Получите на ваш e-mail:

65 секретных приёмов для взрывного роста вашего бизнеса