Редкие звери

Привет

Олег

Корсунский

cool story

• Nintendo DSi 2008
• Kindle Keyboard 2010
• Nintendo 3DS 2011
• Playstation Vita 2011
• Kindle Paperwhite 2012
• Nokia Asha 501 2013

• Крайне слабая
• Мало памяти

Браузер

Opera 9.5

Вьюпорт

240 × 176

Что умеет

Acid3	59/100
HTML5 Test	82/555
CSS3 Test	Не запустился

Фича	Тест	Реальный результат
backgroundsize	False	False
bgsizecover	False	False
borderradius	False	False
boxshadow	False	False
boxsizing	False	True
cssanimations	False	False
cssgradients	False	False
csstransforms	False	False

Фича	Тест	Реальный результат
csstransforms3d	False	False
csstransitions	False	False
fontface	False	False
mediaqueries	True	True
opacity	True	True
rgba	False	False
textshadow	True	True (без блюра)
touch	False	False
video	False	False

Формы

url email datetime date month week time datetime-local number range

Один шрифт

Модный детект поддержки
кастомных шрифтов не работает

font-family: 'Custom Font', serif;
font-family: 'Custom Font', sans-serif;
font-family: 'Custom Font', monospace;

...

Три размера шрифта

Глючная кириллица

Простые оптимизированные сайты
работают практически без проблем

• Довольно слабая
  (но круче DSi)
• Все еще мало памяти

Браузер

NetFront (WebKit)

Вьюпорт

416 × 480
(на этот раз оба экрана)

Что умеет

Acid3	92/100
HTML5 Test	97/555
CSS3 Test	39%

Фича	Тест	Реальный результат
backgroundsize	True	True
bgsizecover	True	True
borderradius	True	True
boxshadow	True	False
boxsizing	True	True (-webkit-)
cssanimations	True	True (-webkit-)
cssgradients	True	False
csstransforms	True	True (-webkit-)

Фича	Тест	Реальный результат
csstransforms3d	False	True (-webkit-)
csstransitions	True	True (-webkit-)
fontface	True	False
mediaqueries	True	True
opacity	True	True
rgba	True	True
textshadow	True	False
touch	False	False
video	False	False

Один шрифт
(много размеров)

Новые типы полей ввода не поддерживаются

Валидации тоже нет

Анимации

Те же проблемы, но в меньшей степени

Производительность

На уровне среднего смартфона

Браузер

NetFront (WebKit)

Есть вкладки!

Что умеет

Acid3	100/100
HTML5 Test	291/555
CSS3 Test	46%

Фича	Тест	Реальный результат
backgroundsize	True	True
bgsizecover	True	True
borderradius	True	True
boxshadow	True	True
boxsizing	True	True
cssanimations	True	True (-webkit-)
cssgradients	True	True (-webkit-)
csstransforms	True	True (-webkit-)

Фича	Тест	Реальный результат
csstransforms3d	False	True (-webkit-)
csstransitions	True	True (-webkit-)
fontface	True	True
mediaqueries	True	True
opacity	True	True
rgba	True	True
textshadow	True	False
touch	True	True
video	True	True

Шрифты!

Тач эвенты!

Видео!

Новые инпуты не поддерживаются,
валидации форм нет

Как средний смартфон

Не таргетятся
медиа-выражениями

@media color — ага

@media monochrome — неа

E-paper
16 оттенков серого

• Довольно слабая
• Мало памяти

Мощнее, чем DSi

Неплохо переваривает картинки и скрипты

Браузер

NetFront (WebKit)

Что умеет

Acid3	99/100
HTML5 Test	59/555
CSS3 Test	35%

Фича	Тест	Реальный результат
backgroundsize	True	True
bgsizecover	False	False
borderradius	True	True (-webkit-)
boxshadow	True	False
boxsizing	True	True (-webkit-)
cssanimations	True	True (-webkit-)
cssgradients	True	False
csstransforms	True	True (-webkit-)

Фича	Тест	Реальный результат
csstransforms3d	False	True (-webkit-)
csstransitions	True	True (-webkit-)
fontface	True	True (только .svg)
mediaqueries	True	True
opacity	True	True
rgba	True	True
textshadow	True	True (без блюра)
touch	False	False
video	False	False

Кастомные шрифты только в SVG

Валидации форм нет

Ссылки с target="_blank" не открываются

У всех ссылок насильно выставлен
text-decoration: underline;

Анимации

Нормально работают
не сильно нагруженные сайты

Браузер

NetFront (WebKit)

Что умеет

Acid3	100/100
HTML5 Test	212/555
CSS3 Test	45%

Фича	Тест	Реальный результат
backgroundsize	True	True
bgsizecover	True	True
borderradius	True	True
boxshadow	True	True
boxsizing	True	True
cssanimations	True	True (-webkit-)
cssgradients	True	True (-webkit-)
csstransforms	True	True (-webkit-)

Фича	Тест	Реальный результат
csstransforms3d	False	True (-webkit-)
csstransitions	True	True (-webkit-)
fontface	True	True
mediaqueries	True	True
opacity	True	True
rgba	True	True
textshadow	True	True
touch	False	False
video	False	False

Кастомная клавиатура для email

Валидации нет

У всех ссылок насильно выставлен
text-decoration: underline;

Отключается с помощью
text-decoration: none !important;

Анимации

Не сильно нагруженные сайты
работают еще лучше!

Браузер

Ovi a.k.a Nokia Xpress
(Gecko)

• Серверный яваскрипт
  (а-ля Opera Mini)
• Один шрифт
• Три размера шрифта

Что умеет
(ничего)

Acid3	100/100 (с багами)
HTML5 Test	238/555
CSS3 Test	38%

Фича	Тест	Реальный результат
backgroundsize	True	True
bgsizecover	True	True
borderradius	True	False
boxshadow	True	False
boxsizing	True	True (-moz-)
cssanimations	True	False
cssgradients	True	False
csstransforms	True	Buggy

Фича	Тест	Реальный результат
csstransforms3d	False	False
csstransitions	True	False
fontface	True	False
mediaqueries	True	True
opacity	True	False
rgba	True	False
textshadow	True	False
touch	False	False
video	False	False

Все очень плохо!

Лучше оптимизируйте под Оперу Мини

Что в итоге

• Монохромные читалки не таргетится
• Куча ложноположительных результатов тестов

Нафига
я все это рассказывал

• Ненавязчивый яваскрипт это ок
• Большие картинки портят жизнь слабым устройствам
• Большой экран не значит, что нет тача
• Тач не значит, что нет мыши

Таргетинг конкретных групп устройств

• Смарт-телики
  (интернет-кинотеатры)
• Игровые консоли
  (сайты про игры, детские сайты)
• Читалки
  (любой сайт, на который может вести ссылка из книги)

That's all, folks!

Линки

• Редкие звери (раздел в бложеке)
• Моя табличка с тестами
• Using the Nintendo DSi browser, Anna Debenham
• Game console browsers

Моя фигня

• Бложек
• @sweatyhooker