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

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

6 391 в Html5, Css3 , Веб-дизайн 12

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

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

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

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

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

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

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

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

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

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

Читайте также:  Enquire.js — используем css медиа-запросы в JS

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

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

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

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

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

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

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

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

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

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

Читайте также:  Иконочные шрифты для сайта — что это и как использовать?

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

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

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

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

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

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

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

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

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

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

Оцените пост
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (4 оценок, среднее: 4,75 из 5)
Загрузка...
Заур Магомедов
Заур Магомедов
Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствуюсь, шагая в ногу со временем. Владею такими навыками, как: Html5, Css3, JavaScript, Vue, Git, БЭМ, Gulp.
Другие материалы той же категории