Поиск – неотъемлемая часть хорошего современного сайта. И чаще всего для организации поиска можно найти готовое решение с базовыми возможностями. Но что делать, если сайт имеет сложный дизайн? Или, скажем, вы имеете дело с капризным заказчиком, который хочет использовать нестандартные шрифты или его любимый оттенок зеленого в качестве фона? Как вписать готовое поисковое решение в дизайн сайта, чтобы любой заказчик остался доволен? Все просто – можно изменять дизайн поисковой выдачи Яндекс.Поиска для сайта! В докладе были рассмотрены несколько примеров того, как, используя только CSS, можно полностью адаптировать поиск к дизайну любого сайта.

1. поиск для сайта
Вебмастерская. Москва, 20 апреля 2013г.
Новые возможности
Елена Першина, Дмитрий Вульбрун

2. 2
Часть
I
• Проблемы,
которые
решает
поиск
• Руководство
к
действию
Часть
II
• Зачем
мы
сделали
«HTML
&
CSS»
• Как
это
работает
• Интерфейс
в
конструкторе
Поиска
для
сайта
• Примеры
использования
«HTML
&
CSS»
О
чем
пойдет
речь

3. 3
Часть
I:
продуктовая

4. 4
Какова ваша цель?

5. 5
Есть проблема?

6. 6
Есть проблема?
?

7. 7
Есть решение!

8. 8
Что важно в поиске: морфология

9. 9
Что важно в поиске: морфология
… а нам это не надо!

10. 10
Что важно в поиске: морфология

11. 11
Что важно в поиске: морфология

12. 12
Что важно в поиске: морфология

13. 13
Что важно в поиске: морфология

14. 14
Что важно в поиске: морфология

15. 15
Что важно в поиске: морфология

16. 16
Как это работает

17. 17
Как это работает
?

18. 18
Что важно в поиске: подсказки
- Помогают верно ввести запрос;
- Обращают внимание пользователей на ту
информацию, которую вы хотите до них
донести;

19. 19
Что важно в поиске: подсказки

20. 20
Что важно в поиске: фильтры-
уточнения
- Задают область поиска;
- Отражают структуру сайта.

21. 21
Что важно в поиске: фильтры-
уточнения

22. 22
Что важно в поиске: фильтры-
уточнения

23. 23
Статистика
- Анализ интереса аудитории;
- Анализ контента сайта.

24. 24
Статистика

25. 25
Статистика

26. 26
Статистика

27. 27
Статистика

28. 28
Статистика

29. 29
Две составляющие поиска
- Внутренняя: поисковая технология
большого Яндекса;
- Внешняя: настройки формы поиска и
поисковой выдачи, учитывающие
пожелания вебмастеров.

30. 30
Эволюция формы. Сейчас

31. 31
Эволюция формы. Будущее

32. 32
Часть
II:
техническая

33. 33
Мы сделали «HTML & CSS»

34. 34
«Iframe» – хорошо, но мало.
«Поиграйте со шрифтами» (с)
«А можно менее зеленый?» (с)
«А у нас фон с котиками!» (с)
«А можно более розовую и более свинью?» (с)

35. 35
Как работает
«HTML & CSS»

36. 36
Страница результатов поиска

37. 37
«HTML
&
CSS»
«IFRAME»
vs
Отличия между структурами выдачи

38. 38
<div id="ya-site-results" onclick="return {'tld': 'ru',
'language': 'ru', 'encoding': '', 'htmlcss': '1.x',
'updatehash': true}"></div>
<script type="text/javascript”>
// JavaScript код для результатов поиска
...
</script>
<style>
# CSS-правила для результатов поиска
...
</style>
Общий вид кода «HTML & CSS»

39. 39
Интерфейс в конструкторе
Поиска для сайта

40. 40
Интерфейс в конструкторе ПДС

41. 41
Интерфейс. CSS-шаблон в коде

42. 42
Примеры использования
«HTML & CSS»

43. 43
Пример 1. Сложный фон страницы

44. 44
Пример 1. Сложный фон страницы

45. 45
Пример 1. Сложный фон страницы

46. 46
#ya-site-results {!
!background: none;!
}!
Пример 1. Сложный фон страницы

47. 47
Пример 1. Сложный фон страницы

48. 48
Пример 2. Мобильная
версия
Стандартная выдача

49. 49
Пример 2. Мобильная
версия
Стандартная выдача

50. 50
#ya-site-form0 .ya-site-form__input-text {font-size: 300% !
important;}
#ya-site-form0 .ya-site-form__submit {font-size: 300% !
important; padding: 5% !important; margin: 0px;}
#ya-site-form0 .ya-site-suggest-elem,
#ya-site-form0 .ya-site-suggest-elem-link,
#ya-site-form0 .ya-site-suggest__content
{font-size: 180% !important;}
Пример 2. Мобильная версия

51. 51
#ya-site-results
{color: #ffffff; background: none;}
#ya-site-results .b-head__l {width: 20%}
#ya-site-results .b-head__logo {width: 100%;}
#ya-site-results .b-head__r {width: 80%}
#ya-site-results .b-head__found {font-size: 200%;}
#ya-site-results .b-serp-item__number,
#ya-site-results .b-serp-item__text {font-size: 200%;}
#ya-site-results .b-serp-item__links, #ya-site-results
.b-serp-url, #ya-site-results .b-serp-url_inline_yes
{font-size: 180%;line-height: 160%;}
#ya-site-results .b-serp-item__title-link {font-size: 250%;
line-height: 160%;}
#ya-site-results .b-pager {font-size: 250%;}
Пример 2. Мобильная версия

52. 52
Пример 2. Мобильная
версия
После применения
CSS

53. 53
Пример 2. Мобильная
версия
После применения
CSS

54. 54
Пример 2. Мобильная
версия
После применения
CSS

55. 55

56. 56

57. 57
А еще можно CSS3
Но об этом подробнее
на Я.Субботнике в Санкт-Петербурге
– следите за анонсами!

58. 58
Елена Першина
Менеджер
по работе с партнерами
http://site.yandex.ru
http://clubs.ya.ru/sitesearch
wulbrun@yandex-team.ru
Twitter: @wulbrun
Спасибо!
Дмитрий Вульбрун
Менеджер проектов
Twitter: @1firstlena
firstlena@yandex-team.ru
Заходите на сайт сервиса:
Задавайте вопросы в Клубе: