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

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

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

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

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

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

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

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

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

/ru/forum/comment/14682839

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

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

Я всегда использую Хром для верстки. Для половины работы хватит просто уменьшить ширину окна браузера и его панели разработки по 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. Ну и где-то на том моменте (после правок) ко мне приходит паранойя и я бросаюсь проверять все еще на один круг. 😂

Коллеги,

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

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

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

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

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

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

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

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

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

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

Не работает 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 применяется только к одному элементу, а второму блоку просто добавляется отступ.

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

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

Добрый день.

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

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

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

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

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

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

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

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

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