Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
О докладчике
• C 2002 года занимаюсь
Web-программирование
• Обучаю студентов
программированию
• Знаю AWS, EC2, S3, СF, …,
ZF, Symfony 2, Drupal,… ,
SCRUM, ... SMM, ...
• Специализируюсь на
бэкенде
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Как разрабатывать и отлаживать?
1. Определитесь со структурой контента и
макета.
2. “Mobile first” - сначала разрабатываем
макет для мобильного устройства
3. Оптимизируйте в зависимости от
устройства
Slide 6
Slide 6 text
Как разрабатывать и отлаживать?
Slide 7
Slide 7 text
Структура контента
• Заголовок
• Фотографии
• Описание
Slide 8
Slide 8 text
Структура макета
• Mostly Fluid
• Column Drop
• Layout Shifter
• Tiny Tweaks
• Off Canvas
Multi-Device Layout Patterns - http://www.lukew.com/ff/entry.asp?1514
Slide 9
Slide 9 text
Mostly Fluid
Slide 10
Slide 10 text
Column Drop
Slide 11
Slide 11 text
Layout Shifter
Slide 12
Slide 12 text
Tiny Tweaks
Slide 13
Slide 13 text
Off Canvas
Slide 14
Slide 14 text
Адаптивные единицы
Slide 15
Slide 15 text
GRID FRAMEWORKS
Bootstrap, Foundation, Skeleton, 960.gs
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Казалось бы типичный сайт…
Slide 21
Slide 21 text
… а сверстан с использованием
колонок
Slide 22
Slide 22 text
Использование колонок
http://www.dejurka.ru/web-design/grid-oriented-design/
Slide 23
Slide 23 text
АДАПТИВНЫЙ ДИЗАЙН
HTML5, Mobile, Grid system
Slide 24
Slide 24 text
Balsamiq Mockups
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
http://bit.ly/16Nc5Ml
Slide 27
Slide 27 text
Что посмотреть
или
Краткий курс — «Адаптивный сайт за неделю»
http://bit.ly/NYOg9M
Slide 28
Slide 28 text
Адаптивные изображения
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Связь со мной:
• [email protected]
• www.taras.pro
• @miroling
• fb.me/miroling
• vk.com/miroling
Спасибо за внимание!