Category Archives: Mobile

CSS-фреймворк

http://topcoat.io/topcoat/topcoat-mobile-dark.html — аналог twitter bootstrap, но вроде заточенный на скорость и под мобилы.

В Android 4.4 KitKat по умолчанию chrome

http://www.mobilexweb.com/blog/android-4-4-kitkat-browser-chrome-webview Хотя конечно со множеством оговорок и странностей, но браузером по умолчанию будет Google Chrome 30. Главный минус — он не будет обновляться сам, только с обновлением ОС.

Проверка поддержки html5-свойств конкретным браузером

http://html5test.com/ — проверяет поддержку всего, что есть в спецификациях html5, в текущем браузере. Удобно для работы с мобильными браузерами. Удобнее, чем выискивать на http://caniuse.com, а ещё лучше в связке.

Методы тестирования мобильных приложений

http://webuild.envato.com/blog/techniques-for-mobile-and-responsive-cross-browser-testing/

Тестирование на нескольких мобильных устройствах одновременно

Отличный аналог Adobe EDGE — http://vanamco.com/ghostlab/. Отличается тем, что на клиентских устройствах не надо ставить никаких приложений. Есть неплохое описание/сравнение с Adobe EDGE — http://atlantajones.com/blog/adobe-edge-inspect-vs-ghostlab

Оптимизация загрузки сайта для мобильных устройств

http://youtu.be/YV1nKLWoARQ Слайды:https://docs.google.com/presentation/d/1IRHyU7_crIiCjl0Gvue0WY3eY_eYvFQvSfwQouW9368/present Основные вещи: В идеале надо стараться уложиться в 14 кБ для отрисовки первичной страницы (хотя бы для основного макета со стилями). При этом стили для этого сделать встраиваемыми, т.к. для избежания FOUC (flash of unstyled content) браузер ждет догрузки css и только после этого начинает отрисовывать страницу. Javascript стараться грузить уже после отрисовки …

Соотношения сторон и разрешения мобильных устройств

http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/ (по ссылке таблицу можно сортировать) Device Name Platform Pixel Density Screen Size Portrait Viewport Width Landscape Viewport Width Acer Iconia Tab A100 Android 166dpi 7″ 800 1280 Acer Iconia Tab A101 Android 170dpi 7″ 600 1024 Acer Iconia Tab A200 Android 160dpi 10.1″ 800 1280 Acer Iconia Tab A500 Android 149dpi 10.1″ 648 …

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

Хороший доклад — Прокрустовы окна. Как вписаться в устройства с минимальными потерями (ссылка на видео — http://mediadl.microsoft.com/mediadl/www/r/rus/html5camp2011/4005_800_2.wmv, слайды на http://pepelsbey.net/pres/procrustes/). Главное — это понять viewport и dpi. Для примера:

<meta name="viewport" 
content="width=device-width, target-densitydpi=device-dpi, user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />

1 2	<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />

Советуют удобные сервисы для тестирования мобильных сайтов («firebug для мобильных устройств») — Opera Mini Simulator и Opera Mobile Emulator for desktop.