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

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

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

4769e8ad10f8a1d453dd6e59ecdbcbe4?s=128

thinkphp_com_ua

March 22, 2013
Tweet

Transcript

  1. None
  2. О докладчике • C 2002 года занимаюсь Web-программирование • Обучаю

    студентов программированию • Знаю AWS, EC2, S3, СF, …, ZF, Symfony 2, Drupal,… , SCRUM, ... SMM, ... • Специализируюсь на бэкенде
  3. None
  4. None
  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

  16. None
  17. None
  18. None
  19. None
  20. Казалось бы типичный сайт…

  21. … а сверстан с использованием колонок

  22. Использование колонок http://www.dejurka.ru/web-design/grid-oriented-design/

  23. АДАПТИВНЫЙ ДИЗАЙН HTML5, Mobile, Grid system

  24. Balsamiq Mockups

  25. None
  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>
  29. None
  30. Связь со мной: • mail@taras.pro • www.taras.pro • @miroling •

    fb.me/miroling • vk.com/miroling Спасибо за внимание!