Разрешения и Адаптивный Дизайн

Этап 2 - Шаблон >

Разрешения и Адаптивный Дизайн

Previous pageReturn to chapter overviewNext page

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

Создание Адаптивного сайта необязательно, но рекомендуется. В зависимости от Проекта, может быть более удобно, например, создать двойную версию сайта - рабочий стол/мобильная версия. Иногда бывает достаточно базовой опримизации, гарантированной WebSite X5, которая использует способность браузера увеличивать изображение Страниц, отображая их на мобильных устройствах.

За дополнительной информацией обращайтесь к Как создать веб-сайт "Mobile-Friendly"

В этом разделе можно определить желаемый тип сайта, выбрав между:

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

Если вы выбираете Сайт для Рабочего стола, необходимо определить:

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

Значение Разрешение Сайта, задается по умолчанию и рассчитывается для получения сайта, оптимизированного для разрешения 1024x768 пикселов.

Если же вы хотите создать Адаптивный Сайт, следует определить точки останова.

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

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

Кликните, чтобы развернуть/уменьшить

На линии Справочные Разрешения указаны точки останова, соответствующие разрешениям, обычно применяемым для каждого устройства:

Рабочий стол— 960 px
Планшет с горизонтальной ориентацией— 720px
Планшет с вертикальной ориентацией— 600px
Смартфонс горизонтальной ориентацией— 480px
Смартфонс вертикальной ориентацией— ниже 480px

Ниже отображается линия Заданные разрешения, которая по умолчанию, при открытии нового проекта, предлагает 3 точки останова, идентифицируемые следующим образом:

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

По умолчанию, разрешения, ассоциируемые с этими 3 точками останова, применяются автоматически в зависимости от выбранного шаблона.

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

Точки останова, помимо отображения на линии Заданные разрешения, перечислены в таблице со следующими параметрами:

Точка останова в этом столбце перечислены все точки останова, активированные для этого проекта. Каждая точка останова идентифицируется значением разрешения, при котором она срабатывает.
Отображения в этом столбце приводятся все отображения, определяемые точками останова. Каждое отображение сопровождается пиктограммой шарика разного цвета: тот же цвет воспроизводится на линии Заданные разрешения для сегмента, соответствующего интервалу, к которому применяется это отображение. Для большей ясности те же цвета имеют и пиктограммы, находящиеся в таблице окна Легко адаптируемые настройки и в Адаптивной строке в окне Структура Шаблона и в браузере, используемом для предпросмотра сайта.
Интервалы в этом столбце указываются интервалы, определяемые двумя последующими точками останова, которым соответствуют соответствующие отображения. Для отображения Рабочий стол интервал заключен не между двумя точками останова, а, как правило, определяется выше самой высокой точки останова.

Для работы со списком предложенных точек останова и с обусловленными ими отображениями, достаточно использовать команды, приведенные рядом с таблицей:

Добавить— добавляет новую точку останова, указывая разрешение, при котором она должна сработать. Можно установить до 10 точек останова.
Редактировать...— позволяет изменять значение разрешения выбранной точки останова.
Удалить— удаляет выбранную точку останова. В то время как точка останова Смартфон не может быть удалена, точка останова Рабочий стол может быть выбрана и удалена, но в результате этого последующая точка останова автоматически становится новой точкой останова Рабочий стол. Удаляя точку останова, все ассоциируемые с ней параметры (настроиваемые через окно Легко адаптируемые настройки) будут применены к низшей точке останова. Необходимо наличие не менее 2 точек останова, точка останова Рабочий стол и точка останова Смартфон.

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

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

Таким образом, взяв за пример сайт, к которому применен шаблон шириной 960px, 3 заданные точки останова по умолчанию определяют 4 интервала, соответствующие 4 различным режимам отображения:

Точка останова: 960px - Отображение: Рабочий стол - Интервал: Выше или равен 960px

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

Точка останова: 720px - Отображение: Отображение 1 - Интервал: Заключен между 959px и 720px

При разрешениях между точкой останова Рабочий стол и точкой останова Промежуточный используется шаблон, заданный для этого отображения в окне Структура Шаблона. В этом случае ширина Контент страницы настраивается на значении 720px, но, поскольку ширина окна браузера может быть увеличена до 959px, пространство, превышающее 720px, будет занято Фон страницы. Объекты страниц, наоборот, размещаются как и в предыдущем интервале, соответствующем отображению Рабочий стол.

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

Точка останова: 480px - Отображение: Отображение 2 - Интервал: Заключен между 719px и 480px

При разрешениях между точками останова Промежуточный и точкой останова Смартфон, сайт приобретает линеаризованный вид: это означает, что все объекты отображаются один под другим (с соблюдением упорядочивания и выбора объектов, которые должны быть невидимы, через окно Легко адаптируемые настройки). Как и в предыдущем, в этом интервале используется шаблон в соответствии с параметрами, заданными для этого отображения в окне Структура Шаблона: ширина Контент страницы установлена на значении 480px, в то время как окно браузера может достигать разрешения 719px, и занимается Фон страницы.

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

Точка останова: 0px – Отображение: Смартфон - Интервал: Меньше 479px

В этом интервале сайт отображается в линеаризованном виде. Используется шаблон в соответствии с параметрами, заданными для этого отображения в окне Структура Шаблона и ширина страницы настраивается не в абсолютном, а в относительном значении, чтобы всегда занимать 100% имеющегося пространства по ширине. В линеаризованном сайте все объекты отображаются один под другим (с соблюдением упорядочивания и выбора объектов, которые должны быть невидимы, через окно Легко адаптируемые настройки) и тоже настраиваются таким образом, чтобы занимать 100% имеющегося пространства по ширине.

В версии Pro эта точка останова отображается, но не может быть изменена или удалена.

Если открыть в версии Pro проект, созданный в версии Evo для которого активирован адаптивный сайт, автоматически воспроизводятся все установленные точки останова. Используя версию Pro, можно активировать новые точки останова и/или изменить уже имеющиеся.

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

 


Лучшая практика:

-

Как автоматически переводить вводимый текст

-

Как создать Адаптивный сайт


Родственные темы:

-

Веб-браузер и встроенный браузер WebSite X5

-

Протокол Open Graph

.