Как сделать телефонную версию сайта
Как сделать сайт действительно удобным для мобильных устройств
Наверняка каждый не раз сталкивался с тем, как иногда важно быстро найти с мобильного телефона удобный и понятный сайт с нужной информацией. Именно поэтому некоторое время назад мы начали отмечать в мобильной выдаче страницы, оптимизированные для мобильных устройств, меткой «Мобильная версия», а также отдавать им предпочтение при ранжировании.
На основе наиболее частых вопросов ко мне я составил вот такие рекомендации для тех, кто только адаптирует сайт под мобильные устройства, и для тех, кто уже является гуру в этой области.
1. Какие бывают мобильные сайты
Обычно сайты представляют для мобильных устройств одним из трех способов:
2. Несколько слов о создании сайта.
Для создания мобильной версии существует множество плагинов и сервисов, также многие конструкторы сразу предоставляют возможность сделать мобильный сайт. Но одной технологией мобилопригодный сайт часто не создать – важен и контент. При работе над содержимым мобильной версии сайта стоит размещать ту информацию, которая будет полезна именно для пользователей мобильного интернета. Она может немного отличаться или не полностью дублировать тексты полной версии – это нормально. Главное, чтобы идея и содержание страницы оставались прежними.
Совет. После создания мобильной версии откройте её с нескольких мобильных устройств и проверьте, удобно ли с ней работать. Обратите внимание, что у немалой части пользователей смартфоны с небольшим разрешением экрана, поэтому необходимо учесть и их интересы и сделать сайт комфортным для просмотра с большинства устройств.
3. Как проверить сайт на мобилопригодность
Для проверки сайта вы можете воспользоваться инструментом в бета версии сервиса Яндекс.Вебмастер «Проверка мобильных страниц».
Самыми распространенными ошибками, которые позволяет выявить инструмент в Яндекс.Вебмастере, являются наличие горизонтальной прокрутки, много мелкого текста, отсутствие или неверное расположение мета-тега «viewport», а также наличие невоспроизводимого видео.
4. Что делать, если обнаружены ошибки
Хочу поподробнее остановиться на тех замечаниях, которые вы можете увидеть в сервисе Яндекс.Вебмастер:
Горизонтальная прокрутка
Если при проверке сайта в Яндекс.Вебмастере выявлена горизонтальная прокрутка, возможно, ширина его страниц больше среднего. Как правило, большинство пользователей использует смартфоны c разрешением 320 px, вы можете ориентироваться на эту величину. Заметьте, некоторые браузеры могут автоматически сжимать страницу под размеры мобильного устройства, поэтому вы можете и не обнаружить прокрутки при просмотре сайта, чего может не произойти у посетителя вашего сайта, и он увидит полосу прокрутки. Вместе с этим следует проверить отступы, встроенные картинки и логотипы – возможно, именно из-за них меняется итоговая ширина той или иной страницы.
Много мелкого текста
Если на сайте обнаружено много мелкого текста, то это также может быть следствием большой ширины страницы. Даже если шрифт на вашем сайте составляет 12 px, а ширина страницы равна, к примеру, 720 px, то браузер, сжимая страницу до среднего значения, скорее всего, уменьшит его почти в 2 раза.
В данной ситуации необходимо либо увеличивать размер шрифта таким образом, чтобы после масштабирования он оставался читаемым, либо менять ширину страницы, приводя её к рекомендуемой.
Отсутствие мета-тега «viewport»
Тогда вам не нужно будет устанавливать фиксированную величину и удастся избежать горизонтальной прокрутки.
Наличие Flash-элементов
Если на вашем сайте размещены видеоролики, убедитесь, что они корректно воспроизводятся с мобильных устройств и имеют формат HTML5. К сожалению, форматы Flash, Silverlight и Applet большинство мобильных браузеров не воспринимает, поэтому старайтесь не использовать их.
Мне бы также хотелось рассказать вам подробнее об индексировании мобильной версии сайта на поддомене, но это будет немного позже, ждите новой записи. Чтобы не пропустить пост, вы можете подписаться с помощью кнопки «Подписка» вверху страницы.
Надеюсь, я смог прояснить ситуацию по ряду вопросов о мобильной версии сайта. Создавайте и пользуйтесь с удовольствием!
Подключение мобильной версии сайта
К разработке мобильной версии сайта можно подойти по-разному: создать отдельный стиль или полностью переработать дизайн и html-разметку. Но в обоих случаях важно определить, когда загружать мобильную версию сайта, а когда – компьютерную. Это можно сделать несколькими способами.
1. На стороне сервера
На основе анализа информации о браузере (строка User-agent), посылаемой серверу в http-запросе, либо подключать стиль для мобильной версии, либо перенаправлять пользователя на доменное имя, соответствующее мобильной версии сайта.
В случае, когда мобильная версия расположена на отдельном доменном имени, можно использовать файл meta.txt. В нем указываются точки входа для мобильной и компьютерной версий.
Пример meta.txt файла для сайта example.com (адрес файла в таком случае — example.com/meta.txt):
Точки входа для компьютерной и мобильной версий определяются в строчках pc и mobile соответственно.
2. На стороне клиента
а) Указывать атрибут media
link rel =»stylesheet» href =»site.css» media =»screen» />
link rel =»stylesheet» href =»mobile.css» media =»handheld» />
Значение «screen» соотвествует обычному компьютеру, «handheld» — это мобильное устройство.
б) Использовать запросы внутри атрибута media
Чаще всего стили загружаются в зависимости от ширины устройства:
link rel = «stylesheet» href = «mobile.css» media = «only screen and (max-device width:480px)» />
Вообще с помощью таких запросов можно много чего определить: ширину и высоту окна браузера или устройства, ориентацию (портретная или ландшафтная), разрешение и т.п.
Минус: не поддерживаются многими старыми устройствами.
в) Комбинирование методов
Так как оба вышеописанных способа не поддерживаются рядом устройств, умные люди придумали комбинировать их:
link rel = «stylesheet» href =»handheld.css» media =»handheld,only screen and (max-device-width:480px)» />
3. Выбор пользователя
Можно предоставить право выбора пользователю и ничего не определять, а просто сделать ссылку на мобильную версию сайта.
Заключение
Если мобильная версия сайта отличается от компьютерной только стилями, то подходят все вышеописанные варианты. Если же html-разметка для мобильной версии отличается от компьютерной, то 2 способ не является решением.
Полезные материалы по теме
Редакторский дайджест
Присылаем лучшие статьи раз в месяц
Скоро на этот адрес придет письмо. Подтвердите подписку, если всё в силе.
Похожие публикации
Анализ целесообразности разработки мобильной версии сайта
Серверный редирект на мобильную версию сайта
Life + В контакте + Facebook = бесплатные облегченные мобильные версии сайтов
Курсы
AdBlock похитил этот баннер, но баннеры не зубы — отрастут
Минуточку внимания
Комментарии 36
>новые браузеры появляются очень часто, соответственно пополнять список UserAgent придется постоянно;
можно по useragent’у
можно по useragent’у задать производителей мобильных устройств, это вполне достаточно
Noki|Eric|SAMS|Mini|Mobi|SymbOS|iPhone|HTC
однако нужно еще смотреть HTTP_ACCEPT, т.к. некоторые моб. баузеры могут не поддерживать теже jpg’и…
если мобильный броузер не поддерживает даже джпеги, то вся статья не про него.
на такие броузеры морочиться не стоит их осталось менее 1%
Mozilla/5.0 (Linux; U; Android 2.1-update1; ru-ru; HTC_Wildfire_A3333 Build/ERE27) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 *** application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5,application/youtube-client
вы хотите сказать, что современный аппарат с броузером А или B класса может не поддерживать jpg?
ну если оперу мобайл поставить, то поддерживает.
для меня самого это было открытием.
я уж молчу про wml, который в популярном iPhone не знают…
ну отсутствие вмл это уже нормально
по базе Атласа поддерживает.
по базе получается всего 52 модели
все древние
т.е. мои предположения верны
с воздуха
счас посмотрел на свою старую статью по классам мобильных броузеров.
Если предполагать что броузеры классов D и F могут не иметь поддержку jpg, то не более 10% на сайтах ориентированных на мобильную аудиторию.
Реально еще меньше, так как часть таких броузеров точно поддерживает jpg.
надо посмотреть есть ли данные по поддержке джпега в wurfl. Аж самому интересно.
точности не будет, да и не может быть. Как оценивать эту цифру?
Ведь она сильно зависит от направленности и аудитории сайта.
На сайте с приложениями для Айфона эта цифра окажется равной 0.
На сайтах которые указывал менее 10%, это сайты типа fank.ru, sotik.ru, siza.us. Ориентированы на мобильные. Поэтому 10% это максимально возможная цифра.
Судя по тем моделям которые я нашел в базе Atlas это все броузеры F класса. Можно конечно поставить логгирование, разработка под такие сайты моя специфика и я могу собрать статистику по 4-5 сайтам с хорошей посещаемостью.
Но не вижу смысла телодвижений. Нет разницы 5% броузеров или 1.12%.
Было бы интересно узнать, что вы об этом думаете
думаю, когда речь идет об определении типа устройства, то не стоит завязываться на js, потому что все же есть вероятность, что js не включен (хотя, конечно, с каждым годом все меньше).
на данный момент я больше склоняюсь к media queries: определяешь несколько контрольных точек и подключаешь для них соответствующие стили
хотя, конечно, с каждым годом все меньше
пожалуй, что с каждым днем )))
кстати, можно делать обратную проверку — то есть мобильная версия по умолчанию, а нормальная по «решению» JS. Тогда упрощенную версию получат не только владельцы маленьких экранов (в нашем контексте — мобильных устройств), но и параноики/пенсионеры/малоимущие* — все те, у кого js не включен, что тоже может оказаться полезным.
если я правильно понимаю media queries как подключение разных стилей… (может это нечто большее?? не курил пока внимательно и растолковывать не прошу — всему свое время — просто предупредил о слабой компетентности)… то я вижу проблему использования атрибута media вовсе не в том, что это не везде работает (нет ничего, что работает везде): имхо для по-настоящему мобильной версии не достаточно только переделки интерфейса — нужно оптимизировать по весу, использовать другой — более ограниченный набор элементов… то есть все же предлагать принципиально другую версию ресурса.
*извиняюсь у перечисленных граждан за кажущуюся интоллерантность
Руководство по созданию мобильной версии сайта
Мобильные версии сайтов позволяют определять тип устройства пользователя. Если устройство даёт ответ как мобильное, код сайта интерпретирует это и загружает именно адаптированную версии под экран с соответствующим разрешением.
Это позволяет пользователям легко пролистывать страницы без лишнего зума или нажатия крошечных кнопок и ссылок. Если таких удобств нет, то весьма вероятно, что пользователь быстро покинет сайт.
Мобильная версия сайта даёт возможность пользователям работать с несколькими версиями сайта — для десктопных и мобильных устройств. Это может быть связка из двух сайтов: только для мобильных, иногда с префиксом m., или только для десктопа. Чаще используют именно адаптивный подход — один и тот же URL с гибкими настройками фронтенда для удобного показа на разных экранах.
Верное универсальное решение отсутствует. Иногда лучше подходит концепция mobile-only с отдельным сайтом для мобильных, а в ряде случаев целесообразно делать общий сайт для всех устройств.
Как создать мобильную версию сайта
Самостоятельная разработка
Наилучший вариант — это создать самописную мобильную версию сайта с нуля, если у вас достаточно ресурсов, и проект в меру большой.
Разработка уникальной мобильной версии позволяет вносить тонкие изменения, недоступные при использовании CMS, а также конструкторов.
При отсутствии опыта или собственного штата разработчиков, обратитесь в digital агентство или веб-студию.
Когда разработка сайта сопряжена с продвижением, приоритетным выбором станет агентство, ведь сайты создаются не для галочки, а для роста прибыли. В дополнение к сайту агентство сможет разработать эффективный план продвижения в онлайне, благодаря чему мобильная сайта будет приносить деньги.
При необходимости реализации дополнительного функционала или внесения исправлений вы можете обращаться к разработчикам и внедрять любые новшества в рамках бюджета.
Требования к разработчикам — отдельный глубокий вопрос, и его не удастся раскрыть сжато. Вкратце лишь важно отметить, что не обязательно брать полиглотов, full-stack разработчиков — часто достаточно ограниченного круга компетенций. В частности, многие онлайн-магазины требуют разработчиков 1С, что является не столь распространенным, но ценным навыком.
Среди мощных и удобных CMS стоит сразу выделить WordPress и Webasyst.
Webasyst
Webasyst, справедливости ради, является не обычной CMS, а, скорее, платформой с широким спектром возможностей, среди которых собственная CMS. Тем не менее, если говорить конкретно о системах управления сайтами, то разработка Webasyst выделяется среди других.
Этот продукт позволяет строить нагруженные веб-сайты и интернет-магазины благодаря встроенным системам:
Это далеко не полный список.
WordPress
Чуть менее мощная система, но также предоставляющая серьёзные возможности и поддержку — WordPress. Это всемирно признанный продукт для управления информационными сайтами, блогами и не нагруженными интернет-магазинами.
В WordPress и Webasyst есть:
Если сайт размещён на wordpress.com, платформа автоматически предложит мобильную тему для сайта в зависимости от основной темы, которая уже установлена. Если вы пользуетесь другим хостингом, проверить свою тему и версию WordPress можно одним из несколькими способами.
Joomla
Если вы используете Joomla, проверять версию следует в панели администрирования, на странице информации о системе или с помощью файла /version.php, который обычно находится в /libraries/joomla/files.
Если версия Joomla не самая последняя из доступных, лучше обновить её, как и шаблон. Другой вариант — установить мобильное расширение, что сделает сайт мобильным без необходимости обновления версии.
Drupal
Чтобы перевести сайт на Drupal на новую тему, удобную для мобильных, изучите руководство по адаптивному веб-дизайну Drupal. Там можно найти список адаптивных тем и выбрать ту, которая применима к сайту.
Конструкторы сайтов
Эти сервисы предназначены для непрофессионалов и для тех проектов, для которых имеет мало смысла дорогостоящая разработка. Удобство состоит в возможности создать сайт силами одного человека.
Самые популярные и мощные конструкторы на российском рынке:
С их помощью буквально за несколько часов собирается целый сайт или прототип, по дизайну и оформлению не уступающий профессиональным дорогим ресурсам.
В конструкторах вы можете использовать простые и наглядные технологии:
Интеграции Calltouch
У конструкторов есть бесплатные тарифы, на которых простейший сайт собирается быстро и легко при наличии домена.
Хотя конструкторы сайтов предоставляют полный контроль над дизайном и процессом разработки без посторонней помощи, они также ограничивают возможности. Например, вы придётся полагаться на шаблоны, которые могут не содержать тех функций, которые нужны на сайте.
Что предусмотреть перед стартом разработки
Как только вы решили, каким образом создать мобильную версию сайта — с помощью агентства, на CMS или конструкторе, можно начинать процесс. Необходимо тщательно исследовать каждый вариант, чтобы принять лучшее решение по бюджету и удовлетворить запросы целевой аудитории.
Приступая к созданию мобильной версии сайта, соблюдайте следующие ключевые рекомендации:
Прежде чем запускать финальную мобильную версию сайта, обязательно протестируйте её. Важно предоставить посетителям сайта положительный опыт. Если они столкнутся с проблемами, то могут и не вернуться.
Тестирование мобильной версии
Для выбора подходящей версии шаблона в CMS, а также в конструкторе, стоит ознакомиться с примером её отображения — как правило, ссылка на готовый результат есть в описании тем.
Как только вы собрали мобильную версию и пришла пора её запускать, протестируйте её.
Существует целый список сервисов, которые служат для оценки скорости загрузки сайта и его адаптации к мобильным устройствам.
Эти сервисы предоставляют детальные сведения о том, какие проблемы с загрузкой были обнаружены, подробную статистику и рекомендации по устранению проблем.
Инструмент Mobile-Friendly Test требует только URL сайта, после чего он быстро анализирует его и предоставляет результат в течение нескольких секунд.
Если сайт по-прежнему не подходит для мобильных устройств, Mobile-Friendly покажет причину, а также предоставит полезную информацию обо всём, что необходимо исправить для оптимизации под мобильные устройства.
Полезные советы для мобильной версии сайта
Облегчите поиск информации для пользователей
Некоторые пользователи мобильных не против уделить время для поиска и изучения контента, как они это делают за компьютером. Но для кого-то скорость становится экстремально важна.
Организуйте мобильную версию под нужды пользователей, которые заходят туда с мобильных устройств. Что они ищут?
Сделайте элементы управления, навигацию максимально комфортными при использовании со смартфона. Вам следует точно знать, как люди работают с сайтом через смартфоны и планшеты.
Не пренебрегайте разделом FAQ — добавьте туда полезную информацию по использованию ресурса с разных устройств.
Сделайте большие кнопки, формы и элементы навигации
Достаточно просто кликнуть на маленькую кнопку курсором мыши. Но если загрузить сайт на телефоне и попытаться нажать кнопку, у вас получится далеко не сразу. Тем более, возрастает риск неверного нажатия при расположении двух и более небольших кнопок вблизи друг от друга.
Лучший способ избавить посетителей от разочарования — сделать действительно удобные крупные элементы управления. Рассчитайте параметры отображения с тем, чтобы для любого разрешения кнопки и формы было удобно использовать.
Используйте шрифты большего кегля
Читать с экрана телефона тяжело — особенно когда текст еле удаётся разобрать из-за размера. Проведите замеры на разных устройствах, чтобы точно знать, для какого из экранов подходит тот или иной размер шрифта.
Сжимайте изображения и CSS
Говоря о скорости загрузки сайта: она критически значима для пользователей смартфонов. Если процесс затягивается даже на 2 секунды, многие пользователи просто отказываются от посещения страницы.
Используйте средства сжатия файлов перед загрузкой на сайт, чтобы оптимизировать страницы.
Сквозная аналитика
Мобильная версия или адаптив?
Создание отдельного мобильного сайта означает размещение мобильной версии на отдельных URL-адресах, которые могут быть мобильным поддоменом m.primer.com, директорией основного сайта primer.com/mobile или совершенно отдельным мобильным доменом primer.mobi.
При использовании отдельного мобильного сайта в любом случае придётся включать элементы адаптивного дизайна. Это позволит страницам адаптироваться к небольшим различиям в размерах экрана.
Создание отдельного мобильного сайта определённо имеет свои плюсы и минусы. Он является дополнением к основному сайту и оптимизирован для использования на ходу. Он способен помочь с органическим продвижением, так как чаще появляется при поиске на мобильных устройствах, чем сайт на обычном домене. Он также гораздо легко и поэтому быстрее.
С точки зрения мобильных пользователей, безусловно, предпочтителен отдельный мобильный сайт. Мобильные пользователи автоматически перенаправляются на мобильный URL, но пользователи планшетов заходят на десктоп, поэтому контент не одинаков для всех устройств.
Однако с точки зрения бизнеса, вы получите два отдельных сайта, которые надо обслуживать. Это занимает много времени, не говоря уже о деньгах. Также придётся заняться SEO для нового сайта с нуля.
Ещё одна очень важная вещь — у вас будет дублированный контент, за который Google может наказать. Тем не менее, эту проблему можно обойти средствами веб-мастера. Сайт не будет отображаться как дублирующий — вместо этого два URL будут рассматриваться как имеющие эквивалентное содержание.
Многие решают использовать мобильный подход. По сути, это означает, что сначала нужно создать сайт для мобильных устройств, а затем — десктоп. Это, безусловно, лучший подход, потому что, если удастся заставить сайт хорошо работать на мобильных устройствах, он будет работать ещё лучше на десктопе.
Однако, если вы не создаёте сайт с нуля и хотите просто оптимизировать для мобильных существующий, можете добавить мобильную версию по другому URL-адресу или изменить дизайн, чтобы макет адаптировался под каждое устройство.
Отзывчивый дизайн
Отзывчивый или адаптивный дизайн означает настройку существующего сайта таким образом, чтобы макет изменялся, автоматически адаптировался к различным мобильным устройствам.
Таким образом, независимо от того, на каком устройстве сайт просматривается, макет автоматически подстраивается под размер экрана и разрешение устройства, что значительно повышает удобство использования. Более того, адаптивный веб-дизайн настоятельно рекомендован Google.
Отзывчивый сайт обеспечивает быструю загрузку страниц, удобную навигацию и общую оптимизацию сайта, где пользователи могут быстро и легко найти то, что ищут.