• Главная
  • Веб-Дизайн
  • Гостевой
  • Реклама
  • Автор-Контакты
  • Книги
  • Все статьи
  • Рубрики

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

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

Как создать адаптивный дизайн сайта к мобильным приложениям
7
120 просмотров
26 апреля 2015
  • Адаптивный дизайн сайта Wordpress создаём из новых обновлений тем
  • Как создать адаптивный дизайн сайта с чего начать

Адаптивный дизайн сайта 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 г.

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

а51

Понравилась статья? Поделитесь с друзьями!

Комментировать
7
120 просмотров
похожие записи из этого раздела
Как выбрать онлайн конструктор сайтов – анализ критериев
Как выбрать онлайн конструктор сайтов – анализ критериев
Favicon для сайта где можно подобрать
Favicon для сайта где можно подобрать
Как создать собственный сайт для заработка
Как создать собственный сайт для заработка
Как сделать картинку ссылкой буквально за минуту
Как сделать картинку ссылкой буквально за минуту
Узнайте Скорость Своего Интернета
Проверка скорости интернета
Мой YouTube канал — Присоединяйтесь!
Моя Группа ВКонтакте — Присоединяйтесь!
Моя Группа в ОДНОКЛАССНИКАХ — Присоединяйтесь!
Моя Группа в (Facebook) — Присоединяйтесь!
Рубрики | Мы Все Тут
  • Android (63)
  • iPhone (9)
  • SEO продвижение (76)
  • Безопасность ПК (186)
  • Бизнес (42)
  • Браузеры (15)
  • Видео-Курсы (7)
  • Графика видео (25)
  • Заработок в интернете (41)
  • Игры (2)
  • Интернет (9)
  • Интернет сервисы (25)
  • Книги (10)
  • Компьютерное железо (88)
  • Лучшие программы (44)
  • Лучшие статьи (43)
  • Новости (13)
  • О компьютерах (39)
  • О телефонах (54)
  • Операционные системы (11)
  • Программы (97)
  • Сайтостроение (35)
  • системные программы (87)
  • Статьи (70)
Ускоритель Компьютера Быстрая Работа Всех Систем!
Ускоритель компьютера
Всегда Будь Первым
Этот сайт использует cookie для хранения данных. Продолжая использовать сайт, Вы даете свое согласие на работу с этими файлами. Друзья, я 6 лет работаю над сайтом, и у меня к вам просьба - не воруйте контент! Большое спасибо! @ 2019