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

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

Оптимальным решением будет добавление в раздел CSS вашей темы такого текста:

#content{max-width: 1280 px;}

Помимо этого вам желательно изменить ширину страниц мобильной версии (за нее отвечает атрибут “width”). После того, как найдете его в разделе CSS, вам нужно будет заменит его значение на “100%”. Это позволит браузеру автоматически подгонять ваш сайт под любой экран. Но стоит отметить, что данный способ адаптации не является эффективным, потому как сайт будет грузиться долго. Основные цели мобильной версии это быстрая загрузка и предоставление удобства. Помимо этого такой вид адаптации не является быстрым. Вам придется искать нужные атрибуты, эксперементировать с их значениями, если будут возникать какие-либо дефекты и так далее.

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

1. Hammy необходим для пропорционального отображения изображений на мобильных устройствах. Механизм работы заключается в том, что плагин меняет стандартный тег вызова изображения img на figure. При желании в настройках плагина есть опция отключения показа изображений определенного класса. Это нужно при адаптации новостных и каких-либо других больших порталов. В противном случае сайт будет грузиться намного дольше.

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

3. Плагин WP Lightbox 2 поможет сделать всплывающие окна на мобильном сайте. Он начинает работать сразу же после активации. При желании можно изменить длительность показа. В целом, с настройкой проблем не должно возникнуть.

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

5. Если вы хотите создать готовый адаптивный сайт за считанные минуты, то вам стоит использовать плагин WP Touch . Он является достаточно популярным, потому как им пользуются более 5 миллионов вебмастеров. Этот плагин содержит базовые настройки (название, язык, регион) и одну тему. Если же вы хотите сделать более функциональную мобильную версию сайта для смартфонов, то вам стоит приобрести премиум версию WP Touch Pro. Здесь присутствует большое количество различных тем и дополнительных настроек, поэтому ваш сайт не будет однообразным.

6. WP Mobile Detector предназначен для определения устройства, с которого посетитель заходят на сайт. Он способен сделать распознавание около 5 тысяч различных устройств. Также плагин фиксирует статистику уникальных посещений, источников перехода и многое другое.

7. это многофункциональный плагин. Благодаря нему вы сможете сделать настройку отображения различных кнопок бара (добавить в закладки и так далее), кнопок смены версии сайта с классической на мобильную и блоков с рекламой от Гугл или AdMob. Также он содержит мобильную версию панели управления сайтом. Это существенно повысит удобство, потому как в стандартной версии панели управления при работе на мобильных устройствах некоторые опции являются ограниченными в доступе.

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

9. поможет создать быстрый и привлекающий внимание сайт для мобильного устройства. Он отлично работает со всеми темами, которые предложены на официальном сайте движка вордпресс. Данный плагин используют создатели NY Times, Forbes и других популярных сайтов.

10. MobilePress является достаточно простым. Этот плагин создаст практичную мобильную версию без каких-либо особенных эффектов. Плюсом такого плагина является уменьшение нагрузки на сервер. Как известно, чем меньше на сайте имеется различных виджетов, тем быстрее он будет грузиться на экране устройства.

11. WP Mobile Splash Page Editor будет вам полезен при создании гостевой страницы для мобильной версии вашего интернет-портала. Он достаточно легок в настройке и содержит широкое количество различных стилизаций. При правильном подборе дизайна вы сможете увеличить посещаемость сайта. Стоит также упомянуть, что данный плагин обеспечивает быструю загрузку страниц на каком-либо портативном устройстве.

12. При использовании Wapple Architect Mobile вы получите адаптированную версию, которая будет иметь URL-адрес идентичный классической. То есть, не будет перенаправления на поддомен вида “m.сайт.com”. Это никаким образом не влияет на СЕО-показатели. Особенностью данного плагина является также возможность адаптации абсолютно любой темы под мобильные устройства (будь это даже тема с большим количеством различных виджетов). Благодаря этому, вам не придется тратить лишнее время на работу с дизайном.

