Интернет. Железо. Программы. Обзоры. Операционные системы

Делает его удобным и мобильным. Адаптив или мобильная версия

Эта статья поможет вам определиться, нужна ли вам мобильная версия сайта, зачем она вам, и какие у нее бывают версии. Также поделимся интересными цифрами по теме.

Около 25% трафика интернета приходится на мобильные операционные системы, этот показатель растет с каждым днем. Наряду с ростом пользователей интернетом с помощью мобильного устройства возникает вопрос, адаптировать ли сайт под мобильный трафик, какие методы существуют и стоит ли это потраченных сил? Разберемся!

Зачем сайту мобильная версия?

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

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

  1. Адаптивный дизайн . С помощью CSS3 можно задавать свои стили для разных размеров экрана сайта. Этот способ широко используется сегодня, а хорош он тем, что не требует плодить дополнительные страницы сайта. Минус заключается в том, что не все на сайте оптимизировано, вес страницы по прежнему велик, но придерживаясь принципа «mobile first» этого можно избежать (принцип, когда сначала сайт оптимизируют под мобильные телефоны).
  2. Отдельный мобильный сайт . Изменения в такую версию внедрять проще, ведь структуры мобильной версии и десктопной не зависят друг от друга в плане кода.
  3. RESS . В этом методе ПО на стороне сервиса определяет устройство и выводить для него свои HTML и CSS. Минусы здесь кроются в том, что технология определения устройства пользователя не идеальна, да и является дополнительной нагрузкой на сервере.
  4. - Отдельное приложение . Это не совсем то, что подходит под определение видов. Скорее, это дополнение. Приложений становится все больше, и некоторые пользователи стали совершать покупки и просматривать новости сайтов преимущественно через них. Об этом решении стоит задуматься крупным и посещаемым интернет-проектам или обреченным нацеленным на коммерческий успех.

Необходимые функции в мобильной версии сайта

  1. Совместимость . Сайт должен корректно отображаться на большинстве популярных разрешениях экранов (480x320, 1280x720 и т.д). На таких сайтов лучше использовать xHTML, JavaScript лучше обойти стороной.
  2. Юзабилити . Навигация – залог успеха, а хорошая навигация – прямой путь к победе, постарайтесь сделать все превосходно, постоянно просите друзей или на различных форумах оценить версию, предложенные исправления пользователями учитывайте при дальнейшей разработке;
  3. Оптимизация контента . Этот пункт особенно относится к картинкам: они должны быть легкими в килобайтах и в габаритах;
  4. Дизайн. Самая важная составляющая . Нынешняя тенденция дизайна для мобильных – максимальная легкость и простота в использовании.

Каким сайта в первую очередь необходима мобильная версия

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

  • Социальные сети и подобные сервисы;
  • Средства массовой информации;
  • Интернет-магазины;
  • Справочные порталы.

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

Вы все еще раздумываете? Предлагаем вдуматься в эту небольшую статистику:

  • Мобильные телефоны используются более 87% населения, остальные 13% - дети в возрасте до 5 лет;
  • Рост мобильной коммерции к 2020 году по данным различных организаций вырастет в более чем 99 раз .

С началом эры бума мобильных устройств разработчики оказались перед выбором: оставлять ли мобильные версии своих сайтов наряду с «полноценными», или сайты должны стать адаптивными и самостоятельно подстраиваться под разные размеры экранов?

На текущий момент при построении мобильных версий сайтов существуют 3 основных способа их построения:

  • Адаптивный дизайн;
  • Отдельная мобильная версия сайта;
  • RESS (Responsive Design + Server Side).
Каждый из способов обладает своими плюсами и минусами, которые я постараюсь подробно описать.

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

Для реализации адаптивного дизайна обычно используются CSS3 Media Queries. В зависимости от размера экрана, пользователь будет видеть разную картинку:

@media screen and (max-width: 1600px) { div.for-example {width: 1500px;} } @media screen and (max-width: 1280px) { div.for-example {width: 1100px;} } @media screen and (max-width: 1024px) { div.for-example {width: 980px;} }

