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

[D.iK.iJ]

Для тянущегося дизайна поэкспериментировал и использую такое:

<meta name=viewport content="width=device-width, height=device-height, initial-scale=1">

В стилях вот такое:

PHP код:

@media screen and (max-width: 650px) { // Если ширина экрана меньше 650
img {max-width: 96% !important;}
iframe, table, span, div, textarea, input, button, submit {max-width: 100% !important;}

//Чтобы блоки комментариев не расползались до 500px.
#vk_comments {max-width: 96% !important;}
#fb-comments {max-width: 96% !important;}
#comments {max-width: 96% !important;}
} 


+++
Неплохо отображаются картинки;
В телефоне сайт выглядит намного крупнее;
Текст читать удобно (можно еще настроить отдельно шрифт);
Влазят даже большие блоки Адсенс за счет уменьшнния iframe.

---
Картинки немного корежит по высоте. Понятия не имею как исправить;
Бывает, картинку в таблице сжимает до 0. Применять бы стили только к большим изображениям (больше 360px);
Сделать бы перенос (на новую строку) ячеек из больших таблиц. Из-за этого колонки очень уж узкие.

Очень хочется совет - как бы до ума довести.

Добавлено через 23 часа 39 минут
Покопался еще немного с кодом. Думаю использовать еще псевдоклассы сss :after, :before.

[D.iK.iJ]

Долго тупил, но с картинками справился как-то так:

@media screen and (max-width: 650px) {
img {max-width: 96% !important; height: auto !important;}
iframe, textarea, input, button, submit, video, object, embed {max-width: 99% !important;}
table, span, div, ins {max-width: 100% !important;}
}

[D.iK.iJ]

Чтоб не потерять ссылку на проверку оптимизации в Гугле: https://developers.google.com/speed/pagespeed/insights/

[Cyber-Gateway]

Cпасибо за идею.

[D.iK.iJ]

Сообщение от Cyber-Gateway

Cпасибо за идею.

Гляньте еще на Серче. Там побольше тема: http://searchengines.guru/showthread.php?t=873867

[D.iK.iJ]

Ура! Я получил свои 99 / 100 Удобство для пользователей

Делалось довольно просто, если интересно:
1) Табличку меню сделал align="left" ну или style="float: left;".
2) Табличку контента не трогал, добавил <center>
3) Перед футером: <br clear="all">
4) Всякие счетчики и подписи (которые должны стоять рядом) засунул в блоки со стилями display: inline-block; width: 30%;

5) Допилил немного media:
- Увеличил шрифты при уменьшении экрана (font-size: 110%
- Интервал между строк тоже подрос (line-height: 130%
- Появились переносы через hyphens: auto;
- Меню где-то на ширине экрана 500px разворачиваю на width: 100%;
- Ну а лишние блоки, виджеты и групп и небоскреб в левой колонке скрываю через display: none !important;

Кажется, все. Только для ширины экрана в 350 добавляю переносы всех слов в любом месте (word-break: break-all и еще увеличиваю шрифт и межстрочный интервал

Если интересно посмотреть: http://dikij.com/
Или: http://atola.name/

С хрома можно смотреть прямо так (надо только обновлять страницу на нужном размере - чтобы реклама не мешала и подстраивалась).
P.S. Фаерфокс что-то тупит и не переносит таблицу на новую строку.

[MonAmur]

Да мне плевать, как мой сайт видится в мобильных устройствах. Мне, что, остаток жизни потратить, выискивая и устраняя ошибки, чтобы потрафить этим козлам из Америки? Итак урезали выдачу и, соответственно, посещаемость - в поиске гугля всего 14% от общего (более 4200) количества проиндексированных им страниц сайта. Хрена с два я что сделаю! Кому интересно, тот всегда находит способ зайти на сайт, чтобы нормально видеть его. А то в "исправлении ошибок" еще написали, что на сайте шрифт слишком мелкий. Я, что, идиот, на каждой странице шрифт менять? Может, еще зад им поцеловать? Пусть мой целуют. Плевать на их санкции, русские не сдаются, даже когда погибают.

бгггг

[D.iK.iJ]

Да меня за*кол****о, что сам с телефона тыкаю вечно не на те ссылки. Хоть дизайн и резиновый.
А раз стал копать адаптивную рекламу гугла, то и тут перепилил заодно.

Делов-то...

[DVE]

D.iK.iJ, спасибо за проделанную работу и за подробный отчет!

[D.iK.iJ]

Сообщение от DVE

D.iK.iJ, спасибо за проделанную работу и за подробный отчет!

Не помню, добавлял ли я в тему, но 100% рабочий вариант - как сделать чтобы таблицы смещались друг под друга без проблем в фаерфоксе, это обернуть их в див:

<div style="display: inline-block; min-width: 200px; width: 30%;" align="left">

Конечно, min-width: 200px; width: 30% - это просто для примера.

А один align="left" style="float: left;" примененный к таблице дает неплохие такие глюки. А примененные к 2 таблицам - еще более странное поведение