ThinkPHP #6: Адаптивный дизайн - время пришло!

Тарас поведает о тонкостях создания сайтов для мобильных и настольных устройств, которые используют единую версию шаблона.

Transcript

2. О докладчике • C 2002 года занимаюсь Web-программирование • Обучаю студентов программированию • Знаю AWS, EC2, S3, СF, …, ZF, Symfony 2, Drupal,… , SCRUM, ... SMM, ... • Специализируюсь на бэкенде
5. Как разрабатывать и отлаживать? 1. Определитесь со структурой контента и макета. 2. “Mobile first” - сначала разрабатываем макет для мобильного устройства 3. Оптимизируйте в зависимости от устройства
6. Как разрабатывать и отлаживать?
7. Структура контента • Заголовок • Фотографии • Описание
8. Структура макета • Mostly Fluid • Column Drop • Layout Shifter • Tiny Tweaks • Off Canvas Multi-Device Layout Patterns - http://www.lukew.com/ff/entry.asp?1514
9. Mostly Fluid
10. Column Drop
11. Layout Shifter
12. Tiny Tweaks
13. Off Canvas
14. Адаптивные единицы
15. GRID FRAMEWORKS Bootstrap, Foundation, Skeleton, 960.gs
20. Казалось бы типичный сайт…
21. … а сверстан с использованием колонок
22. Использование колонок http://www.dejurka.ru/web-design/grid-oriented-design/
23. АДАПТИВНЫЙ ДИЗАЙН HTML5, Mobile, Grid system
24. Balsamiq Mockups
26. http://bit.ly/16Nc5Ml
27. Что посмотреть или Краткий курс — «Адаптивный сайт за неделю» http://bit.ly/NYOg9M
28. Адаптивные изображения <picture alt="angry pirate"> <source src=hires.png media="min-width:800px"> <source src=midres.png media="min-width:480px"> <source src=lores.png> <!-- fallback for browsers without support --> <img src=midres.png alt="angry pirate"> </picture>
30. Связь со мной: • mail@taras.pro • www.taras.pro • @miroling • fb.me/miroling • vk.com/miroling Спасибо за внимание!