ДонНТУ   Портал магистров

Реферат по теме выпускной работы

Исследование и разработка методов адаптивного и мобильного дизайна веб–сайтов

Содержание

Введение

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

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

1. Актуальность задачи

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

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

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

Пример работы адаптивного веб–сайта.

Рисунок 1 – Пример работы адаптивного веб–сайта

2. Недостатки существующего веб–дизайна

Рассмотрим основные недостатки существующего веб–дизайна детальнее:

  1. Ограниченная универсальность. Несмотря на значительные усилия в создании адаптивных дизайнов, некоторые из них все еще могут оказаться менее универсальными. Например, определенные шаблоны могут не эффективно масштабироваться на различных устройствах или не учитывать разнообразие размеров экранов.
  2. Затрудненное управление большим объемом данных. С разнообразием устройств и разрешений экранов становится сложно обеспечивать оптимальное отображение для каждого. Это особенно актуально для сайтов с большим объемом контента, где сложно сбалансировать удобство использования с эстетикой.
  3. Замедленная производительность. Адаптивные дизайны могут снижать производительность на медленных или старых устройствах из–за необходимости загрузки большего объема данных и изображений, которые затем подстраиваются под различные экраны.

3. Цели и задачи исследования

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

Задачи исследования:

  1. Анализ существующих методов адаптивного мобильного дизайна.
    Результатом данного этапа исследования будет детальный обзор современных тенденций в адаптивном и мобильном дизайне, а также критический анализ методологий и фреймворков, что сформирует основу для разработки новых подходов и методов в следующих этапах проекта.
  2. Улучшение мобильного взаимодействия.
    Результаты данного этапа будут нацелены на создание не только улучшенного, но и удобного интерфейса для мобильных устройств. Исследования по повышению производительности и анализ современных интерфейсных решений помогут создать максимально удовлетворяющий потребности мобильных пользователей веб–сайтов.
  3. Интеграция современных технологий.
    Осуществить подробное изучение технологии PWA (Прогрессивное веб–приложение), выявив ее ключевые принципы и возможности. Рассмотреть примеры успешной интеграции PWA в веб–проекты и выделить их преимущества для мобильного опыта. Проанализировать, как технология PWA может быть интегрирована в конкретный веб–проект.
  4. Повышение функциональности с помощью современных API.
    Результатом данного этапа будет успешная интеграция современных технологий, например PWA, в веб–проект. Исследование и тестирование позволят определить, насколько эти технологии соответствуют требованиям проекта и в какой степени они способны улучшить мобильный опыт пользователей.

Объект исследования: методы и технологии разработки веб–сайтов.

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

4. Ожидаемые научно–практические результаты

В ходе выполнения данного исследования, ожидаются следующие научно–практические результаты:

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

5. Обзор существующих исследований и разработок

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

Так, например, в научной статье «Adaptive User Interface for Web Applications» [1] авторами описываются различные технологии, которыми можно воспользоваться при создании адаптивного веб–сайта. Описаны такие технологии и подходы, как медиа–запросы CSS, которые позволяют адаптировать стили веб–страницы под различные размеры экранов, отзывчивые сетки, использующие гибкие макеты, автоматически подстраивающиеся под размер экрана, гибкие изображения, которые изменяют размер в зависимости от контейнера, и фреймворки, такие как Bootstrap и Foundation, упрощающие разработку адаптивных интерфейсов. Также, в статье рассматриваются преимущества и недостатки различных методов адаптивного дизайна. Преимущества включают улучшение пользовательского опыта и повышение доступности, тогда как недостатки касаются сложностей в разработке и тестировании. Также обсуждаются проблемы и ограничения, такие как проблемы с производительностью, кроссбраузерная совместимость и сложности в поддержке и обновлении.

Стоит рассмотреть статью из научного журнала «IJIRSET» под названием "Impact of Progressive Web Apps on Web App Development"[11]. В данной статье авторы исследуют влияние прогрессивных веб–приложений (PWA) на разработку веб–приложений. PWA сочетают лучшие черты веб– и мобильных приложений, предлагая удобство нативных приложений без необходимости их установки. Авторы подчеркивают рост использования смартфонов и ограничения, связанные с нативными приложениями и веб–браузерами. Основные характеристики PWA включают их прогрессивность, адаптивность, независимость от качества соединения, возможность установки, безопасность и актуальность. Сравнение с нативными и стандартными веб–приложениями показывает преимущества PWA в размерах, обновлениях и доступности офлайн. Авторы также обсуждают такие технологии, как сервис–воркеры и архитектуру оболочки приложений, которые обеспечивают офлайн–доступ, push–уведомления и кэширование контента.

