pda версия сайта что это
Верстка под PDA, часть 2
Уже писал о верстке под PocketPC устройства, на неделе доработал все то, что так смущало и подвел небольшие итоги.
1. Резинка.
Верстка под PDA должна быть резиновой. Без дополнительного ПО эмулировать разное разрешение на PDA устройствах нельзя. Да и никому это особо не нужно =) Чаще всего это 320х240 или 640х480, хотя бывают и нестандартные разрешения. В любом случае сайт должен смотреться во всех разрешениях одинаково, т.к. их разброс не такой и большой, а значит верстка должна быть резиновой.
3. Авто определение PDA устройства + pda.site.ru домен.
Определить PocketPC не так и сложно. HTTP_USER_AGENT содержит «windows ce» + браузер (mobile ie) добавляет ряд своих заголовков, например HTTP_UA_OS. Соответственно при просмотре site.ru с мобильного устройства должна отображаться оптимизированная верстка. Однако помимо этого необходим и безусловный способ получения PDA верстки, самое простое — поддомен «pda». Это просто удобно + важно для всяких поисковых ботов, да и заранее сообщает, что есть и pda версия сайта…
4. Функционал должен сохраняться.
PDA версия сайта просто обязана сохранять весь функционал исходного. Посетитель с мобильным устройство не должен чувствовать себя ущербным! Это касается не только функционала сайта, но и дизайна. Он должен сохранять исходные элементы и техники. Ничего кроме белого фона, черного текста и синих ссылок в PDA версии сайта (примеров не мало) это высшая степень неуважения и презрения к владельцам современных мобильных устройств.
5. CSS.
Mobile IE хвалится поддержкой CSS2, конечно же это все условно =) Чёткого документа по этому поводу на данный момент составить не могу, но у меня возникли проблемы с абсолютным позиционированием, float позиционированием и background свойствах некоторых элементов. Хотя все же базовая поддержка CSS2 существует, можно верстать приятные, красивые сайты.
6. JavaScript.
А вот тут начинается беда… JS с намеками на победу (поддержка xmlhttprequest объекта, попросту — AJAX, других ActiveX и прочее), но порой не умеющий элементарного. Привычные нам id существуют только для чтения, className не существует вовсе (mobile IE с которым я работал — стандартный для WM 5.0. Последний mobile ie уже научился работать и с id и с className). Многие DOM методы отличны (например есть element.children, но нет element.childNodes) и так далее, сюрпризов очень много. Но что самое обидное — AJAX объект возвращает метод responseText, но не возвращает responseXML. У меня на моих проектах используется именно XML, для более понятного API. Пришлось добавлять возможность вывода данных и в JSON формате, чтобы JS на наладонниках смог его «прочитать». Т.е. проще говоря фанатам XML прийдется дописывать\переписывать AJAX интерфейсы, а фанаты JSON и plaint/text пляшут и радуются.
7. PopUp.
Любые необходимые попапы, соответственно, должны открываться как новая страница. Ничего страшного в этом нет, пользователи PDA устройств к этому вполне привыкли. Но кнопка «назад» или «отмена» в таких окнах важна как воздух.
Вот вроде и все, на первое время. Для тестов я советую использовать непосредственно устройство. Либо можно скачать эмулятор с microsoft.com.
Для более удобного тестирования на устройстве я использовался бесплатной утилитой My Mobiler. Она позволяет управлять Pocket`ом из компьютера. Это удобно, воткнул покет в кредл на другом конце стола, а сам свободно им управляешь мышкой…
Мобильная версия сайта: как создать её с нуля и провести аудит существующей
Мобильная версия сайта уже давно не дань моде, а необходимость. По данным Mediascope, в 2020 году в России каждый день мобильным интернетом пользовались в среднем 65,2% населения. Это значит, что для полноценного взаимодействия с пользователями ваш сайт должен корректно работать на всех мобильных девайсах. В этой статье мы расскажем о том, как сделать мобильную версию сайта, как оценить её качество и какие ошибки при адаптации сайта допускают многие разработчики.
Что такое мобильная версия сайта и зачем она нужна?
Мобильная версия сайта — это версия основного сайта, которая позволяет удобно пользоваться им на любых мобильных устройствах.
Любой бизнес должен стремиться к тому, чтобы облегчить клиенту жизнь, а не создавать ему больше проблем. Этот принцип применим в том числе и к сайту компании. Не заставляйте людей ломать глаза над мелким шрифтом и тратить время на поиски нужного пункта в меню.
Мобильные версии сайтов также любимы поисковиками. У Google и Яндекса есть специальные алгоритмы, которые оценивают удобство мобильных сайтов. В зависимости от результата они могут повысить или понизить их позицию в поисковой выдаче.
Если пользователь мобильного попадёт на неадаптивный сайт, скорее всего, он сразу же его закроет. Это также повлияет на ранжирование в поисковиках.
Мобильная аудитория интернета
Из отчёта Digital 2020 видно, что в 2019 году больше половины времени, проведённого в интернете, люди провели с мобильных устройств.
Среди всех интернет запросов 53,3% приходится на мобильные устройства. Это на 8,6% больше, чем в прошлом году. ПК всё ещё играют большую роль в трафике, но их значимость постепенно снижается.
А что в России?
По данным Mediascope, в 2020 году мобильным интернетом хотя бы раз пользовались 70,8% человек. При этом среди населения до 44 лет проникновение интернета уже больше 90%.
А теперь о покупках в интернете. По данным Pwc, пандемия в 2020 только увеличила популярность мобильных устройств. До коронавируса 24% пользователей делали покупки с помощью мобильных. Сейчас цифра увеличилась до 39%. А если прибавить сюда данные по планшетам, получится, что мобильные устройства в два раза опережают ПК.
Мобильная версия сайта VS Адаптивная вёрстка
Адаптировать сайт под мобильные устройства можно двумя способами.
Мобильная версия — это, по сути, отдельный сайт. Он специально разработан под формат мобильных устройств и содержит только минимум необходимой информации. Так как сайт размещается на отдельном поддомене, ссылка будет выглядеть как m.name.ru или mobile.name.ru.
Мобильную версию сайта из-за высокой стоимости обычно могут себе позволить только крупные компании. Например, мобильные версии есть у Вконтакте и Youtube.
Для адаптивной вёрстки в коде основного сайта указывают информацию о том, как он должен отображаться на разных размерах экранов. Адрес сайта в этом случае не меняется. Такая адаптация сайта под мобильные проще и дешевле, ведь сайт не нужно делать с нуля.
В пример можно привести интернет-магазин Ozon. В мобильной версии нет таких больших анимационных баннеров, а основное меню сделано в виде заметных иконок.
Давайте зафиксируем плюсы и минусы каждого способа.
Какую версию выбрать? Зависит от ваших приоритетов.
С точки зрения пользователя никакой разницы нет. Скорость загрузки зависит не только от выбранного варианта, но и от работы сервера, и скорости интернета у посетителя сайта. На удобство использования также больше влияет качество проработки интерфейса, а не способ оптимизации.
Среди минусов адаптивной вёрстки часто отмечают медленную загрузку сайта. Это правда только отчасти. Скорость загрузки адаптивной версии может снижаться, если сама вёрстка сделана некачественно. Современные методы разработки уже давно позволяют убрать из мобильной версии лишние графические материалы, облегчить интерфейс и сделать загрузку сайта быстрее.
Отдельная мобильная версия может добавить сложностей с SEO оптимизацией. Содержание обеих версий сайта в основном будет пересекаться, а значит, есть риск того, что позиции сайта в поисковых системах могут снизиться. Перед тем, как принимать решение о том, какой вариант адаптации выбрать, рекомендуем ознакомиться с этим материалом от Google.
Как узнать адаптирован ли ваш сайт под мобильные устройства?
У Яндекса и Google есть собственные сервисы, которые позволяют проверить адаптивность сайтов:
Эти сервисы покажут не только то, оптимизирован сайт или нет, но и насколько качественно это сделано. Эта информация пригодится при тестировании готовой версии мобильного сайта.
Как перевести свой сайт на мобильную версию?
Самостоятельная разработка сайта. Этот способ даст возможность сделать на сайте любые необходимые функции и создать свой дизайн. В этом главное отличие такого способа от CMS или конструкторов. Но разработка мобильной версии сайта с нуля достаточно дорогое удовольствие. Поэтому такой вариант подходит только для крупного проекта с большим бюджетом.
CMS. На сайт, созданный при помощи CMS, легко вносить изменения даже без навыков программирования. Для адаптации под мобильные устройства, конечно, понадобятся определённые навыки, но сделать это тоже достаточно просто и быстро.
Популярные CMS системы:
Конструкторы сайтов. Если вам не по карману полноценная разработка сайта, конструкторы вроде Tilda или Wix — ваш вариант. Эти сервисы сделаны для непрофессионалов, поэтому разобраться в них под силу всем. Однако есть и минусы. Конструкторы могут не иметь всех необходимых вам функций. Базовый дизайн у таких сайтов тоже типовой. Но если вы готовы потратить время на то, чтобы разобраться в коде, можно разработать более индивидуализированный вариант. Такие конструкторы автоматически адаптируют сайты для мобильных телефонов и планшетов.
Как протестировать готовый мобильный сайт?
Оцениваем скорость загрузки
PageSpeed Insights от Google оценивает, как быстро загружаются сайты на мобильных устройствах и ПК. Результат показывается в баллах от 0 до 100, где 100 — идеально быстрая загрузка.
Сервис не только оценивает скорость загрузки страницы, но и даёт рекомендации, как исправить ситуацию и сделать сайт быстрее.
Также скорость сайта можно проверить с помощью сервиса WebPageTest. Он показывает более расширенную информацию, часть из которой может быть понятна только программистам. Несмотря на то что сервис бесплатный, его функционал позволяет выставить даже нужную нам скорость мобильного интернета. Так можно проверить, как долго ваш сайт будет загружаться у человека, который решит посмотреть его из вагона метро.
Проверяем на отсутствие ошибок
Бесплатный сервис от PR-CY показывает базовую информацию о мобилопригодности сайта. Оценивается размер шрифтов, наличие плагинов и так далее.
Подобный сервис, о котором мы уже сегодня говорили, есть у Яндекса.
Проверяем сайт вручную
Лучше всего проверять сайт на реальных мобильных устройствах. Обычно этим занимаются тестировщики. Но если вы делаете сайт сами, попробуйте открыть его со своего телефона, попросите коллег с другими устройствами проверить правильность отображения всех элементов. Поставьте себя на место пользователя: как выглядит сайт на мобильном устройстве? Насколько удобно прокручивать страницу? Достаточно ли большой шрифт?
Если большого количества мобильной техники под рукой нет, можно воспользоваться симуляторами. Они помогут увидеть, как будет выглядеть сайт на разных типах устройств. Как правило, все они платные. Например, BrowserStack. Но есть и бесплатные версии тестировщиков с меньшим функционалом. Один из них — Adaptivator.
На что обратить внимание при проверке сайта? Рассказываем ниже.
Чек-лист качества мобильной версии сайта
А теперь посмотрим, как должен выглядеть хороший, адаптированный под мобильные устройства сайт. Для примера возьмём сайт нашего агентства.
➔ В меню можно перейти с главного экрана
Для того чтобы облегчить доступ к основным разделам сайта, пользователь должен иметь возможность попасть в меню с одного клика. На нашем сайте кнопка меню для мобильной версии сайта размещена в левом верхнем углу.
➔ На сайте есть только вертикальная прокрутка
Горизонтальная прокрутка очень затрудняет чтение текста, поэтому от неё точно нужно отказываться.
➔ Текст написан достаточно крупным шрифтом
Размер шрифта для мобильной версии сайта должен быть таким, чтобы его было легко прочитать, не ломая при этом глаза. Также проверьте отступы и форматирование текста.
➔ Контент можно увеличивать
Даже если ваш шрифт достаточно крупный, не отказывайте пользователям в возможности увеличить экран.
➔ Сайт вписывается в размеры экрана
Текст не должен быть расположен впритык к краям экрана. Всегда должно оставаться свободное место.
➔ Кнопки удобны для касания пальцев
Кнопки на сайте должны быть достаточно большие, чтобы их было удобно нажимать.
➔ Отсутствуют длинные формы для заполнения
В форме обратной связи должно быть не больше 4-5 вопросов. Например, на нашем сайте мы просим посетителей заполнить 4 поля: имя, e-mail, телефон и ссылку на их сайт. Если форма открывается в отдельном окне, она не должна закрывать собой весь остальной контент.
➔ Номер телефона кликабелен
Пользователь должен иметь возможность связаться с вами как можно проще. Если номер будет добавлен в виде картинки, на него нельзя будет кликнуть и сразу перейти к звонку. Вводить номер руками не слишком удобно.
➔ Видео контент корректно воспроизводится
На сайте не должно быть никаких Flash-элементов, а видео должно открываться на весь экран.
Топ 7 ошибок в мобильных версиях сайтов
Чтобы адаптация сайта под мобильные устройства прошла безболезненно, важно избежать этих ошибок:
1. Сложный интерфейс
В полной версии сайта позволительно занять часть экрана описанием вашей компании. Но если эта информация останется и в мобильной версии, пользователю придётся долго листать экран вниз, пока он не доберётся до нужной кнопки. Также в мобильной или адаптивной версии есть смысл отказаться от большого многоуровнего меню. Оставьте только то, без чего пользователю не обойтись. Лучше всего, если меню влезает в один экран и его не надо пролистывать. Также важно предусмотреть возможность быстрого возврата на главный экран.
2. Слишком маленькие кнопки
Когда человек заходит на сайт с компьютера, он сможет попасть курсором даже в самые маленькие элементы. На сенсорных мобильных устройствах это уже не такая простая задача. Поэтому ваши кнопки должны быть достаточно большого размера. Также должны быть кликабельными все кнопки для связи. Ваш телефон, аккаунты в соцсетях и мессенджеры.
3. Контент, который нельзя воспроизвести
Вся информация, размещённая на мобильной версии сайта, должна корректно отображаться. Особенно это касается видео. Например, на сайтах до сих пор часто встречаются Flash-элементы, хотя эта технология уже признана устаревшей и небезопасной. Избавьтесь от такого контента, и это увеличит скорость загрузки сайта.
4. Большое количество текста на странице
В идеале в мобильной версии пользователь не должен видеть весь текст, предназначенный для пользователей ПК. Конечно, загрузка текстовых блоков не займёт много времени и не отразится на скорости сайта. Зато большие полотна влияют на дизайн мобильной версии сайта и его юзабилити.
5. Невозможность перейти к полной версии
Для мобильных версий важна возможность попасть на полную версию сайта. Ведь человек может зайти к вам с планшета, который тоже распознаётся, как мобильное устройство. Экран у него больше, а значит ему может быть удобнее использовать полную версию.
6. Нечитабельный шрифт
Это касается не только размера, но и контрастности цветов. При этом слишком контрастные цвета выбирать также не стоит. Они хуже воспринимаются человеческим зрением. Просмотр сайта на мобильных устройствах должен быть также комфортен, как и на ПК.
7. Долгая загрузка
Скорость загрузки влияет не только на опыт использования сайта, но и на место в поисковой выдаче. Сайт может долго загружаться из-за:
В заключение
Мобильный трафик не перестаёт расти каждый год и в России, и в мире. Конечно, многие пользователи не отказываются от компьютеров, но в целом это скорее симбиоз. Найдётся мало людей, которые выходят в интернет только с ПК и никогда не пользуются мобильными телефонами.
Поэтому мобильная версия сайта — необходимость для любого бизнеса.
В процессе нашей работы с клиентами мы обязательно оцениваем качество мобильной версии их сайта, а после даём свои рекомендации по улучшению. Если мобильной версии нет, мы берём процесс её создания на себя.
Хотите узнать, как сделать так, чтобы сайт был не только удобным для пользователей, но и приносил прибыль? Читайте нашу статью “14 шагов к созданию сайта, который получит трафик”.
PDA-сайты Рунета: все самое лучшее для владельцев мобильной техники
В современный век развития интернет-технологий все чаще и чаще можно встретить пользователей, выходящих в глобальную Сеть через мобильные или с мобильных устройств. В этой статье речь пойдет о сайтах, которые оптимизированы для просмотра на КПК/коммуникаторе/смартфоне: известно, что эти девайсы имеют небольшие экраны, что не позволяет отображать на них точно также разметку страницы, а также в большинстве случаев владелец не имеет высокоскоростного соединения, чтобы отображать все интерактивные элементы на странице, да и сами страницы не должны быть обширными по размеру загружаемых данных.
Поэтому все чаще и чаще в Сети можно заметить ссылки на PDA-версии ресурсов, то есть оптимизированные варианты отображения страниц для мобильных устройств. Иногда их пишут отдельно, используя JAVA и XML-технологии, иногда под PDA-версией «гордо» размещается обычная упрощенная версия HTML без картинок (например, Lo-fi version в форумах на движке InvisionPowerBoard). Оптимизации подвергается, в основном, та часть кода страницы, которая отвечает за вывод данных, поэтому редко, когда в такой версии можно встретить кнопки загрузки файлов с КПК на сайт (например, для веб-интерфейсов электронной почты) или расширенные средства для интерактивного общения (например, формы ответов в форумах). Рассмотрим такие сервисы, ограничив область их распространения российским сектором Интернета, а в качестве устройства, на котором они будут отображаться, выступит Qtek 9000 с браузером Pocket Internet Explorer базовой версии (без надстроек) под Windows Mobile 5.0.
Яндекс (pda.yandex.ru) – упрощенная версия знаменитого поискового портала для мобильных устройств. Пользователю предоставляется доступ к почте, блогам, погоде, Яндекс. Деньгам, Каталогу Яндекса, Телепрограмме, Афише, Картам, Словарям, Маркету и Wi-Fi точкам доступа. Разумеется, основой ресурса является поисковый механизм (можно сузить границы поиска «только для КПК»), а также отсутствие рекламы и новостей на главной странице.
АПОРТ (pda.aport.ru) – специальная версия поисковика под КПК. Ищутся либо сайты, либо MP3-композиции, чтобы поставить их на звонок. Если таковые не находятся, то в окне поиска выходят MIDI-файлы.
Allsoft (pda.allsoft.ru) – специальная версия известнейшего Интернет-магазина программного обеспечения, адаптированная именно для продаж софта под мобильные платформы (Symbian OS, Windows CE, PocketPC, Palm OS, MS Smartphone). В целом сайт выполнен вполне качественно, немного, правда, огорчили резкие перепады шрифтов между страницами (Корзина выполнена гораздо более крупным шрифтом, чем все остальные разделы, так, что в некоторых меню надписи на кнопках деформированы).
РБК (pda.rbc.ru) – новостная лента, объединяющая новости со следующих ресурсов: PDA.TOP.RBC.RU (Главные новости дня), PDA.SPORT.RBC.RU (Новости спорта), PDA.RBCDAILY.RU (Ежедневная деловая газета), PDA.YTRO.RU (Ежедневная e-газета), PDA.CNEWS.RU (Издание о высоких технологиях). Как водится, рекламы нет, по умолчанию все курсы валют отображаются для доллара и евро, а погода для Москвы (остальные данные надо задавать вручную).
Lenta.Ru (pda.lenta.ru) – мобильная версия известного новостного сайта от Rambler. PDA-версия использует очень контрастное оформление и несколько сложнее для восприятия с первого раза. Плюс ко всему стартовая страница максимально насыщена контентом (есть даже рекламный банер в самом верху), поэтому добраться до нужного раздела довольно сложно. Поиск осуществляется через Календарь (это неудобно, так как он находится внизу страницы и очень мелкий).
Newsru.com (palm.newsru.com) – мобильная версия новостной ленты известного информационного сайта. По сравнению с Лентой. Ру страница выполнена в классической цветовой гамме, данных на главной странице меньше, есть поиск (по слову).
«Комсомольская правда» (pda.kp.ru) – в облегченной версии известной газеты можно прочитать новостную ленту, а также оставить сообщение в гостевой книге.
«Утро» (pda.utro.ru) – очень грамотно сделанная версия для КПК, на странице отображаются только новости и курс валют, ничего лишнего.
«Аргументы и Факты» (pda.aif.ru) – мобильная версия сайта «Аргументов и Фактов», выполненная в виде онлайн-архива номеров (то есть нужно просто указать нужный номер). На сайте минимум бесполезной информации, все страницы прекрасно оптимизированы под загрузку на медленном Интернете.
Mail.ru (pda.mail.ru) – известный русскоязычный почтовый сервис называть поисковиком как-то не особо хочется, на этот лад и настраивает их PDA-версия, в которой ссылка на Поиск и Каталог находится где-то в середине. Интересно то, что у Mail.ru существует еще и WAP версия портала, которая работает совершенно самостоятельно и «потребляет» меньше трафика (большинство сайтов определяют user-agent браузера и автоматически переключают на PDA-версию, даже если вводится WAP-ссылка). Как и у Яндекса, рекламы здесь минимум (она текстовая), а доступ открыт практически ко всем ресурсам, кроме Софта и Денег.
Rambler.ru (pda.rambler.ru) – единственный полноценный вариант мобильной версии поисковика и почтового сервиса для КПК. В почте поддерживается загрузка вложений в письмо, что редкость для такого рода вебсайтов.
PROMT (pda.translate.ru) – онлайн-переводчик для мобильных устройств. В отличие от своей полной версии, поддерживается только русско-английское и англо-русские направления перевода, есть ограничение на ввод (200 символов).
ABBYY Lingvo (pda.lingvo.ru) – онлайн-версия известного словаря для КПК. Поддерживаются все направления перевода, что и в версии для настольных ПК, на выдаче карточка перевода имеет транскрипцию, а также расширенный перевод с примерами.
Рассмотрев несколько PDA-версий известнейших ресурсов, мы обнаружили, что целый ряд сайтов их не имеет вовсе, либо эти версии совершенно неадаптированы под КПК (PDA-версия Google.ru не умеет отображать русскую кодировку, да и английскую тоже). Но скорее всего, в ближайшее время, если исходить из современного темпа развития Интернета, этих сайтов будет все больше и больше.
Есть что сказать? Пишите автору. (info@mobiset.ru)
Роскомнадзор заблокировал портал и форум 4PDA
14 мая операторы связи РФ по указанию Роскомнадзора и решению Мосгорсуда на «КлаудФлэр, Инк» за нарушении авторских прав заблокировали доступ к порталу и форуму 4PDA.
На портале «черных» списков РКН указано, что доступ к ресурсу ограничен по статье 15.6 закона «Об информации» 149-ФЗ.
Администрация 4PDA в курсе проблемы и уже занимается ее решением в правовом поле РФ. Ресурс не имеет претензий к работе регулятора и провайдеров. Фактическая причина блокировки 4PDA — размещение пользователями форума плейлистов, содержащих один из спортивных телеканалов («Футбол 1»). Это нарушало авторские права на трансляции владельца федерального канала «Матч ТВ».
Жалоба в суд была отправлена от ООО «Национальный спортивный телеканал», иск относился к компании «КлаудФлэр, Инк» по части нарушения зарубежной компанией авторских и смежных прав. В документах суда истец требовал обязать ответчика прекратить создание технических условий, обеспечивающих размещение, распространение и использование на сайте 4PDA передач, вещаемых телеканалом «Футбол 1». Он также требовал на постоянной основе ограничить доступ к сайту 4PDA.ru — не к отдельным страницам ресурса, а именно ко всему ресурсу целиком. Это было отражено в решении суда.
В решении суда уточнено, что, согласно системе проверки владельца адреса в интернете Whois, провайдером хостинга сайта 4pda.ru было «КлаудФлэр, Инк», поэтому именно он выступает ответчиком по этому делу. Суд отметил, что истец в качестве доказательства нарушения своих прав предоставил скриншоты страниц, на которых были размещены ссылки на видеопередачи.
Технически компания «КлаудФлэр, Инк» могла обжаловать это решение суда в апелляционном порядке в течение месяца до 26 апреля, но это не было сделано. Владелец сайта 4PDA не наделен правом обжалования, поскольку не был стороной в данном деле, поэтому ресурс сражается за доступ пользователей самостоятельно и после уже всего произошедшего.
Пояснение PDA: «… в качестве ответчика по прошедшему делу были указаны не мы, а КлаудФлэр, Инк, соответственно у нас не было никакой информации об этой ситуации. То есть решение мы получили «по факту» и возможности повлиять на происходящее отсутствовала».