Новая базовая тема оформления: различия между версиями
Перейти к навигации
Перейти к поиску
м (→Поддержка браузеров) |
м |
||
| (не показано 9 промежуточных версий 3 участников) | |||
| Строка 1: | Строка 1: | ||
| + | [[Категория:Руководство]] | ||
| + | |||
'''Новая базовая тема оформления''' написана с учетом методологии разработки, что делает её более стабильной в эксплуатации. | '''Новая базовая тема оформления''' написана с учетом методологии разработки, что делает её более стабильной в эксплуатации. | ||
| Строка 6: | Строка 8: | ||
Учтены большинство рекомендаций групп разработки веб-стандартов, а также требования технологий SEO-оптимизации. | Учтены большинство рекомендаций групп разработки веб-стандартов, а также требования технологий SEO-оптимизации. | ||
| − | За счет технической оптимизации и переработки юзабилити | + | За счет технической оптимизации и переработки юзабилити оптимизирована возможность кастомизации базовой темы клиентом, а также кастомизации и быстрых доработок веб-специалистами Mute Lab, которая не влечет за собой необновляемоcть кастомизированных частей. |
Упрощена клиентская кастомизация CSS - все делается через визуальные классы, имеющие префиксы, их достаточно легко перебивать, клиентские стили отдельно вынесены вниз. | Упрощена клиентская кастомизация CSS - все делается через визуальные классы, имеющие префиксы, их достаточно легко перебивать, клиентские стили отдельно вынесены вниз. | ||
| Строка 15: | Строка 17: | ||
== Юзабилити и улучшение дизайна == | == Юзабилити и улучшение дизайна == | ||
| − | *Все страницы, формы, кнопки, попапы приведены к общему дизайну | + | *Все страницы, формы, кнопки, попапы приведены к общему дизайну. |
*Улучшены главные части продающих страниц: | *Улучшены главные части продающих страниц: | ||
| − | форма и результаты бронирования имеют общие тайтлы, степ-бары, унифицирован внешний вид и расположение кнопок | + | форма и результаты бронирования имеют общие тайтлы, степ-бары, унифицирован внешний вид и расположение кнопок. |
| − | *Унифицированы небронирующие страницы, а также боксы (в особенности, на странице информации о заказе) | + | *Унифицированы небронирующие страницы, а также боксы (в особенности, на странице информации о заказе). |
| − | *Проработаны юзабилити формы заполнения данных | + | *Проработаны юзабилити формы заполнения данных. |
| − | *Проработаны юзабилити с запоминанием кук, процес начат на форме поиска авиа, в ближайшем времени будет продолжен на все формы | + | *Проработаны юзабилити с запоминанием кук, процес начат на форме поиска авиа, в ближайшем времени будет продолжен на все формы. |
| − | *Ко всем полям добавляются плейсхолдеры | + | *Ко всем полям добавляются плейсхолдеры. |
| − | *Улучшена валидация, добавили новые правила для многих кейсов | + | *Разработана новая стилистика и юзабилити работы с постфильтрами. |
| − | *Подготовлена платформа для имплементации более удобных автокомплитов и календарей | + | *Переструктурировано саммари. |
| − | *Улучшена локализация | + | *Изменен вид подробной информации о перелете, который охватывает всю полноту данных (возвратность билета, перелеты по кодшер, тарифы, информация о багаже и многое другое). |
| − | *Начата оптимизация иконок под Retina | + | *Информация по количеству пассажиров приведена к удобному виду. |
| − | *Как один из важнейших оптимизационных процессов, в ближайшее время будет закончен переход от реквест стабов к попапам | + | *Улучшена работа и переработан дизайн матрицы дат. |
| − | *Уменьшено количество ошибок,все ошибки отображаются понятно и корректно, оптимизирована скорость обработки 404, улучшено качество отдачи 404 | + | *Добавлен вывод информации о количестве оставшихся мест для каждого перелета. |
| − | *Пересмотрен функционал в личном кабинете, проведен первый этап оптимизации работы с фильтрами и очередями | + | *Улучшена валидация, добавили новые правила для многих кейсов. |
| + | *Подготовлена платформа для имплементации более удобных автокомплитов и календарей. | ||
| + | *Улучшена локализация. | ||
| + | *Начата оптимизация иконок под Retina. | ||
| + | *Как один из важнейших оптимизационных процессов, в ближайшее время будет закончен переход от реквест стабов к попапам. | ||
| + | *Уменьшено количество ошибок,все ошибки отображаются понятно и корректно, оптимизирована скорость обработки 404, улучшено качество отдачи 404. | ||
| + | *Пересмотрен функционал в личном кабинете, проведен первый этап оптимизации работы с фильтрами и очередями. | ||
*Начата переработка модулей моих пассажиров, профиля пользователя, заявок на модификацию, сообщений. В будущем дизайн этих модулей будет упрощен, но уже сейчас они соответствуют технологическим требованиям. | *Начата переработка модулей моих пассажиров, профиля пользователя, заявок на модификацию, сообщений. В будущем дизайн этих модулей будет упрощен, но уже сейчас они соответствуют технологическим требованиям. | ||
*Подготовка платформы для поддержки мобильных и тач-устройств. | *Подготовка платформы для поддержки мобильных и тач-устройств. | ||
| + | *Модифицирован дизайн таблиц. | ||
== Техническая часть == | == Техническая часть == | ||
| − | *Ускорена работа страниц | + | *Ускорена работа страниц. |
| − | *Уменьшено количество разметки | + | *Уменьшено количество разметки. |
| − | *Введена методология | + | *Введена методология абстракции, модели данных от визуальной составляющей и манипуляции с данными (модель Model-View-Controller максимально примененная к верстке). |
| − | + | *Разделение: модель / разметка / визуальная CSS / манипуляции Javascript. | |
| − | + | *Необходимые данные доступны везде в модели данных. | |
| − | *Разделение: модель / разметка / визуальная CSS / манипуляции Javascript | + | *Уход от использования инлайнового CSS и в максимально возможной степени, инлайнового Javascript. |
| − | *Уход от использования инлайнового CSS и в максимально возможной степени, инлайнового Javascript | + | *Оптимизирован и склеен CSS, теперь он строится на препроцессорах. |
| − | *Оптимизирован и склеен CSS, строится на препроцессорах | + | *Абстрагированы визуальные классы от классов для манипуляций. |
| − | *Абстрагированы визуальные классы от классов для манипуляций | + | *Оптимизирован нагрузочный трафик при Ajax, все переведено на Json. |
| − | *Оптимизирован нагрузочный трафик при Ajax, все | + | *Оптимизированны скрипты, все скрипты переписанны на последних версиях современных javascript-фреймворков. В дальнейшем, с обновлениям этих фреймворков. |
| − | *Оптимизированны скрипты, все скрипты переписанны на последних версиях современных javascript-фреймворков с | + | *Специфические вещи вынесены как отдельные плагины, что позволяет не конфликтовать с подключаемыми клиентом плагинами. |
| − | *Специфические вещи вынесены как отдельные плагины, что позволяет не конфликтовать с подключаемыми клиентом плагинами | + | *Код максимально приведен в соответсвие со спецификациями. |
| − | * | + | *Полностью новая библиотека валидации с семантической разметкой правил, которая позволит создавать любые правила и таким образом направлять действия пользователей в любых кейсах. |
| − | + | *Внедрен фреймворк работы с куками, который позволяет максимально запоминать данные — как одно из приоритетных направлений развития. | |
| − | *Полностью новая библиотека валидации с семантической разметкой правил, которая позволит создавать любые правила и таким образом направлять действия пользователей в любых кейсах | + | *Новые постфильтры, скорость которых возросла в 2-3 раза, более того, они достаточно легко кастомизируются. |
| − | *Внедрен фреймворк работы с куками, который позволяет максимально запоминать данные — как одно из приоритетных направлений развития | + | *Полностью переработана страница авиавыдачи, все три типа группировки результатов на выдаче работают с постфильтрами и максимально быстро. |
| − | *Новые постфильтры, скорость которых возросла в 2-3 раза, более того, они достаточно легко кастомизируются | + | *На страницу авиавыдачи вывели новые данные. |
| − | *Полностью переработана страница авиавыдачи, все три типа группировки результатов на выдаче работают с постфильтрами и максимально быстро | + | *Ввод ограничения на чтение тарифных правил, кроме случаев, если пользователь запрашивает непосредственно их. |
| − | *На страницу авиавыдачи вывели новые данные | + | *Переработан ЛК, как клиентский так и агентсткий, внедрен новый фреймворк работы с таблицей заказов, начали пересматривать системы филтьтров и очередей — в будущем предстоит разширение этого функционала. |
| − | *Ввод ограничения на чтение тарифных правил, кроме случаев, если пользователь запрашивает непосредственно их | + | *Удален весь deprecated функционал. |
| − | *Переработан ЛК, как клиентский так и агентсткий, внедрен новый фреймворк работы с таблицей заказов, начали пересматривать системы филтьтров и очередей — в будущем предстоит разширение этого функционала | + | *Переработана мини-форма: на данный момент она работает со всеми типами маршрутов и дополнительными параметрами без ограничений, т.е. повторяет возможности основной авиационной формы. |
| − | * | + | *Ускорена и унифицирована матрица дат. |
| − | *Переработана мини-форма: на данный момент она работает со всеми типами маршрутов и дополнительными параметрами без ограничений | + | *Оптимизированы для кастомизации попапы путеводителя, со временем будет совершен полный уход от использования iframe. |
| − | *Ускорена и унифицирована матрица дат | ||
| − | *Оптимизированы для кастомизации попапы путеводителя, со временем будет совершен полный уход от использования iframe | ||
*Переход к поддержке только современных браузеров, что позволило ускорить работу страниц и уменьшить их вес. | *Переход к поддержке только современных браузеров, что позволило ускорить работу страниц и уменьшить их вес. | ||
| Строка 63: | Строка 70: | ||
Новая базовая тема позволяет подключать и кастомизировать компоненты просто и быстро. | Новая базовая тема позволяет подключать и кастомизировать компоненты просто и быстро. | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
Создание клиентских индивидуальных тем оформления на базе новой темы упрощено и ускорено. | Создание клиентских индивидуальных тем оформления на базе новой темы упрощено и ускорено. | ||
| − | Новая тема позволяет создавать индивидуальные темы оформления, в которых меняются только некоторые страницы, без уменьшения функциональности остальных | + | Новая тема позволяет создавать индивидуальные темы оформления, в которых меняются только некоторые страницы, без уменьшения функциональности остальных, что позволяет индивидуальным темам оформления обновляться вместе с базовой темой. |
| − | + | Cистема практически полностью абстрагирована от внешних изменений, по причине того, что методология разработки учитывала возможности маштабирования визуального и модели данных. | |
| − | |||
| − | |||
== Поддержка браузеров == | == Поддержка браузеров == | ||
| − | + | В разработке новой базовой темы оформления был использован подход graceful degradation (http://webdesign.about.com/od/webdesignglossary/g/graceful-degradation.htm), а именно — поддержание работоспособности, а не абсолютной визуальной идентичности во всех версиях всех браузеров. | |
| − | + | Для новой темы также применим подход «две последних стабильных версии популярных браузеров». В частности, новая базовая тема полноценна в таких версиях браузеров: | |
| − | |||
=== Google Chrome === | === Google Chrome === | ||
| − | Две последние | + | Две последние стабильные версии. |
| − | |||
| − | |||
| − | + | На 04/2013 — 25 и 26. | |
| − | |||
=== Mozilla Firefox === | === Mozilla Firefox === | ||
| − | Две последние | + | Две последние стабильные версии. |
| − | === | + | |
| − | Две последние | + | На 04/2013 — 19 и 20. |
| + | |||
| + | === Opera === | ||
| + | Две последние стабильные версии. | ||
| + | |||
| + | На 04/2013 — 12.10 и 12.00. | ||
| − | + | Поддержа специфических для Opera проблем — deprecated процесс, в связи с ближайшим переходом браузера на движок Blink, после чего уменьшится цикл обновлений. | |
| − | + | === Safari (OS X) === | |
| + | Две последние стабильные версии. | ||
| − | + | На 04/2013 — 5 и 6. | |
| − | — | + | Поддержка Safari под Windows не оказывается — 6 версия не выпускалась под Windows, 5 официально устарела и не доступна для скачивания. |
=== Internet Explorer === | === Internet Explorer === | ||
| − | Две последние | + | Две последние стабильные версии. |
| + | |||
| + | На 04/2013 — 9 и 10. | ||
| − | Также учтены все требования для поддержки версии 11 после ее выхода. | + | Также учтены все требования для поддержки версии 11 после ее выхода. |
| − | Internet Explorer 8 поддерживается только в функциональной части, визуальные преимущества не поддерживаются (например, | + | |
| − | Мы планируем отказаться от поддержки версии IE 8 в течение года. | + | Internet Explorer 8 поддерживается только в функциональной части, визуальные преимущества не поддерживаются |
| + | (например, градиенты, закругление уголков), по причине того, что рендер таких вещей сильно замедляет работу. | ||
| + | Разрабатывать же отдельную версию для корректного отображения в версии браузера, доля которой с каждым днем падает, | ||
| + | не является целесообразным. Мы планируем отказаться от поддержки версии IE 8 в течение года. | ||
| + | |||
| + | Поддержка Internet Explorer 7 и ниже не гарантируется. В ближайшем будущем предусмотрена работа по восстановлению | ||
| + | работоспособности функционала в версии IE7. | ||
| − | |||
=== Другие === | === Другие === | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | Мы поддерживаем браузеры на базе Chromium, но только до момента перехода Chrome и Opera на движок Blink. С этого момента, Chromium будет признан устаревшим. | |
| + | |||
| + | Редкие браузеры на WebKit не поддерживаются, в связи с ближайшим уходом основных мейнтейнеров движка на свои разработки. | ||
| + | |||
| + | Также, поддерживаются две последние стабильные версии Safari под iOS (iOS6 и iOS5). | ||
| − | + | == См. также == | |
| + | *[[Тема оформления]] | ||
Текущая версия на 18:40, 6 декабря 2018
Новая базовая тема оформления написана с учетом методологии разработки, что делает её более стабильной в эксплуатации.
Общая скорость работы в сравнении с предыдущей базовой темой возросла в 1.5-3 раза.
Содержит улучшенный дизайн, улучшенную юзабельность для конечного пользователя, а также полностью переработанную техническую часть. Учтены большинство рекомендаций групп разработки веб-стандартов, а также требования технологий SEO-оптимизации.
За счет технической оптимизации и переработки юзабилити оптимизирована возможность кастомизации базовой темы клиентом, а также кастомизации и быстрых доработок веб-специалистами Mute Lab, которая не влечет за собой необновляемоcть кастомизированных частей.
Упрощена клиентская кастомизация CSS - все делается через визуальные классы, имеющие префиксы, их достаточно легко перебивать, клиентские стили отдельно вынесены вниз. Использование БЭМ-методологии гарантирует независимость стилей.
В рамках работ над новой темой мы внимательно прислушиваемся ко всех пожеланиям и рекомендациям для упрощения работы с Немо веб-мастерами клиентов.
Содержание
Юзабилити и улучшение дизайна
- Все страницы, формы, кнопки, попапы приведены к общему дизайну.
- Улучшены главные части продающих страниц:
форма и результаты бронирования имеют общие тайтлы, степ-бары, унифицирован внешний вид и расположение кнопок.
- Унифицированы небронирующие страницы, а также боксы (в особенности, на странице информации о заказе).
- Проработаны юзабилити формы заполнения данных.
- Проработаны юзабилити с запоминанием кук, процес начат на форме поиска авиа, в ближайшем времени будет продолжен на все формы.
- Ко всем полям добавляются плейсхолдеры.
- Разработана новая стилистика и юзабилити работы с постфильтрами.
- Переструктурировано саммари.
- Изменен вид подробной информации о перелете, который охватывает всю полноту данных (возвратность билета, перелеты по кодшер, тарифы, информация о багаже и многое другое).
- Информация по количеству пассажиров приведена к удобному виду.
- Улучшена работа и переработан дизайн матрицы дат.
- Добавлен вывод информации о количестве оставшихся мест для каждого перелета.
- Улучшена валидация, добавили новые правила для многих кейсов.
- Подготовлена платформа для имплементации более удобных автокомплитов и календарей.
- Улучшена локализация.
- Начата оптимизация иконок под Retina.
- Как один из важнейших оптимизационных процессов, в ближайшее время будет закончен переход от реквест стабов к попапам.
- Уменьшено количество ошибок,все ошибки отображаются понятно и корректно, оптимизирована скорость обработки 404, улучшено качество отдачи 404.
- Пересмотрен функционал в личном кабинете, проведен первый этап оптимизации работы с фильтрами и очередями.
- Начата переработка модулей моих пассажиров, профиля пользователя, заявок на модификацию, сообщений. В будущем дизайн этих модулей будет упрощен, но уже сейчас они соответствуют технологическим требованиям.
- Подготовка платформы для поддержки мобильных и тач-устройств.
- Модифицирован дизайн таблиц.
Техническая часть
- Ускорена работа страниц.
- Уменьшено количество разметки.
- Введена методология абстракции, модели данных от визуальной составляющей и манипуляции с данными (модель Model-View-Controller максимально примененная к верстке).
- Разделение: модель / разметка / визуальная CSS / манипуляции Javascript.
- Необходимые данные доступны везде в модели данных.
- Уход от использования инлайнового CSS и в максимально возможной степени, инлайнового Javascript.
- Оптимизирован и склеен CSS, теперь он строится на препроцессорах.
- Абстрагированы визуальные классы от классов для манипуляций.
- Оптимизирован нагрузочный трафик при Ajax, все переведено на Json.
- Оптимизированны скрипты, все скрипты переписанны на последних версиях современных javascript-фреймворков. В дальнейшем, с обновлениям этих фреймворков.
- Специфические вещи вынесены как отдельные плагины, что позволяет не конфликтовать с подключаемыми клиентом плагинами.
- Код максимально приведен в соответсвие со спецификациями.
- Полностью новая библиотека валидации с семантической разметкой правил, которая позволит создавать любые правила и таким образом направлять действия пользователей в любых кейсах.
- Внедрен фреймворк работы с куками, который позволяет максимально запоминать данные — как одно из приоритетных направлений развития.
- Новые постфильтры, скорость которых возросла в 2-3 раза, более того, они достаточно легко кастомизируются.
- Полностью переработана страница авиавыдачи, все три типа группировки результатов на выдаче работают с постфильтрами и максимально быстро.
- На страницу авиавыдачи вывели новые данные.
- Ввод ограничения на чтение тарифных правил, кроме случаев, если пользователь запрашивает непосредственно их.
- Переработан ЛК, как клиентский так и агентсткий, внедрен новый фреймворк работы с таблицей заказов, начали пересматривать системы филтьтров и очередей — в будущем предстоит разширение этого функционала.
- Удален весь deprecated функционал.
- Переработана мини-форма: на данный момент она работает со всеми типами маршрутов и дополнительными параметрами без ограничений, т.е. повторяет возможности основной авиационной формы.
- Ускорена и унифицирована матрица дат.
- Оптимизированы для кастомизации попапы путеводителя, со временем будет совершен полный уход от использования iframe.
- Переход к поддержке только современных браузеров, что позволило ускорить работу страниц и уменьшить их вес.
Подключение компонент системы и работа с индивидуальными темами оформления
Новая базовая тема позволяет подключать и кастомизировать компоненты просто и быстро.
Создание клиентских индивидуальных тем оформления на базе новой темы упрощено и ускорено. Новая тема позволяет создавать индивидуальные темы оформления, в которых меняются только некоторые страницы, без уменьшения функциональности остальных, что позволяет индивидуальным темам оформления обновляться вместе с базовой темой. Cистема практически полностью абстрагирована от внешних изменений, по причине того, что методология разработки учитывала возможности маштабирования визуального и модели данных.
Поддержка браузеров
В разработке новой базовой темы оформления был использован подход graceful degradation (http://webdesign.about.com/od/webdesignglossary/g/graceful-degradation.htm), а именно — поддержание работоспособности, а не абсолютной визуальной идентичности во всех версиях всех браузеров. Для новой темы также применим подход «две последних стабильных версии популярных браузеров». В частности, новая базовая тема полноценна в таких версиях браузеров:
Google Chrome
Две последние стабильные версии.
На 04/2013 — 25 и 26.
Mozilla Firefox
Две последние стабильные версии.
На 04/2013 — 19 и 20.
Opera
Две последние стабильные версии.
На 04/2013 — 12.10 и 12.00.
Поддержа специфических для Opera проблем — deprecated процесс, в связи с ближайшим переходом браузера на движок Blink, после чего уменьшится цикл обновлений.
Safari (OS X)
Две последние стабильные версии.
На 04/2013 — 5 и 6.
Поддержка Safari под Windows не оказывается — 6 версия не выпускалась под Windows, 5 официально устарела и не доступна для скачивания.
Internet Explorer
Две последние стабильные версии.
На 04/2013 — 9 и 10.
Также учтены все требования для поддержки версии 11 после ее выхода.
Internet Explorer 8 поддерживается только в функциональной части, визуальные преимущества не поддерживаются (например, градиенты, закругление уголков), по причине того, что рендер таких вещей сильно замедляет работу. Разрабатывать же отдельную версию для корректного отображения в версии браузера, доля которой с каждым днем падает, не является целесообразным. Мы планируем отказаться от поддержки версии IE 8 в течение года.
Поддержка Internet Explorer 7 и ниже не гарантируется. В ближайшем будущем предусмотрена работа по восстановлению работоспособности функционала в версии IE7.
Другие
Мы поддерживаем браузеры на базе Chromium, но только до момента перехода Chrome и Opera на движок Blink. С этого момента, Chromium будет признан устаревшим.
Редкие браузеры на WebKit не поддерживаются, в связи с ближайшим уходом основных мейнтейнеров движка на свои разработки.
Также, поддерживаются две последние стабильные версии Safari под iOS (iOS6 и iOS5).
