21:18 Адаптация сайта под мобильные устройства | |
| Наш подписчик Алексей Гончаров в комментарии к статье «Что выбрать: приложение, адаптивный сайт или мобильную версию?» предложил еще один вариант адаптации сайта под мобильные устройства – мобильные шаблоны. Он обещал сам написать статью на эту тему и действительно написал. А мы, убедившись в её актуальности, публикуем. В предыдущей статье речь шла о 3 различных способах оптимизировать сайт для мобильных пользователей: приложение, адаптивный сайт и мобильная версия. Сегодня рассмотрим еще один метод, который является продолжением идеи мобильной версии. Мобильные шаблоны Нашей основной задачей является демонстрация мобильной версии страницы, без замены ее URL-адреса. С точки зрения SEO такое продвижение весьма выгодно, так как страница будет отображаться одинаково высоко как в поиске с ПК, так и в мобильном поиске. Напомним, что компания Google ввела алгоритм Mobile-Friendly, который понижает позиции не дружественных к мобильным устройствам страниц в мобильном поиске. А с помощью метода, о котором поговорим сегодня, ваши позиции в мобильном поиске будут как минимум не ниже, а то и выше. В случае с «адаптивным дизайном» определение «мобильности» пользователя происходит в момент загрузки страницы, и если страница напичкана большим числом скриптов, картинок и т.п., то вы съедите огромное количество трафика и времени пользователя. В свою очередь это плохо скажется на его лояльности. Зачем ему загружать то, что показывают для посетителей ПК и чего он, вероятно, даже не увидит? Также это скажется на поведенческих факторах вашего сайта, т.к. при долгой загрузке страниц показатель отказов увеличивается, а глубина просмотра страниц уменьшается. Из всего вышесказанного следует вывод: надо определять «мобильность» пользователя в момент запроса. Мы создаем 2 шаблона для страницы: мобильный и шаблон для ПК. Далее мы ищем любое упоминание о «мобильности» пользователя в HTTP_USER_AGENT и, если мы нашли его, показать мобильный шаблон, если нет – шаблон для ПК. При данном подходе мы достигаем сразу нескольких важных преимуществ: один URL-адрес страницы, который гораздо проще продвигать; оптимизированные под мобильных пользователей и пользователей с ПК страницы. Просто и эффективно, не правда ли? Как это ни странно, данных метод легче и быстрее в реализации, чем адаптивность. Как искать упоминания о мобильности? Мобильные браузеры обычно по умолчанию передают информацию о своей «мобильности». Для этого мы создадим список выражений, которые используют мобильные браузеры, и будем искать совпадения с тем, что передал клиент в HTTP_USER_AGENT. Достаточно такого списка выражений: 'up.browser', 'up.link', 'mmp', 'symbian', 'smartphone', 'midp', 'wap', 'phone', 'windows ce', 'pda', 'mobile', 'mini', 'palm', 'netfront', 'opera mobi', 'iphone', 'android', 'xda', 'tablet', 'ipad', 'playbook' А как же планшеты? Страница для телефона может плохо смотреться на планшетах, поэтому можно добавить третий шаблон. Для определения с планшета можно воспользоваться следующим списком выражений (не забудьте убрать их из списка для телефона): 'tablet', 'ipad', 'playbook' Небольшие советы: Мобильные шаблоны обязательно делайте «резиновыми». В них же постарайтесь использовать адаптивность, чтобы оптимизировать страницы для портретного и альбомного просмотра. Что касается шаблона для ПК – выбор за вами! Проверяйте, удобно ли просматривать страницу на мобильных устройствах. Для этого можно воспользоваться специальным инструментом от Google. Для разделения имен шаблонов используйте следующую схему: страница.html – для ПК cтраница_m.html – для мобильного страница_t.html – для планшета (опционально) На этом все. Надеюсь, что данная статья поможет вам работать с мобильными пользователями, при этом оставаясь на вершине поиска. источник: http://1ps.ru/blog/dirs/adaptacziya-sajta-pod-mobilnyie-ustrojstva/ | |
|
| |
| Всего комментариев: 0 | |
