Information Security Club | Клуб Информационной Безопасности — Stay Safe!
Добро пожаловать в Клуб Информационной Безопасности! Если Вы здесь впервые, то зарегистрируйтесь и прочитайте правила клуба. Если Вы забыли пароль, то перейдите по ссылке, после чего Вы сможете восстановить его через электронную почту. Помните, что некоторые возможности и разделы форума для гостей недоступны, рекомендуется пройти авторизацию.

Welcome to Information Security Club! You can change the website language to English here. If you are here for the first time, please, register and read forum rules. If you forgot your password follow this link to restore it by email. Remember, some facilities and forum nodes for guests are not available, it's highly recommended to pass authorization.

Как настроить внешний вид нашего сайта и как работает наш адаптивный дизайн? Инструкция Как настроить внешний вид нашего сайта и как работает наш адаптивный дизайн?

5.00 star(s) 1 Vote

x-sis

Совет Клуба
Staff member
Администратор
Joined
02.26.2014
Messages
8,567
Reaction score
20,030
Points
996
Location
Россия
Мы продолжаем цикл обучающих материалов по использованию нашего веб-ресурса. Уделим внимание внешнему облику всего сайта в целом в зависимости от ширины экрана используемого устройства и индивидуальных настроек внешнего вида.

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

Есть два способа изменения внешнего вида веб-ресурса — автоматический и ручной.

Первый способ — автоматический

Адаптивный дизайн (Responsive Web Design)
— это автоматические позиционирование, подгонка, преобразование и сокрытие каких-либо частей и элементов сайта.

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

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

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

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

Отсюда, текущая законченная реализация адаптивного дизайна у нас позволяет вам не задумываясь комфортно и удобно пользоваться нашим веб-ресурсом на любом устройстве с произвольной шириной экрана (здесь и далее под шириной экрана мы будем понимать именно горизонтальное значение разрешения экрана), будь то старенький смартфон с шириной экрана в 320 пиксеоей, планшет с шириной в 765 пикселей, или 4К-монитор с шириной в 2560 пикселей и более.

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

Кроссбраузерность, кстати, у нас тоже поддерживается, потому сайт клуба будет подстраиваться под ширину экрана и тип вашего устройства вне зависимости от вашего веб-обозревателя, будь это Chrome, Opera, Mozilla Firefox, Safari, Vivaldi или что-либо ещё (но не стоит забывать о том, что браузеры Microsoft, такие, как Internet Explorer или Microsoft Edge, особенно их устаревшие версии, могут просто не поддерживать некоторые технологии адаптивного дизайна, из-за чего веб-страницы в некоторых ситуациях могут выглядеть более примитивно или не совсем корректно).

А чего долго говорить? Вы можете не верить на слово, а просто попробовать — для того, чтобы понять, как меняется внешне наш сайт, нужно либо взять устройство с другим разрешением, либо сменить разрешение на текущем устройстве на другое (например, на смартфоне достаточно просто поменять вертикальную ориентацию на горизонтальную, перевернув его на бок). И чем больше будет разница в ширине нового разрешения (в большую или меньшую сторону), тем более значительные изменения во внешнем виде веб-ресурса вы заметите. Ну а мы покажем лишь несколько примеров того, как это всё работает, дальше можете и сами "покрутить" как вам угодно.:acute:

Посмотрите, как меняется страница с форумами или открытой темой в зависимости от ширины экрана (выбранного разрешения).

На разрешении шириной 1920 пикселей — современные мониторы с FullHD-разрешением (на ещё более высоких разрешениях элементы сайта будут ещё больше удаляться друг от друга):

4156

4161

Тоже самое на разрешении шириной 1024 пикселя — старые квадратные мониторы:

4157

4162

На разрешении шириной в 768 пикселей (с учетом масштабируемости под мобильный вид*) — старые планшенты и смартфоны в горизонтальной ориентации:

4158

4163

На разрешении шириной в 425 пикселей (с учетом масштабируемости под мобильный вид*) — современные смартфоны (вертикальная ориентация):

4159

4164

На разрешении шириной в 320 пикселей — старые смартфоны и мобильные телефоны:

4160

4165

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

4166

при переходе на более широкий экран — ей на смену приходит полноценная навигационная панель:

4167

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

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

Второй способ — ручной

