Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Респонсила вашего сайта

551 views

Published on

Респонсив дизайн, основные принципы, подходы, фреймворки и примеры.

Презентация Константина Комелина на встрече Evercode Talks №3 28 марта 2013.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Респонсила вашего сайта

  1. 1. Респонсилавашего сайта Константин Комелин konstantin@komelin.com
  2. 2. m.domain.com Я продвигаю оба сайта, но Мой мобильный сайт поисковики меня такой маленький, а не любят! админ просит деньги за его поддержку! Васины часы - отстой, дажемой мобильныйсайт в экран не умещается!
  3. 3. Известно ли вам, кто придет на сайт завтра? ?
  4. 4. 1025px 321px 769pxDrupalSPB.org
  5. 5. Как они делают это!?
  6. 6. Плавающая сетка width: 100%50% 50% % em rem
  7. 7. Гибкий медиа контент max-width: 100%
  8. 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. 9. <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
  10. 10. Подход «Мобилы первые»
  11. 11. Шаблоны навигации
  12. 12. «Оставь как есть» EthanMarcotte.com
  13. 13. Переключатель Starbucks.com
  14. 14. HTML select Blog.EvercodeLab.com
  15. 15. Левая панель Drupal 8
  16. 16. Якорь для подвала GreyGoose.com
  17. 17. Фреймворки• Twitter Bootstrap (> 47400 stars*)• Zurb Foundation ( > 10300 stars)• Skeleton ( > 3500 stars)• HTML KickStart (> 800 stars)* GitHub stargazers (28 марта 2013)
  18. 18. Demonстрацияhttp://goo.gl/cQk5U
  19. 19. В чем же сила?• Нет привязки к браузерам• Экономия на поддержке• Google и Bing рекомендуют*• Достойный ответ мобильным приложениям• Забота о пользователе* Google: http://goo.gl/e0Gvy* Bing: http://goo.gl/UcrHd
  20. 20. Что почитать?
  21. 21. Законtouchимся• Twitter @KKomelin• Почта konstantin@komelin.com• GitHub konstantin-komelin• Сайт http://komelin.com
  22. 22. Благодарю за внимание!
  23. 23. Credits• Thanks Google Image Search for some images and guys who published them• LazyCrazy from deviantart.com for the Very Emotional Emoticons

×