Преимущества адаптивного дизайна
  • Удобство разработки - при адаптивной верстке вся структура сайта автоматически подстраивается под различную ширину экрана. Для того, что бы получить рабочий продукт не нужно писать все с нуля - достаточно лишь подправить CSS и HTML… С учетом наличия фреймворков, подобных Bootstrap подобная разработка не является очень сложной при стандартной реализации. К тому же, поддержка такого продукта будет относительно простой задачей.
  • Один URL - избавляет нас от ненужных редиректов, и надобности пользователю запоминать адрес мобильной версии (пусть даже это просто приставка m.). Так же наличие единого адреса позитивно скажется на продвижении сайта, поскольку поисковикам будет «удобнее» работать.
Недостатки адаптивного дизайна
  • Разные задачи - типовые задачи «мобильных» пользователей крупных сайтов обычно отличаются от задач пользователей ПК. Если вы являетесь клиентом банка, то, скорее всего, в мобильной версии сайта вас будет интересовать очень ограниченный спектр информации - адреса ближайших отделений, банкоматов и т.д.
    В целом, при адаптивной верстке самый распространенный подход - делать копию обычного сайта, реализовать в верстке под телефоны потребности всех групп целевой аудитории. Но тогда о юзабилити можно забыть. Нужные пяти процентам посетителей второстепенные разделы создадут неудобства для основной массы клиентов.
  • «вес» сайтов остается серьезным препятствием для пользователей мобильных телефонов. Это означает, что некоторые типичные для десктопных сайтов активные элементы, в том числе embedded-карты, ролики, кредитные калькуляторы и меню с анимацией на мобильных сайтах должны быть заменены на более легкие альтернативы. Может ли адаптивный дизайн дать нам такую возможность? В популярной реализации пользователь с маленьким экраном должен загрузить страницу целиком, чтобы увидеть лишь ее часть. Например, если десктопная версия верстки главной весит 200 Кб, а мобильная - еще 50 Кб, для просмотра придется скачать 250 Кб. Конечно, можно использовать сжатие кода страницы, но лишние запросы к серверу все равно будут идти.
  • Безысходность - Одно из неоспоримых преимуществ мобильной версии: если не нравится, ее можно отключить, перейти на обычный домен. Сайты с адаптивным дизайном не дают этого простого, но важного выбора. Если адаптированная верстка неудобна, забагована или если она скрывает важный элемент навигации, пишите пропало: вы ничего не можете сделать, чтобы увидеть его снова. Придется бежать искать десктоп или сайт конкурента. Можно придумать «костыли» для обхода этого ограничения (использовать cookie и подключать разные таблицы стилей). Но такой подход усложняет разработку.
В целом идея разработки мобильной версии в адаптивном дизайне достаточно популярна, несмотря на вышеуказанные минусы. В частности, эту концепцию целиком поддерживают такие гиганты как, например, Google.

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

Чтобы сделать сайт удобным для мобильных пользователей часто создают так же отдельные версии сайтов - специально ориентированные на пользователя со смартфоном/планшетом. Наиболее распространена практика - перенаправление мобильных пользователей на специальный поддомен (m.example.com, mobile.example.com и т.д.). Наверное, в 99% случаев, мобильная версия представляет собой урезанную основную версию - лишь с тем функционалом, который, по мнению разработчиков, будет необходим и полезен пользователям мобильных устройств и планшетов.
Преимущества мобильной версии
  • Легкость в изменениях - поскольку сайт существует, де-факто, отдельно от основной версии, вносить в него правки, связанные только с мобильной версией значительно проще, поскольку мобильная версия чаще всего не предоставляет избыточного, ненужного функционала.
  • Удобство для пользователя - мобильная версия обычно сильно упрощена по сравнению с десктопной версией, поэтому пользователю не нужно будет далеко ходить за нужной ему информацией.
  • Быстрота - из-за того же упрощения сайта, мобильная версия грузится быстрее. Это существенно для пользователей, которые все ещё ходят через GPRS или слабый 3G.
  • Выбор- чаще всего, в мобильной версии есть возможность перейти на основную версию сайта.
Недостатки мобильной версии
  • Несколько адресов -
  • Неудобство для пользователя - для десктопной и мобильной версии разные адреса. Для одних это может оказаться плюсов, для других же - крайне раздражительным фактором, когда для того, что бы удобно посмотреть сайт, нужно запоминать ещё один адрес. Так же есть проблемы и с поисковиками: во избежание дублированного контента SEO-специалистам нужно использовать мета-теги rel=«alternative» и rel=«canonical». Кроме того, когда пользователь мобильного поиска Google кликнет по ссылке в результатах, он попадет на десктопную версию или перенаправлен на мобильную. Но если мобильная версия этой страницы не существует, он получит сообщение об ошибке.
  • Ограниченность - создание отдельного мобильного сайта означает избавление от части содержания и функциональности. Кроме того, у вас может быть два различных набора контента, который может негативно сказаться на общей информационной картине.

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

