CC BY
39УДК 004.4
Информационные технологии
Палаш Борис Викторович, студент Хакасский государственный университет им. Н.Ф. Катанова Голубничий Артем Александрович, научный руководитель, старший преподаватель кафедры программного обеспечения
вычислительной техники и автоматизированных систем Хакасский государственный университет им. Н.Ф. Катанова
АДАПТИВНАЯ ВЕРСТКА
Аннотация: Всё больше и больше посетителей используют мобильные устройства, такие как планшеты и смартфоны, для посещения веб-сайтов. В данной статье будут рассмотрены основные плюсы и минусы создания универсального адаптивного макета, который будет оставаться полностью функциональным при постоянно меняющихся размерах экрана.
Ключевые слова: дизайн, образование, защита.
Abstract: More and more visitors are using mobile devices, such as tablets and smartphones, to visit websites. This article will discuss the main pros and cons of creating a universal adaptive layout that will remain fully functional with constantly changing screen sizes.
Keywords: design, education, protection.
В настоящее время количество пользователей, интернета которые посещают его посредством мобильного телефона, быстро растет. Современный сайт должен быть удобен для просмотра на мобильном устройстве, иначе может произойти потеря посетителей и уменьшите посещаемость сайта. Вдобавок - и что еще более важно - веб-сайты с адаптивным дизайном получают лучшие результаты в поиске, поскольку поисковые системы
эволюционировали, чтобы дать этим сайтам более высокий приоритет. Адаптивный веб-дизайн обеспечивает оптимальные впечатления от просмотра веб-сайта независимо от типа устройства, на котором его видит пользователь. Википедия описывает это как «подход, направленный на создание сайтов, обеспечивающих оптимальное впечатление от просмотра - легкое чтение и навигацию с минимумом изменения размера, панорамирования и прокрутки -на широком спектре устройств (от мобильных телефонов до мониторов настольных компьютеров)» [1]. Это делается с помощью жидких сеток. Это термин для дизайна, который работает независимо от размера экрана. Таким образом, независимо от того, насколько вы измените размер экрана, тот же макет будет автоматически реагировать на этот размер, как один мяч, растущий или сжимающийся, чтобы пройти через несколько разных обручей.
Проще говоря, адаптивный дизайн создает различные фиксированные макеты, которые адаптируются к определенным размерам экрана. Короче говоря, у вас есть несколько версий веб-страницы, подходящих для чьего-либо устройства, в отличие от одной статической страницы, которая выглядит одинаково (и меняет порядок или размер содержимого) на всех устройствах.
Рисунок 1 - пример адаптивного дизайна
Адаптивный дизайн - более сложен в реализации, поскольку он требует особого внимания к CSS и организации сайта, чтобы убедиться, что он хорошо работает при любом возможном размере. Легче создать несколько конкретных макетов для веб-сайта, чем создавать один макет, который может работать на любом размере экрана. Хотя это означает, что каждый адаптивный макет требует некоторой гибкости для работы на экранах нескольких размеров, это проще, чем создание одного макета, который будет работать для всех из них. Таким образом, одним из недостатков более простого подхода к адаптивному дизайну является то, что адаптивный дизайн работает только на том количестве экранов, на котором это могут быть макеты. Поэтому, если будет выпущено новое устройство с новым размером экрана, можно обнаружить, что ни один из адаптивных макетов ему не подходит. А это значит, что появляется необходимость их отредактировать или добавить новый [2].
Хотя адаптивный веб-дизайн — это удобно, он не лишен недостатков. на что следует обратить внимание, решая, какой формат веб-дизайна лучше всего подходит:
Одна из самых больших проблем адаптивного веб-дизайна - время загрузки. Адаптивные веб-сайты загружают информацию для всех устройств, а не только для устройств, на которых посетители просматривают сайт.
Поскольку объявления должны соответствовать всем разрешениям, может быть сложнее эффективно интегрировать их с адаптивными сайтами. Веб-сайт будет перетекать с устройства на устройство, поэтому, хотя сайт настраивается на определенные размеры экрана, объявления могут неправильно настраиваться.
Главными же преимуществами такой верстки, являются:
Таргетинг на каждого пользователя, оптимизируя взаимодействие с отдельными устройствами, гарантируется, что каждый посетитель получит положительный пользовательский опыт. Появляется возможность доставлять и настраивать свой контент, ориентируясь на такие вещи, как местоположение человека и скорость соединения.
Так же, адаптивный дизайн дает сильное преимущество при SEO оптимизации так как поисковый робот просканирует страницу один раз, а не несколько, чтобы получить все версии контента. Адаптивные сайты напрямую повышают эффективность сканирования и косвенно помогают поисковым системам индексировать больше контента сайта, поддерживая его актуальность.
Такой вид построения сайта больше подойдет для малых и средних компаний, которым необходимо обновить свои существующие сайты, для новых предприятий, которым необходимо создать совершенно новый сайт. Так же он рекомендуется для сфер услуг, поскольку они в основном состоят из текста и изображений.
Адаптивный дизайн экономичен, поэтому возможно получить красивый, полностью функциональный сайт по разумной цене.
Подводя итог, можно сказать, что адаптивный веб-дизайн почти всегда является более безопасным вариантом для сайта. Он всегда работает хорошо, независимо от того, какие новые размеры экрана приходят и уходят, сокращает время загрузки и обычно стоит дополнительных усилий по его объединению.
Библиографический список:
1. Виды сайтов, их классификация и примеры - URL: https://progHb.io/p/methods-of-encryption (дата обращения: 10.01.2021).
2. Adaptive Design vs. Responsive Design- URL: https://xd.adobe.com/ideas/process/ui-design/adaptive-design-vs-responsive-design/ (дата обращения: 12.01. 2021).
