Мобильная версия сайта Обсуждение проекта


Мобильная версия сайта: Обсуждение проекта

Даже если Вы на сайте не первый год, думаю и Вам будет полезно прочитать краткий обзор возможностей этого ресурса, он поможет быстрее найти нужную информацию и настроить сайт под свои нужды. Ну а если Вы новичок — с этой статьи советую начать, это займет всего пару минут, а сэкономит уйму времени. Итак начнем:

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

Поиск по сайту
Если обычный поиск не дал результатов или их слишком много, воспользуйтесь расширенным поиском.
Так же для удобства существует Поисковой плагин 4PDA.INFO

Как просматривать только интересующие Вас новости
Вы можете просматривать новости только тех ОС которых пожелаете. Для этого нужно зайти в
Блок Авторизация — Мой профиль — [редактировать профиль] — Просматривать новости таких OS: — Выбрать из списка

Группу можете сменить в любое время. Позже добавим другие сочетания ОС при необходимости.

Если захотите посмотреть новости в других ОС, просто зайдите в данную категорию через меню сайта.

Внимание! Изменение группы для релизеров, модераторов и т.п. повлечет потерю прав доступа!

В название новостей добавляются автоматически при добавлении или изменении новости информация по ОС: (Android) (WinMobile) (WP7). Это необходимо для пользователей просматривающих ленту с несколькими ОС и ленты RSS.

Новости можно добавлять в избранные и потом просматривать их в разделе Мои закладки. Если избранные новости обновятся пока Вас не было на сайте, к Вам на указанный при регистрации E-mail может прийти уведомление об обновлении. Но при желании можно легко отписаться от писем в профиле (подробнее).

Обзор последних новостей и комментариев
Обзор последних непрочитанных новостей и комментариев. Для просмотра новостей за определенную дату нажмите на число в календаре профиля.

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

Например:
Кнопка на главной странице ведет на общую ленту — http://4pda.info/rss.xml

Если Вы зайдете только в интересующую вас категорию, RSS отобразит новости только из этой категории

То же самое с подкатегориями, если Вас интересуют только новости, например, Android Игры или только WinMobile Аркады нужно зайти в данную категорию и нажать кнопку RSS.

Лент на 2 ОС пока нет..

Для мобильной версии сайта:
http://4pda.info/lite-rss.xml — лента ведущая на мобильную версию
http://4pda.info/lite-rss-nopix.xml — лента ведущая на мобильную версию без картинок
http://4pda.info/lite-comments.xml — лента ведущая на мобильную версию для последних комментариев

Мобильная версия сайта:
Для просмотра сайта с телефона или со слабым каналом интернета лучше использовать облегченную версию.
http://4pda.info/lite/ (подробнее)

Каталог PDA ссылок
У каждого пользователя свой список избранных ссылок, который зависит от интересов, места проживания и прочего. Поэтому создан конструктор PDA ссылок, что бы каждый пользователь мог настроить каталог под себя: выбрать интересующие его ссылки, переименовать, пересортировать их и получить быстрый доступ к ним через удобный урл http://links.4pda.info/ВашНик/. Удобная настраиваемая стартовая страница для телефона.

Карта сайта
Если Вас интересует полный список ПО на сайте, можете его просмотреть на карте сайта, или только самое популярное по категориям

Общение
При общении просьба соблюдать общие правила на сайте (которые Вы подтвердили при регистрации не глядя ) — в общем типичные правила призванные сделать общение удобным.

Обсуждение программ, просьба проводить в комментариях к программе, на остальные тему лучше общаться на форуме, или чате если дело срочное.
Ответы на некоторые самые распространенные вопросы можно прочитать в F.A.Q.

Для личной переписки используйте PM
Так же существует наша Jabber конференция

Внимание! Возможно после регистрации форум не примет логин и пароль, проблема известна и вскоре будет решена.
Что касается форума http://4pda.ru/forum/ это вообще другой сайт )

Опросы и рекомендации
Для выяснения предпочтений пользователей проводятся опросы, посмотреть все результаты можно тут. По их итогам ПО занявшее призовые места награждаются рекомендацией «4PDA.INFO рекомендует» (Подробнее).

Что еще есть на сайте
Кроме ПО мы собираем все полезное что может пригодится владельцу смартфона или другого PDA устройства. Например
Прошивки и инструкции к телефонам, которые стараемся хранить на сайте:
http://manuals.4pda.info/
http://roms.4pda.info/

