Оптимизация сайта для планшетов и телефонов - 2

ExpressAutoComUa
На сайте с 05.10.2008
Offline
87
#51
P1otr:
Ой, для этого можно и сервис гугла использовать https://www.google.com/webmasters/tools/mobile-friendly/?hl=ru и много сторонних сервисов

Вопрос был адресован для DiKiJ.

Сервис гугла, да и много других сервисов не дают ответов даже на самые простые вопросы.

У каждого сайта своя статистика.
tommy-gung
На сайте с 22.11.2006
Offline
277
#52
ExpressAutoComUa:
DiKiJ, как тестируете алгоритм адаптации сайта и мобильную версию? Какой софт используете и какие основные разрешения задаете для тестовой проверки?

отвечу за себя: "адаптивный дизайн" в браузере, потом проверка на телефоне-планшете.

мин 320px по ширине

---------- Добавлено 19.09.2016 в 13:09 ----------

ExpressAutoComUa:
Сервис гугла, да и много других сервисов не дают ответов даже на самые простые вопросы.

а какие ответы нужно-то?

Здесь не могла быть ваша реклама
ExpressAutoComUa
На сайте с 05.10.2008
Offline
87
#53
tommy-gung:
отвечу за себя: "адаптивный дизайн" в браузере, потом проверка на телефоне-планшете.
мин 320px по ширине

Понятно, что в браузере. Софт не используете, примерно так:

tommy-gung:
а какие ответы нужно-то?

Простые ответы на конкретные вопросы:

/ru/forum/comment/14682839

tommy-gung
На сайте с 22.11.2006
Offline
277
#54

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

D.iK.iJ
На сайте с 26.05.2013
Offline
200
#55
ExpressAutoComUa:
DiKiJ, как тестируете алгоритм адаптации сайта и мобильную версию? Какой софт используете и какие основные разрешения задаете для тестовой проверки?

Вечер добрый. Без софта.

Я всегда использую Хром для верстки. Для половины работы хватит просто уменьшить ширину окна браузера и его панели разработки по F12.

Тестирую с 775px и примерно до 310. Если получается - даже до 260 пикселей. Не повредит. :) Разрешения - все.

Если это возможно и уместно, сайт может делаться полностью "резиновым".

Дальше идут тесты большинства страниц в IE 11, Edge, Фаерфоксе, Сафари, Хромиуме (Яндекс браузер, Опера).

Самые важные - IE и Сафари. Так как у IE и Фаерфокса одинаковые глюки с картинками, а Сафари идеально эмулирует мобильны браузер Андроида. И он строже следует стандартам.

Ну а в Edge, например, работают переносы текста, которых нет в Хроме.

Дальше беру мобильные браузеры и свой телефон на Андроиде. Всего браузеров (с десктопными) около 11.

Потом смотрю эмуляцию Айфона в Хроме. Хотел бы что-то яблочное, но не по карману оно мне.

На том этапе можно подправить положение элементов для Айфонов и Айпадов, например.

Потом проверяю в Гугле - по 2 ссылкам.

http://developers.google.com/speed/pagespeed/insights/

http://www.google.com/webmasters/tools/mobile-friendly/

Бывает, нужно переместить что-то на пару пикселей и Гугл сразу дает 100 из 100. Ну и где-то на том моменте (после правок) ко мне приходит паранойя и я бросаюсь проверять все еще на один круг. 😂

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

Коллеги,

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

Рекомендации

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

Это может быть вызвано несколькими причинами — например, на страницах сайта не указан тег <viewport>, контент не помещается на экран по ширине, присутствуют Flash-элементы, плагины Silverlight или Java-апплеты.

Ознакомьтесь с подробностями и исправьте ошибки.

вот пациент: www.vselustry.ru

Культиваторы, снегоуборщики, мотоблоки (http://www.house-tools.ru) и другое оборудование в одном месте... ВсеЛюстры.рф - Дополнительная скидка 10% на Всё - пишите в личку.
D.iK.iJ
На сайте с 26.05.2013
Offline
200
#57
seozm:
Коллеги,
помогите пжл-та с проблемкой, вебмасер яндекса говорит что сайт не оптимизирован под мобильные устройства

Так он и по гуглу не проходит:

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.vselustry.ru%2F

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

D.iK.iJ
На сайте с 26.05.2013
Offline
200
#58

Чуть не поседел на днях.

Не работает td {display: block;} и все тут (в Edge, IE 11, Сафари и Фаерфоксе).

А это ведь чуть ли не самый важный прием, работающий для теплых ламповых табличных сайтов!

Решения

1) Добавить td ячейкам width: 100%, так как иногда в таблицах указывается собственная ширина и высота колонок.

2) Прописать стили для остальных элементов таблицы: table, tbody, tr. Не полностью уверен в причинах влияния table и tbody, так как встречалось редко, но вот tr (строки таблицы) довольно часто мешают. Особенно при display: inline-block;

3) td {float: left; width: 100%;} - оказался рабочим вариантом сегодня. Именно float: left позволил ячейкам таблицы нормально переноситься друг под друга.

4) Экзотический вариант с table {position: relative;} td {position: absolute;} - слишком много мороки.

Единственный подходящий случай - если нужно поменять порядок текста и картинки местами. Но и там position: absolute применяется только к одному элементу, а второму блоку просто добавляется отступ.

богоносец
На сайте с 30.01.2007
Offline
726
#59
DiKiJ:
прием, работающий для теплых ламповых табличных сайтов

А какие ещё бывают?

Мерзко звучащие полупроводниковые? Так уж и там давно микросхемы... да и об этом уже все забыли, не актуально. Зачем помнить вчерашнее?

IT
На сайте с 28.03.2015
Offline
25
#60

Добрый день.

Помогите пожалуйста с версткой.

На сайте - http://videonablyudenie-msk.ru/

У меня есть таблица - Аксессуары для видеонаблюдения, IP видеокамеры и тд.

Она у меня шире.

До этого, у меня было 3 колонки, потом сделал 2. Не помогло.

Я так понимаю, что дело в изображениях. Так как, например тут - http://videonablyudenie-msk.ru/katalog/domofony/, яндекс и гугл показывают, что у меня все хорошо с версткой.

Как ее привести в нормальное состояние?

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

А эту таблицу, не могу удалить, она нужна.

Недорогая установка камер видеонаблюдения по Москве и Московской области!

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