8 (495) 215-53-73

В Москве

(048) 737-5-736

В Одессе


Главная страница Блог Технические аспекты 3 способа быстро адаптировать сайт под мобильные устройства

Блог SiteClinic

3 способа быстро адаптировать сайт под мобильные устройства

Google объявил, что с 21 апреля в поисковый алгоритм будет включен фактор дружественности сайта к мобильным устройствам. Повлияет это нововведение на основную выдачу Google или только на результаты мобильного поиска, будет видно позднее.

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

Оно мне надо?

Ответ на этот вопрос можно найти, проверив, как ваш сайт отображается в следующих сервисах тестирования Google:

Если вы видите подобное сообщение  статья для вас:

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

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

Как реализовать?

Можно смело брать один из CSS-фреймворков (bootstrap, responsivegridsystem, Sceleton и пр.) и адаптировать существующий дизайн. Либо используйте CSS3 Media Queries.

Например, если использовать фреймворк bootstrap, то вам понадобится, вкратце:

  1. прописать view-port;
  2. подключить файлы фреймворка;
  3. добавить в разметку классы сетки bootstrap.

Или же в таблице стилей выделить через медиа-запросы (CSS3 Media Queries) несколько разрешений и задать оптимальные размеры элементов страницы, например:

@media screen and (max-width: 1280px) { div.contentblock {width: 1200px;} } 
@media screen and (max-width: 1140px) { div.contentblock {width: 1024px;} } 
@media screen and (max-width: 992px) { div. contentblock {width: 970px;} } 

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

Плюсы данного метода: быстрая реализация для перечисленных типов сайтов.

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

Что мы получим?

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

И рассмотрим пример. Меню для устройств с экраном более 768px выглядит так:

А для экранов менее 768px выглядит так (в свернутом виде):

И так, при клике на иконку в правом углу (в развернутом виде):

Отдельный шаблон для мобильных устройств на основном домене

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

Как реализовать?

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

Отдельно стоит упомянуть о CMS. Если ваш сайт на WordPress, то о вас уже позаботились, и можно обойтись установкой плагинов для адаптации сайтов под мобильные устройства. 

Среди них: WPTouch, WordPress Mobile Pack, WP Mobile Detector и т. д. Все эти плагины имеют несколько тем оформления и дополнительные полезные фишки вроде сбора статистики по мобильным пользователям. 

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

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

Минусы: не для всех CMS есть такие плагины, да и не всегда они корректно работают. Бывает, что сайт хорошо отображается на моб.устройствах, но при этом по скорости не лучше, а даже хуже, чем его полная версия. Стоит отметить, что иногда бывают баги в определении мобильного устройства, если это какой-то редкий телефон, и в этом случае на таком устройстве будет отображена полная версия сайта. 

Что мы получим?

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

Например, вот так сайт выглядит на ПК:

А вот так выглядит этот же сайт на мобильном:

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

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

Как реализовать?

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

Немного подробнее о реализации: создается поддомен, на нем такой же движок, как и на основном домене, но база данных используется одна на оба сайта (чтобы в случае внесения каких-либо изменений, не пришлось их добавлять дважды). При заходе с мобильного устройства происходит перенаправление пользователя на поддомен. В качестве имени поддомена обычно используют варианты: m.sitemane.com, mobile.sitename.com, pda.sitename.com и пр.

Примечание (спасибо читателям за вопрос): Чтобы обезопасить себя от проблем с дублированием контента, ознакомьтесь с рекомендациями Google и Яндекс.

И снова хорошая новость для владельцев сайтов на WordPress – есть плагины, которые создают мобильную версию вашего сайта на поддомене, например, WP Mobile Edition.

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

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

Что мы получим?

Дополнительный адрес сайта на поддомене ”m.” с отличным от основного домена дизайном, упрощенным. В сети примеров такой реализации полно, вот, например, известный всем сайт:

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

Оцените статью: 
1 Star2 Stars3 Stars4 Stars5 Stars (Голосов: 7. Рейтинг: 5,00 из 5)

Автор: Анна Себова, PHP Developer

a.sebova@siteclinic.ru

Google+

