< Заур Магомедов />

профессиональный верстальщик и блоггер

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

Заур Магомедов
Главная » Веб-дизайн » Адаптивный дизайн сайта — так важно ли сегодня? Встречайте адаптивный дизайн блога Zaurmag.Ru

Адаптивный дизайн сайта — так важно ли сегодня? Встречайте адаптивный дизайн блога Zaurmag.Ru

Адаптивный дизайн - Zaurmag.Ru

Пост был обновлен: Авг 05, 2015

Всем жаркий летний привет! Хотя, нужно пожелать прохладный привет. 🙂 Лето, жара ведь… Не знаю как у других, а в нашем регионе стоит ужасная жара. В данной своей заметке я хотел бы затронуть актуальную тему на сегодняшний день — адаптивный дизайн. Вообще, стоит ли заморачиваться адаптивным дизайном и дает ли это какой-либо эффект?

Алгоритмы поисковых систем постоянно меняются. И вот очередное нововведение от поискового гиганта Google — гугл отдает предпочтение сайтам, оптимизированные для мобильных устройств, в том случае, если пользователь вводит запросы с телефона или планшета. Это значит, что пользователю будут выдаваться в первую очередь сайты с адаптивным дизайном, т. к. они намного удобнее. Вот как заботится Гугл о своих пользователях, и правильно делает. По поводу Яндекса, ничего сказать не могу, но я точно уверен в том, что в ближайшем будущем подобный алгоритм подхватит и Яндекс. Отсюда делаем выводы.

Внедрение этого механизма началось еще в 2014 году, когда Гугл добавил в Webmasters Tools новую функцию — отчет о юзабилити для мобильных устройств. С помощью этого инструмента можно выявить такие проблемы, как:

  • мелкий шрифт на сайте;
  • близкое расположение элементов друг к другу;
  • неправильно заданный масштаб окна просмотра (viewport).

Удобство просмотра на мобильных устройствах

Основные достоинства адаптивного дизайна:

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

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

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

Представляю вашему вниманию адаптивный дизайн моего блога. Проверить очень легко — просто начинайте плавно уменьшать окно своего браузера, или откройте адрес — http://zaurmag.ru в своем смартфоне или планшете. Если найдете какие-то ошибки, то отпишитесь в комментариях, буду только рад…

Читайте также:  Основные правила веб-дизайна

Сайт zaurmag.ru адаптирован для мобильных устройств

Адаптивный и отзывчивый дизайны

Давайте немного углубимся в понятие адаптивного дизайна. На самом деле существует два понятия: отзывчивый дизайн (resoinsive design) и адаптивный дизайн (adaptive design). В чем их отличие? Разве это не одно и то же? Да, эти оба термина означают, что дизайн сайта адаптируется под мобильное устройство, но у них есть все же некоторые отличия.

Адаптивный дизайн

Дизайн, который базируется на основе медиа запросов (media queries). В этом случае дизайн адаптируется под различные разрешения экранов, прыгая по контрольным точкам. При таком подходе описываются стили для наиболее популярных разрешений экранов мобильных устройств, т. е. при уменьшении экрана дизайн будет адаптировать скачкообразно.

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

Вообще, адаптивный дизайн это понятие более емкое, чем отзывчивый дизайн. Можно сказать, что адаптивный дизайн включает в себя уже отзывчивый дизайн + прогрессивное улучшение. Прогрессивное улучшение — адаптация сайта для просмотра и пользованием именно на мобильных устройствах. Сюда можно отнести перелистывание контента пальцем (swipe), разворачивание и сворачивание меню ну и т. п. Иными словами, адаптивный дизайн подразумевает полноценный десктопный сайт, контент укладывается под размеры экрана не в ущерб функциональности.

Отзывчивый дизайн

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

Следует отметить, что адаптация дизайна под различные разрешения экранов достигается средствами HTML и CSS. Есть, конечно, и другой подход — cms определяет с какого устройства пользователь открыл сайт, подставляя ему нужный шаблон (для мобильного и планшета…). Это так называемая, мобильная версия сайта. Но меня такой вариант не особо устраивает. Я больше ЗА именно за адаптацию обычного десктопного шаблона.

Читайте также:  Enquire.js — создаем адаптивные сайты легко

