Оптимизация сайта для планшетов и телефонов - в 2 строчки
Для тянущегося дизайна поэкспериментировал и использую такое:
Код HTML:
<meta name=viewport content="width=device-width, height=device-height, initial-scale=1"> PHP код:
Неплохо отображаются картинки; В телефоне сайт выглядит намного крупнее; Текст читать удобно (можно еще настроить отдельно шрифт); Влазят даже большие блоки Адсенс за счет уменьшнния iframe. --- Картинки немного корежит по высоте. Понятия не имею как исправить; Бывает, картинку в таблице сжимает до 0. Применять бы стили только к большим изображениям (больше 360px); Сделать бы перенос (на новую строку) ячеек из больших таблиц. Из-за этого колонки очень уж узкие. Очень хочется совет - как бы до ума довести. Добавлено через 23 часа 39 минут Покопался еще немного с кодом. Думаю использовать еще псевдоклассы сss :after, :before. |
Долго тупил, но с картинками справился как-то так:
Код:
@media screen and (max-width: 650px) { |
Чтоб не потерять ссылку на проверку оптимизации в Гугле: https://developers.google.com/speed/pagespeed/insights/
|
Cпасибо за идею.
|
Цитата:
|
Ура! Я получил свои 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, спасибо за проделанную работу и за подробный отчет!
|
Цитата:
Цитата:
А один align="left" style="float: left;" примененный к таблице дает неплохие такие глюки. А примененные к 2 таблицам - еще более странное поведение :) |
На данный момент работаю с заказами с Серча. На данный момент адаптировал уже порядка 18 сайтов.
А вот последние полезные наработки: PHP код:
PHP код:
|
|
Я что-то вспомнил, что не рассказал про адаптацию рекламы от Гугла и Яндекса для мобильных устройств.
С адаптивной рекламой Гугла все довольно просто. Там есть специальные блоки, я только меняю обычно 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, |
|
Сегодня переделывал сайт pleervox.ru и получил у Гугла 100 / 100 Удобство для пользователей. :)
Даже слайдер и просмотрщик фотографий переделан под мобильные устройства. Единственное, я не понял, что за просмотрщик фото такой в карточке товара, но адаптируется он для мобильных и планшетов вот так: Цитата:
|
интересно, если в медию сразу *{display: none} воткнуть, удобство будет 146%?-)
|
Цитата:
А тут в примере все не так страшно. Я просто скрыл все 4 рамки у модального окна и 4 картинки углов. Они там показываются через такое мракобесие больно уж много места занимают, да и на мобильных - не нужны совсем. Ну а потом все блоки и фрейм просмотрщика версии для печати растянул на 100% по ширине экрана. Удобно вполне. Да и лучше, чем убирать функционал. |
Довольно интересная статья: https://habrahabr.ru/post/277753/
"Начиная с 39 версии хрома для Android Lollipop была внедрена возможность менять цвет интерфейса браузера веб-разработчиками. Сделать это просто, нужно в <head> добавить новый мета-тег:" Цитата:
Цитата:
Кстати, для добавления иконок в Айфонах я когда-то сделал у себя на сайтах файл browserconfig.xml: Цитата:
и apple-touch-icon-precomposed.png (со скруглениями). Две - так как я очень ленивый, а проверять просто негде. |
Сделал тут простую кнопку переключения на полную версию сайта для адаптивного дизайна:
В Хедер, вместо meta name=viewport: Цитата:
Сама кнопка: Цитата:
На здоровье :) Если кому-то интересны технические моменты, то мы меняем 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. Там все будет работать корректно только в том случае, если на сайте указан доктайп. |
Цитата:
.klass { display: block; width: 100% \9; max-width: 100%; height: auto; } |
Вот что нашел по этому:
Цитата:
(Проверил, не работает). Кстати, тест проблемы: http://dikij.com/test.php Код Цитата:
|
Цитата:
|
Цитата:
Думаю, нужно было подробнее написать, что дело именно в дочернем элементе (или как это называется?) Но любопытно, да, что картинка в Боди с max-width: 100% действительно уменьшается. |
Адаптивные таблицы при помощи только CSS стилей 2
Развивая идею адаптивных таблиц, сделал такое вот интересное решение с прокруткой: Цитата:
Потом назначаю тегу table ширину 100% и делаю его контейнером с прокруткой для самой таблицы, роль которой теперь будет играть tbody. У последнего я еще чуть уменьшил ширину, так как часть ее уходит на рамку. Все это позволило сделать адаптивные таблицы с большим количеством колонок красивыми. :) Почему не обернуть table, например, элементом div и не применить стили и прокрутку уже к нему? Дело в том, что на сайтах бывает очень много таблиц. А у меня обычно доступ только к стилям. И для каждой правки требовалось бы отдельно просить администратора внести изменения. |
Спасибо за отзывы!
Сегодня хочу добавить интересное. Адаптивные таблицы при помощи CSS стилей 3. Справляемся с thead и tbody одновременно. Я уже писал про адаптацию таблиц для мобильных устройств. И писал про адаптивные таблицы при помощи стилей. А в этот раз у таблиц на сайте клиента был не только tbody, но и thead. И если делать прокрутку по старому варианту, они сжимаются не одинаково, а в зависимости от содержимого. Поэтому CSS был мной немного переделан: Цитата:
А вот добавление 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 и ему прописать максимальную ширину. |
Цитата:
Код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Спасибо :) Но я там в 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 например. |
Цитата:
Цитата:
Прикол отдельный тут в том, что проверка Яндекс-Вебмастером "сайт оптимизирован для мобильных устройств" подразумевает, в частности, отсутствие горизонтальной прокрутки. И, фактически, для более позитивного отношения яндекса, ЛУЧШЕ погасить ссовсем такую фиксированную-табличную шапку, если с ней не удалось справиться. Цитата:
|
Я бы не выдержал, разнес бы таблицу на блоки с обтеканием, сделал ширину контента 98 с margin 1% по краям.
Ну и логотип поставил бы по центру. Так он почти всегда выглядит лучше. Плюс, инлайн-блоки для верхнего меню с выравниванием по центру. |
Цитата:
Цитата:
Цитата:
Добавлено через 4 минуты Цитата:
|
Цитата:
Если это не таблица, лучше прописать width: auto и margin-left: 1%; margin-right: 1%; Тогда ни padding вутри, ни рамка - не повлияют никак. Там еще есть варианты (с max-width, например) но все перечислять не буду. Еще гляньте http://htmlbook.ru/css/box-sizing |
Часовой пояс GMT +3, время: 05:31. |
Работает на vBulletin® версия 3.8.7.
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Перевод: zCarot
SAPE.RU — система купли-продажи ссылок с главных и внутренних страниц сайтов.