Как создать адаптивный дизайн сайта к мобильным приложениям

Адаптивный дизайн сайта WordPress создаём из новых обновлений тем

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

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

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

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

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

wordpress-mobile-pack.2.1.1

wordpress-mobile-edition.3.1

wp-mobile-detector.1.8

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

Я подумал – Ну ладно, небольшой процент читателей потеряю, но, а что делать? Буду ориентироваться на пользователей компьютеров. Но не тут-то было. Буквально числа пятнадцатого Гугл прислал новое письмо, с таким содержанием:

Как видно из содержания, с 21 апреля 2015 года Гугл будет понижать в рейтингах все сайты, которые не имеют адаптивного дизайна. Что же оставалась делать? Я внимательно изучил рекомендации для адаптации дизайна Google, перечитал часть их статей, и сделал вывод! Необходим новый адаптационный шаблон для сайта. Другими словами, адаптационная тема сайта!

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

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

Но что же делать, если денег не хватает, а необходим адаптивный дизайн сайта? И желательно без всяких плагинов. Я подумал, и нашел выход.

Как создать адаптивный дизайн сайта с чего начать

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

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

Куда мы главным образом вносили изменения? В файлы functions.php, comments.php, header.php в style.css и прочие. Так вот, вам придется просмотреть данные две темы (новую и старую) на различия и внести в новые файлы вставленные элементы из старых. Тогда ваша новая тема со встроенным адаптивным дизайном заработает как следует!

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

В каких файлах встроена адаптация к мобильным устройствам? В файлах header.php и style.css (по крайней мере в моём случае). Именно их вам желательно хорошенько сравнить.

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

<meta name=viewport content=»width=device-width, initial-scale=1″>

В новой версии header.php она уже будет вставлена. Вам остается вставить ее в старую версию header.php, примерно в строчку 4 – 5, посмотрите, где она находится в новой. Потом, добавляете те коды в новую версию style.css, которые в ней отсутствуют, но которую вы внесли в старую.

Затем, полностью меняете файл style.css  вашей старой темы сайта на новый файл style.css из обновлённой темы, с уже встроенными адаптивными кодами. Все, ваша старая тема приобрела адаптивный дизайн сайта! Правда там остаются небольшие недоделки, вроде мешающих скоростям кодов, неоптимизированных изображений и прочее.

Но я думаю, с этим вы со временем справитесь и сами. Главное, пользователю будет удобно читать, и вас Гугл перестанет понижать в рейтинге. А что делает Google, со временем начинает делать и Яндекс. Я думаю, примерно через год и он начнёт проводить подобную политику! Так что, действуйте! Я думаю, у вас все получится, как получилось у меня. После проверки Гуглом, у меня появилась вод такая надпись:

Я думаю, это стимул вам к работе. Смог я, сможете и вы. Также, я вам дам ссылку сервиса для проверки сайта на мобильность от Google, в котором он не только проверит ваш сайт на мобильность, но и даст свои подсказки в помощь вам! Проверить сайт можно здесь.

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

Просьба поделиться комментариями про устройство адаптивного дизайна или поделиться статьёй в соц. сетях!

С уважением     Андрей Зимин      26.04.15 г.

Очередной анекдот: