- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Зачем быть уникальным в мире, где все можно скопировать
Почему так важна уникальность текста и как она влияет на SEO
Ingate Organic
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Так как сайт пишет, что прошлая тема - слишком старая, я хочу продолжить тут.
Для начала, напомню алгоритм для самостоятельной адаптации сайта:
Метатег наличия мобильной версии:
Набор стилей, с которых я обычно начинаю адаптацию. Для экранов 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;}
}
Кеширование на стороне браузера. Нашел в интернете:
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". Это позволяет показывать только прямоугольные и квадратные блоки, занимая под статьей больше места.
Еще можно показывать, например, большой блок рекламы для десктопа и адапривный - для меньших экранов:
<!-- Дикий 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,
Я просто обязан оставить это тут
Адаптивный дизайн
Ответ от техподдержки Гугла по поводу адаптивных блоков (тот код, что выше):
/ru/forum/comment/14280879
Сегодня переделывал сайт pleervox.ru и получил у Гугла 100 / 100 Удобство для пользователей. :)
Даже слайдер и просмотрщик фотографий переделан под мобильные устройства.
Единственное, я не понял, что за просмотрщик фото такой в карточке товара, но адаптируется он для мобильных и планшетов вот так:
#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) { Тут код }
Довольно интересная статья: https://habrahabr.ru/post/277753/
"Начиная с 39 версии хрома для Android Lollipop была внедрена возможность менять цвет интерфейса браузера веб-разработчиками.
Сделать это просто, нужно в <head> добавить новый мета-тег:"
Ну и "Google также рекомендует использовать иконку высокого качества, чтобы это выглядело еще лучше:"
Кстати, для добавления иконок в Айфонах я когда-то сделал у себя на сайтах файл browserconfig.xml:
<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, по поводу иконок под iPhone . Смотрите по логам ошибок 404 ( MySite.error.log ). Получите полный список размеров иконок, которые недополучают ваши пользователи.
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 при таком коде у меня пусто.
Не знаю, все ли это знают, но на мобильном сайте на обязательно подменять карту от Яндекса картинкой или скрывать виджеты от Контакта. Их ширина отлично подстраивается под размер окна, если указать ее как auto. Только желательно еще и в блоке DIV указать ширину 100%.
Получится примерно так:
Но, к сожалению, часто есть доступ к CSS, а доступа к странице просто нет. Ну а по ID размер виджета у меня упорно не хочет меняться 😒.
Помогло очень простое обращение к тегу yamps, который на сайте был засунут в блок с ID post. Получилось: #post > ymaps { max-width: 100% !important; }
Буду рад, если у кого-то есть рецепт изменить и виджет ВК только посредством CSS. ☝
Можно вопрос!? Почему именно так написали мета тег?
<link rel="icon" sizes="144x144" href="/apple-touch-icon.png">
а не так: <link rel="apple-touch-icon" href="/apple-touch-icon/ru-76x76.png" sizes="76x76">
Народ, а кто что скажет? Лучше делать адаптивную верстку или же отдельный мобильный шаблон с фильтром по user-agent? Во втором случае удобно, что можно поставить рекламные блоки для мобильных, а на обычной версии оставить блоки для десктопа...
Мне больше нравится второй вариант, но тогда получается что в рамках одного домена будет различный HTML выдаваться - не чревато ли будет для ПС...?
Мне больше нравится второй вариант, но тогда получается что в рамках одного домена будет различный HTML выдаваться - не чревато ли будет для ПС...?
Есть еще вариант по этому же фильтру менять шаблон на мобильный.
Лично я для себя решил делать только адаптивную верстку (она же - отзывчивый дизайн). Мне нравится, что можно не урезать функционал сайта, а повернув телефон или планшет "боком" - получить широкую полную версию.
Да, есть определенные проблемы с правильной разметкой мобильной версии на отдельном домене, в ее разработке и правильной разметке для ПС. Мне всегда кажется, что можно уж тогда свое приложение сделать.
С переадресацией пользователей тоже нужно сделать все корректно. Одно дело телефоны, а другое - современные лопаты на Андроиде, например. У моего планшета экран 11 дюймов и Винда десятая кроме Андроида. Мобильным назвать сложно. :)