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

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

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

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

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

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

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

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

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

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

бгггг

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

Делов-то...

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

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

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

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

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

Да, если что, принимаю заказы на адаптацию сайтов.

Пишите, всегда можем договориться о скидках :)

Я что-то вспомнил, что не рассказал про адаптацию рекламы от Гугла и Яндекса для мобильных устройств.


С адаптивной рекламой Гугла все довольно просто. Там есть специальные блоки, я только меняю обычно data-ad-format="auto" на data-ad-format="rectangle". Это позволяет показывать только прямоугольные и квадратные блоки, занимая под статьей больше места.

Еще можно показывать, например, большой блок рекламы для десктопа и адапривный - для меньших экранов:

У Яндекса сейчас тоже появилась адаптивная реклама, но я предпочитаю использовать горизонтальный тизер, просто меняя количество объявлений. Ну и по центру его неплохо бы выравнивать.
Для этого нжно добавить к div: style="margin-left: auto; margin-right: auto; display: inline-block;"

Как же изменить количество объявлений в блоке для подстройки под адаптивный дизайна?
Для асинхронного кода после (function(w, d, n, s, t) { нужно вставить скрипт определения ширины экрана: var limmw=document.getElementsByTagName("body")[0].offsetWidth; if (limmw>=1020) {var limm="3";} else {var limm="2";} if (limmw<=820) {limm="1";} Ну и заменить limit на limit: limm,

Я просто обязан оставить это тут:

https://media.giphy.com/media/3oFyD3...b8li/giphy.gif

Сегодня переделывал сайт pleervox.ru и получил у Гугла 100 / 100 Удобство для пользователей. :)
Даже слайдер и просмотрщик фотографий переделан под мобильные устройства.



Единственное, я не понял, что за просмотрщик фото такой в карточке товара, но адаптируется он для мобильных и планшетов вот так:
Код ставится, например, в @media screen and (max-width: 700px) { Тут код }

интересно, если в медию сразу *{display: none} воткнуть, удобство будет 146%?-)

Кстати, будет. Гугл у страницы с ошибкой 500 тоже показывает 100 из 100 удобства для пользователя :)

А тут в примере все не так страшно. Я просто скрыл все 4 рамки у модального окна и 4 картинки углов. Они там показываются через такое мракобесие больно уж много места занимают, да и на мобильных - не нужны совсем.

Ну а потом все блоки и фрейм просмотрщика версии для печати растянул на 100% по ширине экрана. Удобно вполне. Да и лучше, чем убирать функционал.

Довольно интересная статья: https://habrahabr.ru/post/277753/

"Начиная с 39 версии хрома для Android Lollipop была внедрена возможность менять цвет интерфейса браузера веб-разработчиками.
Сделать это просто, нужно в <head> добавить новый мета-тег:" Ну и "Google также рекомендует использовать иконку высокого качества, чтобы это выглядело еще лучше:"
Кстати, для добавления иконок в Айфонах я когда-то сделал у себя на сайтах файл browserconfig.xml: И две картинки: apple-touch-icon.png
и apple-touch-icon-precomposed.png (со скруглениями).

Две - так как я очень ленивый, а проверять просто негде.

Сделал тут простую кнопку переключения на полную версию сайта для адаптивного дизайна:

В Хедер, вместо meta name=viewport:
Сама кнопка:Куки на 30 дней, страница перегружается по скрипту. Работает, проверил.
На здоровье :)

Если кому-то интересны технические моменты, то мы меняем width=device-width на width=1024, делая сайт "шире" для мобильного устройства. Также, я изменил начальный масштаб загрузки страницы с initial-scale=1 на initial-scale=0.1 - так работа очевиднее.

Сегодня у нас интересная тема!
Как сделать таблицу адаптивной и не сойти с ума

В общем, адаптация под "резиновую верстку" табличного сайта часто выглядит примерно вот так. Особенно, если нет легкого доступа к самой таблице.

https://pp.vk.me/c543103/v543103411/...wmxXGiGNGY.jpg

