Оптимизация сайта для планшетов и телефонов - 2 - Форум об интернет-маркетинге
Этот сайт существует на доходы от рекламы.
Пожалуйста, выключите AdBlock.
Вернуться   Форум об интернет-маркетинге > >
Ответ
 
Опции темы
Старый 23.12.2015, 08:53   #1
Дикий
 
Аватар для DiKiJ
 
Регистрация: 26.05.2013
Адрес: <Noindex>
Сообщений: 1,179
Репутация: 139899
Отправить сообщение для DiKiJ с помощью Skype™
Социальные сети Страница в Одноклассниках Профиль в ВКонтакте Профиль на Хабрахабре Профиль в LinkedIn

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

Так как сайт пишет, что прошлая тема - слишком старая, я хочу продолжить тут.

Для начала, напомню алгоритм для самостоятельной адаптации сайта:

Метатег наличия мобильной версии:
Цитата:
<meta name=viewport content="width=device-width, initial-scale=1">
Набор стилей, с которых я обычно начинаю адаптацию. Для экранов 700px и меньше:
Цитата:
@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;}
}

Кеширование на стороне браузера. Нашел в интернете:
Цитата:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 7 days"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType text/html "access plus 604800 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</IfModule>

<ifModule mod_headers.c>
<filesMatch "\.(ico!pdf!flv!jpg!jpeg!png!gif!swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
<filesMatch "\.(css!js!txt!html!htm)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
<filesMatch "\.(php!xml)$">
Header set Cache-Control "max-age=172800, private, must-revalidate"
</filesMatch>
</ifModule>


---------- Добавлено 23.12.2015 в 11:54 ----------

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


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

Еще можно показывать, например, большой блок рекламы для десктопа и адапривный - для меньших экранов:
Цитата:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Дикий 3 -->
<script>
if(document.getElementsByTagName("body")[0].offsetWidth>=900) {
document.write('<ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-435345345345345" data-ad-slot="345345345345"></ins>');
}else{
document.write('<ins class="adsbygoogle" style="display:block; width: 90%;" data-ad-client="ca-pub-45645645645234" data-ad-slot="234234234234234" data-ad-format="rectangle"></ins>');
}
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

У Яндекса сейчас тоже появилась адаптивная реклама, но я предпочитаю использовать горизонтальный тизер, просто меняя количество объявлений. Ну и по центру его неплохо бы выравнивать.
Для этого нжно добавить к 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,
__________________
Адаптивный дизайн в 2 строчки (внизу). + Принимаю заказы любой сложности.
Коротко про заработок в сети и эксперименты по продвижению.
DiKiJ вне форума   Ответить с цитированием
Сказали спасибо:

Реклама
Старый 17.01.2016, 21:23   #2
DiKiJ
Дикий
 
Аватар для DiKiJ
 
Регистрация: 26.05.2013
Адрес: <Noindex>
Сообщений: 1,179
Репутация: 139899
Отправить сообщение для DiKiJ с помощью Skype™
Социальные сети Страница в Одноклассниках Профиль в ВКонтакте Профиль на Хабрахабре Профиль в LinkedIn

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

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

Цитата:
Сообщение от Andron_buton Посмотреть сообщение
Адаптивный дизайн

DiKiJ вне форума   Ответить с цитированием
Сказали спасибо 14 пользователей:
Старый 13.02.2016, 01:16   #3
DiKiJ
Дикий
 
Аватар для DiKiJ
 
Регистрация: 26.05.2013
Адрес: <Noindex>
Сообщений: 1,179
Репутация: 139899
Отправить сообщение для DiKiJ с помощью Skype™
Социальные сети Страница в Одноклассниках Профиль в ВКонтакте Профиль на Хабрахабре Профиль в LinkedIn

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

Ответ от техподдержки Гугла по поводу адаптивных блоков (тот код, что выше):
http://searchengines.guru/showpost.p...9&postcount=38
DiKiJ вне форума   Ответить с цитированием
Старый 18.02.2016, 19:24   #4
DiKiJ
Дикий
 
