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

Лучшая практика > Этап 2 - Шаблон > Как создать дружественный для мобильных устройств веб-сайт >

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

Previous pageReturn to chapter overviewNext page
Verborgen tekst tonen/verbergen

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

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

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

Для предоставления пользователю положительнго опыта в разной среде использования, Адаптивный веб-дизайн ставит следующие цели:

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

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

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

Один из вопросов, который стоит в разработке Адаптивного веб-сайта, касается точек останова.

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

Для лучшего понимания можно представить изображение, которое схематически представляет отображение сайта, для которого настроены 3 точки останова: для 960px, для 720px и для 480px.

3 точки останова определяют 4 разных вида отображения. Для разрешений ниже 480px, фон сайта синий. Когда окно браузера достигает размера 480px по ширине, фон приобретает зеленый цвет и остается таким до тех пор, пока ширина не превысит 720px: в этом случае цвет фона становится желтым. И, наконец, при достижении 960px размещается еще одна точка останова, в этом случае цвет фона становится красным.

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

Как показывает опыт, существует тенденция устанавливать точки останова в зависимости от размеров экрана основных видов устройств. Следуя этой практике, WebSite X5 устанавливает на линии Справочные Разрешения следующие точки останова:

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

Цель, которую нужно достигнуть – это настроить точки останова так, чтобы идентифицировать макрокатегории: существует множество устройств, поэтому невозможно установить точки останова для каждого из них. В версии Evo в WebSite X5 можно управлять 3 точками останова; а версия Pro, позволяет установить до 10 точек останова, включая те, которые связаны с отображениями Рабочий стол и Смартфон.

После того, как продуманы точки останова, подлежащие активации, в WebSite X5 для продолжения создания сайта необходимо:

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

При настройке точек останова следует учитывать, что:

По умолчанию точки останова задаются в зависимости от значений, воспроизведенных в графическом шаблоне, выбранном для проекта.
Все точки останова, за исключением точек останова для отображения Смартфон, воспроизводящих автоматически значение более высокой точки останова, могут быть легко изменены с помощью кнопки Редактировать....
В версииEvo нельзя удалить имеющиеся точки останова или добавить новые.
В версии Pro нельзя удалить точку останова Смартфон, но, зато, можно удалить (с помощью кнопки Удалить) промежуточные точки останова. Точку останова Рабочий стол можно выделить и удалить, но тогда следующая точка останова автоматически станет новой точкой останова Рабочий стол. Необходимо наличие не менее 2 точек останова - Смартфон и Рабочий стол.
В версии Pro можно добавить (с помощью кнопки Добавить) до 10 новых точек останова , включая точки останова Рабочий стол и Смартфон.
Точка останова Смартфон определяет минимальное разрешение, ниже которого сайт будет отображаться в линеаризованном виде: все объекты будут отображаться один под другим (соблюдая порядок и выбор объектов, которые должны быть невидимыми через окно Легко адаптируемые настройки) и, как ширина страницы, они настроены таким образом, чтобы занимать 100% пространства по ширине.

Все заданные точки останова находятся в списке сводной таблицы и показаны в окне Легко адаптируемые настройки.

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

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

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

В WebSite X5 можно настроить шаблон и определить как он должен выглядеть в разном отображении, определенном активированными точками останова.

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

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

При Шаге 2 войти в раздел Контент Шаблона. В это окне если вы работаете над созданием адаптивного сайта, тоже есть Адаптивная строка.
В Адаптивной строке выбрать интервал, соответствующий отображению Рабочий стол и составить «шапку»/«подвал» шаблона.
Снова в Адаптивной строке , выбрать, один за другим, следующие интервалы и внести необходимые изменения в «шапку»/нижний колонтитул.

В частности, для каждого отображения можно:

Добавить новые объекты. После того, как вы вставили объект, он будет отображаться в текущем отображении и в более низком отображении, но не в более высоком (где он будет автоматически скрыт).
Скрыть объекты. После того, как вы выбрали объект, достаточно щелкнуть мышью по кнопке Показать/Скрыть объект и решить, должен ли он быть скрыт только в текущем отображении или во всех более низких отображениях .
Снова отобразить срытые ранее объекты. Щелкнуть по треугольнику на кнопке Показать/Скрыть объект , чтобы войти в меню: щелкнуть мышью по пункту Управление скрытыми объектами. В открывшемся окне выбрать нужный вам объект и активировать опцию Видимый.
Изменить положение и/или размер объектов. Другие свойства объектов остаются неизменными в разных отображениях.

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

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

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

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

точки останова текущего шаблона должны быть сохранены или заменены стилями выбранного шаблона;
должны ли в контенте «шапки» и «подвала» сохраняться только объекты, заданные в текущем шаблоне, только объекты, заданные в выбранном шаблоне, объекты заданные как в текущем шаблоне, так и в выбранном шаблоне.
Кликните, чтобы развернуть/уменьшитьКак: Как управлять контентом

В Адаптивном веб-дизайне, независимо от уровня сложности создаваемого сайта, важнейшим условием является наличие хорошей стратегии управления контентом, и не только его типом, но и тем, в каком виде он будет представлен:

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

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

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

В WebSite X5, после создания Страницы в таком виде, как она будет выглядеть на рабочем столе (смотреть, Как настроить страницу через Модульную Сетку), можно настроить какие изменения будут происходить в зависимости от различных активированных точек останова. В частности, необходимо следовать процедуре:

