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

>

Оптимизация сайта для его просмотра на мобильных устройствах или мой вариант адаптивного отзывчивого дизайна

Здравствуйте, уважаемые читатели блога Уже не первый раз в статьях я упоминаю о том, что в рунете наблюдается существенный рост мобильного трафика. И это довольно сильно начинает влиять на жизнь вебмастеров и SEO-шников.

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

Но самое главное — это то, что у нас идет «во-вторых». Дело в том, что сайт, не адаптированный для приема этого самого мобильного трафика, может серьезно потерять позиции в выдаче за счет ухудшающихся поведенческих характеристик. На мобильном телефоне очень неудобно пользоваться горизонтальной прокруткой при чтении текста или поиска меню, поэтому с таких ресурсов быстро уходят и не переходят, как правило, на другие страницы.

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

Естественно, что все это я знал уже довольно давно, но постоянно находилось что-то более важное и первостепенное, да и полной концепции адаптации сайта для просмотра на мобильных устройствах у меня никак не складывалось в голове. Однако Гугл меня очень жестко подстегнул вчера утром, прислав сообщение о том, что с 21 апреля при определении поискового рейтинга сайта, Google будет учитывать, удобно ли просматривать веб-страницы на мобильных устройствах.



Что называется, приплыли. Пришлось взять голову в руки и за полдня разработать и воплотить концепцию мобилизации сайта в жизнь. Конечно же, спешка и не полное понимание всех вариантов решения данной проблемы повлияли на изящность решения проблемы, но «что выросло, то выросло», а допиливать можно будет уже по ходу дела. Главная задача выполнена — KtoNaNovenkogo.ru проходит текст на оптимизацию для мобильных устройств. А уж как это было сделано читайте в продолжении данной публикации.

Актуальность мобильной оптимизации сайта и стоящие задачи

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

Собственно, подобные письма от этого адресата приходили регулярно (там обычно приводили примеры, как хорошо стало тем сайтам, кто оптимизировался под мобильный трафик), но тут был прямо-таки ультиматум:

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

17 процентов мобильного трафика — это, на мой взгляд, довольно прилично, но если честно, то без упоминания о возможном изменении алгоритма ранжирования Google и учета при этом фактора оптимизированности сайта под мобильные устройства я вряд ли бы пошевелился (всегда найдется более важное занятие, особливо когда у тебя нет в голове конкретного плана решения проблемы).



Кстати, 17 процентов посетителей, заходящих на KtoNaNovenkogo.ru с мобильных устройств, подтверждают и данные Яндекс Метрики, и там видно, что показатель отказов у таких пользователей значительно выше, чем у тех, кто заходил на сайт с компьютера или ноутбука (т.е. проблема на лицо):

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

Приведенная в письме ссылка вела на сервис Гугла, где можно было оценить качество мобильной оптимизации вашего сайта по принципу: все нормально, либо полный ужас. Изначально для KtoNaNovenkogo.ru был конечно печальный вердикт красного цвета (тревоги):

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

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

А вот чтобы узнать детали я советую использовать другой сервис от того же Гугла под названием PageSpeed Insights. Тут все будет более-менее детализировано и хотя бы понятно «в какую сторону копать»:

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

У них еще появился один похожий сервис Test my Site, но он только дается оценку, а вот рекомендаций по улучшению, к сожалению, нет. Зато можно подписаться на изменения:



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

В нашем случае обращать внимание стоит на оценку «Удобство для пользователей» на вкладке «Для мобильных». Понятно, что скорость загрузки тоже важна, но лично у меня все уперлось в настройки сервера, которые я сам поменять не в силах (ибо нуб в администрации серверов), а договориться с техподдержкой Инфобокса все никак руки не доходят (опять же, очевидно, нужен пинок под зад, чтобы начать шевелиться). Но это уже, наверное, тема для отдельной статьи.

Стоящая же передо мной задача к вечеру вчерашнего дня была решена и KtoNaNovenkogo.ru получил 95 и 100 возможных баллов за удобство для мобильных пользователей. Соответственно, и тот сервис Гугла, ссылка на который была приведена в письме, говорит, что теперича все в порядке (спасибо зарядке):

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

