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

123 4
Mric
На сайте с 24.11.2005
Offline
174
4270

Задались целью сделать сайт с адаптивным дизайном, и вот думаем, как его делать, чтобы гугл корректно индексировал и понимал, что это адаптивка? Интересна техническая сторона, через что делать, через проценты и media запросы руками, или можно делать все через уже готовые фреймворки, типа Bootstrap? Или гугл поймет, если будем делать все через javascript? Как лучше для поисковой системы Google?

E
На сайте с 21.09.2009
Offline
283
#1

Где то здесь https://developers.google.com/web/fundamentals/ посмотрите.

Mric
На сайте с 24.11.2005
Offline
174
#2
easywind:
Где то здесь https://developers.google.com/web/fundamentals/ посмотрите.

Спасибо, почитаю.

AM
На сайте с 13.03.2013
Offline
20
#3

Давно бросил заниматься фигней. Есть готовые решения (напр. шаблоны СМS) с адапривным дизайном - из используйте и ОК. А то блин они там еще чего подкрутят в своих требованиях вам опять придется менять весь сайт начиная с 0.

Mric
На сайте с 24.11.2005
Offline
174
#4
AndreyMakarow:
Давно бросил заниматься фигней. Есть готовые решения (напр. шаблоны СМS) с адапривным дизайном - из используйте и ОК. А то блин они там еще чего подкрутят в своих требованиях вам опять придется менять весь сайт начиная с 0.

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

lanfran
На сайте с 20.03.2013
Offline
77
#5

на данный момент изучаем с поим программистом вариант адаптации моего проекта.

Предложил сделать "резинку" - когда дизайн показывается исходя из размеров экрана.

при мобильном просмотре - сайт просто сжимается все блоки сжимаются в стобец

D.iK.iJ
На сайте с 26.05.2013
Offline
181
#6

Я как-то так делал. Коротко и "сердито": /ru/forum/comment/13289532 :)

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
seo_optimist
На сайте с 09.09.2009
Offline
108
#7

ставим везде вьюпорт height=device-height без зума

и далее все делаем через css media queries.

(Если используется яваскрипт, тоже вычисляем размер вьюпорта, размеры пикселя, берем в учет зум, но это очень тяжело адаптировать под различные браузеры, учитывая что с зумом совсем по разному)

адаптируем css дизайн для сверхбольших разрешений > full hd (1366), для full HD(1980)

для 1200, 1100, 1000(гугл), для ширины в 800, 640 пикселей (тут не забываем за ширину правого скролла) и 320(гугл) соответственно

от 10 до 100 изменений в css делается элементарно

Mric
На сайте с 24.11.2005
Offline
174
#8
DiKiJ:
Я как-то так делал. Коротко и "сердито": /ru/forum/comment/13289532 :)

И как гугл индексирует, и как сайт ранжируется в мобильном поиске? Интересны сейчас именно CSS фреймворки, чтобы не придумывать велосипед, просто уже готовые функции подрубать, вот и думаю, как гугл будет относиться к этим фреймворкам?

D.iK.iJ
На сайте с 26.05.2013
Offline
181
#9
Mric:
И как гугл индексирует, и как сайт ранжируется в мобильном поиске? Интересны сейчас именно CSS фреймворки, чтобы не придумывать велосипед, просто уже готовые функции подрубать, вот и думаю, как гугл будет относиться к этим фреймворкам?

Ну так там ровно три строчки. Мета тег и пару стилей. По тестам Гугла все вполне ничего:

P.S. Тест от Гугл "Mobile-Friendly Test" одобрил этот метод.
86 / 100 Удобство для пользователей.

А по индексации еще рано говорить.

NCom
На сайте с 07.03.2008
Offline
265
#10

У мня пишет Awesome! This page is mobile-friendly. (PageSpeed Insights 99 / 100 Удобство для пользователей)

Прописал везде вьюпорт и сделал резину, но только в минимальную сторону.

123 4

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий