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

есть разница между

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

и

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

?

где так, где так пишут...

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

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

Кажется, нет.

Да и с initial-scale=0.5 или initial-scale=0.1 тоже не особо заметил разницу. Может, их и нет вообще не может быть.

Ура! Я получил свои 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. Фаерфокс что-то тупит и не переносит таблицу на новую строку.

Тупил долго с отступами правой таблицы (которая контент) так как margin и padding работает странно для Хрома.

В итоге засунул внутрь еще одну таблицу с <center> и шириной 80% :)

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

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

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

не очень смотрибелен текст на этом фоне.

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

Думал сделать как тут (когда у блока с контентом фон с прозрачностью) но что-то варианты не сильно интересные получились

На данный момент работаю с заказами с Серча. Всего даптировал уже порядка 18 сайтов (включая свои).

А вот последние полезные наработки:

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

@media screen and (max-width: 700px) {
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;}
}
@media screen and (max-width: 500px) {
body, tbody {
-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;}
}
@media screen and (max-width: 400px) {
td {word-break: break-all;}
}

К этим подпоркам, нужна еще одна подпорка http://modernizr.com/ чтобы убедиться, что тут есть HTML5 и CSS3 и, все ради того, чтобы гуглбот определился :) типа мобильная версия есть. Но вот незадача, он не один раз опрашивает, он как бы браузер, возвращает ширина-высота как 320-480 или 320-420

А как быть с проблемой складки (Flat) подробно тут: http://webdesign.tutsplus.com/articles/designing-for-the-new-fold-web-design-post-monitorism--webdesign-1891 получим повышенный % отказа.

Компания Ланистер (московская), которые продвижением основного сайта у нас занимаются, примерно пару месяцев назад предупредили нас, что гугл меняет свои приоритеты в пользу мобильно-адаптированных сайтов. У нас портал большой, промышленный, после аудита начали работу по созданию нового дизайна.