Виды дизайна

Фиксированный дизайн

Термином «фиксированный дизайн», как правило, пользуются для обозначений макета странички, который создан на основе слоев указанной ширины. Выбор ширины ориентирован на определенное разрешение монитора пользователя. Например, для разрешения 1024х768 пикселей размер таблицы рекомендуется брать не более 1 тыс. пикселей. Данная ширина получится за счет вычитания из значения ширины – 1024 вертикальной полоски прокрутки и границ окна данного браузера. Для пользователей сайт, который построен на макете фиксированного дизайна, будет отображен корректно, но есть один нюанс – при больших разрешениях образуется слишком много пустого невостребованного  места. Наиболее широкую популярность среди пользователей мировой паутины имеет разрешение 1024×768, поэтому разработчики всех сайтов, как правило, ориентируются на него, используя ширину слоев от 900 до 1000 пикселей.

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

Образец представлен на рисунке ниже.

1 — название сайта;

2 — представлен левый слой, который обычно включает в себя элементы навигации;

3 —  это правый слой, который содержит информационное содержание страницы;

4 — так называемый «подвал», т.е. самый низ веб-странички, в котором, как правило, размещается контактная информация и различные кнопки.

Итак, табличный или фиксированный дизайн – это дизайн, в котором ширина рисунка или столбца оговорены точно и конкретно и заданы в пикселях. Из преимуществ: такой дизайн проще разрабатывать, прогнозировать внешний вид сайта заранее, у дизайнера есть возможность наблюдения за размером строки. Главными недостатками являются: появление вертикального скроллинга на различных расширениях, ограничение сайта только одним оптимальным разрешением экрана.

Резиновый дизайн

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

Резиновый дизайн – это тот дизайн, в котором ширина одной или нескольких ячеек определяется в процентном соотношении от ширины окна.

Главными преимуществами резинового дизайна являются:

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

Из недостатков можно выделить следующее:

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

Резиновая верстка создается без определенного размера оболочки, но с использованием процентных свойств. Иными словами, ширина сайта полностью займет все свободное пространство на экране монитора.

Ниже представлено 2 примера при разных разрешениях экрана.

Следовательно, макет «резиновой» идеи, похоже, является наиболее правильным для сайта в Интернете. Эта модель позволит браузеру распределять элементы на экране автоматически. Будет учтена ширина текущего окна, полностью исключена вероятность возникновения горизонтальной линейки даже в наиболее узких окнах.

Адаптивный дизайн

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

Адаптивный дизайн сайта — это дизайн веб-страницы, который обеспечивает отличное отображение сайта на различных видах устройств, подключённых к сети интернет.

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

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

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

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

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

Адаптивный дизайн является наиболее востребованным и альтернативным видом дизайна сайта. Он облегчает работу пользователей с сайтом со многих устройств. Это оптимальный вариант для использования интернета современными гаджетами.