Адаптивный дизайн для сайтов
07 ноября 2014

Всем привет 🙂 Как я и обещал во время своего доклада, тему своей презентации я публикую в формате статьи. Надеюсь, вам понравится 😉

Итак, без лишних слов перейду к делу, и начну я с небольшой статистики, чтобы убедить тебя, дорогой читатель, что моя статья является актуальной и полезной для нашего времени!

Итак, часть первая — интересные факты

1_Android-army-decal

  1. 58% из всех потребителей США в возрасте от 16 лет (и это – второй по уровню технологий рынок после Китая) владеют хотя бы одним смартфоном на сегодняшний день
  2. В 2013 году число пользователей мобильного интернета, которые просматривают сайты и получают доступ к соцсетям с помощью мобильников, пересекло отметку в 1.2 млрд человек
  3. Объем мобильного интернет-трафика в мире составляет 15% от общего объема интернет-трафика на планете
  4. Устройство ни с одной из существующих диагоналей экрана не занимает более 20% рынка в разрезе мировых продаж: многообразие мобильных устройств сохраняется
  5. 61% населения Земли склонны изменить свое мнение о бренде в лучшую сторону, если бренд предлагает возможности мобильного доступа, мобильные приложения или покупку товаров и услуг при помощи смартфона
  6. 60% всех, кто покупает товары при помощи мобильника, пользуются смартфонами в момент пребывания в обычных магазинах и супермаркетах, а еще 50% – по пути в магазин
  7. 90% людей переключаются между разными устройствами в процессе завершения конкретной задачи, причем в процессе выполнения обычно задействованы смартфоны, стационарные ПК, интернет-планшеты и даже телевизоры
  8. В 2013 и 2014 году ожидается поставка почти полумиллиарда одних только интернет-планшетов
  9. Мобильный веб продолжает ускоряться не только из чистой любви к технологиям: каждые 100 мс, в течение которых пользователь вынужден ждать загрузки очередной страницы на экране мобильника или планшета, уменьшают объем продаж на 1%
  10. 25.85% всех электронных писем в мире просматривают при помощи мобильных телефонов, а еще 10.16% пользователи открывают при помощи планшетов
  11. Мобильный поиск сегодня обрабатывает четверть всех поисковых запросов в мире
  12. 95% пользователей смартфонов ищут информацию, привязанную к местным точкам, брендам и данным
  13. Пользователи планшетных устройств тратят на покупки на 50% больше, чем пользователи ПК

На этом небольшое вступление я закончил, и теперь перейдём, непосредственно, к самому главному, к нашей теме 🙂

Часть вторая — Подходы к созданию мобильной версии сайта

determined-fumanchu-computer-stare-l


На сегодняшний день можно выделить три способа адаптации сайта под мобильное устройство (отдельные приложения для работы с сайтом рассматривать не буду!):

  1. Изначально создавать сайт под мобильные устройства, или же «Mobile first»
  2. Создать отдельную версию для мобильных устройств
  3. Забить на мобильную версию 😀

А теперь отдельно рассмотрим плюсы и минусы каждого подхода:

Mobile first

• Начало с новыми силами.
• Лучшая поддержка разных мобильных устройств.
• Производительность.
• С учётом всего и сразу (в частности разных разрешений экранов).
• Дизайн, ориентированный на будущее.

 

• Занимает много времени.
• Сдвиг в сознании (тяжело для тех, кто всю жизнь делал десктопные версии сайтов).
• Организационно сложно (особенно тестирование на разных типах устройств).
• Незнакомо.
Отдельная мобильная версия

• Ниже риск. Создавая отдельную версию меньше шансов поломать основной сайт
• Можно удалить лишнее.
• Будущее за изначально мобильными сайтами (в конце концов мобильная версия потеснит основную).

 

• Это всё равно мобильный сайт (т.е. по факту у вас два сайта).
• Временные исправления (они же костыли и велосипеды).
• Дизайн для маленьких экранов. Так как изначально акцент ставится на маленькие экраны, последующий перенос интерфейса на большие дисплеи без потери качества может оказаться проблемой.
Не делать мобильную версию

• Не нужно ломать голову над адаптацией под разные разрешения экранов
• Нулевые затраты по времени и средствам
Ну так же сказал Лебедев

 

• Ваш сайт может выглядеть просто ужасно на экранах смартфонов
• Это может лишить вас большой аудитории пользователей мобильных устройств
• Все-равно рано или поздно придётся делать мобильную версию
• Ну или отдельное приложение на крайняк.

Часть третья — Правила хорошего мобильного дизайна

Responsive-design


Чего не стоит делать или типичные ошибки:

1. Скрывать элементы сайта в мобильных версиях

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

2. Не оптимизировать управление сайта под touch-устройства

А точнее, большой печалькой будет отсутствие:

3. Не оптимизировать типографику

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

4. Не оптимизировать размер изображений

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

5. Отключать зум

Чтобы пользователь мог нормально читать текст можете использовать следующее:

<meta name="viewport" content="width=device-width">

Подробнее можете посмотреть тут:

http://frontender.com.ua/mobile-web/useful-mobile-head-elements/

6. Использовать HTML5 теги или CSS3 стили, которые поддерживают не все мобильные браузеры

Чтобы этого избежать, советую посмотреть следующие ресурсы:

http://caniuse.com/

http://mobilehtml5.org/

7. Использовать много «тяжелого» контента

Пользователи не самых мощных аппаратов могут просто не загрузить ваш сайт (браузер вылетит или зависнет из-за нехватки памяти)

Но и пользователи флагманов могут не обрадоваться жрущему много ОЗУ контенту: embedded элементам (видосики, музычка, карты и пр.)

Часть четвёртая — Возможные проблемы и их решения

Picture1


1. Большие фоновые изображения

2. Текст в виде изображения

Чтобы избежать подобной практики, советую использовать следующие ресурсы:

3. Сложные многоуровневые меню

Единственный способ улучшить многоуровневое меню — уделить время для его оптимизации и изменения структуры.

Вот некоторые методы, которые вы могли бы применить для достижения данной цели:

4. Адаптивный дизайн для embedded элементов

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

Итак, для подобной магии нам требуется поместить наш iframe в блок div с классом

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

В итоге у вас должно получится что-то следующее:

<div class="video-container">
<iframe width="640" height="360" src="//www.youtube.com/embed/rM2eoF4gRBI" frameborder="0" allowfullscreen></iframe>
</div>

5. Иконки

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

Font Awesome

Все его прелести вы можете прочитать на сайте шрифта.

А на этом у меня всё. Спасибо за внимание. До скорых встреч 🙂

P.S. Адаптивный дизайн для этого сайта будет, но пока неизвестно когда. Но это будет точно раньше, чем анонс Half-Life 3 🙂

  • Dima Novoseltsev

    Вадим Орлов, насколько я понял ты являешься автором данного блога, также ты посвятил целый доклад на тему «Адаптивный дизайн для сайтов» но я почему то не увидел на твоем блоке никакого респонсивa (тестировал на планшете, телефоне и в эмуляции мобильных устройст в Chrome). С чем это связано?

    • Артём Лебедев

      Еще раз повторим для невнимательно прочитавших первое предложение: самая большая глупость на свете — создание отдельных мобильных версий сайтов.

      Источник: http://www.artlebedev.ru/kovodstvo/sections/177/

      • Dima Novoseltsev

        никто и не говорит про создания отдельного сайта для мобильных телефонов. В наше время адаптивность можно сделать при помощи CSS и JS.