У меня есть полная статья на эту тему, но давайте тут просто приведу список полезностей по пунктам:

1) td {hyphens: auto;} - корректный перенос слов в таблице. Жаль, не во всех браузерах.

2) word-break: break-all; - принудительно разбиваем строки и слова в таблице. Не очень красиво, но работает.

3) <WBR> сами расставляем места переносов.

4) Заключаем таблицу в DIV c фиксированной шириной и overflow: auto. Это включит прокрутку по горизонтали.

5) Иногда достаточно уменьшить отступы в ячейках.

6) td {display: inline-block !important; width: 100% !important;} - а этот способ дошел до меня совсем недавно. Можно сделать столбцы таблицы блоками или инлайн-блоками. Это настолько легко и круто, что даже слов нет!

Любые карточки товаров легко складываются друг под друга, а ячейки переносятся. И все это - без физической разбивки таблицы на 2 части (у таблиц вообще много глюков с float: left в разных браузерах).

Да, подход применим и к строкам (tr). В принципе, стилями таблицу можно даже пересобрать заново.

Дикий, ты лучший, не останавливайся

max-width не работает в Firefox и IE 11 для изображений. И буду рад, если кто-то знает другое решение :)

Большинство современных браузеров вполне корректно понимают max-width: 100% и уменьшают изображение, если оно не помещается в контейнер. С IE 11 и Firefox такого не происходит. По какой-то причине эти браузеры считают, что max-width: 100% относится к истинной ширине изображения, а не к ширине в контейнере.

Решение довольно простое: Мы дополнительно задаем изображению width: 100% (не забываем про height: auto).
Картинка растягивается на весь контейнер и уменьшается вместе с ним. Как минус - нужно очень точно указывать стили, чтобы не растягивать маленькие изображения.

Если у разных картинок нет разных классов, иногда можно воспользоваться медиа запросами и CSS селекторами.
Например: img[src$="-560.jpg"] {width: 100% !important; height: auto !important;}


Есть еще одно нудное и долгое решение.
Указывать каждому изображению width: 100%; height: auto; max-width: 800px; max-height: 600px;
Где 800 и 600 я указал просто для примера. Тут max-height больше всего нужен для IE 11. Там все будет работать корректно только в том случае, если на сайте указан доктайп.

А если для изображения задать такой класс <img class="klass".....

.klass {
display: block;
width: 100% \9;
max-width: 100%;
height: auto;
}

Вот что нашел по этому: Сейчас проверю, но ИЕ 11 и Фаерфокс что-то там не указан.
(Проверил, не работает).

Кстати, тест проблемы: http://dikij.com/test.php

Код

Вроде работает. Проверьте и напишите я удалю тест файл.

Для начала, там нет таблицы у вас. А это важно :)
Думаю, нужно было подробнее написать, что дело именно в дочернем элементе (или как это называется?)

Но любопытно, да, что картинка в Боди с max-width: 100% действительно уменьшается.

Адаптивные таблицы при помощи только CSS стилей 2

Развивая идею адаптивных таблиц, сделал такое вот интересное решение с прокруткой:

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

Потом назначаю тегу table ширину 100% и делаю его контейнером с прокруткой для самой таблицы, роль которой теперь будет играть tbody.
У последнего я еще чуть уменьшил ширину, так как часть ее уходит на рамку.

Все это позволило сделать адаптивные таблицы с большим количеством колонок красивыми. :)


Почему не обернуть table, например, элементом div и не применить стили и прокрутку уже к нему?
Дело в том, что на сайтах бывает очень много таблиц. А у меня обычно доступ только к стилям. И для каждой правки требовалось бы отдельно просить администратора внести изменения.

Спасибо за отзывы!

Сегодня хочу добавить интересное. Адаптивные таблицы при помощи CSS стилей 3. Справляемся с thead и tbody одновременно.

Я уже писал про адаптацию таблиц для мобильных устройств. И писал про адаптивные таблицы при помощи стилей.