Аватар для DiKiJ
 
Регистрация: 26.05.2013
Адрес: <Noindex>
Сообщений: 1,179
Репутация: 139899
Отправить сообщение для DiKiJ с помощью Skype™
Социальные сети Страница в Одноклассниках Профиль в ВКонтакте Профиль на Хабрахабре Профиль в LinkedIn

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

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



Единственное, я не понял, что за просмотрщик фото такой в карточке товара, но адаптируется он для мобильных и планшетов вот так:
Цитата:
#cboxTopLeft {display: none !important;}
#cboxTopCenter {display: none !important;
#cboxTopRight {display: none !important;}
#cboxMiddleLeft {display: none !important;}
#cboxMiddleRight {display: none !important;}
#cboxBottomLeft {display: none !important;}
#cboxBottomCenter {display: none !important;}
#cboxBottomRight {display: none !important;}
#colorbox {width: 100% !important; min-width: 100% !important; left: 0px !important;}
#cboxWrapper {width: 100% !important; min-width: 100% !important;}
#cboxLoadedContent {width: 100% !important; min-width: 100% !important;}
#cboxContent {width: 100% !important; min-width: 100% !important;}
.cboxIframe {width: 100% !important; min-width: 100% !important;}
Код ставится, например, в @media screen and (max-width: 700px) { Тут код }
DiKiJ вне форума   Ответить с цитированием
Старый 23.02.2016, 23:42   #5
DiKiJ
Дикий
 
Аватар для DiKiJ
 
Регистрация: 26.05.2013
Адрес: <Noindex>
Сообщений: 1,179
Репутация: 139899
Отправить сообщение для DiKiJ с помощью Skype™
Социальные сети Страница в Одноклассниках Профиль в ВКонтакте Профиль на Хабрахабре Профиль в LinkedIn

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

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

"Начиная с 39 версии хрома для Android Lollipop была внедрена возможность менять цвет интерфейса браузера веб-разработчиками.
Сделать это просто, нужно в <head> добавить новый мета-тег:"
Цитата:
<meta name="theme-color" content="#9CC2CE">
Ну и "Google также рекомендует использовать иконку высокого качества, чтобы это выглядело еще лучше:"
Цитата:
<link rel="icon" sizes="192x192" href="nice-highres.png">

Кстати, для добавления иконок в Айфонах я когда-то сделал у себя на сайтах файл browserconfig.xml:
Цитата:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig><msapplication><tile>
<square70x70logo src="apple-touch-icon.png"/>
<square150x150logo src="apple-touch-icon.png"/>
<wide310x150logo src="apple-touch-icon.png"/>
<square310x310logo src="apple-touch-icon.png"/>
<TileColor>#666666</TileColor>
</tile>
</msapplication>
</browserconfig>
И две картинки: apple-touch-icon.png
и apple-touch-icon-precomposed.png (со скруглениями).

Две - так как я очень ленивый, а проверять просто негде.
DiKiJ вне форума   Ответить с цитированием
Старый 24.02.2016, 10:00   #6
ksp
Дипломник
 
Регистрация: 30.09.2015
Сообщений: 66
Репутация: 6457

По умолчанию Re: Оптимизация сайта для планшетов и телефонов - 2

DiKiJ, по поводу иконок под iPhone . Смотрите по логам ошибок 404 ( MySite.error.log ). Получите полный список размеров иконок, которые недополучают ваши пользователи.
ksp вне форума   Ответить с цитированием
Сказали спасибо:
Старый 24.02.2016, 18:25   #7
DiKiJ
Дикий
 
Аватар для DiKiJ
 
Регистрация: 26.05.2013
Адрес: <Noindex>
Сообщений: 1,179
Репутация: 139899
Отправить сообщение для DiKiJ с помощью Skype™
Социальные сети Страница в Одноклассниках Профиль в ВКонтакте Профиль на Хабрахабре Профиль в LinkedIn

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

