Адаптивный дизайн сайта и другие улучшения
  • Главная
  • Карта сайта
  • Официальные сайты
  • Подписаться на сайт

adaptivnyiy dizayn

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

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

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


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

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

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

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

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

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

1

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

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

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

2

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

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

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

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

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

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

6

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

5

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

4

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

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

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

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

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

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

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

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

7

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

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

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

9

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

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

3

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

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

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

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

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

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

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

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

Понравилась статья? Поделитесь ею с друзьями в социальных сетях...

Автор статьи не программист! Все ссылки взяты с официальных сайтов производителей этих программ! Любые претензии - к ним!

Подпишитесь на обновление сайта по RSS! Вы первыми узнаете о новой статье!

Впишите Ваш е-мейл в поле:

Отзыва 25
  • (ерж

    09.07.2015 в 5:15

    Решил отказаться от больших картинок в боковых колонках сайта (сайдбарах). Они занимали много места, да и выглядели как-то по-детски, несерьёзно.
    —————————————
    Наконец-то! Хоть и с опозданием, но то, о чём я пару раз говорил ранее, и к моим замечаниям, хочу заметить, не хотели прислушиваться, когда предлагал на сайте изменить его стиль. что он на сайте какой-то детский, мультяшный вид сайта и ещё про мальчика с цветком (надеюсь, помните?).

    ответить
    • Svengali

      09.07.2015 в 5:59

      Картинки сильно способствовали переходам по сайту (кажется я Вам отвечал, не помню unknw ) и отказаться от них, ничего в замен не придумав, было нельзя.
      Мальчик с цветком всем нравится — многие благодарят за него. Давайте выставим мальчика этого на голосование rofl ? Пока пишите в комментариях, а позже сделаю опрос на стороннем сервисе.

      ответить
  • Олег

    09.07.2015 в 8:35

    А мне нравился и тот стиль,и новый.
    Главное-информативность ok .

    ответить
  • Павел

    09.07.2015 в 19:09

    шрифт хороший. всё видно и всё как ка то на местах. мальчик мне лично не мешает.

    ответить
  • Глафира

    09.07.2015 в 21:18

    Мне тоже нравился прежний сайт, но оформление нового гораздо лучше. Действительно хочется задержатся на сайте. Сами мини-картинки приглашают открыть и просмотреть страницы. Работа проделана огромная и, как я понимаю, очень кропотливая. Спасибо за труд!
    Мальчика оставте, пусть будет немного озорства! good

    ответить
  • владимир

    09.07.2015 в 21:52

    Однозначно стало лучше

    ответить
  • ЛюдоМилка

    09.07.2015 в 22:07

    good good good

    ответить
  • Nika

    09.07.2015 в 22:14

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

    ответить
    • Svengali

      09.07.2015 в 22:21

      Процесс ещё не завершён — не очень нравится как выглядит сайт на больших разрешениях (1920*1080). Скорее всего придётся сделать отдельный стиль для таких мониторов — это уже мелочи, часик работы don-t_mention .
      Упс, нет ручки при наведении на «Отправить» — поправлю.

      ответить
  • alisa08

    09.07.2015 в 22:18

    «Мальчик с цветком» меня всегда смешит! Пусть живёт! laugh

    ответить
  • vitalijus

    10.07.2015 в 1:32

    да тежёлый труд когда надо делать всё самому методом проб и ошибок,,,знаю по себе,3 месеца назад начал делать сайт под себя так бывало что застрянешь на какой нибудь фигне на недели две или больше, сейчас тоже застрял на фигне вот уже 1,5 недели мучаюсь smile

    ответить
  • Сергей Медведев

    10.07.2015 в 4:50

    Не все так просто, как кажется, с этой адаптивностью! У меня тоже адаптивный дизайн и в том же сервисе показывает, как будет выглядеть на разных устройствах, но Google Developers отказывается признавать его годным для мобильных устройств! Как и ваш — http://prntscr.com/7qwwba
    Кроме того я рекомендовал бы обратить внимание на сервис PageSpeed Insights, он показывает скорость загрузки сайта…
    И я все делал сам, своими ручками, как говорится, но теперь понимаю, что без спецов тут не обойтись smile
    Не подскажете, какой у вас плагин стоит для ракеты (в начало страницы)?

    ответить
    • Svengali

      10.07.2015 в 10:48

      На самом деле мне осталось убрать плагин фиксированных колонок и сделать их кодом (скрипт кинуть в подвал) — тогда и пройду проверку полностью. Вот — http://prntscr.com/7qzenv
      Ещё рекомендую использовать https://gtmetrix.com/ — отличный сервис для сайтовладельцев. После «спецов» выгреб море мусора из кода, когда набрался знаний. Кто Вам мешает стать спецом? pardon .
      Ракета выводится кодом, без плагина.

      ответить
    • Svengali

      10.07.2015 в 14:04

      Огромное спасибо за то, что обратили внимание на проверку сайта в Google — исправил, теперь прохожу проверку. Вот Вам и сам себе спец pardon . http://prntscr.com/7r10eq

      ответить
      • Аноним

        10.07.2015 в 14:14

        Ну вот теперь все отлично, поздравляю! smile

        ответить
  • Дядя Ларс

    10.07.2015 в 9:41

    А мне нравится! Так держать!

    ответить
  • Марат

    10.07.2015 в 11:45

    Мне нравится Ваш дизайн. Тоже хочу сменить шаблон у себя на блоге, да все руки не доходят.

    ответить
  • Svengali

    12.07.2015 в 0:13

    Боковые колонки зафиксировал без плагина! (:dancegsmile Очередная победа над кодом! Это сильно повлияло на скорость сайта в положительную сторону. Вес любой страницы уменьшился на 300кб.

    ответить
  • Вика

    12.07.2015 в 21:47

    меня и тот дизайн устраивал), а мальчика оставьте)

    ответить
  • Ольга

    27.07.2015 в 6:57

    все нравится! очень полезный сайт, спасибо огроменное!!!

    ответить
  • ChourS

    28.07.2015 в 14:26

    Сергей, спасибо за ваш буквально ручной труд и такое внимание к каждому читателю! Приветствую увеличение ширины под текст статьи, делаю иногда скриншоты статей(на память), длина картинок бывает 10-13 тыс. точек, в связи с чем вопрос: нельзя ли сделать раздел коментариев как выпадающий, не присутствующий постоянно, а по запросу? Успехов, остаюсь вашим читателем, хотя давно пересел на linux.

    ответить
    • Svengali

      28.07.2015 в 14:33

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

      ответить
  • Olga

    21.08.2015 в 12:27

    Мне очень нравятся преобразования сайта! (:girl_byesmile
    Главное — текст статьи теперь на всю страничку!
    Для своего сайта я даже искала шаблон с большим шрифтом и шириной текста на всё поле сайта (до сайдбара). Нашла, но вот комментарии, которые растягиваются на всё поле страницы сайта, мне не нравятся! Куда нужно залесть, в какие коды Шаблонов, чтобы уменьшить ширину поля для комментариев? curtsey Подскажите, пожалуйста.

    ответить
    • Svengali

      22.08.2015 в 14:51

      В стили «нужно залесть». А вообще, по сайтостроению и кодингу я не консультирую, прошу извинить — это не тема сайта.

      ответить
  • minatare

    05.10.2015 в 18:28

    good сильно…

    ответить
Оставить комментарий

Ваше имя

E-mail (будет скрыт)

Комментарий*:

Подписаться, не комментируя