Как осуществляется адаптация без использования плагинов?

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

Сервис dudamobile.com является достаточно популярным, потому как имеет широкий выбор опций. Однако, данный сервис является платным. Цена будет составлять 9 долларов США. Это достойная плата, учитывая что вам не придется использовать какие-либо плагины.

Для начала вам нужно здесь зарегистрироваться или пройти авторизацию через Фейсбук. После этого переходите в раздел “Дизайн” и кликаете по полю “Макет”. Перед вами откроются возможные варианты размещения навигации. Для выбора вам достаточно кликнуть по понравившемуся варианту. Чтобы настроить цветовые гаммы, вам нужно кликнуть на поле “Стиль”. Вы также можете загрузить свое фоновое изображение. Поле “Заголовок” отвечает за эмблему. Вы можете ее загрузить в виде картинки или же представить каким-либо текстом. В целом, процесс конструирования происходит в визуальном режиме. Вы “настраиваете”, а сервис формирует специальный код. Стоит сказать также, что есть и бесплатная версия. Но в таком случае на сайте будет автоматически отображаться реклама.

Более простым является mippin.com , который содержит значительно меньше опций. Механизм работы похож с предыдущим сервисом.

Проверка адаптации

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

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

С помощью сервиса iPad Peek вы сможете абсолютно бесплатно увидеть особенности отображения вашей мобильной версии на таких устройствах, как iPad, iPhone и других гаджетах фирмы Apple. Данный сервис является популярным, потому как большинство пользователей интернета предпочитает именно устройства Apple.

Также вы можете воспользоваться сервисом Mobile Phone Emulator, который позволяет увидеть отображение вашей мобильной версии не только лишь на продукции Apple, но и на продукции компаний Samsung, HTC и BlackBerry.

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

Если же вам не хочется заходить лишний раз на какие-либо сайты, то установите один раз Opera Mobile Emulator. Это дополнение к известному браузеру Opera. Оно бесплатное и легкое в использовании.

Любой качественный сайт должен иметь мобильную версию сайта, ведь мобильный трафик постепенно растёт, а отсутствие адаптивной верстки сайта приводит к отказом. Это так же заметили в Google, после чего было решено проверять сайты на наличие мобильной версии сайта, а с 21 апреля 2015 года и во все станет фактором для ранжирования.
Так как же сделать мобильную версию сайта, что бы избежать отказов и понижения позиций? Для решения этой проблемы существуют два способа. Первый способ — сделать адаптивную вёрстку, второй способ — сделать отдельный дизайн мобильной версии сайта. Так как мой сайт на WordPress покажу решения только для данного CMS движка.

Как сделать мобильную версию сайта WordPress

Однако, если вы довольный своим шаблоном и вам не хочется плагинов, есть вариант сделать ваш шаблон растягивающимся без плагина, как мой. Для этого достаточно прописать в css — «width: 100%» . Ну а что бы дизайн не сильно растягивался добавить строчку:

#content {
max-width: 1280px;
}

Кроме этого в вашей теме картинки могут быть фиксированного размера и не растягиваться, исправляем это такими строками:

img, embed, video {
max-width: 100%;
}

Недостатки такого способа:

• Тяжело разместить каждый эллемент красиво для разных экранов.
• Медленная загрузка сайта из-за не сжатых картинок + подгрузки лишних не оптимизированных скриптов.

Безусловно такой способ позволяет сделать мобильную версию сайта, но мне не нравятся эти недостатки. Поэтому разберём второй вариант, где нету таких недостатков, однако есть другие, более серьёзные для SEO.

Самый удобный вариант для пользователей, это иметь отдельный поддомен с мобильной версией, так поступают сайты гиганты, популярные сайты ну и конечно различные успешные сервисы. Обычно создают поддомен m.website.ru либо mobile.website.ru.

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

