Респонсив дизайн, основные принципы, подходы, фреймворки и примеры. Презентация Константина Комелина на встрече Evercode Talks №3 28 марта 2013.

1. Респонсила
вашего сайта
Константин Комелин
konstantin@komelin.com

2. m.domain.com
Я продвигаю оба
сайта, но Мой мобильный сайт
поисковики меня такой маленький, а
не любят! админ просит деньги
за его поддержку!
Васины часы -
отстой, даже
мой мобильный
сайт в экран не
умещается!

3. Известно ли вам, кто придет на сайт завтра?
?

4. 1025px
321px
769px
DrupalSPB.org

5. Как они делают это!?

6. Плавающая сетка
width: 100%
50% 50%
% em rem

7. Гибкий медиа контент
max-width: 100%

8. @media запросы
@media all and (min-width: 480px) {…}
<link rel=“stylesheet” href=“tablet.css”
media=“all and (min-width: 480px)” />
@import url(“tablet.css”)
all and (min-width: 480px);

9. <meta name=“viewport”
content=“width=device-width, initial-scale=1.0”>

10. Подход «Мобилы первые»

11. Шаблоны навигации

12. «Оставь как есть»
EthanMarcotte.com

13. Переключатель
Starbucks.com

14. HTML select
Blog.EvercodeLab.com

15. Левая панель
Drupal 8

16. Якорь для подвала
GreyGoose.com

17. Фреймворки
• Twitter Bootstrap (> 47400 stars*)
• Zurb Foundation ( > 10300 stars)
• Skeleton ( > 3500 stars)
• HTML KickStart (> 800 stars)
* GitHub stargazers (28 марта 2013)

18. Demonстрация
http://goo.gl/cQk5U

19. В чем же сила?
• Нет привязки к браузерам
• Экономия на поддержке
• Google и Bing рекомендуют*
• Достойный ответ мобильным приложениям
• Забота о пользователе
* Google: http://goo.gl/e0Gvy
* Bing: http://goo.gl/UcrHd

20. Что почитать?

22. Законtouchимся
• Twitter @KKomelin
• Почта konstantin@komelin.com
• GitHub konstantin-komelin
• Сайт http://komelin.com

23. Благодарю за внимание!

24. Credits
• Thanks Google Image Search for some images
and guys who published them
• LazyCrazy from deviantart.com for the Very
Emotional Emoticons