Увеличение количества различных устройств, используемых для выхода в Интернет, а так же их массовое использование заставляет задуматься об адаптации контента под эти устройства. Создание нескольких версий сайта, несомненно, является выходом из положения, однако это влечет дополнительные проблемы(например такие как поддержка сайта, обновление, добавление информации, разные url)[4].
Адаптивный дизайн является более перспективным направлением. Он призван обеспечить не только корректное отображение контента на различных экранах, но и так же корректную работу на устраревших устройствах[4,5].
В основу разработки адаптивного веб-дизайна могут лечь следующие подходы[4,5]:
- Изящная деградация(Graceful degradation);
- Прогрессивное улучшение (Progressive Enhancement);
- Сначала мобильные(Mobile first);
- Адаптивный сайт с серверными компонентами (RESS);
- Так же для сравнения будет рассмотрена разработка отдельной мобильной версии сайта.
Проведем сравнительный анализ данных подходов с точки зрения их применения для решения задачи разработки адаптивного дизайна для веб-системы просмотра расписания ВУЗа.
В качестве критериев для сравнительного анализа были выбраны следующие:
- A1 — Сохранение функциональности при использовании с различных устройств;
- A2 — Скорость загрузки страницы;
- A3 –Экономия трафика;
- A4 — Удобство сопровождения и внесения изменений;
- A5 — Сложность разработки;
- A6 — Использование всех возможностей устройства для более качественного отображения контента.
Для определения весов критериев воспользуемся аналитической иерархической процедурой Саати[1,2]. Правила заполнения матрицы парных сравнений представлены в таблице 1.
Xij | Значение |
1 | i-ый и j-ый критерий примерно равноценны |
3 | i-ый критерий немного предпочтительнее j-го |
5 | i-ый критерий предпочтительнее j-го |
7 | i-ый критерий значительно предпочтительнее j-го |
9 | i-ый критерий явно предпочтительнее j-го |
Матрица парных сравнений, средние геометрические и веса критериев представлены в таблице 2.
А1 | А2 | А3 | А4 | А5 | А6 | Среднее геометрическое | Веса критериев | |
А1 | 1 | 3 | 5 | 5 | 5 | 9 | 3,87 | 0,45 |
А2 | 0,33 | 1 | 3 | 3 | 3 | 7 | 1,99 | 0,23 |
А3 | 0,20 | 0,60 | 1 | 1 | 1 | 3 | 0,84 | 0,10 |
А4 | 0,20 | 0,60 | 1 | 1 | 1 | 3 | 0,84 | 0,10 |
А5 | 0,20 | 0,60 | 1 | 1 | 1 | 3 | 0,84 | 0,10 |
А6 | 0,11 | 0,30 | 0,20 | 0,14 | 0,33 | 1 | 0,26 | 0,03 |
Сумма: | 2,18 | 6,50 | ||||||
Диаграмма весовых коэффициентов для критериев A1, A2, A3, A4, A5, А6 представлена на рисунке 1.
Выполним проверку матрицы попарных сравнений на непротиворечивость[1,3].
Суммы столбцов матрицы парных сравнений: R1= 2.04; R2=6.1; R3=11.2; R4=11.14; R5=11.33; R6=26.
Путем суммирования произведений сумм столбцов матрицы на весовые коэффициенты альтернатив рассчитывается вспомогательная величина L = 6.38. Индексом согласованности .
Величина случайной согласованности для размерности матрицы парных сравнений: S=1.24.
Отношение согласованности не превышает 0.08, поэтому уточнение матрицы парных сравнений не требуется.
Таким образом, выделены основные критерии для сравнительного анализа подходов к разработке адаптивного веб-дизайна и получена количественная оценка их важности.
Используя полученные выше коэффициенты, определим интегральный показатель качества для определения степени соответствия представленных подходов задаче эффективной разработки адаптивного веб-дизайна:
- Изящная деградация(Graceful degradation);
- Прогрессивное улучшение (Progressive Enhancement);
- Сначала мобильные(Mobile first);
- Адаптивный сайт с серверными компонентами (RESS);
- Разработка отдельной версии сайта(для сравнения).
Выберем категориальную шкалу от 0 до 9 (где 0 — функциональность не поддерживается вообще, 9 — максимальный уровень предоставляемой функциональности) для функциональных возможностей подходов.
A1 — Сохранение функциональности: a1 = 0.45;
A2 — Скорость загрузки страницы: a2 = 0.23;
A3 — Экономия трафика: a3 = 0.1;
A4 — Удобство сопровождения и внесения изменений: a4 = 0.1;
A5 — Простота разработки: a5 = 0.1;
A6 — Использование возможностей устройства: a6 = 0.03,
где .
Определим (по введенной шкале) количественные значения функциональных возможностей Xij (таблица 5). Вычислим интегральный показатель качества для каждого подхода[1,3].
Критерии | Веса | GD | PE | MF | RESS | Мверсия | Базовые значения |
Сохранение функциональности | 0,447 | 6 | 8 | 9 | 8 | 8 | 7,8 |
Скорость загрузки страницы | 0,230 | 5 | 6 | 7 | 9 | 7 | 6,8 |
Экономия трафика | 0,097 | 1 | 5 | 8 | 9 | 9 | 6,4 |
Удобство сопровождения и изменения | 0,097 | 3 | 8 | 7 | 9 | 1 | 5,6 |
Простота разработки | 0,097 | 7 | 3 | 5 | 2 | 6 | 4,6 |
Использование возможностей устройства | 0,030 | 2 | 6 | 8 | 7 | 8 | 6,2 |
Интегральный пок-ль Q: | 1,000 | 4,97 | 6,70 | 7,83 | 7,81 | 6,99 | 6,86 |
где интегральный показатель качества для j-го подхода.
Построим лепестковую диаграмму интегрального показателя качества каждого подхода (рисунок 2).
Лепестковая диаграмма значений критериев представлена на рисунке 3.
Сравнительный анализ подходов к разработке показал, что интегральные показатели качества трех подходов (RESS и MF и отдельная версия) из пяти представленных превышают базовое значение. Наибольшее значение интегрального показателя качества наблюдается у Mobile First подхода, на который наиболее применим в данных условиях для разработки системы просмотра расписания ВУЗа. Разработка отдельной(мобильной) версии является альтернативой, хотя имеет собственные недостатки, не присущие остальным подходам(например разные URL для мобильной и полной версии сайта).