Так же вас может заинтересовать наша библиотека или галерея

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

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

Проблемы при работе с сайтом
Если у вас возникли проблемы с регистрацией, попробуйте использовать другой e-mail.
Если забыли пароль, пройдите процедуру восстановление пароля

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

Мобильная версия сайта: Обсуждение проекта


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

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

Технологии прошлого, такие как например WAP, могли обеспечивать нормальную работу только сильно урезанных версий корпоративных ресурсов и практически не оставляли возможностей для реализации достойного дизайна, а также какой-либо функциональности, поэтому пользователи мобильных устройств не очень активно посещали их. Повышение посещаемости, кстати, стало одним из наиболее весомых факторов в пользу разработки мобильных версий сайтов. Если в 2015 году доля посетителей веб-ресурсов, заходивших с мобильного устройства (смартфона или планшета) в среднем составляла 35-40%, то к концу 2020 года она уже уверено подошла к отметке 55% и продолжает расти.

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

Наряду с удобством сайта для пользователей, которое повышает конверсию ресурса и лояльность со стороны покупателей, большое значение имеет приоритет таких ресурсов в поисковой выдаче. Google еще в 2015 году прямо заявил о своем намерении ранжировать адаптивные сайты в результатах поиска выше порталов, рассчитанных только на десктопную версию. Вывод же сайта в Топ-10 поисковой выдачи является конечной целью любого SEO-продвижения и обеспечивает рост продаж. Инструменты поискового продвижения как в Google, так и Yandex, объединяются в консоли, позволяющие проанализировать степень оптимизации веб-страницы относительно возможностей мобильных устройств.

Способы оптимизации веб-страницы под мобильные устройства

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

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

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

Мобильная версия сайта и специализированное приложение

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

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

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

  • сложность и дороговизна разработки. Фактически речь идет о создании нового сайта с соответствующими затратами на дизайн и программирование;
  • отличающийся URL мобильного сайта – как правило, мобильная версия имеет приставку m. к существующему адресу (например, m.facebook.com) и требует редиректа для мобильных устройств;
  • необходимость двойной работы и двойного контроля за контентом сайтов. Мобильная версия должна обновляться одновременно с десктопной, иметь аналогичное наполнение и требует от контент-менеджера таких же трудозатрат.

Во втором случае речь идет о создании полноценного приложения-оболочки, разработанной под конкретную платформу устройства (Android, iOS, Windows Phone) или кросс-платформенное решение. Оно использует один и тот же программный интерфейс и средства работы с базой данных (прикладной программный интерфейс, Application Programming Interface, API), что и основной сайт, однако его дизайн органичнее смотрится, а и функционал лучше приспособлен для экранов смартфонов и планшетов. Плюсом такого решения являются все достоинства отдельной мобильной версии и единая точка управления контентом. Содержимое обновляется один раз в одном месте, а затем используется разными оболочками.

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

Помимо этого пользователю, чтобы получить доступ к вашему ресурсу, необходимо скачать данное приложение через Google Play или AppStore, в то время как доступ к мобильному сайту открывается при помощи любого браузера. Пользователь может отказаться от установки приложения, если его поиск будет затруднен или же оно соберет негативные отзывы, либо получит низкий рейтинг. Кроме того, возможны чисто технические проблемы установки – низкая скорость подключения или отсутствие достаточного места на дисковом пространстве устройства, из-за которых пользователь может просто не захотеть устанавливать данную программу.

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

Использование медиа-запросов CSS

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

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

На сегодняшний день большинство новых сайтов разрабатывается и создается по принципу «mobile first». Это означает, что дизайн нового сайта отрисовывается в первую очередь так, как он выглядел бы на экране смартфона, затем планшетного ПК и уже после этого разрабатывается его десктопная версия. Затем по тому же принципу создается HTML-разметка страницы, что в силу определённых причин облегчает работу программисту. При помощи стилей CSS веб-странице придается вид в соответствие с разработанным дизайном и порядком создания веб-интерфейса (смартфон – планшет – десктоп).

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

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

Адаптация посредством языка Javascript

