Вёрстка под мобильные устройства, доклад для дизайнеров

[antonKar]

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

 

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

 

1. Общая инфа.

1.1. Вступление про мобилки и как они захватили мир, блаблабла.

1.2. Основные платформы iOS и Android, остальное ни к чему.

1.3. Разрешения экрана, iPad и почти все планшеты штука пикселей, у мобилок (в частности iPhone) 320 пикселей.

1.4. iOS - браузер на webkit, проблем почти нет, если и есть, то в основном спокойно гуглятся.

1.5. Android - всё ОК, кроме необновляемого Android браузера, который живёт со своими глюками.

1.6. Вёрстку под мобильные трудно отлаживать, удалённо на компе можно отлаживать только мобильные Chrome и Firefox, но у них почти никогда нет проблем.

1.7. Почти всегда на стороне JS можно определить tablet или phone, ОС и её версию.

 

2. Что можно и что нельзя?

2.1. Мобильные браузеры очень медленные, нельзя их перегружать.

2.2. Несколько слов о jQuery, TweenMax, анимации можно, но не перебарщивать, анимации со скролом срабатывают только в конце.

2.3. Видео и аудио, баги фичи в iOS (нерегулируемый звук, только 1 медиапоток) и Opera (фуллскрин при воспроизведении)

2.4. Flash нельзя, но можно определить его отсутствие

2.5. Яндекс.Карты, смещение балуна вниз и поля по бокам.

2.6. Vibration API

 

3. SVG

3.1. Зачем нужно, почему мыло на мобильных устройствах.

3.2 ???

 

4. Flexbox (если успею)

4.1 ???

 

Открыт для предложений и идей.

Edited February 16, 2015 by antonKar

[Vlad]

Про ретину надо бы ещё упомянуть.

[npofopr]

Наряду с svg можно и про шрифтовые иконки упомянуть.

[Great Rash]

Обязательно нужно рассказать что такое repaint и reflow.

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

SVG - настолько обширная тема... из багов, что я знаю:

при повторной вставке элемента (при помощи <use xlink:href="" />) на Андроиде не отрисовываются градиенты (нативный браузер, WebView до версии 4.4 включительно)

как минимум на Андроиде не работают SMIL-анимации (опять же нативный браузер)

как минимум на Андроиде не работают трансформации если они задаются в CSS (только атрибуты работают)

SVG-спрайты - это почти всегда гемор

анимированный SVG - это почти всегда гемор