Проблеми при верстці сайтів та ігор. Особливості сайтів для мобільників

    Привіт, Хабра!
Ця стаття є продовженням минулої статті (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 і замість того, щоб повернутися в теж місце — ми повертаємося на початок списку.
 
 
    
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.