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.
Адаптивный веб-дизайн     на практике       Антон Епрев   a.eprev@corp.mail.ru
goo.gl/YFsuS2
Responsive Web Design    o Резиновая верстка    o Плавающие изображения    o Медиа-запросы3
goo.gl/rCZ4Z4
Mobile First    Использование мобильного    интернета удваивается с    каждым годом [goo.gl/F17AD]    В рунете 10% посещен...
Mobile First    o Фокус на главном    o Полнофункциональная мобильная версия    o Рабочая большая версия6
Мобильные браузеры7                        goo.gl/vfs1d
Классы поддержки браузеров    Graded Browser Support [goo.gl/3vbtC]    C:   IE7-    A:   IE8/9, Chrome, Safari, Firefox, O...
Отрубаем концы     <!DOCTYPE html>     <html><head>       <!--[if !(IE)|(gte IE 8)]><!-->       <link type="text/css" ... ...
Progressive Enhancement     +   Гарантированная работа сервиса в         любом устройстве     +   Возможность выкатывать н...
12
Требования к веб-дизайну     o «Pixel-perfect»     o Поддержка touch-устройств     o Минимальное поддерживаемое       разр...
14
15
16
Настрой Viewport     <meta name="viewport" content="       width=device-width,       initial-scale=1,       minimum-scale=...
Поддержка:hover     var touch = ontouchstart in window;     $(html).addClass(       touch ? touch-yes : touch-no     );   ...
Определение возможностей     var video = !!document.createElement(video).canPlayType;     var flash = (typeof navigator.pl...
Отлавливаем scroll     <ul class="feed">       <li class="feed__item">...</li>       <!-- ... -->       <li class="feed__n...
Desktop vs. Mobile21
Облегчаем функционал     var desktop = screen.width > 768 && !touch;     $(.button).click(function (e) {       if (desktop...
Задача24
Каркас     <a href="#" class="button">       <span class="button__inner"></span>     </a>     .button { // Sass (SCSS)    ...
<a href="#" class="button">       <span class="button__inner">         <img src="empty.png"              class="button__ic...
<a href="#" class="button">       <span class="button__inner">         <img src="empty.png"              class="button__ic...
<a href="#" class="button">       <span class="button__inner">         <i class="button__icon">Icon</i>       </span>     ...
<a href="#" class="button">       <span class="button__inner">         <i class="button__icon">Icon</i>         <u class="...
.button {       height: $height - $border-width * 2;     }     .button {       @include box-sizing(content-box);       hei...
.button {       height: $height - $border-width * 2;     }     .button {       @include box-sizing(content-box);       hei...
Opera Mini и line-height     .button__inner {       line-height: $height - $border-width * 2;     }              <A>      ...
Opera Mini и line-height     .button__inner {       line-height: 1; // сбрасываем для всех       padding: (         $heigh...
Handheld!     Режимы Opera Mini:     o Desktop     o Mobile     См. goo.gl/XixDM34
Handheld!     Режимы Opera Mini:     o Desktop     o Mobile     См. goo.gl/XixDM35
Handheld!     Режимы Opera Mini:     o Desktop     o Mobile     См. goo.gl/XixDM36
<link       href="..."       rel="stylesheet"       type="text/css"       media="all"     />     <link       href="..."   ...
<link       href="..."       rel="stylesheet"       type="text/css"       media="all"     />     <link       href="..."   ...
@media screen and       (max-width: 320px) {         .button__text {           display: none;         }}39
Handheld!     @media screen and       (max-width: 320px) {         .button__text {           display: none;         }}    ...
Handheld!     @media screen and       (max-width: 320px) {         .button__text {           display: none;         }}    ...
Handheld!     @media screen and       (max-width: 320px) {         .button__text {           display: none;         }}    ...
Особенности click в iOS     <a class="button">...</a>     .button {       ...     }     $(body).delegate(       .button, c...
Особенности click в iOS     <div class="button">...</div>     .button {       ...     }     $(body).delegate(       .butto...
Особенности click в iOS     <div class="button">...</div>     .button {       cursor: pointer;     }     $(body).delegate(...
Особенности click в iOS     <div class="button">...</div>     .button {       cursor: pointer;     }     $(body).delegate(...
Ни жив, не мёртв…     o {position: fixed}       iOS 5, Android 3, Opera Mobile     o {overflow: scroll}       iOS 5, Andro...
Средства разработчика     o iOS Simulator     o Opera Mobile Emulator [goo.gl/QIkmf]     o Opera Mini Online Simulator [go...
49
50
51
52
53
Q&A    Антон Епревa.eprev@corp.mail.ru
Адаптивный веб-дизайн на практике (Антон Епрев)
Адаптивный веб-дизайн на практике (Антон Епрев)
Upcoming SlideShare
Loading in …5
×

Адаптивный веб-дизайн на практике (Антон Епрев)

6,484 views

Published on

  • Отличная презентация. Сегодня только закончил делать на аналогичную тему (некоторые моменты даже совпали =) ). Позже, после презентации публике опубликую.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Адаптивный веб-дизайн на практике (Антон Епрев)

  1. 1. Адаптивный веб-дизайн на практике Антон Епрев a.eprev@corp.mail.ru
  2. 2. goo.gl/YFsuS2
  3. 3. Responsive Web Design o Резиновая верстка o Плавающие изображения o Медиа-запросы3
  4. 4. goo.gl/rCZ4Z4
  5. 5. Mobile First Использование мобильного интернета удваивается с каждым годом [goo.gl/F17AD] В рунете 10% посещений приходятся на мобильные устройства [goo.gl/fBLCF]5
  6. 6. Mobile First o Фокус на главном o Полнофункциональная мобильная версия o Рабочая большая версия6
  7. 7. Мобильные браузеры7 goo.gl/vfs1d
  8. 8. Классы поддержки браузеров Graded Browser Support [goo.gl/3vbtC] C: IE7- A: IE8/9, Chrome, Safari, Firefox, Opera, Opera Mobile, Opera Mini 4/6 X: Chrome 12, Firefox 4, Opera 108
  9. 9. Отрубаем концы <!DOCTYPE html> <html><head> <!--[if !(IE)|(gte IE 8)]><!--> <link type="text/css" ... /> <script ...></script> <!--<![endif]--> </head><body> ... </body></html>10
  10. 10. Progressive Enhancement + Гарантированная работа сервиса в любом устройстве + Возможность выкатывать новые изменения раньше – Сложность реализации11
  11. 11. 12
  12. 12. Требования к веб-дизайну o «Pixel-perfect» o Поддержка touch-устройств o Минимальное поддерживаемое разрешение 240px13
  13. 13. 14
  14. 14. 15
  15. 15. 16
  16. 16. Настрой Viewport <meta name="viewport" content=" width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0 " />17
  17. 17. Поддержка:hover var touch = ontouchstart in window; $(html).addClass( touch ? touch-yes : touch-no ); .touch-no .item .item__link { display: none; } .touch-no .item:hover .item__link { display: block; }18
  18. 18. Определение возможностей var video = !!document.createElement(video).canPlayType; var flash = (typeof navigator.plugins[Shockwave Flash] == object); if (!flash && typeof window.ActiveXObject != undefined) try { new ActiveXObject(ShockwaveFlash.ShockwaveFlash); flash = true; } catch (e) {}19
  19. 19. Отлавливаем scroll <ul class="feed"> <li class="feed__item">...</li> <!-- ... --> <li class="feed__next-page">...</li> </ul> .feed__next-page { display: block; } $(document).one(scroll, function() { $(.feed__next-page).hide(); });20
  20. 20. Desktop vs. Mobile21
  21. 21. Облегчаем функционал var desktop = screen.width > 768 && !touch; $(.button).click(function (e) { if (desktop) { e.preventDefault(); // AJAX } });22
  22. 22. Задача24
  23. 23. Каркас <a href="#" class="button"> <span class="button__inner"></span> </a> .button { // Sass (SCSS) padding: $border-width; height: $height - $border-width * 2; } .button__inner { line-height: $height - $border-width * 2; }25
  24. 24. <a href="#" class="button"> <span class="button__inner"> <img src="empty.png" class="button__icon" alt="Icon" /> </span> </a> .button__icon { width: ...; height: ...; background:...; } IE6: Chrome:26
  25. 25. <a href="#" class="button"> <span class="button__inner"> <img src="empty.png" class="button__icon" alt="Icon" /> </span> </a> .button__icon { width: ...; height: ...; background:...; } IE6: Chrome:27
  26. 26. <a href="#" class="button"> <span class="button__inner"> <i class="button__icon">Icon</i> </span> </a> .button__icon { ... text-indent: -9999px; } IE6: Chrome:28
  27. 27. <a href="#" class="button"> <span class="button__inner"> <i class="button__icon">Icon</i> <u class="button__text">Text</u> </span> </a> <button class="button"> <span class="button__inner"> <i class="button__icon">Icon</i> <u class="button__text">Text</u> </span> </button>29
  28. 28. .button { height: $height - $border-width * 2; } .button { @include box-sizing(content-box); height: $height - $border-width * 2; } <A> <BUTTON>30
  29. 29. .button { height: $height - $border-width * 2; } .button { @include box-sizing(content-box); height: $height - $border-width * 2; } <A> <BUTTON>31
  30. 30. Opera Mini и line-height .button__inner { line-height: $height - $border-width * 2; } <A> <BUTTON>32
  31. 31. Opera Mini и line-height .button__inner { line-height: 1; // сбрасываем для всех padding: ( $height - $border-width * 2 - $font-size )/2 0; height: $font-size; } <A> <BUTTON>33
  32. 32. Handheld! Режимы Opera Mini: o Desktop o Mobile См. goo.gl/XixDM34
  33. 33. Handheld! Режимы Opera Mini: o Desktop o Mobile См. goo.gl/XixDM35
  34. 34. Handheld! Режимы Opera Mini: o Desktop o Mobile См. goo.gl/XixDM36
  35. 35. <link href="..." rel="stylesheet" type="text/css" media="all" /> <link href="..." rel="stylesheet" type="text/css" media="all, handheld" />37
  36. 36. <link href="..." rel="stylesheet" type="text/css" media="all" /> <link href="..." rel="stylesheet" type="text/css" media="all, handheld" />38
  37. 37. @media screen and (max-width: 320px) { .button__text { display: none; }}39
  38. 38. Handheld! @media screen and (max-width: 320px) { .button__text { display: none; }} @media handheld, screen and (max-width: 320px) { .button__text { display: none; }}40
  39. 39. Handheld! @media screen and (max-width: 320px) { .button__text { display: none; }} @media handheld, screen and (max-width: 320px) { .button__text { display: none; }}41
  40. 40. Handheld! @media screen and (max-width: 320px) { .button__text { display: none; }} @media all and (max-width: 320px) { .button__text { display: none; }}42
  41. 41. Особенности click в iOS <a class="button">...</a> .button { ... } $(body).delegate( .button, click, function () { // :) } );43
  42. 42. Особенности click в iOS <div class="button">...</div> .button { ... } $(body).delegate( .button, click, function () { // :( } );44
  43. 43. Особенности click в iOS <div class="button">...</div> .button { cursor: pointer; } $(body).delegate( .button, click, function () { // :) } );45
  44. 44. Особенности click в iOS <div class="button">...</div> .button { cursor: pointer; } $(body).delegate( .button, click, function () { // :) } );46
  45. 45. Ни жив, не мёртв… o {position: fixed} iOS 5, Android 3, Opera Mobile o {overflow: scroll} iOS 5, Android 3.2 o Opera Mini: JavaScript См. goo.gl/XixDM47
  46. 46. Средства разработчика o iOS Simulator o Opera Mobile Emulator [goo.gl/QIkmf] o Opera Mini Online Simulator [goo.gl/fHEv4] o Opera Remote Debugging o Weinre [goo.gl/TmXxo] o Adobe Shadow [goo.gl/hfN6Y]48
  47. 47. 49
  48. 48. 50
  49. 49. 51
  50. 50. 52
  51. 51. 53
  52. 52. Q&A Антон Епревa.eprev@corp.mail.ru

×