RESS

Сам Google, хоть и поддерживает использование веб-мастерами адаптивного дизайна, однако в своих продуктах использует иную систему. Если зайти, к примеру, на главную страницу под разными User-Agent-ами, то можно увидеть различный HTML для различных устройств. RESS - Responsive Design + Server Side. Пример реализации, набросанный «на коленке»:

$DS = DIRECTORY_SEPARATOR; require_once(dirname(__FILE__) . $DS . "libraries" . $DS . "browser.php"); $device = BBrowser::detectDevice(); if($device == DEVICE_TYPE_MPHONE){ $tmpl = "template.m.php"; } else if($device == DEVICE_TYPE_TABLET){ $tmpl = "template.t.php";} else{ $tmpl = "template.php"; } include(dirname(__FILE__) . $DS . "templates" . $DS . $tmpl);

Плюсы RESS
Фактически, метод может включать в себя преимущества как и отдельной мобильной, так и адаптивной версии сайтов, в зависимости от реализации. Из того, что будет новым:
  • Минимизация трафика - Ненужные JavaScript могут быть удалены из HTML, который освобождает CPU, память и кэш на мобильном устройстве. Так же может быть специально оптимизирована html и css.
  • Возможно использовать таргетирование - например, для Android-устройств предлагать скачать приложение с GooglePlay, а для Apple – с iTunes. Для каждого устройства можно сделать свою вёрстку.
Минусы RESS
  • Сложность в разработке - подобный метод потребует соответствующей настройки сервера и труда большего количества программистов. Так же необходимо будет делать несколько различных вариантов верстки.
  • Механизм определения устройств - к сожалению, даже в наше время ещё не доведен до совершенство. Истории с тем, как чей-то редкий телефон не определился как мобильное устройство, всплывают довольно часто.

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

Резюме

На мой личный взгляд - идеального варианта, который бы стоило использовать всем, нет. Лучший вариант для меня - это RESS. Однако, это один из редких вариантов, поскольку требует больших усилий для реализации. В целом же все 3 варианта имеют свои плюсы и минусы, причем в зависимости от сути и направленности сайта.

Около 20% трафика в Рунете приходится на мобильные операционные системы. И этот показатель продолжает набирать обороты. Это ли не повод задуматься о том, адаптировать ли ваш сайт под мобильный трафик, ведь это совершенно другая аудитория.

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

Зачем сайту мобильная версия?

  1. Пользоваться мобильной версией сайта со смартфонов и мобильных телефонов намного удобнее: нет необходимости в горизонтальной прокрутке, весь функционал работает корректно (на некоторых неадаптированных сайтах даже товар положить в корзину невозможно!).
  2. В мобильной версии можно разработать дополнительные возможности, направленные именно на эту целевую группу посетителей: организовать отправку смс прямо с сайта, определить местоположение и расстояние до ближайшей точки продаж и т.п.
  3. Навигация таких сайтов делается адаптированной под тачскрин (Touch screen ), что также намного удобнее.
  4. Мобильная версия сайта более легкая, имеет менее объемный код, поэтому загружается быстрее, что уменьшает затраты пользователя на ее загрузку при оплате мобильного трафика.
  5. Поисковые системы используют мобильный поиск для телефонов, поэтому и ранжироваться мобильная версия сайта в нем будет выше, а значит и переходов на ваш сайт будет больше.

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

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

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

Что обязательно для мобильной версии сайта?

  • Дизайн. Пожалуй, самая важная составляющая. Последние тенденции дизайна для мобильных сайтов - это максимальная легкость и простота.
  • Совместимость. Сайт должен корректно отображаться на наиболее популярных разрешениях экранов (240х320, 480х320 и некоторые другие). На таких сайтах лучше не использовать или использовать по минимуму javascript , применять xhtml .
  • Оптимизация контента. Особенно это касается картинок: они должны быть легкими как в габаритах, так и в килобайтах.
  • Юзабилити. Хорошая навигация - залог успешного мобильного сайта!

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

