Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Адаптивный веб-дизайн     на практике       Антон Епрев   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
Адаптивный веб-дизайн на практике (Антон Епрев)
Адаптивный веб-дизайн на практике (Антон Епрев)
Prochain SlideShare
Chargement dans…5
×

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

6 498 vues

Publié le

  • Отличная презентация. Сегодня только закончил делать на аналогичную тему (некоторые моменты даже совпали =) ). Позже, после презентации публике опубликую.
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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

  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

×