Похвалился, теперь можно приступать к описанию предпринятых шагов и намеченных стратегий. Итак, имелось несколько проблем, которые надо было решить:

  1. Очевидно, что при уменьшении ширины экрана, с которого просматривается сайт, становится актуальным на определенном рубеже переходить от двухколоночной верстке к одноколоночной. В моем случае это эквивалентно перемещению правого блока с меню (сайдбара) вниз (под основную часть страницы).
  2. При еще меньшей ширине экрана становится очевидным, что и ширина области с основным контентом должна будет уменьшаться для того, чтобы текст и картинки можно было просматривать без использования чудовищно неудобной горизонтальной прокрутки.
  3. В области контента у меня также размещаются объявления от Гугл Адсенса, а значит нужно будет менять код их вставки, ибо при использовании адаптивного дизайна (а именно его мы и пытаемся реализовать) есть только один допустимый вариант рекламных блоков — адаптивный (он появился некоторое время назад, но у меня изначально возникли проблемы с его использованием, которые пришлось решать, но об этом чуть ниже).



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

Накануне мне как раз попалась на глаза публикация, которую я поместил в закладки и которая стала отправной точной для дальнейшей работы. Однако, советую проводить эксперименты не на «живом» сайте, а не его копии, загруженный в локальный сервер типа OpenServer. Очень удобно и для вас, и для посетителей, которые будут избавлены от наблюдения ваших промежуточных результатов работы (зачастую весьма неприглядных).

Выбор метода создания адаптивного дизайна

Итак, скачиваете файлы движка по ФТП (я все еще юзаю Файлзилу, которую стараюсь использовать безопасно, храня пароли от сайтов в Кипассе), делаете резервную копию базы данных и импортируете ее в Опенсервер через встроенных в него phpMyAdmin. Получаете локальную копию сайта, с которой и будем в дальнейшем работать — тут можно смело экспериментировать, не боясь повредить работающему ресурсу.

В приведенной чуть выше публикации предлагалось два вариант реализации адаптивного дизайна.

  1. Можно создать копии основного файла стилей (у меня WordPress, поэтому этот файл называется style.css и живет он в папке с используемой темой оформления — «/wp-content/themes/папка») и дать им другие имена. Если у вас тоже WordPress и вы хотите понять, как работают в нем темы, то советую ознакомиться с приведенной статьей. Именно этот способ я опробовал первым и создал копии с названием small-device.css и small-device-min.css.



Что именно я в них менял по отношению к основному файлу style.css мы еще поговорим, а вот для их подключения, в области между тегами Head (в WordPress эта область обычно формируется файлом-шаблоном header.php) пришлось добавить три строчки кода после подключения основного файла CSS стилей :