Точного ответа на этот вопрос вы не найдете. Существуют различные точки зрения, которые опираются на минусы как одного, так и второго варианта.

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

Каким сайтам нужна мобильная версия?

Исследования показывают, что целесообразно создавать мобильную версию сайта для следующих типов сайтов:

  • Справочные сайта
  • Социальные сети и сервисы
  • Веб-сервисы
  • Интернет-магазины

Если вы уже задумались над тем, нужна вашему сайту версия под мобильные или нет, проанализируйте трафик на сайт на протяжении последнего года через системы аналитики. Если доля мобильного трафика составляет 15% и выше, ответ очевиден!

Цифры

Вы еще не решили? Тогда вдумайтесь в эту статистику:

  1. Мобильные телефоны использует 87% всего населения. Видимо их нет только у маленьких детей!
  2. Рост мобильной коммерции по прогнозам увеличится в 99 раз в ближайшие 5 лет!
  3. Только 21% сайтов адаптированы для работы с мобильными устройствами. У вас еще есть шанс получить свою долю трафика!

Полезные статистические данные приведены ниже в инфографике (кликабельная).

Стоимость разработки мобильной версии сайта – от 15 000 рублей

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

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

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

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

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

В некоторых случаях содержимое сайта сокращают, оставляя только самое важное. Так же изменяются структура и функционал, неизменным остаются лишь стилистическое оформление, некоторые элементы и содержание.

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

Как интернет-аудитория предпочла смартфоны персональным компьютерам

Таблоиды с завидной регулярностью выстреливают заголовками из разряда «Интернет-пользователи массово эмигрируют на смартфоны», «Российские юзеры уходят в мобильный интернет». Надо сказать, оснований у таких заявлений предостаточно.

По данным исследовательской компании Mediascope, к 2017 году аудитория мобильных пользователей интернета в России достигла 66 млн. человек, что составляет 54% населения. Более того, 16% пользуются исключительно мобильным Интернетом.

Также отмечается, что интернет-аудитория на смартфонах растет очень стремительно, в то время как компьютерный веб-серфинг продолжает стабильно терять позиции. За последний год количество россиян, использующих десктопные компьютеры для выхода в сеть, снизилось на 4%.

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

Почему мобильная версия сайта важна для продвижения вашего бизнеса

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

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

  • Эффективность раскрутки сайта. По сообщению представителей Google, сайты, не имеющие мобильной версии, будут априори ранжироваться ниже, в сравнении с веб-ресурсами, адаптированными к экранам смартфонов. Таким образом, мобильная версия сайта сегодня - это не только возможность для привлечения большего трафика, но и обязательное условие для успешного продвижения сайта в интернете.
  • Удобство для пользователей. 40% интернет-юзеров честно признаются, что перейдут на другой сайт, если у интересующего их сайта нет мобильной версии. С точки зрения бизнеса вы упускаете колоссальное количество потенциальных клиентов, если сайт вашей компании не адаптирован для мобильных телефонов и планшетов.
  • Блестящая репутация. Некорректное отображение вашего сайта на экране современного гаджета - существенный минус и гарантированно укоризненный взгляд интернет-пользователя. С другой стороны, наличие мобильной версии - своеобразный «плюс к карме» и поддержание правильного имиджа компании.
  • Конкурентное преимущество. Узнали, что сайт ваших конкурентов не имеет мобильной версии? Самое время воспользоваться данной осечкой и заручиться мощным конкурентным преимуществом, а именно - получить клиентов, покидающих не адаптивные сайты ваших бизнес-противников.

Как «подружить» сайт с мобильными устройствами

Решить проблему правильного отображения вашего сайта на смартфонах можно двумя методами:

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

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

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

Мобильная версия сайта от веб-студии «Аспект»: стоимость разработки

На сегодняшний день лишь часть сайтов приспособлена для работы с мобильными устройствами, а значит, у вас еще есть шанс отвоевать свою долю трафика. Разработку мобильной версии сайта вам предлагает веб-студия «Аспект».

Стоимость такой услуги - от 15 000 рублей . Мы создаем мобильную версию на основе имеющегося сайта и привлекаем к выполнению данной задачи только лучших специалистов.