В чем недостаток этого способа:
1. По сути вы создаёте дубликат сайта, выходит что нужно наполнять 2 сайта, конечно можно сделать авторепостинг с помощью NextScripts: Social Networks Auto-Poster, но следить за двумя сайтами не практично.
2. Так как мобильная версия дублирует контент, поэтому нужно либо запрещать к индексации поддомен, тогда поисковики не оценят ваш труд. Либо прописывать в head — rel=»canonical», показывая что контент дублируется, однако в выдачи первой страницы m. версии уже не будут.
3. Как не стараться SEO оптимизация таких страниц превращается в тяжёлую работу, либо вы пишите уникальный контент для мобильной версии, либо не выйти в топ таким страницам.

Какие в этом плюсы:
1. Максимальная настройка юзабилити для мобильных телефонов, а это увеличение продаж, больше спрос, посещаемость, легче распростронить среди пользователей информацию.
2. Сумашедшая загрузка страниц, из-за того, что вы убираете лишние элементы сайта, загружается маленькие картинки, нету ненужных скриптов.

Порядок действий как сделать отдельную мобильную версию сайта WordPress:
1. Создаём поддомен (пример m.сайт) на хостинге;
2. Покупаем платный шаблон, либо создаём собственный для мобильных телефонов. Так же есть вариант организовать мобильную версию отдельно с помощь тех же плагинов, о которых писал в первом методе;
3. Загружаем заново весь контент, который должен быть на мобильной версии сайта;
4. Настраиваем индексации и прописываем необходимые параметры для поисковиков.
5. Настраиваем проверку на вход с мобильных устройств на основном домене и поддомене с помощью веб-сервера nginx.

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

Как я и обещал, пришла пора рассказать Вам, что такое «Адаптивная верстка» и как сделать мобильную версию сайта под смартфоны и планшеты, а так же понравиться поисковым системам!

А зачем вообще все это нужно?! Ведь жили же, как то раньше и ничего. Ну что тут сказать, интернет меняется, становиться лучше. Поисковые системы делают все возможное для удобства и комфорта пользователей… Здорово, правда

Да и трафик с гаджетов растет все больше и больше, день за днем! Веб-мастеру необходимо это учесть...

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

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

Вроде бы понятно объяснил?! Кто что не понял? Пишите в комментариях, вместе обсудим.

Так вот, совсем недавно, у меня был отпуск, решил побольше статей написать полезных, реализовать какие-нибудь интересные идеи, в общем провести отпуск с пользой, а не лежать на диване, хотя как хотелось м-м-м….

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

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

Мобильный сайт WordPress с помощью плагинов!

Как оказалось такие плагины существуют и в принципе выполняют свою функцию! Но, проверку Google — на удобство просмотра сайта с мобильного устройства, они не проходят ! Уж не знаю почему, но Google упорно отказывается видеть изменения, перепробовал множество вариантов... По этому смысла их использовать нету...

Если Вы все же хотите использовать для этой цели плагины, то самые лучшие из них это:

WPtouch Mobile Plugin - Этот плагин мне понравился больше всего, все довольно просто и понятно, мой блог корректно отображался без каких либо косяков!

Не буду описывать каждый плагин, сами опробуете и определитесь:

• MobilePress;
• WordPress Mobile Pack;
• Duda Mobile Website Builder;
• WordPress Mobile Pack;
• WordPress PDA & iPhone;
• WPmob Lite;
• WPtap News Press;
• WP Mobile Detector;
• WiziApp.

Еще минус плагинов в том, что они иногда подглючивают, например захожу через смартфон — все хорошо, повторил еще раз или обновил - показывает обычный сайт! Какая то загадка прям

Короче меня это не устроило и я продолжил искать лучшее решение!

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

Если кому интересно, то переделка сайта в адаптивный, стоит примерно от 5.000 рублей и выше... Не советую нанимать горе-специалистов, которые берут дешевле — скупой платит дважды! Да и на отзывы обращайте внимание...

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

Теперь поделюсь полученными знаниями с Вами и расскажу о наиболее важных моментах...

