Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

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

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

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

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

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

Да потому что по статистике 10-45% посещений приходится именно с мобильных телефонов.

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

В добавок к этому начиная с прошлого года (а точнее с 21.04.2015) компания-гигант Google внедрила специальную технологию под названием Mobile-Friendly Test, которая проверяет все сервисы на удобство использования на мобильных телефонах. Вот ссылка на нее: [urlspan]https://www.google.com/webmasters/tools/mobile-friendly/[/urlspan].

mobile friendly

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

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

  1. Тестирование скорости загрузки страниц с помощью приложения PageSpeed ([urlspan]https://developers.google.com/speed/pagespeed/insights/[/urlspan]);
  2. Тестирование через Mobile- Friendly Test (ссылка указана выше).

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

Платные и бесплатные способы адаптации веб-сайтов

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

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

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

Три способа адаптации своего сайта

Адаптивная верстка

Это один из лучших вариантов подгонки сайта под различные размеры дисплеев. Почему? По нескольким причинам:

  • это самый быстрый способ создать один веб-сервис под все устройства;
  • это самый простой вариант решения проблемы;
  • дизайн сайта будет одинаковым, а значит и легко узнаваемым для пользователей разных девайсов;
  • Не нужно использовать редиректы;
  • Подходит для блогов, форумов, сайтов-визиток, небольших интернет-магазинов, новостных сервисов и похожих приложений.
Реализуется такой подход достаточно легко. Для этого можно воспользоваться:
  • возможностями тега <meta> и указать в нем значение viewport с нужной шириной контента;
  • использовать механизмы таких css-фреймворков, как Bootstrap, Sceleton и др. Необходимо подключить их к проекту и реализовать сетки;
  • обратиться за помощью к css3 и его медиа-запросам @media. Подробно о таком способе верстки я писал в предыдущей статье, касающейся адаптивной верстки.

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


Еще один шаблон сервиса под смартфоны

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

Мобильная версия сайта

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

Стоит отметить, что для реализации такого подхода многие используют готовые CMS. К ним относятся WordPress, Joomla!, WPTouch и другие. Все они уже включают в себя специальные плагины, которые определяют тип устройств и проводят адаптацию всего веб-сервиса.

Преимущества:

  • Сайт работает намного быстрее, чем при адаптивной верстке;
  • Уменьшается количество ненужных элементов, скриптов и стилей;
  • Как и в прошлом способе, сайт доступен по основному адресу;
  • Подходит для новостных сервисов, объемных блогов и форумов, интернет-магазинов.

Но здесь стоит перечислить и недостатки:

  • Обратите внимание на возможности выбранного вами движка, ведь не все они реализуют принцип адаптации;
  • Данный подход не всегда корректно работает в CMS;
  • Дизайн сайта под смартфоны будет значительно отличаться от десктопного варианта.

Мобильный шаблон на поддомене

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

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

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

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

m.mySyte.com, mobile.myBlog.com и т.д.

В качестве примера можно привести сайт Rozetka.

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

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

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

Советы по оптимизации мобильных версий

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

  1. Чтобы размеры изображения подходили под все реализации сайта на разных устройствах, в img установите такое свойство, как max- width и задайте ему значение 100%. В этом случае при уменьшении сайта, например, через viewport, картинки всегда будут подгоняться под ширину экрана.
  2. Чтобы аналогичные действия происходили и с фоновым рисунком, стоит прописать вот такие стили: селектор {background: url (путь_к_картинке.png) ХХ% no-repeat; background-size: contain}. Благодаря contain фон будет сужаться и растягиваться в зависимости от размера экрана. Также, вместо него можно установить значение cover.
  3. Чтобы диалоговые окна и поля не вылезали за границы экрана или не уменьшались, установите для них max- width:100%.
  4. Для мобильных версий используйте стандартные шрифты. Это ускорит загрузку сайта.
  5. Не забывайте указывать word-wrap для переноса слишком длинных строк, иначе они «убегут» от пользователя за пределы экрана.

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

С уважением, Роман Чуешов


Прочитано: 43 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:
  • Александр

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

    30.11.2016 в 00:50
    • Роман

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

      30.11.2016 в 22:43