Адаптивный дизайн сайта и другие улучшения

Сайт, на котором Вы сейчас находитесь, за последние две недели очень изменился. Самое главное улучшение — он получил адаптивный дизайн (его ещё называют резиновым). Просматривать страницы сайта стало гораздо удобнее — они подстраиваются автоматически под любой монитор любого устройства (смартфоны, планшеты, нетбуки…).

Кроме «резинового» дизайна было произведено очень много крупных (и не очень) изменений и улучшений (чистка и оптимизация кода, удаление нескольких плагинов и элементов сайта…) — всё это сильно отразилось (в лучшую сторону) на скорость загрузки страниц и поведении читателей на сайте.

В этой статье речь пойдёт о всех улучшениях на сайте — думаю, что многим будет интересно (особенно постоянным читателям). Заодно расскажу о специальном онлайн сервисе для проверки адаптивности сайтов.

Предыстория улучшений

Открою Вам тайну — периодически у меня бывают приступы особенной любви к своему сайту . Два последних оказали отрицательный и губительный эффект. Дело в том, что два года подряд, в январе, я вносил такие изменения в код сайта, после которых посещаемость за сутки падала на несколько тысяч читателей (~ на 3-4тыс.!!! ) и восстанавливалась (после отката изменений) несколько месяцев .

Но на ошибках учатся, верно? В этот раз я очень аккуратно (надеюсь ) подошёл к улучшениям. При этом всего пару раз «убил» сайт полностью . Давайте посмотрим, что я накрутил такого хорошего в сайте за две недели.

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

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

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

Я даже хотел нанять специалиста для этого, но они такие цены ломят, что я всё-таки решился сделать это самостоятельно .

«Всего» за две ночи (тишина, спокойствие и максимальная концентрация внимания) я изменил размеры всех блоков и элементов сайта с фиксированных пикселей на проценты. Шрифты тоже были преобразованы из «px» в «em» и стали «резиновыми» .

Теперь сайт растягивается на 85% от размера Вашего окна браузера…

Соответственно и зона с основным контентом (тело статей) увеличилась и перестала быть узкой полоской в центре сайта .

Особое внимание уделил владельцам стареньких ЭЛТ-мониторов с разрешением 1024×768 (это 500-600 читателей за сутки) — исключительно для них убрал поля по краям сайта и включил отображение на 100% (вместо 85%) от размера окна, чтоб он влезал в их мониторы полностью и не приходилось двигать ползунок внизу окна браузера.

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

Сервис для проверки адаптивности

Чтоб проверить адаптивность любого сайта в сети Интернет (а не только моего) достаточно перейти по этой ссылке на специальный сервис и вставив адрес проверяемого ресурса в поле, что находится в центре окна, кликнуть на «Go».

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

Можно указать своё разрешение экрана…

Чтоб включить скроллинг  — нажмите эту кнопочку…

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

Отключение опросов

Изучив данные специального сервиса для владельцев сайтов (Яндекс.Метрика) я был поражён количеством читателей, которые пользуются страницей опросов на сайте — за месяц на неё перешло целых 7 человек .

Плагин опросов является очень «тяжёлым» дополнением к сайту. Он генерирует (постоянно) кучу запросов к серверу, а при каждой загрузке страницы отрабатывает свой нелёгкий и большой скрипт — это всё для семи человек в месяц ?

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

Блок похожих статей

В конце каждой статьи на сайте есть блок похожих статей. Раньше было два блока — визуальный (с картинками) и просто с текстом. Последний покинул сайт из-за создания лишней нагрузки на сервер и малоинформативности.

Новый блок похожих статей получил рамочки и стал генерироваться лёгким кодом вместо «тяжёлого» плагина, который был отправлен в лес (собирать ягоды), следом за плагином опросов …

Комментарии на сайте

Комментарии к статьям наконец-то сдвинулись левее и стали занимать всю ширину блока — бился над этим несколько лет . Оказалось, что достаточно придать одному значению в коде отрицательное значение .

Ещё заметил, что при наведении курсора на кнопочку «Ответить» не появлялась ручка, как при наведении на любую ссылку — исправил…

Навигация по сайту

Решил отказаться от больших картинок в боковых колонках сайта (сайдбарах). Они занимали много места, да и выглядели как-то по-детски, несерьёзно. Вместо этого разместил в правой колонке блок меню с такими же маленькими ярлычками, как в левой колонке. Но если слева перечислены категории сайта, то справа — метки…

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

Другие улучшения

Ещё я сильно почистил код — удалил несколько ненужных функций, которые валялись на сайте несколько лет незадействованные. С помощью специального дополнения в браузер отыскал и уничтожил неиспользуемые стили — файл стилей сократился более чем в два раза (сайтовладельцы меня поймут).

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

Может ещё что-то изменил на сайте, но уже и не вспомню что .

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

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

С уважением, Сергей Трофимов (не певец)