i-Free Group
Компания
50,18
рейтинг
2 июня 2014 в 13:05

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

Привет, Хабра!
Эта статья является продолжением прошлой статьи (JavaScript to APK. http://habrahabr.ru/company/ifree/blog/214531/). Я попробую дать несколько советов по разработке мобильных сайтов, которые сложились из моего опыта работы над сервисами и продуктами в i-Free.
image

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

  • Кнопочные, без поддержки touch-событий
  • С сенсорным экраном, с поддержкой touch-событий
  • Смартфоны


Откуда в 2014 году берутся старые кнопочные телефоны?

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

Откуда в 2014 году берутся новые кнопочные телефоны?

Производство новых J2ME телефонов заполняет низший сегмент рынка. Такие телефоны имеют несколько качественных отличий:

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


Кто делает сайты для таких телефонов?

Как правило, это очень крупные компании, которые стараются сделать свои сервисы максимально доступными (например, Google, Yandex, Mail). Цена вопроса в этом случае не имеет значения. Кроме того, во всех телефонах есть стандартные закладки, в которых вшит сайт оператора, производителя или компании вендора. На таких сайтах можно купить различный контент (игры, картинки, мелодии) или оформить какие-либо услуги. Т.к. телефонов производится очень много, то у таких сайтов может быть очень большая нагрузка.

Особенности верстки для простых телефонов:

  • Может не работать JavaScript. Старайтесь использовать его по минимуму.
  • Может не работать позиционирование в CSS (да и вообще многие CSS свойства)
  • Может не работать даже механизм cookie.
  • У пользователей всегда медленный интернет. Делайте страницы как можно меньше и проще.
  • Пользователь перемещается исключительно по ссылкам (по крайней мере, это удобнее всего). Поэтому старайтесь использовать «якоря» для быстрой навигации по странице.
  • Т.к. очень много вещей может не работать, то возможно вам придется верстать по стандартам HTML3
  • На некоторых телефонах очень трудно, либо вообще невозможно переключить раскладку языка или ответить на СМС не закрыв страницу браузера. Поэтому в ответных СМС всегда должна быть ссылка для возврата к странице, полей ввода должно быть как можно меньше.
  • Практически на всех простых телефонах невозможно увидеть / изменить адресную строку.


Как обходят неработающие cookie?

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

http://wap.samsung.ru/games/index.do

И после:

http://wap.samsung.ru/games/index.do?id=8592387483239423722732

Размеры экрана

Как правило, ширина экрана у большинства кнопочных телефонов соответствует числам: 120, 176, 240, 320 при DPI равным единице. Но в любом случае верстайте резиной. Неизвестно, какой дисплей будет у телефона. Кроме того производители Blackberry и Nokia любят выпускать телефоны с соотношением сторон «landscape», при котором ширина дисплея больше высоты.

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

У смартфонов все ещё лучше, и зачастую они не отличаются по поведению от PC, но стандартные браузеры могут нести небольшие баги. Например, наша тестовая Nokia Lumia не могла делать position: fixed и давала сбои, если мы что-либо выводили в консоль (console.log / console.dir не должны быть в коде продакшн сборки).



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

Операторы и контент

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



Сам контент может иметь очень много представлений. Например, производители игр должны учитывать, что телефоны отличаются как по размеру экрана, так и по операционной системе. Кроме того, все хотят максимально уменьшить вес конечного билда игры. Поэтому одна игра для J2ME телефона может иметь до 20 различных сборок в зависимости от модели телефона. Сами телефоны, в таких случаях обычно разделяются по User-Agent`у и для компактности объединяются в группы, в зависимости от функционала. За каждой игрой в базе закрепляется диапазон поддерживаемых групп.

Аналогичная ситуация начинает проявляться и для современных смартфонов. В данный момент в продаже можно найти телефоны с операционкой: Android (версий 2 и 4), iOS, Windows Phone и т.д. Так-же готовятся к запуску Tizen и FireFox OS. Кроме того, для планшетов и мелких телефонов уже начинают собирать разные сборки, т.к. планшетам необходимы ресурсы в гораздо более высоком качестве, а делать билд для маленьких телефонов тяжеловесным — не имеет смысла. Также производители телефонов могут вносить свои правки и дорабатывать операционные системы под свои аппараты. Поэтому вполне вероятно, что игра легко запускается на телефонах Nokia, но не работает на Fly или Huawei, и наоборот.

Touch-экраны



При использовании touch-экранов пользователи, как правило, используют не точечные нажатия, а жесты. В результате этого текст на странице, а также элементы управления могут выделиться. Чтобы избежать этого, в CSS вам следует запретить выделение для всего:

*, body {
    -moz-user-select: -moz-none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}



Но это правило не должно распространяться на поля ввода:

input, textarea {
    -moz-user-select: text;
    -o-user-select: text;
    -khtml-user-select: text;
    -webkit-user-select: text;
    user-select: text;
}

Кроме того, следует отключить resize у <textarea>, т.к. она не должна менять свой размер:

input, textarea {
    resize: none;
}

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

*, body {
    -webkit-text-size-adjust: none;
}

Тормоза и остановка отрисовки при касании экрана.

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

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

Чтобы убрать задержку, вам необходимо вместо click события, повесить аналогичное touch событие, а также сопутствующие события, такие как touchmove и touchend. Даже если у вас нет callback функции для них, стоит, по крайней мере, вызвать stopEvent. Таким образом, при клике на дисплей, телефон увидит, что JavaScript хочет самостоятельно обработать касание и сразу вернет управление странице.

Желтое и синее выделение при клике.

При клике на какой-либо элемент страницы все устройства с ОС Android ~2 стремятся выделить элемент желтой заливкой, а устройства с ОС Android ~4 — синей.



Желтая заливка убирается путем использования в CSS следующего кода:

*, body {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-focus-ring-color: rgba(0,0,0,0);
    outline: none;
}

Синяя заливка исчезнет при перехвате всех touch-событий на элементе (см. пункт «Тормоза и остановка отрисовки при касании экрана»).

Защитный экран

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



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

Экранная клавиатура

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



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



При использовании элементов input ставьте им тип согласно семантике. Например:

<input type="text"/>
<input type="email"/>



Разница между ними в том, что когда вы будете вводить e-mail, телефон изменит клавиатуру и вынесет знак @ на видное место. Та же схема работает при вводе адреса сайта в адресную строку — телефоны обычно вносят небольшие изменения в раскладку и выводят «.com» для быстрого набора. На момент написания этого текста наилучшие результаты давали смартфоны с операционной системой от Яндекса. В них была стандартная qwerty клавиатура с одновременным выводом русских и английских символов. Это очень удобно для пользователей, т.к. многие привыкли вводить русские пароли на английской раскладке.

Скрытие адресной строки



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

Задержка событий



Суть в том, что касание экрана — процесс длительный. Если вы переходите на прошлую страницу, она может довольно быстро восстановиться из кэша и тогда касание экрана отработает два раза: на исходной странице и на новой (баг воспроизводится не на всех устройствах с touch-экраном). Что бы решить эту проблему, необходимо вешать обработчики с небольшой задержкой. В первый момент вы инициализируете все скрипты, потом выжидаете пол секунды, и лишь потом вешаете обработчики кликов и touch-событий. Как правило, этого времени хватает и проблема исчезает.

Проблема скролла

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

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

Автор: @bakhirev
i-Free Group
рейтинг 50,18
Компания прекратила активность на сайте

Комментарии (10)

  • +17
    По поводу первого «правила» насчет user-select: none;
    Запрещать всему сайту, кроме отдельных элементов, это ни в коем случае нельзя! Пользователь может захотеть выделить абзац, заголовок, да даже название ссылки.
    Ставить user-select: none можно только для кнопок, нажатие на которые может быть повторным (меню аккордеоны, например), или же просто для тех кнопок, которые инициируют переход на другие страницы (из-за плохого отклика, пользователь может нажать дважды/трижды, что-то пойдет не так, и текст выделится — некрасиво получится)
  • +9
    > При использовании touch-экранов пользователи, как правило, используют не точечные нажатия, а жесты. В результате этого текст на странице, а также элементы управления могут выделиться. Чтобы избежать этого, в CSS вам следует запретить выделение для всего

    Не надо считать себя умнее авторов браузеров. Проблема случайного выделения текста давно решена.
    И пользователь может хотеть выделить текст.
    Иногда встречаются сайты, которые это запрещают, их вебмастера начитались руководств подобного типа и бездумно копируют все подобные хаки себе на сайт.
    • +4
      Я очень негодую, когда не выделяется текст на сайте, только отрицательные впечатления от такого сайта.
    • 0
      Да, проблема «давно решена», но вот вопрос — решена ли она достаточно давно, чтобы присутствовать на убогом телефоне из прошлого века технологий? Когда наши фронтендщики приносили HTML на интеграцию, я вначале жутко бесился видя неудобные страницы, но по просьбе мне всегда приносили всё новые и новые девайсы, достаточно убогие, чтобы там не работали либо глючили даже самые базовые функции. Например, у какого-то телефона неправильно парсился HTML, поэтому приходилось тэги выставлять в специальном порядке. Логикой это не асилить, нужно просто верить фронтендщику, что весь ужас добавлен со смыслом.
  • НЛО прилетело и опубликовало эту надпись здесь
    • +2
      Телефоны с touch-экраном, как правило, более продвинутые по технологиям. Для них можно уже немного со скриптами играть. Телефоны с кнопками, как правило, менее продвинуты. Скрипты на них лучше вообще не использовать. Кроме того touch и не touch экран влияет на дизайн. Для touch устройств элементы должны быть крупными, т.к. кликать будут пальцем (по мелким элементом пальцем не попасть).
  • +1
    У Яндекса есть сервис Яндекс.Детектор, через API которого можно получить исчерпывающую информацию о телефоне, зная wap-profile и user-agent. Ответом будет разрешение экрана, модель телефона, возможности J2ME.
  • 0
    Несколько удивительных глупостей: запрет выделения, выключение активных областей при нажатии, скрытие адресной строки — всё, чтобы запутать пользователя и сделать из живого гибкого сайта железобетонный кусок картинки. Осталось только порекомендовать вьюпорт-мету user-scalable=no и всё, финиш.
    • 0
      Вы видимо не поняли. Эта статья не про адаптивность, а про сайты для мобильников. Мобильные порталы — делают это для извлечения дополнительной прибыли после продажи телефона. Это не хабра, где пользователи читают статьи. Это место, где реальные пацаны играют в игры и покупают контент.

      Не знаю как у вас отработает, но сайт рассчитан на Андройды.
      До:
      bakhirev.biz/
      После:
      samsungsocialplay.com/
      (ссылки временные, в течение суток затру изменения, контент платный — так что не покупайте во время тестов =) )
      • +1
        Я всё правильно понял, мы говорим о сайтах для мобильных. Адаптивность здесь не причём, речь о том, чтобы не мешать пользователю пользоваться сайтом так, как он привык в своём браузере:

        1. Сайт можно увеличить
        2. Текст можно выделить и скопировать
        3. Нажатая ссылка или кнопка подсвечивается, а значит я попал в неё
        4. Видно адрес страницы, а значит понятно где я нахожусь и безопасный ли сервер

        Хоть анроиды, хоть ведроиды — вы рекомендуете как делать мобильные сайты, и рекомендуете плохие вещи.

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

Самое читаемое Разработка