Logo
Главная < Компетенции < Responsive Design

Responsive Design Доступность на любых гаджетах

Responsive webdesign

Использование мобильного интернета постоянно растёт. Продажи смартфонов и планшетов уже сейчас опережают продажи персональных компьютеров и ноутбуков. Некоторые крупные компании отказываются от производства ПК и работают только на рынке мобильных устройств (Например Samsung вышла уже из рынка ПК).
И для того, чтобы не терять пользователей, Вы должны идти в ногу с этими развитиями. И мы Вам в этом поможем!

Что такое responsive design?

Дословный перевод с английского языка - отзывчивый дизайн. То есть одна и таже страница выглядит на разных устройствах по-разному. Responsive design - это не технология, не язык программирования или какой-нибудь фреймворк. Это набор принципов отображения информации.

Для лучшего понимания приведём Вам пример: С помощью вашего мобильного устройства вы заходите на какую-нибудь страницу, которая не оснащена Responsive Design. Мобильный веб-браузер будет пытаться отобразить всю видимую информацию сайта на дисплеи вашего устройства. Как результат мы получаем очень мелкий шрифт или очень маленькие картинки. Получить информацию для пользователя абсолютно невозможно. В этом случае пользователь увеличивает изображение. При этом увеличивается вся страница и большенство информации уходит за пределы видимой части браузера. Пользователь вынужден перемещать видимую часть информации влево или направо (вверх или вниз). Таким образом посещение сайта становиться для пользователя целым испытанием на стабильность нервной системы.

Решением данной проблемы и является responsive design. Сайты, оснащённые responsive design, уже во время загрузки отображают информацию в нужном размере. То есть пользователю уже не нужно увеличивать изображение, чтобы получить информацию. Он просто сдвигает изображение вверх или вниз (или только влево или направо, но вверх или вниз намного интуитивнее)

Альтернативы

У responsive design есть следующие альтернативы:

  • Отдельный мобильный дизайн
    Разработчики создают отдельный HTML-код страницы для больших экранов, для планшетов и для смартфонов. У этого есть конечно преимущество: HTML-страницы с самого начала оптимированы только под один размер экрана. То есть не нужно думать, как один и тот же HTML-код будет выглядеть на разных устройствах. Но и есть недостатки: Все эти страницы содержать разный HTML-код, но отображают одну и ту же информацию. Если нужно сделать хоть какое-нибудь изменение в этой информации, приходится менять все файлы с HTML-кодом.
    Яркий пример отдельного мобильного дизайна это интернет-портал "Одноклассники". Попробуйте сами: Откройте на вашем компьютере (большой экран) страницу odnoklassniki.ru и откройте в мобильном браузере ту же самую страницу odnoklassniki.ru. Замечаете разницу? Отображение разное, но информация (почти) одинаковая (в моём случае форма входа в систему). Вы заметили, что в мобильном браузере произошло перенаправление с "odnoklassniki.ru" на "m.odnoklassniki.ru"? Это обозначает, что одна и та же страница имеет разный HTML-код.
  • Мобильное приложение
    Некоторые разработчики пытаются решить проблему с отображением информации с помощью мобильных приложений (App). Мобильное приложение это уже не простая HTML-страница. У этих приложений есть намного больше возможностей, чем у HTML-страниц: Приложения могут использовать все технические возможности устройств (Камера, GPS, USB etc) и они не подчиняются классическим принципам работы протокола HTTP.
    Но для большенства интернет-проектов это решение является уже чересчур. Во-первых: дорого! Одно и то же приложение должно работать на разных платформах (которые в свою очередь деляться ещё и на версии, которые между собой не компатибельны) - iOS, Android, Windows etc. Во-вторых: долго! Для каждой платформы нужно разрабатывать отдельную версию приложения зачастую ещё и с помощью разных технологий.

Преимущества

Мы разработали уже несколько интернет-проектов оснащённые responsive design и с уверенностью можем утверждать, что у этой техники дизайна есть больше преимуществ, чем недостатков:

  • Низкая стоимость обслуживания
    В отличии от отдельного мобильного дизайна, редакторы изменяют только один файл с HTML-кодом страницы
  • Низкая сложность разработки
    Сложность разработки меньше, чем у мобильных приложений (App)
  • Низкая цена
    Из выше перечисленных оснований вытекает и низкая цена для заказчиков
  • Ориентированность на пользователя
    Пользователю уже не нужно увеличивать размер отображения информации, что делает Вашу страницу более удобной
  • Одинаковые URL'ы
    Для отдельных мобильных дизайнов нужно несколько URL'ов для отображения различных HTML-страниц. Это ведёт к проблеме "Duplicate Content", которую очень не любят поисковые машины
  • Google за Responsive Design
    "[...]Адаптивный веб-дизайн – это конфигурация, при которой сервер всем устройствам отправляет один и тот же код HTML. Чтобы оптимизировать страницу для показа на определенном устройстве, используются медиа-запросы CSS. Наша система автоматически распознает эту конфигурацию, если агентам пользователя робота Googlebot разрешено сканировать объекты на страницах (CSS, JavaScript и изображения)." https://developers.google.com/webmasters/smartphone-sites/details?hl=ru

Недостатки

Но есть и недостатки по сравнению с классическим дизайном. Может быть не совсем и недостатки, но всё равно нужно учитывать:

  • Повышенная цена
    Очень часто заказчики не видят смысла платить за responsive design, так как не совсем понимают его преимущества.
  • Повышенная трудоёмкость
    По сравнению с классическими Desktop-дизайнами, для разработчиков responsive design обозначает повышенную трудоёмкость. То есть, если вы планируете, что ваши пользователи будут приходить на ваш сайт только с использованием персональных компьютеров, то вам лучше отказаться от responsive design хотя бы из-за того, что это чуть-чуть дороже. Но скупой платит дважды!
  • Соотношение затрат и выгод
    Не каждой странице нужен responsive design. Всё зависит от ваших целей!
  • Усложнённое тестирование
    Тестирование написанного кода очень сильно усложняется, так как нужно тестировать на большом количестве гаджетов
  • Источник ошибок
    Responsive design может быть ещё и дополнительным источником ошибок для разработчиков и редакторов.
  • Отображение рекламы
    Видео, формы заказов, реклама и т.д. - всё это очень сложно отобразить на маленьком экране
  • Больше Javascript
    Для responsive design нужно больше javascript'а для, например, замены классической навигации на мобильную навигацию. Обслуживание Javascript - тоже не тривиальная задача.

Пример некоторых принципов техники responsive design

Попытаемся привести конкретный пример страницы, которая использует принцип responsive design.



Desktop-версия

К примеру вы приняли решение, что ваша страница будет выглядеть вот так:

Responsive1

При этом у вас хватает места для всей информации: навигация, тексты, картинки, видео, реклама. Всё на своих местах. Всё отлично.

Планшет-версия

И тут вам нужно отобразить эту же страницу на планшете. Вот только дисплеи у планшетов намного меньше, чем у персональных компьютеров. Тут можно подумать, чтобы некоторые элементы отображались на других местах. Примерно так:

Responsive2

Смартфон-версия

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

Responsive3

Итак ваш изначальный дизайн приобразовался следующим образом:

Responsive4

Выполняется...
Turbo loader
Back to top