А в этот раз у таблиц на сайте клиента был не только tbody, но и thead. И если делать прокрутку по старому варианту, они сжимаются не одинаково, а в зависимости от содержимого. Поэтому CSS был мной немного переделан:

Если использовать только первую строку стилей, таблица будет сжиматься нормально. Но вот растягиваться на 100% она не хочет. Только по ширине содержимого.
А вот добавление table:before c display: table-cell растягивает содержимое на 100%.
Магия :)

Ну и важный момент про шрифты!
Все что меньше 12px - не пройдет проверку в новом Яндекс Вебмастере! Кажется, там есть определенный порог по количеству слов (или символов) на странице - со шрифтом такого размера. Но я обычно не рискую.
Да и 12 пикселей - это уже совсем мелко для телефона.

Встретил тут на одном форуме код "как уменьшить весь сайт при уменьшении ширины экрана".
Написал свою версию для примера. Так делать не нужно! :D:D:D

Без использования зума, так как он не кроссбраузерный вообще.

Я тут уже писал, что max-width не работает в Firefox и IE 11 для изображений в таблицах.

Вот все решения, которые удалось найти:

1) Прописываем width: 100% изображению. Только я советую добавить height: auto. В идеале, можно прописать max-width с max-height. И в них указать размер картинки. max-height тут нужен для старых браузеров, в основном.

2) Добавить таблице table-layout: fixed. Это просто магия. Картинки начинают корректно ужиматься сами.

3) Можно вообще полностью избавиться от таблицы, прописав ячейкам display: block. Бывает очень удобно, если таблица с 1 ячейкой (td) или они друг под другом.

4) В интернете прочитал, что можно поместить картинку в контейнер и прописать ему максимальные значения картинки. Но вот зачем - я не понимаю. Проще уж как в 1 пункте.

Сразу добавлю, что по спецификации max-width не работает и для самой таблицы. Но тут уж совсем просто. Достаточно обернуть таблицу в DIV и ему прописать максимальную ширину.

Еще вот так работает.

Спасибо :) Но я там в 1 пункте писал про width: 100%.
Разве от display: block; что-то сильно изменится?

Кто-то может покидать статистику. Что вообще в ней происходит после подключения адаптива или мобильной версии?

Сегодня просто увидел красоту:
http://dikij.com/foto/667.jpg

Но вдруг на выборке 10 - 20 сайтов все не так красиво.

Если кто-то еще использует Крутилку в партнерке Озона, могут быть полезны такие вот стили:

Пример.
Подойду к прозрачным Крутилкам и Крутилкам с белым фоном, когда товары идут друг под другом.
Хотя, они немного избыточны, так как у меня внешние ссылки дополнительно помечаются картинкой. И еще подключены стили из этой темы. :) Потому пришлось местами "обнулить".

Покувыркавшись на нескольких сайтах с адаптацией под мобильники и узкие экраны, скажу так:

1. ДА, это ИМЕЕТ смысл! Рост посещаемости ~вдвое, положительная реакция поисковиков да, приносит результат.

2. Я лично при этом соблюдаю вот такие принципы и применяю вот такие решения:

2.1. Если у сайта изначально нет "постоянно висящей менюшки в определённом углу", а навигация вся сверху - вешаем ему стандартную кнопку "Наверх" яваскриптовую, причём достаточно широкую чтобы в неё легко было попадать, и чтобы она закрывала наименее значимую часть контента справа внизу. И чтобы появлялась только тогда, когда актуальна. я брал скрипт отсюда и редактировал под себя

2.2. На экране шириной менее 400 пикселей ВСЕ картинки и ВСЕ ссылки с текстом длиннее 10 символов СЛЕДУЕТ делать width:100% display: block и clearfix! Альтернативное решение - короткие тексты ссылок. См., например, у меня на http://arda.su/ (ссылки на альбомы, годы, синглы) - конструктивная ругань принимается, кстати. :) Ещё там есть изврат - старый вариант сайта с радикальным изменением дизайна страниц на малой ширине экрана