Варианты создания мобильного сайта?

Существует, на сколько мне известно, три направления. Разберем каждую технологию по отдельности, с какими плюсами и минусами мы можем столкнуться?!

Отдельная версия сайта — Это своего рода отдельный облегченный сайт, созданный специально для просмотра на мобильных устройствах или с низкой скоростью интернета..сайт или http://mobile.сайт. В данном случае используется перенаправление.

• Два независимых сайта — возможность менять контент, не затрагивая при этом другой сайт;
• Скорость загрузки — так как мобильная версия независима от основной, сделать ее легкой и быстрой не составит труда;
• Удобство - навигацию и контент проще заточить, вплоть до мелочей, так как сайт полностью рассчитан под мобильную аудиторию.

• Дублирование контента — так как один и тот же контент будет и в основной версии и в мобильной. Возможно спасет мета-тег rel=canonical, но есть масса и других проблемм.
• Срез функционала — как не крути но такой сайт будет урезанной копией основного сайта, отсюда совсем другие показатели статистики. Да и основная масса посетителей не любит различного рода ограничений и всегда переходит на основной сайт...
• Перенаправления — как известно, различного рода редиректы негативно сказываются в сфере SEO.

Технология RESS — Тут используется вычисление на стороне сервера, смотря с какого устройства был заход — создается тот или иной макет (html и css). Называется это чудо — адаптивный веб-дизайн + специальное программное обеспечение на стороне сервера (RESS — Responsive Web Design и Server Side Components).

• Скорость загрузки — возможность удаления разных ненужных скриптов, стилей;
• Меньший вес страницы - вместо того чтобы скрывать элементы как в адаптивной верстке их можно просто удалить;
• Навигация — возможность настроить структуру под определенные устройства.

• Определение — чтобы выдать нужную версию сайта, нужно точно определить устройство посетителя, а с этим как я слышал не всегда все гладко.

Адаптивная верстка (веб-дизайн) — Эта верстка сайта подстраивается под любое разрешение экрана путем его определения с помощью CSS3 Media Queries. Как правило используется один и тот же ресурс, который содержит в себе различные варианты для отображения на смартфонах, планшетах и компьютерах...

• Сохранность — не зависимо от устройства используется один и тот же контент и набор html кодов;
• Единый URL — для различных макетов используются одни и те же адреса и контент, нет дублей.

• Скорость загрузки — так как загружаются все элементы и скрипты основного сайта, даже если они скрыты.
• Навигация — сложность в создании продуманной мобильной навигации.

Делаем адаптивную верстку самостоятельно

Для своего блога я выбрал адаптивную верстку по нескольким причинам:

1. не нужно нарушать целостность основного сайта, блога;
2. используется один единый контент, одна база данных и так далее;
3. Лично для меня простота внедрения (потребуются знания html и css).

Теперь расскажу Вам о том, что нужно сделать, чтобы Ваш ресурс подстраивался под любые разрешения и понравился Google

Во первых нужно прописать мета-тег в :

Этим мы сообщаем браузеру, что ширина сайта должна равняться ширине гаджета, устройства, или что у Вас там

Так же, если мы добавим еще и maximum-scale=1.0, user-scalable=no — то этим, мы запретим масштабирование, но я не рекомендую этого делать, пусть человек сам решает, может у него проблемы со зрением...

Вот, начало положено, теперь если мы зайдем через смартфон или еще что, то увидим как выглядит наш сайт! Печалька да?!

Это дело нужно будет исправлять с помощью Media Queries в файле стилей CSS, выглядит параметр так:

@media screen and (min-width:240px) and (max-width:720px) {
тут теги и атрибуты
}

То есть, эти стили будут применяться браузером от минимальной ширины 240px до максимальной 720px устройства! Если больше или меньше этих значений, то будут применены основные стили сайта. Все просто!

И вот таким макаром мы прописываем стили под разные разрешения устройств. Например:

