Блог Дмитрия Худякова
Энциклопедия начинающих блоггеров

Что такое адаптивный дизайн и так ли он нужен веб-сайту?

Друзья, и снова всем большой привет! С вами на связи как всегда Дмитрий Худяков и проект «zametkibloggera.ru». С наступившим вас 2017 годом, коллеги!

Друзья, давайте опустим поздравления и горячие приветствия, так как они были в предыдущей статье, и сразу перейдем к делу. Ответьте мне вот на какой вопрос: «С какого устройства вы читаете сейчас эту статью?».

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

Некоторые (самые любопытные) из вас могут начать загружать страничку на разных устройствах и сравнивать. Что вы увидите?

А увидите вы, что элементы меню, категории и другие блоки в смартфоне выглядят не так, как на большом мониторе компьютера. Почему так происходит и в чем причина? Отвечаю — адаптивный дизайн.

Вот так выглядит главная страничка на большом мониторе компьютера:

А вот так на экране смартфона:

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

Что понимают под адаптивным дизайном?

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

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

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

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

Коллеги, а вот список основных особенностей адаптивного дизайна:

  • функционал сайта может изменяться в зависимости от вида гаджета;
  • иерархия и вложенность элементов в HTML не постоянна для разных устройств;
  • применение javascript в качестве средства управления положением и функциями объектов;
  • некоторые блоки могут скрываться или менять назначение на небольших экранах.

Обязательно ли адаптировать свою площадку под разные разрешения экрана? Несомненно! Статистика показывает, что более 50% пользователей посещают интернет со смартфонов и других портативных приспособлений с небольшим экраном.

Вы же не хотите терять трафик из-за того, что ваш сайт будет нечитаемым на телефоне? Более того, поисковые системы предъявляют требования по юзабилити, то есть наличие адаптива может косвенно, но повлиять на результаты выдачи в поиске. И это вполне логично.

Роботы отсеивают и опускают вниз сайты, которые будут неудобны для чтения и пользования посетителями. Нам нужно этого избежать!

К тому же Гугл и Яндекс уже объявили о том, что ресурсы без адаптивного дизайна будут ниже ранжироваться в выдаче.

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

Инструменты для проверки адаптива и способы его создания

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

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

Также подобная функция встроена в популярные браузеры:

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

  • в браузере Firefox в правом верхнем углу нужно в меню выбрать разделы «Разработка» => «Дизайн адаптивный» и там также обозначить нужные размеры устройства.

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

  • Изменить верстку сайта самостоятельно.

Способ подходит для тех, кто разбирается в фронтенд-части Web-разработки. Вам понадобится применить мета-тег «Viewport» и медиа-запросы (mediaqueries) для разных разрешений экрана.

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

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

  • Воспользоваться фреймворком.

Фреймворк — готовая сетка из блоков, которые динамически подстраиваются под разные разрешения. Вам нужно «натягивать» свой макет на уже готовый скелет из HTML и CSS.

Самый популярный представитель в этом пункте — Bootstrap. Уверен, вы наслышаны о нем. Огромная библиотека готовых адаптивных решений для разных блоков сайта — от основного каркаса до списков, меню, форм обратной связи и так далее. Подробная инструкция на русском языке не даст запутаться.

  • Скачать готовый шаблон.

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

Если вы ищите тему для WordPress, то в подавляющем большинстве случаев ее дизайн будет адаптивным. Разработчики понимают, что без этого условия их изобретение никого не заинтересует. Готовые шаблоны для интеграции в различные CMS можно посмотреть на сайте templatemonster.com.

  • Прибегнуть к профессиональной помощи.

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

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

Также к портному-закройщику вы идете с моделью одежды из журнала. Очень важно прорисовать расположение и поведение всех составляющих сайта.

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

В сети не первый год работает трудолюбивый и ответственный профессионал — Юлия Первушина. На ее блоге вы сможете найти примеры работ и оформить заказ адаптивного дизайна.

Не буду долго разглагольствовать, просто перечислю преимущества работы с Юлей:

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

Не верите мне на слово, друзья? Обращайтесь к Юлии и убедитесь самостоятельно в ее профессионализме, получив на выходе шикарный дизайн под разные разрешения экрана.

Ну что же, коллеги, надеюсь, я смог ввести вас в курс дела и познакомить с понятием адаптивного дизайна. Без него сейчас никуда, запомните это!

Если вы не хотите терять трафик, который идет к вам от «мобильных» посетителей, то обязательно задумайтесь об адаптации ресурса под разные экраны.

Остались вопросы? Жду ваших комментариев. Понравилась статья? Делитесь ссылкой с друзьями. И до новых встреч на страницах блога! И самое главное – берегите себя!

С уважением Дмитрий Худяков!

1 звезда2 звезды3 звезды4 звезды5 звезд (Нет голосов)
Загрузка...
Этот блог читают 4 578 человек, присоединяйся и ты
Комментариев 16
  • Lara

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

    03.01.2017 | 00:27
    • Нина

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

      03.01.2017 | 00:27
  • Lara

    Попробую разобраться с Bootstrap... эх, если не получится... у меня один сайт хромает 8)

    03.01.2017 | 00:27
  • Владимир

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

    03.01.2017 | 00:27
    • Дмитрий

      Владимир, полностью с вами согласен! Но все же адаптивны дизайн лучше создавать на проекте с первых дней его жизни!

      03.01.2017 | 00:27
      • Нина

        Это верно! Я изначально это не сделала, потом пришлось плагин ставить, а он не совместим с другим плагином, поменяла, а тот давал нагрузку... пришлось помучаться мне.

        03.01.2017 | 00:27
        • Дмитрий

          В таких случаях лучше сразу менять тему на адаптивную, Нина! Это мое мнение!

          03.01.2017 | 00:27
          • Нина

            Ваше мнение правильное. Но не всем новичкам эта информация доступна

            03.01.2017 | 00:27
  • Ольга

    Раз существует такое требование у поисковиков, да и на самом деле очень много пользователей заходят в интернет с телефонов (правда, я не понимаю, как и зачем, ведь это ж так неудобно, вот схемы для вязания точно на мобильнике не прочтешь нормально!), то я решила эту проблему в свое время переходом на новый адаптивный шаблон.

    03.01.2017 | 00:27
    • Дмитрий

      И правильно сделали, Ольга! Поисковики сейчас наказывают понижением позиций в выдаче если у проекта нет мобильной версии.

      03.01.2017 | 00:27
    • Нина

      Сейчас такие телефоны, размером как самый первый телевизор)))) так что на таких и схему можно рассмотреть.

      03.01.2017 | 00:27
  • Павел

    Спасибо за подробную статью. Адаптивный дизайн совершенно необходим, хочется нам этого или нет :)

    03.01.2017 | 00:27
  • Хуторная

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

    03.01.2017 | 00:27
    • Дмитрий

      Всегда рад помочь, Елена!

      03.01.2017 | 00:27
    • Нина

      Елена, вам бы не знать об этом, когда работаете в команде известного блогера. Вы меня прям таки удивили

      03.01.2017 | 00:27
  • Нина

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

    03.01.2017 | 00:27
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: