С момента появления iPhone в 2007 году, сенсорный экран мобильных устройств произвел настоящий фурор. Сенсорный экран добавил новые возможности, но в тоже время добавил и новые проблемы, способы мышления и взаимодействия между пользователем и мобильным продуктом. Теперь самый важный вопрос для всех, клиентов и разработчиков, как мы можем обеспечить лучший мобильный опыт пользователей?
Все началось с iPhone
Мобильные продукты, приложения и версии сайтов, практически не разрабатывались до появления iPhone (в основном из — за плохого качества мобильных браузеров). Но после релиза нового телефона, клиенты захотели идти в ногу со временем, и потребовали новые продукты для мобильных устройств. Однако в первое время перед разработчиками появилось огромное количество проблем, связанных с адаптацией сайтов под мобильные устройства, неработающими ссылками и пропадающим контентом.
Быстро перемотаем следующие сложные три года и остановимся на Итане Маркотте, который предложил новый революционный принцип, под названием “отзывчивый веб — дизайн” (RWD). Этот подход изменил сеть и мобильные технологии. Мы рассказали нашим клиентам обо всех преимуществах RWD и о том, почему им не стоит создавать отдельную мобильную версию своего сайта. И все бы хорошо, но существует огромное количество клиентов, которые уже потратили тысячи долларов на сайт для отображения на экранах фиксированного размера. 
“Mobile first” подход.
Затем, примерно в то же время, на рынке появился первый планшетный компьютер, IPad. Те, клиенты, которые уже имели мобильные версии своих сайтов, захотели, адаптацию под планшетные компьютеры. И мы сделали это, используя User-Agent, хотя этот принцип и далек от RWD. Наш страх относительно появления новых мобильных версий сайтов оправдался после появления планшетного компьютера на Android. Поскольку единого уникального идентификатора не существует, все устройства на Android, индетефицировались, как планшетные компьютеры, независимо от их размера.
Есть некоторые услуги для обнаружения планшетных компьютеров на Android, о них рассказано в статье “Серверные устройства обнаружения: история, преимущества и инструкции по применению”, однако, как пользователь мобильного устройства на Android, я чаще вижу мобильные версии сайтов, а не оригинальные, разработанные под стационарные компьютеры. На самом деле, проблема стала настолько серьезной, что в новой версии Android 4,0 (Sandwich Ice Cream), Google добавил запрос оригинальной версии сайта для своего браузера. Но в зависимости от того, как написан сайт, эта опция не всегда срабатывает, и вам все равно придется ждать пока загрузиться неподходящая версия сайта. Итак, у нас несколько вопросов:
- Клиенты, у который имеется сайт обычной версии, не могут адаптировать его под мобильные устройства, с применением отзывчивого веб — дизайна.
- И тем не менее эти сайты также нуждаются в адаптации под просмотр с мобильных устройств.
- А еще такие клиенты, как и все остальные, хотят чтобы их сайты отображались и на планшетных компьютерах.
решение
RWD Retrofit — это небольшой JavaScript плагин, который дает разработчикам возможность разрешить существующие проблемы адаптации обычной версии сайта под просмотр с мобильных устройств с минимальной модификацией оригинального сайта. Он реализует динамический просмотр, обеспечивая адаптацию правильной версии сайта, в зависимости от ширины окна экрана, с которого просматривается сайт (версия сайта влияет как на загрузку, так и на изменение размера или изменение ориентации). Я написал этот плагин для Izilla, который помогает клиентам в решении вопросов, упомянутых выше. И я регулярно использую его в разработке своих проектов. И я считаю, что это отличный инструмент для быстрого и эффективного улучшения мобильного присутствия вашего клиента. Имейте в виду, что RWD модернизация — это не волшебная палочка, которая мгновенно превратит ваш сайт в отзывчивый. Вам все еще нужно разработать отзывчивую версию вашего сайта.
единственное решение
Не существует. В настоящее время у разработчиков есть три способа: специальная мобильная версия сайта, отзывчивый веб — дизайн, и полное восстановление мобильной версии. Ниже я быстро расскажу о плюсах и минусах каждого из них, и RWD подходе.
Выделенная мобильная версия
Плюсы:
- Это совершенно отдельная версия существующего веб — сайта, и чистый холст для работы.
- Поддержка меньшего количества мобильных устройств означает более целенаправленную работу и сайт с минимальным количеством требований.
- По анализу пользовательских привычек и данных, вы можете выбрать оптимальный для пользователей контент.
- Стоимость оправдывает полученный результат.
Минусы:
- Отдельное основание кода может привести к более дорогому обслуживанию.
- Поддержка множества мобильных устройств не является хорошей перспективой для современных мобильных продуктов.
- User-агент не всегда срабатывает, так как ожидается.
- Не стоит создавать только мобильную версию сайта, так как версии для стационарных компьютеров все еще очень популярны.
- Существует возможность появления битых ссылок и пропадание контента.
Отдельные мобильные версии сайтов подходят, если вы абсолютно уверенны в целях мобильных пользователей и у вас есть специально подготовленный контент. Кроме того, ваш клиент хочет получить именно мобильный продукт с дополнительными функциями.
Адаптация первоначальной версии сайта
Плюсы:
- Использует существующее основание кода, что делает поддержку и обновление более эффективными.
- Поддержка широкого спектра мобильных устройств, основанная на размерах экрана.
Минусы:
- Основным принципом является использование CSS3 стиля. Так как для адаптации старых сайтов, которые в основном используют фиксированную ширину изображений, CSS может быть слишком сложным.
- Накладные расходы и низкая эффективность для слишком старых сайтов.
- Требуется повторное длительное тестирование.
- В зависимости от основания кода требует больших материальных затрат.
Этот подход лучше подходит для простых веб — сайтов, которые уже используют современные веб — стандарты. Маркотт использовал этот подход в своей книге по отзывчивому веб — дизайну, но это было до того как популярность подхода “mobile first” выросла.
Полная оптимизация сайта
Плюсы:
- Оптимизирует и постепенно расширяет основу кода.
- Создает хороший пользовательский опыт.
- Поддержка широкого спектра мобильных устройств в зависимости от размера экрана и возможностей, в том числе больших настольных компьютеров и телевизоров.
- Считается самой передовой технологией на сегодняшний день.
- Если все сделано правильно, вашей работой будут восхищаться.
Минусы:
- Планирование, создание прототипов, разработка и тестирование может потребовать множество усилий.
- Затраты на разработку очень высоки.
Мы надеемся стать стандартом для всех новых проектов и модернизаций. Если подходить правильно, ваш сайт должен поддерживать как можно больше различных видов устройств, которые могут появится в обозримом будущем, в том числе на Android, с доступом в Интернет и прочими функциями.
RWD
Плюсы:
- Использует существующую основу кода, что делает обслуживание и обновления более эффективными.
- Отдельные таблицы стилей гарантируют, что модифицированная версия не будет вмешиваться в существующий стиль.
- Минимальные накладные расходы и изменения в существующих сайтах.
- Поддержка широкого спектра устройств, основанная на размере экрана.
- Стоимость разработки является средней.
Минусы:
- Существующие разметки не могут быть гибкими или оптимизированы достаточно, чтобы переориентировать их для экранов малого размера.
Этот способ является лучшим экономически эффективным решением.
какое же решение лучшее?
“Лучшее” зависит от контекста и бюджета. Очевидно, что лучшее решение, которое вы могли бы предложить своим клиентам — это оптимизация сайта с использованием ”mobile first” подхода. Этот вариант обеспечил бы оптимальный опыт для пользователей, используя единую основу кода, а также он является экономически эффективным в обслуживании. Я призываю вас, использовать именно этот подход. Тем не менее, многие из моих клиентов не могут позволить себе это сделать, и потому что их веб — сайты разрабатывались с использованием CSS3 и “лучшим” решением для них является использование RWD.
RWD нужно использовать тем разработчикам, которые только начинают работать с отзывчивым веб — дизайном. Если ваш клиент хочет, чтобы его сайт отображался на мобильных устройствах, но при этом его бюджет ограничен, предложите ему RWD. И как вы понимаете, любая из мобильных оптимизаций о которых мы тут рассказываем лучше, чем вообще ничего. Помните, что опыт достигается с помощью практики. Начните с малого, а после получения необходимых навыков, вы сможете выполнять уже более серьезные оптимизации.
Как же работает RWD?
- Когда страница начинает загружаться, сценарий проверяет, просматривает ли пользователь сайт с мобильного устройства, которое поддерживает сенсорные события.
- Затем он проверяет, есть ли у вашего устройства возможность установить стандартный размер экрана, и устанавливает его соответствующим образом. В статье под названием “Viewport meta — tegs for non — responsive design” объясняется, как вы сможете это сделать.
- Вызывается функция, которая сравнивает ширину документа в media query, и если он равен или больше, она изменяет окна на рабочем столе.
- Эта же функция вызывается на изменение размеров или изменение ориентации (в зависимости от того, что мобильное устройство поддерживает), чтобы увидеть, есть ли необходимость пер …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров