Главная » Статьи » Разработка сайтов » Разработка сайта

Разработка мобильной версии сайта

Разработка мобильной версии сайта

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

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

Одно из главных достоинств мобверсии заключается в том, что она не требует кардинально различных между собой исполнений под разные операционные системы и платформы; учить ещё один язык программирования, чтобы сделать ваш сайт доступным на iPhone, а не только на Android, ни кодеру, ни веб-мастеру не придётся.

С приложениями ровным счётом наоборот. Вместе с тем частенько в разработке такой версии сайта хватает подводных камней: как только не приходится изощряться, чтобы одна страница выглядела приемлемо на самых разных телефонах.

На текущий момент мобильные версии делаются по одному из трёх принципов.

  • Адаптивный дизайн. Ещё несколько лет назад эта методика отсутствовала как класс, но чем дальше, тем более она популярна. И кстати, всячески пропагандируется Google. Суть её в том, что в зависимости от того, на каком устройстве осуществляется просмотр, комбинируются и видоизменяются элементы вёрстки с подстройкой под ширину окна браузера.

    В адаптивном, или «отзывчивом», веб-дизайне принят также метод mobile first – дословно «сперва [под] мобильный»: сайт изначально проектируется с акцентом на том, что он будет выводиться на экраны гаджетов, ввиду чего делается умеренно аскетичным, с «подвижными» блоками. Адрес у страницы один, просто в её макет исходно благодаря технологии CSS3 Media Queries заложена вариативность: смотря по обстоятельствам меняется число колонок, размер текста, величина управляющих элементов и их взаимное расположение и т. д.

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

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

  • Отдельная мобильная версия сайта. Фактически безальтернативный в недалеком прошлом и посей день широко распространенный вариант. По-хорошему, это отдельный сайт, обычно расположенный на поддомене основного. Создается в большинстве случаев на его базе, но с учётом ограничений мобильных устройств доступная в интернете функциональность урезается. Зато заказчик и разработчик вольны в деталях продумать, к каким именно возможностям и в каких конкретно местах дать доступ «мобильным» посетителям, и попутно до разумного предела снизить вес страниц сайта.

    Делать отдельные мобверсии начали, ещё когда смартфонов не было и в помине. До сих пор периодически под старые телефоны создают максимально лаконичные WAP– и PDA-версии. Впрочем, по адресу wap.yoursite.ru и pda.yoursite.ru может жить и обычная, общая для любых гаджетов ипостась веб-проекта.

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

  • Львиная доля «мобильных» пользователей использует аппараты с сенсорным экраном, или тачскрином (англ. touch-screen). Поэтому не задействуйте в мобверсии сценариев работы, которые требуют манипуляций мышью. Заменяйте их общепринятыми «жестами» (прижившаяся в русском языке калька с англ. gestures): например, выбор – касание пальцем, промотка страницы вниз или прокрутка слайдера с фотографиями – листающее движение в нужном направлении и т. д.

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

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

  • Используйте аппаратные возможности гаджетов разумно. Хотя современные смартфоны и планшетники – фактически мини-компьютеры, мощности у них не запредельные, вдобавок от интенсивной нагрузки быстрее садится батарея. В частности, лучше отказаться от использования технологий JavaScript, Flash и AJAX в мобильной версии. Не только потому, что они ресурсоёмкие, но и потому, что не все гаджеты поддерживают их по умолчанию.
  • «Минимизируйте это». И то. И всё, что только удастся. Помните и о том, что скорость мобильного Интернета даже в мегаполисах оставляет желать лучшего. Да здравствуют здоровые сдержанность и аскетизм. Не бойтесь ущемить аудиторию, урезая функциональность веб-версии сайта для вывода на гаджеты: наоборот, оставляя на странице самое главное, вы способны повысить ее конверсионный коэффициент. «В ограничении лишь познается мастер», – писал Гёте. Минимум ссылок, уровней навигации, элементов управления.

Также по возможности организуйте контент так, чтобы информация подгружалась не вся сразу, а по мере скроллинга страницы. Самые важные текстовые пассажи и интерактивные элементы располагайте на первом экране. Картинки должны быть легче и, само собой, меньше, чем в основной версии. Компоненты CSS и JavaScript пусть сжимаются с помощью gzip (грубо говоря, это обычная архивация, осуществляемая «на лету»).

Вместо тяжёлой графики, где это допускает дизайн, применяйте стили CSS. Широкие блоки, грозящие «порвать» верстку и принудить посетителя к горизонтальной прокрутке страницы, либо не вставляйте в мобильную версию, либо тонко подстраивайте под минимальный размер экрана. Так, таблицу с перечислением достоинств продукта ничто не мешает заменить вертикальным списком с красноречивыми иконками. Разметка – одноколоночная, и только одноколоночная. Исключения возможны разве что для планшетников.

Категория: Разработка сайта | (02.02.2014) |
Просмотров: 2808 | Теги: pda, мобильный сайт, веб-мастер, веб-дизайн, Мобильная версия сайта | Рейтинг: 5.0/1
Всего комментариев: 0

Услуги веб-студии

  1. Современные сайты Европейского уровня под ключ
  2. Благодаря таким технологиям как HTML5, CSS3, jQuery и Parallax Ваш сайт буквально будет живым
  3. Благодаря адаптивному дизайну ваш сайт будет удобен для просмотра на экранах любых размеров
  4. Мы делаем сайты оптимизированные под Google и Яндекс

Заказать сайт
  • Услуги хостинга. Помощь в регистрации домена
  • Маркетинговый анализ перед созданием — выявление необходимого функционала для сайта
  • Разработка дизайна или настройка шаблона
  • Кроссбраузерная и адаптированая верстка для всех устройств (ПК, планшеты, смартфоны)
  • Наполнение сайта
  • Предоставление электронной почты вида имя@ваш-сайт.ru
  • Регисрация сайта в поисковых системах Яндекс, Google, Mail, Rambler
  • Подключение Яндекс веб-аналитики (вы будете знать всё о посетителях вашего сайта)
  • Поддержка и администрирование сайта
  • Раскрутка и продвижение сайта
  • Обучение работе с сайтом. Быстро. Качественно. Онлайн
  • Вам передаются исключительные (полные) права на разработанный сайт
Читать далее
Разработка корпаративных сайтов & Landing Page от 8 000 руб.
Сайт визитка от 5 000 руб. Читать далее
Практика показывает, что Интернет является огромной площадкой для развития бизнеса, а сайты — очень сильным маркетинговым инструментом. Чтобы извлечь максимальную выгоду из сайта, им нужно заниматься, его нужно развивать. Потенциальным клиентам будет проще найти вас, если сайт будет на первых строчках в результатах поиска. Читать далее
Любая могучая идея абсолютно восхитительна и в высшей степени бесполезна, пока ты не решишься заставить её работать. Читать далее

4 правила успешного бизнеса

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

Подробнее

5 секретов эффективной рекламы

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

Подробнее

Рекламодатель уходит в интернет

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

Подробнее

Mobile-friendly или ну полная оптимизация

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

Подробнее

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

Как адаптивный дизайн поможет увеличить посещаемость сайта?

Подробнее