Перейдем к другой статье под названием "Adaptive Web Sites: an AI Challenge" [2] авторов Майка Перковича и Орена Этзиони из Вашингтонского университета, которая рассматривает проблемы создания сложных веб–сайтов и предлагает использование методов искусственного интеллекта для их решения. Основные проблемы, которые авторы выделяют, включают разнообразие целей посетителей, изменяющиеся потребности одного и того же посетителя в разное время, динамичность и временную зависимость информации, а также устаревание первоначального дизайна сайта. Авторы предлагают использовать данные о взаимодействии пользователей с веб–сайтом, которые записываются веб–серверами, для автоматического улучшения организации и представления сайта. Основная идея заключается в применении AI–технологий для анализа журналов доступа пользователей и автоматической адаптации веб–сайта на основе этих данных. Подход с использованием искусственного интеллекта является максимально современным и удобным в нынешних реалиях развивающегося мира технологий.

Рассмотрим научную статью под названием «Interactive Design Of Web Sites With A Genetic Algorithm» [12] под авторством Николя Мормашна и Жиля Вентурини. Статья описывает метод автоматизации проектирования веб–страниц и сайтов с использованием интерактивных генетических алгоритмов (ИГА). Этот подход позволяет пользователям оптимизировать стиль и макет своих сайтов, выбирая предпочтительные дизайны, генерируемые алгоритмом. Исследование сосредоточено на реальном применении в рамках программного обеспечения DSP (Dynamic Site Publisher), используемого для управления множеством веб–сайтов. Пользователи могут вручную редактировать стиль и макет своего сайта или использовать предустановленные модели. Основная проблема, которую решает этот метод, заключается в создании инструмента, предлагающего персонализированные, креативные предложения на основе предпочтений пользователя, без необходимости в глубоких технических знаниях.

Также, стоит изучить статью, которая затрагивает вопрос создания сайта, который будет автоматически адаптироваться под конкретного пользователя. Научная статья называется «A Framework for Self Adaptive Websites: Tactical versus Strategic Changes» [13] и написана авторами Ф.Коэном, Г.Свинненом и К.Ванхуфом из бельгийского университета. Статья посвящена разработке структуры для самонастраивающихся веб–сайтов, которые изменяются в ответ на поведение пользователей. Авторы выделяют две категории изменений: тактические и стратегические. Тактические изменения — это краткосрочные адаптации, которые улучшают представление информации, не изменяя при этом структуру сайта. Примером такого изменения может служить автоматическое создание списка рекомендаций на основе поведения пользователя. Стратегические изменения, напротив, могут существенно изменять изначальную структуру сайта, что может привести к дезориентации пользователя. Основная проблема, на которую указывают авторы, заключается в том, что без четкого разграничения между этими видами изменений самонастраивающийся сайт может нарушить исходную структуру, созданную дизайнером, что приведет к путанице и затруднит навигацию для пользователей. Авторы предлагают использовать методы анализа поведения пользователей, такие как обнаружение ассоциативных правил, последовательных шаблонов и кластеризация, для реализации адаптаций. Эти методы позволяют выявлять закономерности в поведении пользователей и применять их для создания более персонализированного опыта. Таким образом, предложенная структура направлена на улучшение взаимодействия пользователей с веб–сайтами путем автоматического адаптирования их содержания и структуры, сохраняя при этом целостность и удобство использования сайта.

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

6. Обзор методов, моделей и инструментальных средств для решения задачи

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

6.1. Модели

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

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

6.2. Методы

Responsive Web Design – метод дизайна [10], который позволяет сайту адаптироваться к разным размерам экранов. Это достигается путем использования гибких сеток и медиа–запросов в CSS.

Гибкая сетка – это метод разметки, который позволяет создавать адаптивные макеты. Размещение элементов на основе пропорций помогает легко адаптировать веб–сайт к различным экранам и устройствам. Flexbox (гибкая раскладка) и Grid (сетка) являются двумя основными инструментами для размещения элементов на веб–странице.