Цифрами в пикселах обозначены точки слома. Если вы это окно (с открытым в нем сайтом http://ktonanovenkogo.ru) начнете уменьшать по ширине (в верхнем правом углу браузера есть кнопочка с двумя наложенными друг на друга квадратами — сказал «капитан очевидность»), то именно при прохождении ширины 1025px и 760px будут происходить изменения в дизайне.

Сначала отвалится сайдбар (упадет в самый низ) и чуток поменяется верхнее меню (хочу его в будущем сделать для мобильных девайсов выпадающим, но пока еще руки, как обычно, не дошли).

А на второй точке слома вы заметите, что при дальнейшем уменьшении ширины области просмотра текст, картинки и видеоролики начинают подстраиваться под новый размер (адаптироваться к нему), и расположенный внизу сайдбар тоже претерпит изменения. Собственно, я даже шрифт увеличил для экранов по ширине меньших 760px (так, на всякий случай).

Поэтому я решил использовать второй вариант создания адаптивного дизайна для сайта для оптимизации его под мобильные устройства. Заключается он в использовании директивы @media при верстке. В этом случае не нужно будет создавать три копии файла стилей, а достаточно будет внизу основного файла дописать что-то вроде этого:



Ну, а в ограниченные фигурными скобочками области достаточно будет прописать те CSS свойства, которые претерпят изменения для адаптации шаблона вашего сайта под мобильные устройства.

Правда, я так до конца и не понял нюансы подключения браузером этих директив, ибо просто так они не работали. Пришлось в файл header.php добавить такие вот строки (подключение одного и того же файла стилей, но при разных разрешениях экрана):

Именно в таком виде все это и работает на данном блоге в данный момент времени.

В общем выбрал я второй вариант, но не сразу, поэтому пришлось с помощью плагина Compare в Notepad++ сравнивать содержимое файлов small-device-min.css и small-device.css с оригинальным style.css, чтобы выявить те строки, куда я вносил изменения. Потом уже эти стоки я вставил внутри фигурных скобок показанных выше директив @media (в конце основного файла стилей style.css). Но это уже не суть важно.

Адаптируем шаблон для удобства мобильных пользователей

Итак, вы выкачали свой сайт из интернета, запихнули его в локальный сервер, ознакомились с принципами, которые мы будет использовать. Теперь пора начинать экспериментировать. По понятным причинам я не могу вам дать однозначных советов (ибо все шаблоны разные, даже у одного движка), что именно нужно менять в вашем случае и какие точки слома выбирать.

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



Что увидят пользователи с экранами по ширине меньшими первой точки слома

Смотрите. Для реализации многоколоночного дизайна в современной верстке используются плавающие блоки, которые задаются CSS правилом Float. Например, сайдбар у меня плавает правее основной области благодаря:

Поэтому, чтобы сломать двухколоночный макет и сделать из него одноколоночный, мне нужно будет заменить значение для правила float в нужных местах. Я правда тыкал во все подряд, ибо структуру своего шаблона немного подзабыл и потому мог зацепить что-то не обязательное, но такова специфика «сборки дизайна на коленке» без наличия соответствующего опыта. Но так как эксперимент шел на локальном сервере, то уже через час-полтора я нащупал все нужные моменты (методом проб и ошибок), результат чего вы сейчас и можете наблюдать.

Соответственно, для начала нужно было отучить шаблон верстаться в две колонки, что потребовало прописать внутри директивы @media (с первой и второй точкой слома):

Можете сами выкачать мой файл стилей и посмотреть что к чему. Собственно, CSS правила для адаптации шаблона после первой точки слома выглядят так (не забудьте закрыть фигурную скобку от @media после последней строчки этого дополнительного кода):

Кроме «опускания» сайдбара я ограничил ширину шаблона новым значением с помощью min-width:750px; и width:750px. CSS свойство Width задает ширину того элемента, для которого оно прописывается. Также я подкорректировал размер и расположение элементов в шапке сайта, чтобы они более-менее сносно смотрелись после прохождения первой точки слома в 760px.



Ну, а в последней строчке я уменьшил внутренние отступы (padding) для пунктов верхнего меню, ибо они не помещались в одну линию. Корявенько, но главное, что работает (потом всегда можно будет найти время и «все необработанные детали обработать напильником»).

Адаптация дизайна под экраны мобильных устройств меньше второй точки слома

Теперь можно переходить к оформлению внешнего вида сайта, который увидят пользователи мобильных устройств, экран которых уже 760px. Простым свертыванием колонок тут не обойдешься, ибо нужно, чтобы контент страницы не вылезал за границы области просмотра, какой бы узкой она не была.

Эта задача с успехом решается заменой в нужных местах CSS свойства width:***px; на width:auto. Некоторые области из шапки и сайдбара я вообще спрятал с помощью display:none, ибо пока не было быстрого решения для их адаптации. Код при этом выглядит ужасно (копировал уже существующие строки и вносил изменения без удаления из них лишнего, т.е. того, что не требует изменения), т.е. просто он еще на оптимизирован — лишь бы работало, а потом лишнее удалю:

Обратите внимание на последние строчки:

Они служат для адаптации изображений и видеороликов имеющихся на сайте под размер мобильного устройства пользователя. При ширине экрана меньше, чем ширина картинки или ролика (вставленного с помощью iframe), их размер адаптируется к размерам области просмотра, если она стала для них тесной.



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

Можете сами заузить окно просмотра браузера (с этой страницей) и наблюдать этот процесс воочию. Довольно удобно получается, на мой взгляд. Ну, а в конце приведен хак для интернет эксплорера, который всего этого может не понять.

Да, еще я снял ограничение с ширины сайдабара (он сейчас в самом низу выводится, если помните) и увеличил в нем шрифт на пару пунктов, а также и шрифт в основной части сайта. Во всяком случае на моем мобильнике этот вариант смотрится более презентабельно (скрины делал с телефона на Адроиде).

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

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

Осталась проблема с верхним меню, которое ломается не очень красиво и занимает много места на маленьком экране, но в планах есть мысля сделать его для мобильной версии сайта выпадающим (если сделаю, то отпишусь об этом). Да, еще счетчики в самом низу у меня построились домиком (только сейчас внимание обратил), но поправить это сложно (главное не забыть).

Вот, будем считать, что вы на локальном сервере поколдуете, поэксперементируете и получите в результате удобоваримый вариант адаптации вашего сайта под мобильные устройства посетителей. Останется только это дело перенести на работающий сайт. Естетственно, что копировать все файлы (а уж тем более базу данных) вы не будете, ибо достаточно будет добавить (скопировать) несколько строчек в файл header.php и чуть больше строчек перенести в основной файл стилей (те, что внутри директив @media).



После этого уже можно будет проверять внесенные изменения (может потребоваться сбросить кеш в движке или в браузере) на экране компьютера при уменьшении ширины окна браузера и на ваших мобильных гаджетах (телефоне, планшете). Если что-то «вылезет», то можно будет это дело оперативно подправить.

Главное, чтобы после внесенных изменений ваш сайт прошел тест Гугла на пригодность для просмотра на мобильных устройствах (кеш сбросить не забудьте перед этим). Ну, а детали уже допилите со временем.

Использование на сайте кода адаптивных блоков от Google AdSense при адаптивном (отзывчивом) дизайне

Теперь давайте поговорим за Гугл Адсенс. Если вы не работаете с этой системой контекстной рекламы, то и читать вам дальше не потребуется. Если же работаете и используете на сайте код рекламных блоков фиксированных размеров, то придется его поменять на код адаптивных блоков (Гугл на этом, как я понял, настаивает), чтобы на устройствах с разной шириной экрана подгружались объявления подходящего размера.

По сути, сделать это совсем несложно, но лично у меня возник затык, который потребовал напряжения ума для его разрешения. Итак, интерфейс Google AdSense меняется с завидной регулярностью (не сказать, что становится хуже, скорее лучше, но когда долго не заходишь, то слегка подвисаешь). Из-за этого приведенную по ссылке статью мне уже пару раз приходилось переписывать, но она опять устарела, а значит скоро появится уже четвертая ее инкарнация (однако, утомляет это).



Ладно, не суть. Для создания нового рекламного блока нужно будет в интерфейсе Адсенса кликнуть по шестеренке в правом верхнем углу и выбрать вариант «Настройка». На открывшейся странице нам нужен верхний пункт меню «Мои объявления», где для создания нового блока будет достаточно нажать на одноименную кнопочку:

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

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

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

Затем жмете на кнопку «Сохранить и получить код». Можно будет попробовать его напрямую вставить на место старого когда и посмотреть на результат.

У меня такой метод не сработал (фигня какая-то получилась), поэтому я полез в хелп Гугл Адсенса искать вариант решения и нашел-таки его на этой странице.

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



Именно такой вариант кода я использовал (на разных устройствах будут показывать блоки подходящих размеров). Вроде бы все стало выводиться как надо, но не совсем. Во-первых, я заметил, что после смены кода перестала изменяться статистика показов рекламных объявлений на главной странице Адсенса. При просмотре статистики именно по новому блоку я заметил, что показы практически не идут.

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

Во-вторых, я решил сделать вид объявлений (цвет, шрифт) в новом адаптивном блоке такими же, какими они были в старых объявлениях. После внесения изменений непоняток стало еще больше. Объявления выводимые в статье не поменяли дизайн. Стал сравнивать код исходных страниц (в браузере можно это сделать, выбрав соответствующий пункт из меню правой кнопки мыши) и обнаружил, что каким-то образом после некоторых строк кода добавился тег переноса строки BR.

Код адсенса у меня вставлялся через файл functions.php, поэтому я там убрал все пробелы и переносы строк в проблемных местах, после чего объявления мгновенно поменяли дизайн и начала отсчитываться статистика. Вот такая вот заковыка возможна.

До этого у меня стоял синхронный код Адсенса (еще в 2012 ставил) и по идее он мог снижать скорость загрузки сайта. Современный код весь асинхронный, что полностью снимает вероятность того, что он может вызвать задержку в загрузке страницы. Думаю, что это есть гуд, но, как говорится, будем посмотреть.



P.S. Тут небольшой отчет по тому, что доделал уже после написания статьи.

  1. Убрал в версии сайта для экранов уже 760 px пару последних пунктов из верхнего меню, чтобы оно в три строчки не громоздилось. Для этого в файле header.php я добавил в эти пункты (они у меня не функцией выводятся, а обычным Html списком оформленным вручную) класс skrit и прописал для него в блоке с @media screen and (max-width: 760px) правило:
  2. Форма для добавления комментария не отзывалась на изменение ширины области просмотра, поэтому заменил для него width заданное в пикселях на значение заданное в процентах (90% поставил).
  3. Изначально в версии для мобильных телефонов я убрал строку поиска вообще с помощью display:none , но подумав все же решил ее отображать под логотипом и описанием. Пришлось в блоке с @media screen and (max-width: 760px) убрать display:none для контейнера, в котором живет строка поиска и дописать несколько строк кода для его позиционирования и адаптации по ширине ( width:auto;max-width:340px; ).
  4. Выровнял таки в мобильной версии (после последней точки слома) пиктограммы для счетчиков посещения (расположены в самом низу). Для этого добавил в @media screen and (max-width: 760px) :
  5. Изначально, чтобы не возиться, я скрыл верхнюю часть сайдбара (с формой подписки и кнопками социальных сетей) для экранов меньше 760px с помощью display:none . Сейчас решил все это дело адаптировать. Пришлось для этого добавить несколько строчек кода в @media screen and (max-width: 760px) убрать display:none :



Получилось примерно так:

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Подборки по теме:

Комментарии и отзывы

Поиска в мобильной версии нету,было бы удобнее если бы он был. )