Цитата:
Сообщение от ksp Посмотреть сообщение
DiKiJ, по поводу иконок под iPhone . Смотрите по логам ошибок 404 ( MySite.error.log ). Получите полный список размеров иконок, которые недополучают ваши пользователи.
Спасибо. Но дело в том, что у самого сайта Эппл только 1 иконка используется. Не помню точно, но пикселей на 150 примерно.
Да и формат у них постоянно меняется. Не думаю, что буду городить для своих сайтоа что-то, кроме apple-touch-icon.png

Виндоус 10 у меня эту иконку отлично подхватила, кстати, когда добавил на сайт <link rel="icon" sizes="144x144" href="/apple-touch-icon.png">
Андроид 4.1.2 тоже использует иконку, но она немного не влазит. Вот и думаю - добавить может 60x60 картинку или просто старую пересохранить.

В логах 404 при таком коде у меня пусто.
DiKiJ вне форума   Ответить с цитированием
Старый 25.02.2016, 20:00   #8
DiKiJ
Дикий
 
Аватар для DiKiJ
 
Регистрация: 26.05.2013
Адрес: <Noindex>
Сообщений: 1,179
Репутация: 139899
Отправить сообщение для DiKiJ с помощью Skype™
Социальные сети Страница в Одноклассниках Профиль в ВКонтакте Профиль на Хабрахабре Профиль в LinkedIn

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

Не знаю, все ли это знают, но на мобильном сайте на обязательно подменять карту от Яндекса картинкой или скрывать виджеты от Контакта. Их ширина отлично подстраивается под размер окна, если указать ее как auto. Только желательно еще и в блоке DIV указать ширину 100%.

Получится примерно так:
Цитата:
VK.Widgets.Group("vk_groups", {mode: 2, wide: 1, width: "auto", height: "800"}, -436436346);
Но, к сожалению, часто есть доступ к CSS, а доступа к странице просто нет. Ну а по ID размер виджета у меня упорно не хочет меняться .
Помогло очень простое обращение к тегу yamps, который на сайте был засунут в блок с ID post. Получилось: #post > ymaps { max-width: 100% !important; }

Буду рад, если у кого-то есть рецепт изменить и виджет ВК только посредством CSS.
Изображения
 
DiKiJ вне форума   Ответить с цитированием
Старый 26.02.2016, 00:31   #9
MinMart
Чатланин
 
Регистрация: 14.07.2014
Сообщений: 289
Репутация: 18691
Отправить сообщение для MinMart с помощью Skype™

По умолчанию Re: Оптимизация сайта для планшетов и телефонов - 2

Можно вопрос!? Почему именно так написали мета тег?
<link rel="icon" sizes="144x144" href="/apple-touch-icon.png">

а не так: <link rel="apple-touch-icon" href="/apple-touch-icon/ru-76x76.png" sizes="76x76">
__________________
Английская обувь - это индивидуальность которая всегда в моде!
MinMart вне форума   Ответить с цитированием
Старый 26.02.2016, 10:56   #10
qilly
Академик
 
Аватар для qilly
 
Регистрация: 28.03.2008
Сообщений: 3,873
Репутация: 384082

По умолчанию Re: Оптимизация сайта для планшетов и телефонов - 2

Народ, а кто что скажет? Лучше делать адаптивную верстку или же отдельный мобильный шаблон с фильтром по user-agent? Во втором случае удобно, что можно поставить рекламные блоки для мобильных, а на обычной версии оставить блоки для десктопа...

Мне больше нравится второй вариант, но тогда получается что в рамках одного домена будет различный HTML выдаваться - не чревато ли будет для ПС...?
qilly вне форума   Ответить с цитированием
Ответ

Метки
адаптация , дизайн , мобильный , отзывчивый




Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход



Текущее время: 06:59. Часовой пояс GMT +3.

Регистрация Справка Календарь Поддержка Все разделы прочитаны