Adaptive Web Design – метод, основанный на создании нескольких версий сайта для разных категорий устройств. Когда пользователь заходит на сайт, сервер определяет тип устройства и отправляет соответствующую версию сайта.

6.3. Инструментальные средства для решения задачи

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


Таблица 1 – Сравнительная характеристика инструментальных средств
СредствоОписаниеПреимуществаНедостатки
BootstrapНабор готовых стилей и компонентов, которые можно использовать для создания адаптивного дизайна– Простота использования и ускоренная разработка;
– Активное сообщество и обширные ресурсы;
– Адаптивность для различных устройств.		– Стандартизированный внешний вид;
– Необходимость дополнительной кастомизации.
CSS медиа–запросыПравила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств– Основной инструмент для создания адаптивного дизайна, позволяющий изменять стили в зависимости от различных параметров;
–Простота использования в сочетании с другими средствами.		– Потребность в тщательном тестировании на разных устройствах для обеспечения корректной работы;
– Отсутствие возможности обработки сложных сценариев взаимодействия.
JavaScript библиотекиТакие библиотеки, как jQuery и React, предоставляют возможность динамического изменения элементов веб–страницы в зависимости от характеристик устройства.– Упрощение разработки;
– Кросс–платформенность;
– Расширяемость;
– Высокая производительность.		– Зависимость от сторонних ресурсов;
– Проблемы совместимости;
– Проблемы безопасности.
CSS GridПозволяет создавать структуры, необходимые для обеспечения отзывчивости сайтов на различных устройствах.Обеспечивает более сложные и гибкие сетки, чем традиционные методы.Сложность в изучении и понимании особенностей CSS Grid.
FlexboxПредоставляет инструменты для быстрого создания сложных, гибких макетов, и функции, которые были сложны в традиционных методах CSS.Предоставляет простой и эффективный способ управления распределением элементов.Необходимость в обучении дополнительным навыкам препроцессоров.
HTML5 и CSS3Предоставляют новые возможности для адаптивной верстки, такие как медиа–элементы, элементы форм, веб–шрифты и другие функции, позволяющие создавать гибкий и адаптивный дизайн.– Работа с мультимедиа;
– Гибкость дизайна;
– Медиа запросы;
– Локальное хранилище.		– Совместимость с браузерами;
– Сложность поддержки;
– Безопасность.
Sass and LessЯвляются препроцессорами CSS, предоставляющими дополнительные функциональные возможности и улучшенный синтаксис для стилей веб–сайтов.Позволяют использовать переменные, вложенные стили и другие возможности для упрощения написания и управления стилями. Улучшают организацию кода и повторное использование.Требуют предварительной компиляции перед использованием на веб–сайте. Необходимость в обучении дополнительным навыкам препроцессоров.

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

6.4. Инструменты и технологии гибкой сетки для мобильного дизайна

1. CSS Flexbox [4] является мощным инструментом для создания гибкой сетки. С его помощью можно легко управлять визуальным порядком и расположением элементов в ряду или в столбце, а также создавать адаптивные макеты. Flexbox использует свойства, такие как display: flex, flex–direction, justify–content и align–items [9], чтобы контролировать размеры и позиционирование элементов.

2. CSS Grid является еще одним мощным инструментом для создания гибкой сетки [5]. Он предоставляет более гибкие возможности для размещения элементов на веб–странице в виде сетки, состоящей из строк и столбцов. CSS Grid использует свойства, такие как display: grid, grid–template–rows, grid–template–columns и grid–gap, [8] которые позволяют легко создавать сложные макеты для мобильных устройств.

3. CSS Media Queries позволяют применять разные стили CSS, основанные на физических характеристиках устройства, таких как ширина экрана или разрешение [6]. С помощью медиа–запросов разработчики могут настраивать гибкую сетку или изменять стиль элементов для разных размеров экрана. Например, можно указать разные значения для ширины столбцов или изменить порядок размещения элементов на экране в зависимости от разрешения.