И окно ввода коментариев не ресайзится под экран мобильнного.

Дмитрий: спасибо за замечания. Окно для ввода комментариев поправил (там была ширина в пикселах установлена — заменил на проценты). Про окно поиска подумаю. P.S. добавил строку поиска под логотипом в версии для экранов меньше 760 пикселей.

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

Очень простое решение этого вопроса крылось в рекомендациях самого гугла — как устранить эту проблему. У меня все на вордпресс, установил плагин WPtouch, который полностью вставляет хорошо читаемую тему для мобильных устройств и никак не влияет на основную тему. Получилось очень даже мило. Не пришлось ковырять стили и подгонять размеры, а за несколько минут установил плагин, настроил отдельное меню, зашел с мобильника и не узнал свой сайт. Рекламу вставляю шорткодами, она в мобильной версии тоже высвечивается. Если кому интересно глянуть с мобильника на мой любимый тревел блог, наберите в поиске — жизнь с мечтой.

Вот это крутая и очень полезная статья!

А я решила вопрос при помощи плагина Wptouch. Или думаю, что решила. Покрайней мере, проверяльщик Гугл на 2-х сайтах выдал вожделенную зеленую надпись после этого плагина.



Приветствую. Нужна помощь. У меня пара-тройка блогов на WordPress и тоже нужна оптимизация для просмотра на мобильных устройствах. Могу заплатить за работу или помочь по своим темам.