В стоимость работ входит:

  • Прототипирование новых страниц.
  • Разработка дизайна мобильной версии.
  • Верстка.
  • Программирование мобильной версии сайта и ее привязка к основной.

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

В среднем, разработка мобильной версии сайта занимает от 10 рабочих дней . Конкретные сроки зависят от объема работ, то есть количества страниц на сайте, типа представленной на них информации.

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

Как происходит разработка мобильной версии в нашей веб-студией

Алгоритм нашей работы можно представить в следующем виде:

  1. Ваша заявка на разработку мобильной версии (по телефону, e-mail).
  2. Встреча и обсуждение проекта с менеджером.
  3. Оценка объема работ и расчет точной стоимости услуги.
  4. Составление и подписание договора.
  5. Оплата и начало работ.
  6. Разработка дизайна мобильной версии сайта.
  7. Согласование и подписание акта приема макета дизайна.
  8. Верстка мобильной версии.
  9. Перенос контента.
  10. Сдача проекта.

Убедились в необходимости мобильной версии и желаете заказать ее разработку? Веб-студия «Аспект» всегда ориентируется на последние тенденции и готова оказать вам профессиональную помощь в «мобилизации» вашего сайта.

Сергей Лукошкин

26.03.2015 | | 0 комментариев

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

Только после этого, они поедут в выбранный магазин, или просто закажут товар через интернет. Сегодня уже более 60% покупателей поступают именно так.
Казалось бы, для успеха нужно, чтобы у вашей компании был сайт или интернет магазин, и всё. Однако, теперь этого уже совсем недостаточно.

Почему мобильная версия сайта или адаптивный дизайн важны для бизнеса?

Дело в том, что с появлением смартфонов и планшетов всё больше покупателей ищет товары и услуги в интернете именно с помощью этих устройств, а не со стационарных компьютеров или ноутбуков. А всё потому, что это очень удобно. Где бы ни находился покупатель, он может осуществлять поиск прямо со своего мобильника, и не нужно включать компьютер.
Это здорово, но физический размер экрана носимого гаджета, будь то планшет или смартфон, довольно мал и поэтому сайт, который прекрасно смотрится на компьютере или ноутбуке, очень неудобен для просмотра на экране мобильного устройства.
Вот почему сейчас, как никогда, стало важно, подходит ли ваш сайт для использования на смартфонах, планшетах или фаблетах (фаблет – нечто среднее по габаритам, между смартфоном и планшетом).

Как сделать сайт дружественным для мобильных устройств?

Для решения этой проблемы существует два подхода:

  1. Создать отдельную версию сайта, которая открывается на мобильном устройстве
  2. Создать сайт с адаптивным дизайном, который подстраивается под любой размер экрана

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

А так она выглядит на экране смартфона


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

5 главных причин, чтобы сделать бизнес-сайт с адаптивным дизайном

Мобильный поиск. По статистике (на момент написания этой статьи) более 50% покупателей ищут товары и услуги в интернете с мобильных устройств. И эта цифра очень быстро увеличивается. А совсем недавно Google сообщил, что сайты, которые не имеют мобильной версии, будут очень низко ранжироваться в результатах поиска с мобильных устройств. Поэтому, если у вас нет мобильной версии сайта, не удивляйтесь, что вас будет трудно найти в поиске со смартфона.
Удобство для пользователей. Снова по той же статистике более 40% пользователей заявили, что уйдут на другой сайт, если у текущего нет мобильной версии. И опять же, их доля уверенно растет. Для бизнеса это значит, что вниманием покупателя завладеет тот поставщик, чей сайт удобен на любом устройстве.
Прямой контакт. Смартфон позволяет пользователю сразу сделать звонок по указанному на сайте номеру телефона (если на сайте реализована функция click-to-call). Таким образом, вы становитесь гораздо ближе к потенциальному покупателю.
Новые возможности продвижения. Сегодня широкое распространение получает мобильная реклама, но если у вас нет мобильного сайта, то ее эффективность будет катастрофически низкой. Напротив, сайты, дружественные для мобильных устройств, получают еще один мощный канал продвижения.
Конкурентное преимущество. И последнее. Проверьте, есть ли у ваших конкурентов мобильные версии сайтов. Если нет, то у вас есть отличная возможность создать мощное конкурентное преимущество и получить тех клиентов, которые покидают устаревшие сайты ваших противников.

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

Похожие публикации