При Шаге 4 - Страницы создать Страницу, перетащив в Модульную Сетку необходимые Объекты и внести разные контенты. Созданная таким образом Страница будет отображаться для разрешений выше точки останова Рабочий стол.
По заверешении создания страницы, щелкните по кнопке Адаптивный, чтобы вызвать окно Легко адаптируемые настройки. В этом окне находится Адаптивная строка, предлагающая все отображения, определенные точками останова, активированными для сайта (через окно Разрешения и Адаптивный Дизайн). Необходимо следовать по порядку, начиная с выделения на Адаптивной строке отображения Рабочий стол, и продолжая выделять все остальные дойдя до отображения Смартфон.
Если выбрано Отображение Рабочий стол, в списке будет вновь предложена конфигурация, заданная в окне Создание Страниц. Щелкните по кнопке Заказать для активации режима, в котором можно приступить к упорядочиванию объектов, вставленных в список. Для каждого объекта, вставленного в Сетку, показывается номер, присвоенный в зависимости от упорядочивания, выполняемого программой автоматически.
Изменить упорядочивание Объектов в зависимости от важности различных контентов и от того, как они должны располагаться на Странице. Упорядочивание может быть выполнено следующими способами:
Настраивая Заказать | Упорядочить все Объекты сначала, начать, щелкнув по Объекту, который следует разместить первым, а затем щелкать по порядку по всем другим Объектам.
Настраивая Заказать | Выполнить упорядочивание с Объекта, щелкните по Объекту, с которого следует начинать упорядочивание. Все предыдущие Объекты будут подтверждены, а по всем последующим Объектам следует щелкать, чтобы определить их положение по порядку.

Процедура по упорядочиванию завершается:

Когда выполнен щелчок по последнему Объекту на странице.
Щелкнув по Заказать | Полное упорядочивание— завершается процедура с подтверждением текущего порядка.
Щелкнув по Заказать | Аннулировать упорядочивание— завершается процедура и удаляются выполненные изменения и восстанавливается первоначальное упорядочивание.

WebSite X5 дает указания в процедуре упорядочивания: при выборе Объекта красной кромкой обрамляются все Объекты, по которым можно щелкать, для того, чтобы установить тот, который должен за ним следовать. Порядок, настроенный для Отображения Рабочий стол останется неизменным также и для всех других Отображений.

За дополнительной информацией обращаться к Как происходит процесс упорядочивания Объектов.

Щелкнуть по кнопке Показать/Спрятать Объект длязапуска режима настройки невидимых Оъектов. Щелкнуть по Объектам, которые при разрешениях ниже текущего разрешения, больше не должны отображаться. Щелкнуть второй раз по кнопке Показать/Спрятать Объект для подтверждения и выйти из этого режима.
Щелкнуть по кнопке для активации режима выравнивания Объектов, таким образом, чтобы некоторые из них ушли на новую строку при разрешениях ниже разрешения Рабочий стол (текущее выбранное). Во всех точках, в которых можно вставить Разрыв Строки, появляется серый штрих: выполняя щелчок по штриху, можно настроить желаемый Разрыв строки. Щелкнуть второй раз по кнопке Разрыв строки для подтверждения и выхода из этого режима.

За дополнительной информацией обращаться Как и зачем устанавливать Разрыв строки.

Работая в версии Pro можно настроить до 10 точек останова. Если они присутствуют в промежуточных отображениях, использовать Адаптивную строку, чтобы выбрать отображение, следующее за отображением Рабочий стол. Сетка обновляется в зависимости от настроек отображения Рабочий стол: в этой новой конфигурации можно настраивать, елси необходимо, другие невидимые объекты и вносить разрывы строки. Повторить эту процедуру для всех последующих отображений.
По достижении Отображения Смартфон, не следует предпринимть более каких-либо действий, поскольку все Объекты, оставшиеся видимыми, будут отображены в линеаризованном виде, то есть размещены один под другим в зависимости от первоначально заданного порядка.

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

При создании новой Страницы сайта, который должен стать Адаптируемым, желательно сделать так, чтобы в Модульной Сетке отсутствовали пустые Ячейки. И, действительно, программа рассматривает пустые Ячейки как Объекты (пустые) и присваивает каждой из них определенную позицию в порядке: эти позиции не могут быть изменены, но они влияют на возможность упорядочивания действительных Объектов. Для обеспечения большей свободы в упорядочивании Объектов желательно избегать пустых Ячеек, вставляя пустые Объекты: если они вставлены вручную, они не повлияют на компоновку Страницы и могут быть упорядочены вручную.

<%%EXTOGGLE>Как: Как проверить работу Адаптивного сайта в Предпросмотре на компьютере

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

При Шаге 4 - Страницы, после создания Страницы и выполнения настроек для того, чтобы сделать ее Адаптивной, щелкнуть по кнопке Предпросмотр для отображения через Внутренний браузер Предпросмотр Страницы на компьютере .
Внутренний браузер имеет Панель разрешений, на которой показаны все точки останова, активированные для Проекта. Достаточно щелкнуть по указателю точки останова для автоматического адаптирования окна Браузера к соответствующему разрешению и проверить отображение Страницы. В качестве альтернативы можно воздействовать вручную на окно Браузера для изменения ширины и проверки того, как меняется компоновка и расположение Объектов.
Если в Предпросмотре контент не располагается в желаемом виде, щелкнуть по кнопке Показать нумерацию: контенты Страницы отражаются и на каждой из них отображается номер. Этот номер ассоциируется с Объектом, соответсвующим содержанию в ходе процедуры упорядочивания. Таким образом легко понять, что необходимо изменить, чтобы получить желаемый результат.

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

 


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

-

Как происходит упорядочивание Объектов

-

Как и зачем настраивать Разрыв строки