4. CSS Frameworks. Существующие различные CSS–фреймворки, такие как Bootstrap, Foundation и Bulma, предлагают предварительно созданные компоненты и сетки для разработки гибкого мобильного дизайна. Они упрощают процесс создания адаптивных макетов и предоставляют готовое поведение и стили, которые можно легко настроить и адаптировать к нуждам проекта [7].

5. JavaScript библиотеки и фреймворки, такие как React, Angular или Vue.js, также могут использоваться для создания гибкой сетки мобильного дизайна. Они предлагают компоненты и инструменты для эффективной работы с гибкими сетками, а также позволяют создавать динамические макеты, которые могут изменяться в зависимости от размеров и ориентации экрана.

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

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


Таблица 2 – Сравнительная характеристика различных методов и моделей разработки адаптивного веб–дизайна
ХарактеристикаResponcive Web DesignMobile–first approachAdaptive Web DesignProgressive Enhancemnt
ГибкостьПредоставляет высокий уровень гибкости, позволяя эффективно управлять контентом на различных устройствах.Позволяет лучше управлять контентом и оптимизировать его для мобильных пользователей.Обеспечивает высокую гибкость, позволяя адаптировать контент для различных устройств.Позволяет создавать доступные сайты с постепенной прогрессией улучшений для разных устройств и браузеров.
Управление контентомПозволяет эффективно управлять контентом на различных устройствах, автоматически подстраиваясь под разные размеры экранов.Фокусируется на первоначальной разработке для мобильных устройств, что позволяет лучше управлять контентом и оптимизировать его для мобильных пользователей.Позволяет адаптировать контент для различных устройств, включая не только мобильные, но и планшеты, десктопы и другие.Позволяет создавать доступные сайты с постепенной прогрессией улучшений для разных устройств и браузеров.
ПроизводительностьМожет повысить производительность за счет одной версии сайта для всех устройств, что облегчает кеширование и загрузку.Улучшает производительность за счет оптимизации для мобильных устройств, уменьшая нагрузку на них.Позволяет оптимизировать производительность, выстраивая контент под конкретные устройства и их возможности.Может улучшить производительность за счет умеренного начального загрузочного объема и постепенного добавления улучшений.
Разработка и обслуживаниеТребует разработки одной адаптивной версии сайта, что упрощает разработку и обслуживание.Ускоряет разработку и упрощает обслуживание за счет фокуса на мобильные устройства.Может потребовать больше усилий при разработке и обслуживании, так как контент должен быть адаптирован к разным устройствам.Требует начальной разработки более простого функционала, но может потребовать больше усилий для добавления улучшений.

Заключение

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

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

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

Список источников

  1. El–Bakry H. M. et al. Adaptive user interface for web applications //Recent Advances in Business Administration: Proceedings of the 4th WSEAS International Conference on Business Administration (ICBA’10). – 2010. – С. 20–22.
  2. Perkowitz M., Etzioni O. Adaptive web sites: an AI challenge //IJCAI (1). – 1997. – С. 16–23.
  3. Алексеев А.П. Введение в Web–дизайн. Учебное пособие. – М.: ДМК Пресс, 2019. – 184 c.
  4. Эрик А. Майер. Макет сетки в CSS. – 2016 г.
  5. Frain B. Responsive web design with HTML5 and CSS3. – Packt Publishing Ltd, 2015.
  6. Grant K. CSS in Depth. – Simon and Schuster, 2018.
  7. Gustafson A. Adaptive web design. – Peachpit Press, 2015.
  8. Niess G. et al. CSS Grid Layouts. – 2019.
  9. Weyl E. Flexbox in CSS. – " O'Reilly Media, Inc.", 2017.
  10. Perkowitz M., Etzioni O. Adaptive web sites //Communications of the ACM. – 2000. – Т. 43. – №. 8. – С. 152–158.
  11. Tandel S., Jamadar A. Impact of progressive web apps on web app development //International Journal of Innovative Research in Science, Engineering and Technology. – 2018. – Т. 7. – №. 9. – С. 9439–9444.
  12. Oliver A., Monmarche N., Venturini G. Interactive Design of Web Sites with a Genetic Algorithm //ICWI. – 2002. – С. 355–362.
  13. Coenen F. et al. A framework for self adaptive websites: tactical versus strategic changes //Proc. of the Workshop on Webmining for E–commerce: Challenges and Opportunities (KDD’00). – 2000. – С. 75–80.