Александр Алексеенко и Юлия: ну, как бы да, Wptouch решает проблему, но, как мне кажется, не совсем идеальным способом. Простое решение (в плане использования) не всегда получается оптимальным.

  • По поводу SEO есть сомнения, но они скорее интуитивные (поисковики, по идее, должны понять, что мобильная версия не является дублями).

  • Теряется узнаваемость сайта (мобильный шаблон сильно отличается от дестопного).

    alexzsoft: спасибо за отзыв.

    ну да Wptouch — не очень

    Добрый день. Дмитрий читаю ваш блог наверное с момента основания. Всегда применяю ваши рекомендации и идеи. На своём сайте.

    Теперь пойду настраивать свой шаблон под мобильные устройства по вашим рекомендациям.

    Так как плагин Wptouch решает вопрос быстро но это уже не мой сайт.

    Один вопрос кнопки социальных сетей внизу страницы как установить?

    Дмитрий есть подозрение что форма комментариев не добавляет комментарий с мобильной версии сайта. 2 комментария написал, а их нет ��

    Ваш вариант адаптации мне понравился больше плагина пойду и свой файл стилей переделівать.

    Leo: Спасибо за отзыв.

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

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



    Просто сообщений никаких нет что комментарий отправлен на модерацию, вот начал паниковать.

    Про кнопки соц сетей нашел то что искал. Это ваше расширение UPtolike. Органично вписывается в мобильную версию.

    Leo: о как, а я и не знал, что UPtolike тут руку приложил.

    Век живи — век учись. Прикольно, спасибо за пояснения.

    Отдавал фрилансеру-верстальщику свой блог для работ, в частности и по мобильной версии. Подшаманили немного согласно Гуглу вебмастеру, но тем не мене надо всё равно отдавать спецу, чтобы заточил блог под мобильники. Скорость загрузки ещё необходимо улучшать. А вот с внешними ссылками решил вопрос с помощью технологии ajax и тега SPAN.

    Дмитрий, код который нужно править, который вы пишите в одну строку не влазит в поле для текста. Незнаю как правильно объяснить,например после слов «Пришлось в файл header.php добавить такие вот строки» идет сам код. так вот чтоб его полностью посмотреть, мне пришлось скопировать текст, вставить в word, и там смотреть, потому что на сайте я вижу только «<link rel="stylesheet" type="text/css" media="only screen and (max-width: 1025px), only" вместо "». Мой браузер Opera, может конечно дело и в нем.

    Дмитрий, спасибо за ответ. Да, действительно, сейчас глянул в метрику, с тех пор как поставил плагин Wptouch трафик с мобильных устройств стабильно уменьшился. А для обычных устройств остался неизменным. Возможно, лучше допиливать свою старушку твенти тен. =)



    И про узнаваемость сайта тоже хороший вопрос. Вроде плагин Wptouch позволяет загрузить картинку логотипа в шапку, это уже не мало важно. И еще, у плагина есть куча платных тем, с очень продвинутыми функциями. А может быть проще уже купить современную тему с адаптивным дизайном. Вот только вопрос по seo — не слетит ли весь мой наработанный годами поиск при смене темы.

    Дмитрий, поясните, пожалуйста, почему вами выбраны именно такие точки излома: 1025 и 760px? Из каких соображений их выбирать в общем случае?

    А за статью огромное спасибо. Взял за основу и сделал «мобилизацию» для своего сайта на Joomla. Все получилось, тест пройден, проблема решена. Повозиться пришлось с полдня.

    Вообще часто посещаю ваш блог и нахожу каждый раз много полезного.

    Плагин WP Touch имеет два существенных недостатка:

    1. Создает дубли всех страниц сайта. Эта проблема описана в буржнете, в рунете видел её описание только на парочке сайтов. Проверил лично — действительно дубли создаются, причем остаются даже после полной деактивации и удаления плагина! Последствия решается только прописыванием кода в htaccess.

    2. В бесплатной версии не отображаются объявления AdSense, однако это лекго лечится редактированием одного файлика плагина ). Но для тех, кто не умеет это делать — данный факт является минусом.

    Сергей, а про Адсенс при WP Touch можно подробнее, хотя бы имя файла или где он лежит.

    Александр Алексеенко, к сожалению не помню название, но моего далеко не самого глубокого знания php хватило на то, чтобы всё поправить за 5-10 минут )



    спасибо за статью, Дмитрий, — все получилось.

    Дмитрий, спасибо за подробное разъяснение, тоже тем же стилем убрала два последних пункта меню, но вот вопрос, а за display со значением none поисковики сейчас санкции не накладывают? Не вылетим мы из поиска? Раньше с этим было очень строго.

    И вот увидела у Сергея Кокшарова, когда там в другой теме был вопрос про тот же стиль, он ответил — сейчас используется скрытие через “position:absolute;left:-9999em”, проблем никаких замечено не было.

    Светлана: не приходило в голову такое. Спасибо, что подсказали. Бум думать.

    У меня установлен шаблон с адаптивным дизайном. Но я столкнулась с такой проблемой — большинство тизерных сетей и систем контекстной рекламы предлагают установить на сайте не адаптивные рекламные блоки. Из-за этого шаблон перестает быть адаптивным. Он растягивается на ширину рекламного блока и не сжимается в мобильных. Как адаптировать под мобильные не адаптированные рекламные блоки? Гугл Адсензе не использую и Яндекс Директ тоже. Сотрудничаю с другими системами.

    уже несколько дней бьюсь с оптимизацией кода. У меня вопрос, который меня мучает, куда вставить надо этот код? в head или body

    @media screen and (max-width: 760px) <

    CSS свойства, которые поменяют дизайн при ширине экрана меньше 760px

    У меня не сроботал. так как css стили не меняются при таком разрещении. не знаю почему?

    За ранее спасибоза помощь.

    Михаил, вставьте свойства для мобильной версии в стили CSS под основным свойством:



    @media screen and (max-width: 760px) <

    width: 700px (или 100%);

    Дмитрий, добрый день. Смотрю, у вас текст на рекламных блоках обрезается на полуслове. У меня так тоже было, пока в блоке задавала вид шрифта и его размер, потом поставила оптимальный и размер и шрифт, всё стало вписываться один в один со стилями страницы.

    На вашем сайте, с мобильного устройства отображается выдвижной баннер внизу экрана от Google Adsense. Подскажите как это реализовать?

    Насколько я понял, реклама на вашем сайте показывается через шорт-код? Или вы добавляете рекламный код в тело статьи? На моём сайте стоит плагин WP Mobile Edition, так там вместо рекламы показывается название функции [reklama]. Как это исправить, не знаю.

    Валерий, это объявления Адсенс для мобильного, объявления уровня страницы, https://support.google.com/adsense/answer/6245304?hl=ru

    Статья хорошая и полезная, раскрывает действительно все удобные способы адаптации сайтов под мобильные версии. Немного о последнем. Для меня он наиболее оптимальный, этот способ и один из самых простых. Здесь подробно расписаны и плюсы, и минусы. Вопрос стоит в программе для адаптации. Я лично для своего сайта интернет-магазина использую

    /. Устраивает эта программа из-за низкой стоимости и быстрой скорости выполнения. Да и один из важных критериев, что бы после адаптации сайт проходил тесты гугл и яндекс. тут с этим нет проблем, проходит всегда без проблем.

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



    У нас реклама от гугла. Из-за кривой верстки сайта на компе она помещалась, а вот при просмотре с мобильного не хочет адаптироваться и выходит за левую сторону экрана. Не адаптировались не только картинки, но и видео.((В итоге в интернете нашли исполнителя голову ломать не пришлось и сайт теперь адаптирован и под планшеты и под мобильники)Спасибо!

    У меня проблема в 3% лишнего контента. Сервис проверки сайтов пишет следующее: «Ширина экрана меньше ширины контента на 97%. Измените CSS стили, чтобы при просмотре на мобильных устройствах контент полностью помещался на экране, без горизонтальной прокрутки.»

    Я проверял не нескольких смартфонах так и есть. В любом экране есть небольшая, но надоедливая прокрутка по горизонтали.

    Как можно это исправить?

    * Нажимая на кнопку «Добавить комментарий» или «Подписаться» Вы соглашаетесь с политикой конфиденциальности.

  • О admin

    Оставить комментарий

    Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

    *

    x

    Check Also

    Основы блочной верстки

    > Основы блочной верстки — Как работают сайты, повышение безопасности и структура HTML кода Здравствуйте, ...

    Организация контента в Joomla

    > Организация контента в Joomla — удаление и создание статей в админке, а так же ...

    Опять про Минусинск

    > Опять про Минусинск — новые факты, домыслы и предположения о том, как жить оптимизатору ...

    Оптимизация темы (шаблона) WordPress для снижения его нагрузки на сервер хостинга, плагин WP Tuner и число запросов к БД, создание, продвижение и заработок на сайте

    > Оптимизация темы (шаблона) WordPress для снижения его нагрузки на сервер хостинга, плагин WP Tuner ...

    Оптимизация поведенческих факторов без их накрутки

    > Оптимизация поведенческих факторов без их накрутки. Возможно? Да, если автоматизировать процесс посредством «прямых рук» ...

    Оптимизация и сжатие CSS в Page Speed

    > Оптимизация и сжатие CSS в Page Speed — как отключить внешние файлы стилей и ...

    Онлайн-консультант раздражает посетителей или увеличивает продажи, создание, продвижение и заработок на сайте

    > Онлайн-консультант раздражает посетителей или увеличивает продажи? Здравствуйте, уважаемые читатели блога Каждый, кто сейчас читает ...

    Онлайн сервисы для вебмастеров

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

    Онлайн HTML редакторы

    > Онлайн HTML редакторы — визуальные, IDE и редакторы для установки на сайт Здравствуйте, уважаемые ...

    Один год

    > KtoNaNovenkogo.ru один год — посещаемость, как увеличить поисковый трафик и анализ плотности ключевых слов ...

    Обрезать или изменить размер фото в онлайн редакторе или Фотошопе

    > Обрезать или изменить размер фото в онлайн редакторе или Фотошопе — это просто! Здравствуйте, ...

    Обратные ссылки с сервисов E-mail рассылок и счетчиков посещаемости, создание, продвижение и заработок на сайте

    > Обратные ссылки с сервисов E-mail рассылок и счетчиков посещаемости Здравствуйте, уважаемые читатели блога Сегодня ...

    Обратные ссылки с профилей

    > Обратные ссылки с профилей — это основной инструмент бесплатного продвижения сайтов в рунете Здравствуйте, ...

    Обратные ссылки с блогов созданных на бесплатных платформах, создание, продвижение и заработок на сайте

    > Обратные ссылки с блогов созданных на бесплатных платформах Здравствуйте, уважаемые читатели блога Продолжаем тему ...

    Обратная связь для сайта с помощью скриптов форм на Html и Php, а так же онлайн конструкторов и генераторов, создание, продвижение и заработок на сайте

    > Обратная связь для сайта с помощью скриптов форм на Html и Php, а так ...

    Обновленная бесплатная почта Yahoo Mail, создание, продвижение и заработок на сайте

    > Обновленная бесплатная почта Yahoo Mail Здравствуйте, уважаемые читатели блога Когда я писал сравнительную статью ...

    Обновление Joomla до последней версии, создание, продвижение и заработок на сайте

    > Обновление Joomla до последней версии Здравствуйте, уважаемые читатели блога Уже достаточно давно пишу на ...

    Обмен электронных валют WebMoney (wmz, wmr, wmu) в Exchanger и мониторинг обменных пунктов, создание, продвижение и заработок на сайте

    > Обмен электронных валют WebMoney (wmz, wmr, wmu) в Exchanger и мониторинг обменных пунктов Вообще, ...

    Обзор премиум-хостинга Offerhost, создание, продвижение и заработок на сайте

    > Обзор премиум-хостинга Offerhost Здравствуйте, уважаемые читатели блога Сегодня я бы хотел поговорить про такой ...

    Обзор обновленного модуля естественных ссылок в SeoPult, создание, продвижение и заработок на сайте

    > Обзор обновленного модуля естественных ссылок в SeoPult Здравствуйте, уважаемые читатели блога Три месяца назад ...

    Обзор нового модуля Естественные ссылки от SeoPult, создание, продвижение и заработок на сайте

    > Обзор нового модуля Естественные ссылки от SeoPult Здравствуйте, уважаемые читатели блога В декабре минувшего ...

    Обзор движка интернет-магазинов OKAYCMS: плюсы и минусы системы, создание, продвижение и заработок на сайте

    > Обзор движка интернет-магазинов OKAYCMS: плюсы и минусы системы Здравствуйте, уважаемые читатели блога Выбор движка ...

    Обзор движка для интернет-магазинов Shop-Script 7 отзывы, создание, продвижение и заработок на сайте

    > Обзор движка для интернет-магазинов Shop-Script 7 Здравствуйте, уважаемые читатели блога Shop-Script – это специализированный ...

    Обзор веб-сервисов uKit Group, создание, продвижение и заработок на сайте

    > Обзор веб-сервисов uKit Group Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru! Сейчас многие занимаются созданием и ...