Вёрстка для мобильных телефонов
•
1 like•1,199 views
Верстать для мобильных не сложно, но непривычно.
Report
Share
Вёрстка для мобильных телефонов
- 1. Вёрстка для мобильных телефонов Наталия Макишвили Верстальщик Яндекс.Субботник, Москва, 31 января 2009 года 1
- 2. Верстать для мобильных не сложно 2 2
- 3. Верстать для мобильных не сложно, но непривычно. 3 3
- 4. 4 4
- 5. Верстка для маленьких экранов изменяет наработанные подходы к вёрстке: устройств очень много и они очень разные 5 5
- 6. 6 6
- 7. План доклада — Деление сервисов на телефонные и смартфонные версии — Мобильные браузеры — Особенности верстки для телефонов 7 7
- 8. Делим устройства на группы — телефоны, — смартфоны. 8 8
- 9. Делим версии сервисов — телефонная, — смартфонная. 9 9
- 10. 10 10
- 11. Браузеры смартфонов — широкий экран и удобная навигация, — поддержка JavaScript, — хорошая поддержка css, — улучшенная поддержка графики. 11 11
- 12. Браузеры телефонов — ограничения размеров страниц, — ограниченная поддержка css. 12 12
- 13. 2 версии мобильных Яндекс-сервисов http://m.yandex.ru − для смартфонов http://m.ya.ru − для телефонов 13 13
- 14. Опыт — особенности из спецификации и документации, — особенности, не описанные, но обнаруженные. 14 14
- 15. Смартфонные браузеры - Nokia Browser (WebKit) - IE Mobile - Safari - Opera Mobile 15 15
- 16. Телефонные браузеры — Nokia Browser (Mobile Browser) — OpenWave — NetFront — Opera Mini 16 16
- 17. Особенности верстки под мобильные телефоны 17 17
- 18. Информация о браузере в телефоне - поддержка WAP 2.0 - наличие XHTML-браузера 18 18
- 19. Браузер мобильного телефона должен поддерживать - XHTM Mobile Profile - WAP CSS 2.0 19 19
- 20. Как мы верстаем? 20 20
- 21. Как мы верстаем? Мы верстаем по стандартам. 21 21
- 22. XHTML Mobile Profile <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> 22 22
- 23. XHTML Mobile Profile — оптимизирован для мобильных устройств — рекомендован для разработки мобильных сервисов W3C — разработан на основе XHTML DTD — правила разметки XHTML DTD 23 23
- 24. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd 24 24
- 25. <head> <title> — говорящий, но короткий 25 25
- 26. Отображение title в OpenWave 26 26
- 28. <head> <link> Плюс: — стили закешируются Минус: — не все браузеры поддерживают внешние листы стилей, 28 28
- 29. <head> <style> Плюс: — нет проблемы с устройствами, не понимающими внешние стили — стили загружаются с html одним http-запросом Минус: — нет кеширования 29 29
- 30. Проблема дочерних селекторов Стили применятся Стили НЕ применятся 30 30
- 31. Проблема дочерних селекторов Мы используем или 31 31
- 32. Глобальные стили 32 32
- 33. Шрифты font-size: — em — small, medium, large ... — % Я использую: 33 33
- 34. Шрифты (Samsung E250) 34 34
- 35. Глобальные стили 35 35
- 36. Правила для стилей — Ластик используем только для тех элементов, которые используются в данном проекте, — На странице использовать только необходимые стили, — Сборка стилей. 36 36
- 37. <body> ДА НЕТ 37 37
- 38. Принципы вёрстки — резиновая раскладка, — семантика документа, — валидность. 38 38
- 39. — float — overflow — position Не использовать 39 39
- 40. Таблицы Правила: — не использовать таблицы для раскладки, — не использовать вложенные таблицы, — использовать альтернативные способы оформления информации 40 40
- 41. Проблемы отображения bold <b>, <strong>: font-style: bold 41 41
- 42. Проблемы отображения italic <i>, <em>: font-style: italic - русский текст 42 42
- 43. Ссылки — цвета активным и посещенным ссылкам задавать можно и нужно, — не все браузеры применяют изменения цветов ссылок, — не следует использовать фон для ссылок черного, синего или красного цветов. 43 43
- 44. Ссылки accesskey: — для удобства навигации (быстрого перехода по ссылкам), — необходимо информировать пользователя о наличии ключей. Не поддерживается некоторыми Nokia. 44 44
- 46. Ссылки Якоря: Не поддерживается Nokia, Openwave. 46 46
- 47. Списки <ul> Сброс дефолтных стилей: Ряд браузеров не применяет. 47 47
- 48. Списки <ul> Сброс дефолтных стилей: решение. 48 48
- 49. Заголовки Браузеры поддерживают своеобразно. Отображение по-умолчанию: 49 49
- 50. Заголовки Стили: 50 50
- 51. Заголовки Стили: Изменение шрифта не применяется в браузере OpenWave Отображение по-умолчанию, или 51 51
- 52. Изображения Правила: — графику оптимизируем по размеру и весу, — реальные размеры изображений указываем в атрибутах, — указываем alt. 52 52
- 53. Изображения Используемые форматы изображений: — jpg, — gif, — png-8. 53 53
- 54. Изображения png-8: На мобильных телефонах Fly: — не отображается вообще, — отображается, но на черном фоне. 54 54
- 55. Фоновое изображение 55 55
- 56. Фоновое изображение Особенности: — не применяется сокращенная запись css свойств, — не применяется позиционирование фона в % в сокращенной форме, — не отображаются фоновые изображения. 56 56
- 57. Фоновое изображение Правила: — использовать полную запись css-свойств, — не нести в фоновом изображении смысловых нагрузок. 57 57
- 58. Вес страницы — не более 10кБ кода, — не более 20кБ кода со стилями и картинками. 58 58
- 59. Полезные ссылки http://www.w3.org/TR/mobile-bp/ − Mobile Web Best Practices 1.0 http://www.w3.org/TR/css-mobile/ − CSS Mobile Profile 2.0 http://www.openmobilealliance.org/ − Open Mobile Alliance http://www.mobiforge.com/ − mobiForge - mobile development community http://www.forum.nokia.com/main/resources/getting_started/xhtml_content.html − Nokia Content Development recomendations http://developer.sonyericsson.com/site/global/home/p_home.jsp − Sony Ericsson Mobile Developer Support http://developer.openwave.com/dvl/tools_and_sdk/phone_simulator/choosing.htm − Openwave Developer Network 59 59