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

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

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

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

Кроме того, познакомимся с несколькими полезными сервисами. Они помогут в анализе сайтов и блогов для своевременного контроля их сетевых характеристик и соответствие требованиям поисковых систем. А так же приобретем навыки анализа и исправления ошибки, которые будут отражены в этих сервисах.
Поднимаемый вопрос относится к области веб-дизайна, “responsive web design”.

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

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

Где и как можно проверить адаптивность сайта и не только

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

(Http://www.responsivedesigntest.net/; http://mattkersley.com/responsive/;http://quirktools.com/screenfly/)

Здесь можно осуществить проверку бесплатно и без регистрации. Сразу получите ответ на вопрос относительности адаптивности шаблона сайта или блога.

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

 Проверка сайта на адаптивность для новичка

 Проверка сайта на адаптивность для новичка

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

Далее переходите в  google.com/webmasters, пройдите регистрацию. Как с ним работать, узнаете в следующих статьях. Пока рекомендую ознакомиться с инструментарием. После регистрации кликните на кнопку -добавить ресурс- , вставьте адрес своего сайта, пройдите проверку прав. Несложные манипуляции описаны в инструкции. В правом верхнем углу выпадающее окно справка.

 Проверка сайта на адаптивность для новичка

 Проверка сайта на адаптивность для новичка

 

 Проверка сайта на адаптивность для новичка

 

 

 

 

 

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

Плагины для адаптивности сайтов на WordPress

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

1. wptouch. Легко настраиваемый плагин, скачать его можно, нажав здесь. Без проблем проходит тест Google для мобильных устройств. Дает возможность вашей не адаптивной версии шаблона не влиять на СЕО рейтинги сайта по этой причине.

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

2. wordpress-mobile-pack.  Скачивайте его по этой ссылке. Автор предостерегает о возможности возникновения конфликтов, в случае установленного на сайте плагина WP Super Cache, отвечающего за быстрое кеширование страниц. (Кэширование, это запоминание браузером пути по поисковым запросам для быстрого его повторения в случае аналогичного обращения).

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

3. jetpack. Скачивайте по ссылке. Бесплатный плагин, позволяющий ускорить загрузку страниц и изображений, дает статистику посещений, помогая, в свою очередь, получить больше трафика на ваш ресурс (сайт или блог). Кроме всего прочего надежная защита от хакерских атак. Пожалуй, самый популярный среди подобных ему инструментов. Поддерживается Automattic и WordPress. В нем присутствует нужная нам функция “Mobil Theme”.

Для ее использования нужно войти в меню настроек “Jetpack > Settings”. В качестве предостережения, — возможны конфликты с плагином Disqus, поэтому их соседство нежелательно.

Конфликт или несовместимость плагинов

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

Повторюсь, лучше всего это делать на резервном сайте, сделанном на под домене, а уже потом использовать на основном.

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

Проверка сайта на адаптивность для новичка

Проверка сайта на адаптивность для новичка

Проверка сайта на адаптивность для новичка

И в заключение

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

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

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

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

Заработок на партнерках, — реальный и быстрый заработок уже завтра!

Если статья Вам понравилась, не забудьте кликнуть по кнопкам социальных сетей и «твиттнуть» 

 


По этой теме:

Сабмит в закладки