Преимущества адаптивного шаблона |

Время чтения: 6 мин.

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

Поводов для написания статьи было два:

  • Серьезные изменения в Интернете, произошедшие в последние время,
  • Увеличение моих знаний по этой теме, которыми я хочу с вами поделиться.

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

Итак, приступим, помолясь.

Особенность современного сайтостроения

В прошлом (2013) году в Интернете произошло знаковое событие: впервые — и наверно уже навсегда – число подключений к Интернету мобильных устройств различного рода (ноутбуки, планшеты, смарфоны, мобильные телефоны) превысило количество стационарных компьютеров.

 рост мобильного интернетаРис.1 (для увеличения любой картинки — кликните по ней)

Обьем мобильного трафика составил  почти 16% (без учета планшетников), а это — каждый шестой посетитель! В России цифры пока (пока!) меньше – 6,4%. На этом моем сайте цифры такие же – 6, 64%.

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

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

Давайте подробнее рассмотрим вопрос —

Почему мобильные посетители уходят с сайта?

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

А как это сделать?

Вот тут на помощь приходит один замечательный сервис webmark.com.ua.

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

 пример неадаптивного шаблонаРис.2

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

А если у вас Интернет-магазин? Или фото-сайт? Или игровой сайт? Или сайт с кулинарными рецептами или другой аналогичной тематики, из тех, которые часто просматривают на бегу – в поездке, в очереди…?

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

Отчего так происходит? Может, мне WordPress плохой попался?

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

А вот как выглядит на том же устройстве один из моих сайтов с адаптивной темой (шаблоном):

 пример адаптивного шаблонаРис.2-1

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

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

 запрос ключевой фразыРис.3

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

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

Особенности и преимущества адаптивного шаблона.

Адаптивный шаблон немного схож по принципу своей работы с так называемом «резиновым шаблоном», у которого ширина сайта подстраивается под ширину окна браузера, но только до определенного предела. При совсем маленьких размерах монитора, как у мобильников, резиновый шаблон не спасает – необходимо принципиально иное решение.

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

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

Эта теория может и не слишком вам понятна, если читаете об этом в первый раз, но следующий скриншот поможет вам разобраться с этим вопросом:

 работа адаптивного шаблонаРис.4

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

В нижней части слева – вид сайта на планшете. Видно, что колонки №3 и 4 уехали вниз и при открытии сайта они не видны. В правой части показан вид того же самого сайта, но на экране смартфона (мобильника): из четырех колонок осталась одна — №1, а остальные переехали вниз.

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

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

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

Требования к адаптивным шаблонам (темам)

  • Адаптация к размеру монитора (как мы уже говорили),
  • Изменение размеров сайта и различных картинок на нем в соответствии с разрешением экрана,
  • Высокая скорость работы шаблона – из-за довольно медленного мобильного Интернета,
  • Упрощение и даже удаление некоторых несущественных деталей шаблона,
  • Размещение на сайте больших кнопок (и ссылок?), т.к. нажатие может производиться пальцем

И т.д.

Где можно найти адаптивные шаблоны и можно ли переделать под них уже существующие?

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

Однако, если вы слабо владеете HTML и CSS – а такая переделка дело сложное — то лучше берите готовые шаблоны. Найти их довольно просто: дайте соответствующий запрос, например, «адаптивные шаблоны wordpress на русском». В Google по понятным причинам таких шаблонов намного больше, но они не русифицированы. Запрос в Google пишется так: «responsive template wordpress». Новичкам брать не русифицированные шаблоны не рекомендую: их придется переводить самостоятельно.

Недостатки адаптивных шаблонов

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

Как начинающим вебмастерам освоить адаптивные шаблоны

Я предлагаю воспользоваться принципом «от простого к сложному». Сначала следует разобраться с самыми простыми шаблонами (темами) WordPress  и только потом переходить на адаптивные.

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

Только переход с обычного шаблона на адаптивный лучше не затягивать. Почему? — Посмотрите еще раз на рис.2.

Разбираться с шаблонами можно при помощи локального сервера Денвер-2, но еще лучше – сразу на реальном хостинге. Единственное дополнительное требование к тарифному плану хостинга: количество MySQL баз должно быть не меньше двух. Тогда вы сможете приступить к созданию сайта на одной базе, а на другой – создать поддомен и не тратить дополнительных денег на доменное имя. Поддомен запрещаете к индексации и тренируетесь на нем сколько угодно. Я всегда так делаю.

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

Удачи!

Автор: Сергей Ваулин

Похожие записи по этой теме:

Раздел: Без рубрики