Наверх
  • Андрей

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

  • Яндекс говорит, что санкций за дублирование такого контента не предусмотрено. Ответ представителя Яндекса на ваш вопрос есть тут.

    Google также считает такое дублирование контента невредоносным, но иногда рекомендует использовать теги canonical и alternate.

  • Валерий

    Гугл дает четкие рекомендации, чего именно ему не хватает, чтобы считать сайт адаптированным к мобильным устройствам, у меня например: "не настроена область просмотра". А как Вы думаете, если просто прописать view port в коде, это Гугла удовлетворит?  (Адаптивную всерсию буду делать, но на это нужно время)

    • Валерий, к сожалению, нет. Это гугл не удовлетворит. Да и вас тоже, верстка скорее всего поплывет (если она не табличная), процент "удобства для пользователей" будет ниже такого, чтоб страница считалась пригодной для просмотра на моб.устройствах.  Вы можете попробовать на одной странице своего сайта ( какой-нибудь внутренней) установить ей view port и проверить в сервисе гугла.

  • Dmitry

    bootstrap это какая-то готовая штука, что сразу переделывает меню на сендвич и остальные стили? не понял.. поклацал

    • Анна Себова

      Для того, чтобы на сайте меню начало именно так себя вести нужно его соответствующе сверстать. Т е нужно подключить bootstrap.css,bootstrap.js и вставить в шаблон вашего сайта (в том месте, где у вас фомируется меню) html-код вроде такого:  http://getbootstrap.com/components/#changing-the-collapsed-mobile-navbar-breakpoint  Вот тогда меню и будет себя вести, как в примере по ссылке (попробуйте поиграться с шириной окна браузера).

      • Dmitry

        угум.. будем копать, спс)

  • Витал

    PHP Developer обучает верстке, интересно. Чувствую, скоро сишники будут выдавать экспертное мнение по вопросам дизайна и юзабилити

    • Не обучаю, но есть опыт, так почему бы им не поделиться, тем более, что он весьма удачный. 

  • Алексей

    Время доброе.

    Вопрос по тегам  rel="alternate" и rel="canonical"

    Гугл рекомендует их прописывать на обычной и мобильной версии. 

    Проставлять ссылки с этими тегами на все страницы или достаточно главной?

    Если на все, то непонятно как это сделать, к примеру, в WP?

    Спасибо заранее!

    • Если мы говорим о случае, когда у вас домен и поддомен для мобильной версии, то в шаблоне основного домена сделайте canonical = адрес страницы на домене и так же в шаблоне на поддомене сделать ссылку на страницу домена. Что касается alternate, то для поддомена он будет равен адресу на странице домена, а для домена = адресу страницы на поддомене. А как это реализовать — создать функцию в function.php, которую потом можно вызывать в header.php либо дописывать вывод данных тегов в wp_head(). В шаблонах как домена, так и поддомена должна быть такая функция.

    • Вот приведу пример, чтоб было немного понятнее, что вы должны будете получить.
      Например:  mysite.ru — домен,  m.mysite.ru — поддомен с моб. версией.
      В mysite.ru страница  mysite.ru/contacts/
      <link rel="alternate" href="http://m.mysite.ru/contacts/ " >
      <link rel="canonical" href="http://mysite.ru/contacts/ " >
      А на m.mysite.ru так:
      в mysite.ru страница  m.mysite.ru/contacts/
      <link rel="alternate" href="http://mysite.ru/contacts/ " >
      <link rel="canonical" href="http://mysite.ru/contacts/ " >

      • Алексей

        Спасибо большое.

        Может кому пригодиться… в хедер вставляем 

        <link rel="canonical" href="http://site.ru <?php echo htmlspecialchars($_SERVER["REQUEST_URI"]); ?> " >
        <link rel="alternate" href="http://site.ru <?php echo htmlspecialchars($_SERVER["REQUEST_URI"]); ?> " >

        и страница ссылается сама на себя.

        • Пожалуйста.
          Только в вашем случае нужно уточнить, что этот код вставляется в хедер шаблона мобильной версии.

          • Алексей

            Еще раз здрасте.

            Подскажите, для Яндекса… если отдельный поддомен, то достаточно m.site.ru или нужно указание на «мобильность» контента ? И  как определить какой указатель Mobile 1.0, 1.1 или 1.2 ?

            Спасибо заранее!

             

  • Анна Себова

    Здравствуйте, Алексей!

    В статье сылка на мнение Яндекса на эту тему в целом и там же, в справке Яндекса есть рекомендации http://help.yandex.ru/webmaster/recommendations/mobile-site.xml. 
    Цитата: «Если вы хотите, чтобы весь поддомен был предназначен только для мобильного поиска, следует в его адрес включить стандартные обозначения «мобильности» (например, wap.site.ru, pda.site.ru, m.site.ru)»
    Таким образом, того, что моб.версия сайта на поддомене, достаточно для Яндекса.