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

Fima Korolev

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

Всем привет! С каждым днем становится все больше людей, которые для выхода в сеть используют компактные мобильные устройства – смартфоны и планшетные компьютеры. Согласно древней статистике сервиса LiveInternet, доля трафика с мобильных операционных систем в Рунете превысила в 2012 году 10 %. Заметный кусок рынка!
Эту тенденцию следует учитывать при создании сайтов. Большинство интернет-ресурсов, спроектированных в расчете на средние и большие мониторы, не оптимизированы под вывод на малые экраны гаджетов. Изменение конъюнктуры диктует потребность в новом технологическом решении. А оно существует, и давно. Я имею в виду создание мобильных версий сайтов и мобильных приложений либо просто – адаптивного дизайна сайта. Принципиальных подходов здесь три:

  • можно создавать отдельный мобильный сайт на отдельной структуре (домене)
  • можно подавать динамически в зависимости от агента пользователя (user agent) другой контент на том же сайте
  • можно вообще создать один контент на одной странице, на одном сайте, который просто видоизменяется в зависимости от того, с какого размера экрана устройства пришёл пользователь (адаптивные макеты страниц)

Отличительные черты мобильной версии сайта

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

  1. Исполнение верстки ориентировано на экран с небольшим разрешением. Это обеспечивает удобный просмотр сайта с мобильного устройства.
  2. Упрощенный код. В первую очередь код лишен скриптов, которые требуют боль-ших процессорных мощностей (например, отказ от Flash, который не поддерживают неко-торые мобильные операционные системы).
  3. Меньшее количество страниц. Чем «легче» сайт, тем быстрее будет выполнена его загрузка на устройство. Это особенно актуально для глухих уголков нашей страны, так как пока не вся Россия – зона покрытия высокоскоростного мобильного Интернета. Кроме того, многие пользователи ведут строгий учет потребляемого ими трафика.
  4. Удобная реализация ввода данных. В отсутствие мышки и при наличии одной лишь сенсорной панели экрана крайне важно, как реализована возможность ввода данных
Рекомендую к прочтению:  HTML таблица

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

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

  • Тестировщик W3C mobileOK Checker– широко распространенный инструмент. Нужно лишь ввести адрес сайта и получить отчет об ошибках на нем.
  • PageSpeed Insight – сервис от Google. В начале своего существования он позволял протестировать скорость загрузки сайта на декстопном устройстве, потом появилась возможность тестировать тоже самое на мобильных устройствах.
  • MobiReady– аналогичный сервис. Эффективное и бесплатное тестирование.
  • TestiPhone– средство для работы проверки сайта на iPhone. Для другого, не менее популярного «яблочного» гаджета iPad также реализована возможность протестировать сайт с помощью сервиса iPad Peek. Оба инструмента позволяют увидеть, как будет выглядеть страница сайта на экране устройства.

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


-->

30 комментариев »

  1. Maksim:

    Не профессионалу легче всего изначально брать шаблон заточенный под мобильную версию. Сейчас со смартфонов приходит до половины посетителей и игнорировать это непростительно.

  2. Larinov:

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

  3. Спасибо, попробовал проверить у себя, столько ошибок оказалось, жуть

  4. Михаил:

    Мобильная версия конечно нужна, но только в том случае если верстка сайта не резиновая и сайт “тяжелый”

  5. Валентин:

    вот у меня конкретный вопрос
    есть наш сайт – _http://im-ho.com.ua/
    как считаете, насколько он юзерабельный с мобильных устройств?

    • Александр:

      Вам же дали 4 ссылки на анализаторы, вот и проверьте :) Или в гугловскую панель Вебмастера можно добавить, обо всех ошибках узнаете после сканирования

  6. Женя:

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

  7. Ольга:

    Всё роюсь, читаю статьи и отзывы и никак не могу решить делать мобильную версию сайта или не делать… Понимаю что мобильная версия – это есть хорошо, так как многие сейчас выходят в интернет с мобильника или планшета, но с другой стороны, сама не люблю мобильные версии… Тем более сама я мобильную версию не сделаю, надо искать спеца…гемор всё это!

  8. Viktor:

    Я много ешо не знал) но тепер буду иметь на уме..буду пробывать делать сайт и для телефоного формата))но не факт что сразу все выйдет

    • Denis:

      Сразу мало у кого получится. Как и простой сайт, так и мобильная версия.

  9. КАЗАК:

    В гугльском вебмастере появился даже такой показатель сайта – “Удобство просмотра на мобильных устройствах”. Но конечно, тупая машина вряд ли способна автоматически это удобство оценить. лучше самому посмотреть. Посему – спасибо автору за список сервисов!

  10. Роман Кияшко:

    Согласен предыдущим комментом-канитель немалая!Трудно шрифты подобрать,размер шрифта,размеры инпутов и т.д.

  11. romashelkovskij:

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

  12. Medok:

    Зашла на свой сайт с мобильного. И поняла, зачем нужны мобильные версии. Очень неудобно пользоваться, мелкие надписи и т.д. На большом экране все отлично, а на маленьком… Короче, буду просить бюджет на мобильную версию.

  13. multed:

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

  14. Мария:

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

  15. Дмитрий:

    Мобильные версии сайтов – прошлый век, сейчас же предпочтительнее адаптивность. Из-за мобильных версий могут возникать дубликаты страниц, что скажется на СЕО сайта. Так же продвигать 2 сайта сложнее. имхо

    • Дровосек:

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

  16. Степан:

    Я как-то с мобильными версиями не заморачивался. Обычно сразу выбираю тему оформления для движка с возможностью адаптации для мобильника и планшета.

  17. Роман:

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

  18. Lena:

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

    • Кирилл Топольян:

      Потому что слишком тяжелые для мобильных устройств и мобильного интернета, нет?

  19. Роман Кияшко:

    Спасибо за статью.Очень полезная информация и ссылки.Надо обязательно учиться адаптивной вёрстке.
    Роман Кияшко,администратор сайта _http://www.carentauto.ru

  20. Начинающий:

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

  21. Сергей:

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

    • Андрей:

      Ну, это смотря с чего в интернет выходите =) С телефона или планшета гораздо удобнее просматривать мобильные версии сайта

      • Валентина:

        Я терпеть не могу мобильные версии. Они какие-то “урезанные”, если так можно выразиться. Сайт становится менее функциональным…
        Постоянно пользуюсь полными версиями сайтов. Если что-то мелковато, на сенсорном экране все легко увеличивается.
        А редирект на мобильные- раздражает

  22. Илья:

    Сейчас как раз хочу запустить мобильную версию одного из своих сайтов, все эти ссылочки будут мне только в помощь! Огромное спасибо за инфу!

  23. eugen:

    Спасибо за полезные ссылки.

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Что-то типа КАПЧИ :) *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">