Широкое распространение языка Javascript, используемого для придания элементам веб-страниц разнообразного поведения, позволяет активно задействовать его для мобильной адаптации существующего сайта. Он не только дополняет медиа-запросы CSS, но и позволяет активно манипулировать имеющейся разметкой, поэтому реализация такого подхода – это отличный способ максимально выгодно и быстро добиться желаемого результата. Если главным преимуществом мобильной версии является ее изначальная компоновка под мобильные устройства, то использование Javascript может «на лету», то есть в процессе рендеринга, изменять разметку страниц сайта, добавляя, скрывая или удаляя необходимые нам элементы.

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

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

Динамически подгружаемая версия разметки


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

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

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

Существующие недостатки этого метода связаны в основном с рисками поддержки и сторонней разработки. Плагины и шаблоны должны периодически обновляться, чтобы обеспечивать совместимость с версиями CMS и языка программирования, регулярно проверяться на возможные риски и уязвимости. Все это зависит от разработчиков программ (как и в случае с мобильными приложениями) и может производиться на платной основе. Также всегда присутствует вероятность того, что разработчик откажется от дальнейшей поддержки своего продукта.

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

Особенности мобильной адаптации сайта

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

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

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

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

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

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

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

Требования, выдвигаемые SEO-специалистами к мобильному сайту – отсутствие ошибок в программной части, быстрая загрузка страниц, грамотно подобранный контент. При определении варианта разработки мобильной версии одним из главных требований как раз и является обеспечение максимального быстродействия загрузки его страниц, поэтому при рассмотрении различных вариантов следует уделять повышенное внимание данному вопросу.

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

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

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

Здравствуйте. Нужно ли выносить мобильную версию сайта на поддомен типа m.site.ru? Что посоветуете?

Здравствуйте, Олег. Все зависит от конкретного сайта, от перспектив его дальнейшего развития и объемов финансовых вложений. Мобильная версия — это только один из вариантов. Вы можете адаптировать сайт для корректного отображения на планшетах и смартфонах разными способами:

1. Отдельной версией на поддомене.

2. С помощью адаптивной верстки.

3. И динамического показа — RESS.

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

Способы Плюсы Минусы
Мобильная версия Cкорость загрузки, экономия батареи и ресурсов устройства Двойные затраты на разработку, поддержку, оптимизацию и продвижение
Адаптив Не требует больших затрат при разработке, поддержке и в поисковой оптимизации Грузится дольше
Динамический показ Скорость загрузки выше выше мобильной версии Дорого разрабатывать и поддерживать
Мобильная версия
Плюсы Минусы
Cкорость загрузки, экономия батареи и ресурсов устройства Двойные затраты на разработку, поддержку, оптимизацию и продвижение
Адаптив
Плюсы Минусы
Не требует больших затрат при разработке, поддержке и в поисковой оптимизации Грузится дольше
Динамический показ
Плюсы Минусы
Скорость загрузки выше выше мобильной версии Дорого разрабатывать и поддерживать

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

Что выбрать

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

Решение о внедрении адаптива должно исходить из задач пользователей — нужны ли им полные функции сайта или только ограниченные:


ориентируйтесь на ситуацию: ваш пользователь будет сидеть в кафе с бесплатным wi-fi или посреди леса вызывать эвакуатор с GPRS на мобильном;

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

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

Реализация отдельной мобильной версии на поддомене оправдано, если:

основная версия сайта содержит много лишних библиотек JS и CSS-стилей, которые сильно замедляют скорость и плавность работы;

пользователи приходят на сайт, используя мобильный интернет — есть ограничения по скорости загрузки и объему трафика;

для посетителя актуальны только некоторые функции полной версии сайта: например, фильтры товаров без галереи и интерактива, завязанного на скроллинге;

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

Для мобильной версии необходимы собственный robots.txt и сайта, а также настройка целей для отслеживания эффективности.

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

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

Несколько слов о RESS. Аббревиатура расшифровывается как Responsive Design & Server Side. Подход комбинирует методы разработки серверной части и адаптивного дизайна, что улучшает взаимодействие с каждым типом пользовательского устройства. Для ПК, планшетов, смартфонов сервер будет возвращать разный HTML и CSS.

Сравнивая RESS и мобильную версию сайта на отдельном поддомене, выделим следующие пункты:

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

По сравнению с RESS сайты с мобильной версией на отдельном поддомене проще в разработке и поддержке. Посетитель всегда может переключиться на десктопную версию.

Техническая реализация мобильной версии

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

Реализуйте редирект в зависимости от User Agent пользовательского устройства на мобильную версию.

Свяжите между собой страницы мобильной и десктопной версий с помощью атрибутов rel=»alternate» и rel=»canonical».