Далее мы приближаемся к самому интересному. С адаптивным дизайном всё понятно — он работает независимо от Вас, и его можно разве что отключить на мобильных браузерах, если хотите, чтобы сайт не менял свой облик на мобильный вид и масштабировался, увеличивая свои элементы в размерах, а не только лишь подстраиваясь под разрешение экрана. Но что, если нам захотелось, скажем, чего-то более индивидуального?

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

Меню "Внешний вид" представляет собой набор опций для ручной и индивидуальной настройки стилевых свойств веб-ресурса. Изменения затрагивают, в первую очередь, цветовую гамму, которую можно поменять для себя на выбор, а также некоторые параметры, отвечающие за расположение и вид элементов на сайте вне зависимости от ширины экрана. Эти настройки хранятся в файлах cookies вашего браузера, потому, при полной очистки cookie-файлов веб-обозревателя или при заходе на веб-ресурс с другого браузера необходимо производить их изменение вновь (они будут в положении "по умолчанию", о котором подробнее ниже).

Для начала разберемся, как попасть в меню "Внешний вид". Делается это с помощью кнопочки со значком переключателя 4169, доступной в правом верхнем углу шапки веб-сайта рядом с меню "Оповещения":

4170

либо рядом с эквивалентным значком "колокольчик" на более узких экранах:

4171

Итак, что из себя представляет меню "Внешний вид" на широких экранах, когда доступны все имеющиеся там четыре основные опции:

4168

На рисунке выше представлен умолчательный вариант (базовый) опций "Внешнего вида", который установлен изначально — выбран "Сланцевый" цвет и включена одна лишь опция "Растянуть по ширине".

Опции под номерами 1, 2, 3, 4 доступны только на разрешении шириной более 1200 пикселей, опции номерами 1, 3, 4 — на разрешении шириной более 900 и менее 1200 пикселей, опции под номерами 1, 3 — на разрешении шириной менее 900 пикселей, включая все портативные устройства.

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

4172

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

4173

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

2. "Растянуть по ширине?" — опция для растягивания всех элементов сайта по всей ширине экрана (окна веб-браузера), чтобы они занимали весь отведенный объем. Доступна только на экранах, шириной свыше 1200 пикселей, потому как на более узких экранах в опции отпадает смысл и сайт в любом случае будет занимать весь выделенный объем по ширине из-за достигнутых минимальных размеров своих элементов (расстояние между элементами более сужать уже некуда).

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

4174

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

3. "Отобразить в виде сетки?" — активирует отображение страницы форумов в сеточном режиме (по умолчанию опция выключена и форум отображается в виде таблицы). Опция доступна на всех разрешениях. Сеточное отображение форумов было полностью доработано в обновлении 2.1.2 и корректно отображается во всех случаях (на разных экранах и настройках меню "Внешний вид").

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

4175

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

4176

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

До включения опции "Отобразить в виде сетки?" на более узких экранах (шириной менее 650 пикселей):

4177

После включения:

4178

4. "Отобразить боковые панели слева?" — переносит все боковые панели в левую сторону экрана. Недоступна на экранах шириной менее 900 пикселей, поскольку в этом случае боковые панели просто не умещаются слева и перемещаются адаптивным дизайном в самый низ страницы.

Оставим все измененные ранее опции "Внешнего вида" (изумрудный цвет, выключенное растягивание по ширине и отображение в виде сетки) в том же положении. И теперь посмотрим на то, как выглядит наш сайт до включения опции "Отобразить боковые панели слева?" — все боковые панели находятся справа:

4179

При включении опции они перемещаются в левую часть экрана:

4180

В итоге, мы изменили сразу все возможные опции меню "Внешнего вида", не оставив ни одну из настроек в изначальном положении, теперь это меню выглядит так (выбранный цвет никак не отображается в меню):

4181

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

4182

Напомним, как бы это выглядело, если вернуть все опции меню "Внешний вид" в свое исходное положение:

4183

Вы в праве комбинировать все доступные вам опции в том положении (включать или выключать), в каком вам хочется, для создания наиболее подходящего для вас индивидуального вида нашего веб-сайта.:pimple: Думаем, что такая свобода творчества должна прийтись кому-то по душе.:painting: Теперь вы знаете не только о том, как работает адаптивный дизайн и автоматически меняется облик веб-ресурса, но и о том, как с помощью настроек внешнего вида придать сайту более подходящий и индивидуальный стиль.

Расскажите в этой теме нам о том, какой наиболее подходящий вид веб-сайта вы создали для себя с помощью меню "Внешний вид", попутно задавая интересующие Вас вопросы.:see:

Администрация ProvisionSecurity.Club
 

Top Bottom