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

[admin]

Ощутил себя динозавром, что только сейчас пришел и то вынужденно к необходимости изучать адаптивный дизайн, чтобы переделать все свои сайты. Если все, по ощущениям, давно это сделали, то я смог добраться до отсечки в 60% и более процентов - именно столько сейчас посетителей у сайтов через смартфоны. И получается, что я сильно ограничиваю для своих сайтов этот трафик, так как поисковые сервера отдают приоритет тем сайтам, которые имеют адаптивный дизайн, что в принципе справедливо. Можно, конечно, отделаться мета-тегом <meta name="viewport" content="width=device-width">, чтобы хотя бы горизонтальной прокрутки не было. Но поисковые сервера не считают это адаптивным дизайном, хотя и поставят вам плюсик за наличие мета-тега viewport. В этом смысле удобно подключить сайт к метрике, там есть проверка любой страницы сайта на то, как оно будет показано на экране мобильных устройств. Хотя куда проще открыть свой сайт на собственном смартфоне

[admin]

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

Смысл в том, что совсем старые сайты, которые лень переделывать или нет возможности переделать, можно обозначить фиксированной шириной, а через мета-тег viewport сделать width=device-width. Тогда сайт будет виден на любом устройстве без горизонтальной прокрутки, ничего никуда не уйдет вправо за пределы экрана, но и при масштабировании что-то может стать достаточно мелким, особенно на экранах 320px. А главная проблема в том, что ни Яндекс, ни Гугл не признает такой подход годным, чтобы ранжировать как адаптированный сайт для мобильных устройств. А это вообще одна из причин, почему в эту тему полез. Ситуация такова, что не меньше половины трафика идет через мобильные устройства, поэтому с этим надо считаться.

Отзывчивая верстка - она же "резиновая" верстка, это работа без media запросов, а ширина не фиксированная, а максимальная. При этом в коде не оставляем никаких фиксированных размеров, заменяя их по возможности на flex и в процентах. Тогда сайт не просто масштабируется целиком, а все блоки как бы оживают и при изменении ширины экрана начинают трансформироваться с учетом выставленных процентов для всех указаний по ширине. И если ваш сайт одноколоночный, на этом можно и остановиться. Также этот вариант подходит сайтам без явного контейнера по ширине, то есть когда необходимо, чтобы сайт одинаково смотрелся как на компьютере, смартфоне, так и на огромном 4K телевизоре. Это как вариант может быть некая красивая презентация с очень сложной компоновкой.

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

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

[admin]

Есть у кого-то опыт в оптимизации и продвижении форумов? Отпишитесь в ЛС или прямо в этой ветке, есть предложение для вас. Желательно сразу показать примеры работающих форумов, для которых вы что-то делали. Тематика форумов при этом не имеет значения, важнее ваши навыки и владение темой.