• смартфоны вертикально — от 240 до 340, от 341 до 420;
• смартфоны горизонтально и некоторые планшеты вертикально — от 421 до 540, от 541 до 670;
• планшеты вертикально — от 671 до 800;
• планшеты горизонтально — от 801 до 1024

Если нужно показать какой-либо элемент: display:block, если же спрятать: display:none;

Чтобы узнать как выглядит сайт или блог на различных устройствах есть замечательные сервисы:

• http://quirktools.com
• http://www.emulateurmobile.com/
• http://webmark.com.ua

Кстати, если Вам нужно сделать сайт адаптивным, но Вы уверены что сами не справитесь, да и желания особого нет, то я предлагаю свои услуги! Посмотреть мои работы и отправить заявку, можно на странице: .

На этом у меня все! Надеюсь моя статья Вам реально помогла, в благодарность поделитесь ей =)

На клиентском сайте записал пример работы адаптивной верстки, если так и не поняли принцип ее работы обязательно смотрим. До скорой встречи! Пишите комментарии...

С уважением, Владимир Савельев

Премиум-уроки от клуба webformyself

Это новый революционный продукт в области обучения сайтостроительству! Все лучшие видео-уроки собраны в одном месте и разделены на категории: WordPress, Joomla, PHP, HTML, CSS и JavaScript... База постоянно пополняется и уже сейчас в ней более 200 уроков! Всего за один год - Вы сможете стать опытным веб-мастером "с полного нуля"!

Подробнее

Что с 21 апреля в поисковый алгоритм будет включен фактор дружественности сайта к мобильным устройствам. Повлияет это нововведение на основную выдачу Google или только на результаты мобильного поиска, будет видно позднее.

Оно мне надо?

Ответ на этот вопрос можно найти, проверив, как ваш сайт отображается в следующих сервисах тестирования Google:

Если вы видите подобное сообщение - статья для вас:

Адаптивный дизайн

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

Как реализовать?

Можно смело брать один из CSS-фреймворков (bootstrap , responsivegridsystem , Sceleton и пр.) и адаптировать существующий дизайн. Либо используйте CSS3 Media Queries.

Например, если использовать фреймворк bootstrap, то вам понадобится, вкратце:

1. прописать view-port;
2. подключить файлы фреймворка;
3. добавить в разметку классы сетки bootstrap.

Или же в таблице стилей выделить через медиа-запросы (CSS3 Media Queries) несколько разрешений и задать оптимальные размеры элементов страницы, например:

@media screen and (max-width: 1280 px) { div .contentblock {width: 1200 px ;} }
@media screen and (max-width: 1140 px) { div .contentblock {width: 1024 px ;} }
@media screen and (max-width: 992 px) { div . contentblock {width: 970 px ;} }

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

Плюсы данного метода: быстрая реализация для перечисленных типов сайтов.

Минусы: скрипты и стили, которое не используются на мобильной версии, но используются на десктопной, все же будут подгружаться и влиять на время загрузки.

Что мы получим?

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

И рассмотрим пример. Меню для устройств с экраном более 768px выглядит так:

А для экранов менее 768px выглядит так (в свернутом виде):

И так, при клике на иконку в правом углу (в развернутом виде):

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

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

Как реализовать?

Нужны знания php и база основных устройств для их определения и вывода соответствующего шаблона. Т.е. нужно написать скрипт, который будет определять тип устройства и выводить для него соответствующий шаблон.

Отдельно стоит упомянуть о CMS. Если ваш сайт на WordPress, то о вас уже позаботились, и можно обойтись установкой плагинов для адаптации сайтов под мобильные устройства.

Среди них: WPTouch, WordPress Mobile Pack, WP Mobile Detector и т. д. Все эти плагины имеют несколько тем оформления и дополнительные полезные фишки вроде сбора статистики по мобильным пользователям.

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

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

