Адаптивный дизайн сайта для мобильных устройств

Дорогие посетители сайта GeoDum.ru!

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

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

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

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

Принципы адаптивного дизайна довольно подробно изложены в ряде руководств, которые нетрудно найти поиском в Интернете. Но я пользовался в основном одной статьей на сайте KtoNanovenkogo.ru Дмитрия Иванецку, который я периодически смотрю. Что и вам советую.

Актуальность перехода на новый дизайн была хорошо простимулирована Гуглом, который неделю назад разослал всем партнерам системы AdSense (которым и я являюсь около года) следующее письмо:

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

Проверка на оптимизацию

Что же фактически изменилось на сайте?

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

  • Сайт остался почти таким же, если не считать оформления левого сайдбара в таком же стиле, какой был и у правого сайдбара.

При просмотрах на мобильных устройствах с шириной экрана менее 1025 пикселей (например, iPad в любой ориентации и другие планшеты в портретной ориентации ):

  • В центре экрана остается только область основного содержания статей.
  • Левый и правый сайдбары уходят вниз и располагаются после текста статьи и связанных с ним модулей «Еще на ту же тему», «Поделитесь ссылкой» и рекламных модулей, при этом бывшие сайдбары растягиваются по ширине страницы на 90% и увеличивают шрифт на 20% для удобства чтения.

При просмотрах на мобильных устройствах с шириной экрана менее 760 пикселей дополнительно к этому:

  • Исключаются из просмотра нижние модули, носящие вспомогательную информацию.
  • Исключается из просмотра вспомогательный модуль "Поделитесь ссылкой".
  • Рисунки и фреймы с видеороликами в тексте статей при необходимости уменьшаются в размерах, оставаясь необрезанными по ширине.
  • Изменяется вид статического рисунка в шапке сайта (имеет меньшую ширину для вписывания в экран мобильника без обрезки).

При просмотрах на мобильных устройствах с шириной экрана менее 630 пикселей (большинство смартфонов в портретной ориентации) дополнительно к вышесказанному:

  • Исключаются из просмотра нижние модули, носящие вспомогательную информацию.
  • Частично удаляются рекламные блоки после текста статей (реклама мелким шрифтом от Trustlink).

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

Удачи вам, до новых встреч на страницах моего сайта.

Чтобы не пропустить ничего из публикуемых материалов, вы можете подписаться на одну из RSS лент: Все новости сайта, Новости раздела «Сказки Старого Юзера» или Новости раздела «Мир Андроида».

Чтобы быть в курсе новинок сайта, рекомендую подписаться на периодическую еженедельную почтовую рассылку «Сказки Старого Юзера» на портале Subscribe.ru.


Поделитесь ссылкой

Буду признателен, если добавите ссылку на эту страницу в социальные сети:

Поиск по сайту
Поиск от Яндекса
Рассылка

Информационный портал Subscribe.ru

Дорогие друзья!
Вы можете подписаться на рассылку материалов сайта GeoDum.ru через сервис рассылок информационного портала Subscribe.ru. Она называется, как и сайт, "Сказки старого юзера". В рассылке представляются анонсы наиболее интересных материалов из различных разделов. Обычная периодичность рассылки - раз в неделю (по вторникам).

ПОДРОБНЕЕ...

Заработок

Хотите заработать на своем сайте? Тогда зарегистрируйтесь на этих ресурсах по моим реферальским ссылкам:

  • Kwork - магазин услуг фрилансеров.
  • MegaIndex - бесплатный анализ сайта.
  • Advego - заработок написанием статей, уникальный контент для вебмастеров.
  • Miralinks - заработок на размещении статей.
  • Webartex - заработок на написании и размещении статей.
gototop