Дизайн моего блога я сделал именно отзывчивым. Он плавно изменяет свои размеры при уменьшении экрана браузера. Времени было потрачено немало, да и все равно остались некоторые мелочи доделать, которые вы, быть может, и не заметили, но это на момент написания статьи. Пришлось также потрудиться над менюшкой сайта, т. е. на мобильном телефоне или на планшете главное меню выезжает слева. Список рубрик на «мобиле» я перенес в главное меню и сделал в виде выпадающих пунктов. Для меню использовал скрипт адаптивного меню — Mmenu. Прикольная менюшка, имеет огромное количество настроек и API. Может как-нибудь напишу про нее отдельную заметку.

Адаптивное меню

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

Для того чтобы понять считают ли ваш сайт ПС оптимизированным для мобильных устройств, достаточно воспользоваться инструментом от Гугл — Mobile Friendly.

Проверка удобства просмотра на мобильных устройствах

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

По поводу остальных своих сайтов — их ждет та же участь, что и мой блог. Необходимо переверстать все сайты с учетом адаптивности. Причем во внимание я беру концепцию современного трендового дизайна — это минимализм и удобство. Да, это все мне предстоит, а то получается, как, говорится — «Сапожник без сапог» 🙂 .

Если у вас есть, что дополнить то радости прошу перейти к комментариям.

А вы уже адаптировали свои сайты под мобильные устройства?

Адаптивный дизайн сайта

Пост был обновлен: Авг 05, 2015

Заур Магомедов
Заур Магомедов

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов (4 оценок, среднее: 4,75 из 5)
Загрузка...

Проверка орфографии

Система Orphus

12 комментариев к статье "Адаптивный дизайн сайта — так важно ли сегодня? Встречайте адаптивный дизайн блога Zaurmag.Ru"

  • Вадим Авг 09, 2016 в 17:05

    Прочитал статью и вспомнил не столь отдаленное прошлое. Передо мной стоял выбор — адаптивный дизайн или две версии сайта — для обычных компьютеров и мобильных устройств. В итоге первый вариант показался мне оптимальным и по удобству и по стоимости.
    Кстати, реально замечаю, что на моем блоге присутствует приличная доля мобильного трафика. Последние дни он составляет более 20-25 процентов от общего объема. Все-таки не зря было проделано столько работы для адаптации сайта.

    • Заур Магомедов
      Заур Магомедов Авг 10, 2016 в 3:05

      Поэтому я клиентам предлагаю адаптив, хотя это сейчас уже по умолчанию должно идти.

  • Заира Окт 02, 2015 в 21:34

    Звездочки в сниппете ручками делали али плагин какой? Интересно было бы почитать микроформаты и семантическую разметку

    • Заур Магомедов
      Заур Магомедов Окт 02, 2015 в 21:51

      Вы про какие звездочки? Если вы про выдачу в Гугл, то в плагине рейтинга есть такая возможность + внедрение микроразметки в шаблон. Про семантическую верстку я уже писал.
      С микроразметкой сам еще не до конца разобрался.

      • Заира Окт 06, 2015 в 4:04

        Вот только не для всех движков есть готовые плагины/
        Спасибо за ссылку, интересная информация, хотя я имела ввиду микроразметку

        • Заур Магомедов
          Заур Магомедов Окт 06, 2015 в 10:32

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

          • Заира Окт 06, 2015 в 19:24

            ручками это долго, надо учится, включать мозг

            • Заур Магомедов
              Заур Магомедов Окт 06, 2015 в 23:03

              Зато эффективно… А мозг напрягать всегда нужно.

  • Евгений Авг 14, 2015 в 13:01

    Могу добавить, что есть хорошая книга от родоначальника адаптивного веб-дизайна Итана Маркотта «Отзывчивый веб-дизайн». Книга обязательна для прочтения современным верстальщикам, да и для общего развития почитать можно. Я ее читал уже, но к некоторым моментам приходится возвращаться. Книга небольшая, похожа скорее на брошурку, но там на примере конкретного сайта показывается как сделать сайт адаптивным.

    • Заур Магомедов
      Заур Магомедов Авг 14, 2015 в 14:51

      Спасибо Евгений! Обязательно почитаю…

  • Имран Ильясов
    Имран Авг 04, 2015 в 12:56

    Адаптивность это необходимость. Рано или поздно все сайты будут адаптированными https://events.yandex.ru/lib/talks/458/ по ссылке есть интересная статистика

    • Заур Магомедов
      Заур Магомедов Авг 04, 2015 в 19:56

      Кстати, ваша ссылка будет хорошим дополнением к статье. СМОТРЕТЬ ВСЕМ!!! Спасибо!

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]