Минусы: не для всех CMS есть такие плагины, да и не всегда они корректно работают. Бывает, что сайт хорошо отображается на моб.устройствах, но при этом по скорости не лучше, а даже хуже, чем его полная версия. Стоит отметить, что иногда бывают баги в определении мобильного устройства, если это какой-то редкий телефон, и в этом случае на таком устройстве будет отображена полная версия сайта.

Что мы получим?

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

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

Например, вот так сайт выглядит на ПК:

А вот так выглядит этот же сайт на мобильном:

Мобильная версия сайта на поддомене

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

Как реализовать?

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

Немного подробнее о реализации: создается поддомен, на нем такой же движок, как и на основном домене, но база данных используется одна на оба сайта (чтобы в случае внесения каких-либо изменений, не пришлось их добавлять дважды). При заходе с мобильного устройства происходит перенаправление пользователя на поддомен. В качестве имени поддомена обычно используют варианты: m.sitemane.com, mobile.sitename.com, pda.sitename.com и пр.

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

Это очень важный этап оптимизации сайта, так как сегодня все больше людей имеют телефоны, смартфоны и планшеты, подключенные к интернету. И если на большом мониторе ваш сайт выглядит просто прекрасно, то на телефоне его, возможно, просто невозможно будет просматривать: шрифты будут ОЧЕНЬ маленькими, а дизайн будет СИЛЬНО перекошен. Человек сразу закроет сайт, а поисковая система поставит себе галочку: ОТКАЗ!

Как проверить сайт?

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

Начнём с сервиса, и воспользуемся инструментом от Google - . Вот какую печальную картину имеет мой сайт:

Как показано на картинке, мой сайт на смартфоне отображается так же, как отражался бы на обычном компьютере, и поэтому читать его будет ОЧЕНЬ трудно. К тому же, как сообщил мне Google, в шаблоне сайта есть элементы, которые мешают моему сайту быстро открываться на мобильных устройствах. И вот тут требуется пояснение.

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

Как решить проблему?

Тут есть несколько вариантов.

1. Оптимизировать данный шаблон, устранить ошибки и так далее

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

3. Мобильная версия сайта

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

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

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

Установил плагин WordPress Mobile Pack (Mobile Switcher) и сразу всё улучшилось!

Вроде всё хорошо, и проблема решена, но....

Если вторую проблему можно легко решить, то первую решить будет сложно. А как сами понимаете, если сайт живёт рекламой, то такой минус критичен.

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

Ну что же, попробую поискать что нибудь получше.

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

Ещё плагин имеет три варианта шаблонов, выбор не большой, но есть. Осталась мелочь - удалить ссылки в подвале, так, на всякий случай.

Тут оказалось все не так сложно. Идём в папку с установленным плагином и открываем файл base-functions.php - путь к нему: ВАШ САЙТ/wp-content/plugins/wpsmart-mobile/themes/base/base-functions.php

Удаляем этот кусок кода и все, ссылок в футере нет. Можно не удалять, а поставить свои ссылки. Но учтите, что при обновлении плагина всё, скорее всего, вернётся на круги своя. Или не обновляйте плагин, или всегда удаляйте.

ОЧЕНЬ ВАЖНО! В связи с тем, что google предъявляет теперь большие требования к мобильной версии сайта, именно ему нужно угодит. А он требует при своих тестах доступ в robots.txt к мобильному шаблону. Поэтому в robots.txt нужно ОБЯЗАТЕЛЬНО прописать:

Allow: /wp-content/plugins/wpsmart-mobile/themes Вот так я решил проблему с мобильной версией сайта, надеюсь, что мой опыт пригодится и вам:)

Дальнейшая доработка плагина WPSmart Mobile

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

ВАЖНО! После внесения изменений не обновляйте плагин, иначе вы потеряете все внесенные изменения!

Центровка картинок . Изначально картинки в шаблоне прижимаются к левому краю. На планшете это некрасиво. Нужно вот эту секцию в css привести к такому виду:

Body img { display: block; margin: 0 auto; }

Не нашли ответ? Воспользуйтесь поиском по сайту