2.3. На малой ширине экрана надо или очень сильно уменьшать, или вообще гасить display: none логотип сайта и большую часть шапки. Иначе оно бессмысленно тратит место на экране.

2.4. на ширинах менее 400 пикселей тизеры новостей и статей сайта проще, лучше и юзабельнее сделать БЕЗ КАРТИНОК и БЕЗ ДАТ вообще, а вот шрифт этих ссылок увеличить до читабельного состояния.

qkowlew, спасибо за статистику! Редко присылают.

Я бы по 2.1 добавил, что можно сделать плавающей кнопку "бутерброда" и уже при клике по ней прокручивать вверх. У меня такая кнопка слева на http://dikij.com/ есть и на остальных сайтах - тоже сделал. Только там стрелка, так как "бутерброда" в шапке нет и впихнуть его некуда.

2.2 на arda.su неплохо бы добавить отступы от края в 1 - 2%. А вот про ссылки display: block - не совсем понял - зачем. Максимум делал ссылки display: inline-block с отступами.

2.3. Можно, но не очень люблю, когда ленятся и уже пикселях на 800 врубают "мобильную" версию без шапки. :)

2.4 Зависит от сайта. Можно убрать обтекание картинок, сделать width: 100% и display: block с margin: 5px auto например.

инлайн блок поверх уже имеющегося непрямого дизайна может давать спецэффекты, с которыми я столкнулся на промежуточном этапе возни с например http://beta-press.ru (там ещё стояла задача сохранить совместимость имеющегося PHP движка с его обновлениями автором, хехе. Что решительно уменьшало пространство для манёвра). Потому я как-то перестал его активно применять. :(

Согласен, тоже не очень люблю. Но при исходной таблице фикс ширины 960px с фиксированными размерами картинок в ячейках и (тадам!) точно подогнанных однопиксельных рамочках это бывает такой адЪ, что проще погасить это всё ( см. тот же бета-пресс ) и (если движок позволяет) нарисовать вместо этого более резиновую шапочку.

Прикол отдельный тут в том, что проверка Яндекс-Вебмастером "сайт оптимизирован для мобильных устройств" подразумевает, в частности, отсутствие горизонтальной прокрутки. И, фактически, для более позитивного отношения яндекса, ЛУЧШЕ погасить ссовсем такую фиксированную-табличную шапку, если с ней не удалось справиться.

Ага. Зависит. И при вертикальной картинке тизерная картинка сжирает весь экран, а квадратная - больше половины, хехе. Так что это только при тизерных картинках исключительно горизонтальной ориентации.

Я бы не выдержал, разнес бы таблицу на блоки с обтеканием, сделал ширину контента 98 с margin 1% по краям.
Ну и логотип поставил бы по центру. Так он почти всегда выглядит лучше. Плюс, инлайн-блоки для верхнего меню с выравниванием по центру.

Так как раз тизерные элементы я устал утрясать - они в этом движке для группы сайтов генерятся одинаково и очень ракообразно, и если я чуть сильнее исправлю этот кусок говнокода "в основной ветке" - поедет дизайн намного более посещаемых и сложных по структуре сайтов, за что клиенты полезут в бутылку. :(

Это уже я "так и не решил, как лучше" и "оставил как клиент сказал ДА!!!" на получившейся картинке. Согласен, дошлифовать было можно. В данном случае логотип квадратненький и задуман изначально как "верхний левый угол страницы". :)

Вот это, пожалуй, верно.

Добавлено через 4 минуты
Надо будет более обстоятельно перепроверить работу процентов в маргинах и паддингах. А то было дело, 98%+1%+1% не во всех браусерах образовывало div без горизонтальной прокрутки, и это бесило.

Дело обычно в рамке в 1px.
Если это не таблица, лучше прописать width: auto и margin-left: 1%; margin-right: 1%;
Тогда ни padding вутри, ни рамка - не повлияют никак.

Там еще есть варианты (с max-width, например) но все перечислять не буду.

Еще гляньте
http://htmlbook.ru/css/box-sizing