Настройте сохранение передачи UTM-меток при автоматическом редиректе с одной версии на другую: они должны корректно и в полной мере передавать информацию с одного поддомена на другой.

В контенте используйте относительные ссылки.

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

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

Настройте разные варианты сборки и объединения статических ресурсов (JS и CSS) для каждой версии сайта. В большинстве современных сайтов для экономии количества одновременных запросов все ресурсы объединяются и минифицируются с помощью специальных сборщиков: webpack, gulp и др.

Реализуйте подгрузку изображений нужного размера для каждой версии сайта либо использовать HTML-элемент

с набором вариантов изображений под разную ширину экрана устройства пользователя.

Мобильная версия сайта: Обсуждение проекта

Всем доброго времени суток, уважаемые форумчане

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

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

1. Стоит ли автоматом перебрасывать пользователей мобильных устройств на мобильную версию через .htaccess например?


2. Нужно ли закрывать мобильную версию от индексации, чтобы не было дублей или Как вообще сообщить Google и Яндексу, что это мобильная версия, чтобы страницы не попали в основную выдачу, и напротив чтобы они имели какой-то вес в мобильном поиске.

Что выбрать: приложение, мобильная версия сайта или адаптивный дизайн?

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

Количество пользователей мобильных устройств в мире растет и, согласно прогнозам, к 2020 году 6,1 миллиарда людей или 70% населения Земли будут пользователями смартфонов. Это означает, что в какой бы сфере не работала ваша компания, самое время задуматься о том, как стать ближе пользователям мобильных устройств.

Перед вами открывается несколько перспектив:

  1. Разработка мобильной версии сайта
  2. Создание мобильных приложений (для iOS, Android и, возможно, Windows Phone)
  3. Дизайн сайта с использованием адаптивной верстки

Разберемся, что происходит в каждом из этих случаев.

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

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

Например, вот как выглядит сайт Amazon на ПК (обратите внимание на сложное меню):

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

Интересно, что в США самый популярный мобильный сайт — это Buzzfeed. За ним следуют Answers.com, Wikia, Urban Dictionary и Bustle. В то же время список самых популярных сайтов по общему интернет-трафику вполне предсказуем:

Почему так получается? Ответ прост: у всех топовых веб-сайтов США есть собственное мобильное приложение, которым и пользуется большинство посетителей.

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

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

Разработка мобильных приложений

Мобильное приложение — это специальная программа, разработанная с учетом требований и возможностей конкретной платформы, например Android или iOS. Чтобы использовать ее, пользователям понадобится зайти в магазин приложений (Google Play или App Store), найти ее среди других и установить на свое устройство.

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

Как видно из графика, большая часть пользователей все еще на версиях KitKat, Lollipop и Jelly Bean, хотя для некоторых устройств сейчас уже доступна версия Marshmallow.

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

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

Что же мы все таки рекомендуем: мобильный сайт или приложение? Если позволяет бюджет, мы советуем сделать отдельный мобильный сайт и приложения для Android и iOS. Это позволит максимально охватить рынок мобильных устройств.

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

Разработка адаптивного дизайна

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

  1. Возможность показывать пользователям разный контент в зависимости от устройства.
  2. Простота внесения изменений. Если вы хотите добавить новый блок на сайт, это нужно будет сделать только один раз.
  3. SEO-преимущества. С адаптивным сайтом вам не нужно будет заниматься привлечением трафика на мобильную версию сайта.

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

  1. Требуется оптимизировать сайт для быстрой загрузки на мобильных устройствах.
  2. Появляется необходимость готовить изображения разного размера для настольных и мобильных устройств.
  3. Для устройств с маленьким экраном потребуется создать отдельное компактное меню.
  4. Увеличивает время тестирования сайта.

Кому в первую очередь нужен адаптивный дизайн? Корпоративным сайтам, блогам и новостным порталам — это те типы сайтов, которые пользователи привыкли пролистывать. Интернет-магазинам, у которых еще нет собственного приложения и мобильной версии сайта, тоже стоит задуматься об адаптивном дизайне. Хотя пока уровень конверсии для мобильных устройств ниже, чем для ПК и ноутбуков, количество заказов, осуществляемых со смартфонов и планшетов начинает расти: в 2014 году в США этот показатель составлял 19%, а в 2015 — уже 25%.

Понравилась статья? Поделиться с друзьями:
Женский журнал про диеты, отношения, красоту и стиль