Яндекс.Поиск для сайта. html+css: новые возможности...
DESCRIPTION
Поиск – неотъемлемая часть хорошего современного сайта. И чаще всего для организации поиска можно найти готовое решение с базовыми возможностями. Но что делать, если сайт имеет сложный дизайн? Или, скажем, вы имеете дело с капризным заказчиком, который хочет использовать нестандартные шрифты или его любимый оттенок зеленого в качестве фона? Как вписать готовое поисковое решение в дизайн сайта, чтобы любой заказчик остался доволен? Все просто – можно изменять дизайн поисковой выдачи Яндекс.Поиска для сайта! В докладе были рассмотрены несколько примеров того, как, используя только CSS, можно полностью адаптировать поиск к дизайну любого сайта.TRANSCRIPT
![Page 1: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/1.jpg)
поиск для сайта
Вебмастерская. Москва, 20 апреля 2013г.
Новые возможности
Елена Першина, Дмитрий Вульбрун
![Page 2: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/2.jpg)
2
Часть I • Проблемы, которые решает поиск • Руководство к действию Часть II • Зачем мы сделали «HTML & CSS» • Как это работает • Интерфейс в конструкторе Поиска для сайта • Примеры использования «HTML & CSS»
О чем пойдет речь
![Page 3: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/3.jpg)
3
Часть I: продуктовая
![Page 4: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/4.jpg)
4
Какова ваша цель?
![Page 5: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/5.jpg)
5
Есть проблема?
![Page 6: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/6.jpg)
6
Есть проблема?
?
![Page 7: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/7.jpg)
7
Есть решение!
![Page 8: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/8.jpg)
8
Что важно в поиске: морфология
![Page 9: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/9.jpg)
9
Что важно в поиске: морфология
… а нам это не надо!
![Page 10: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/10.jpg)
10
Что важно в поиске: морфология
![Page 11: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/11.jpg)
11
Что важно в поиске: морфология
![Page 12: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/12.jpg)
12
Что важно в поиске: морфология
![Page 13: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/13.jpg)
13
Что важно в поиске: морфология
![Page 14: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/14.jpg)
14
Что важно в поиске: морфология
![Page 15: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/15.jpg)
15
Что важно в поиске: морфология
![Page 16: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/16.jpg)
16
Как это работает
![Page 17: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/17.jpg)
17
Как это работает
?
![Page 18: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/18.jpg)
18
Что важно в поиске: подсказки
- Помогают верно ввести запрос;
- Обращают внимание пользователей на ту информацию, которую вы хотите до них донести;
![Page 19: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/19.jpg)
19
Что важно в поиске: подсказки
![Page 20: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/20.jpg)
20
Что важно в поиске: фильтры-уточнения
- Задают область поиска;
- Отражают структуру сайта.
![Page 21: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/21.jpg)
21
Что важно в поиске: фильтры-уточнения
![Page 22: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/22.jpg)
22
Что важно в поиске: фильтры-уточнения
![Page 23: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/23.jpg)
23
Статистика
- Анализ интереса аудитории;
- Анализ контента сайта.
![Page 24: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/24.jpg)
24
Статистика
![Page 25: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/25.jpg)
25
Статистика
![Page 26: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/26.jpg)
26
Статистика
![Page 27: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/27.jpg)
27
Статистика
![Page 28: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/28.jpg)
28
Статистика
![Page 29: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/29.jpg)
29
Две составляющие поиска
- Внутренняя: поисковая технология большого Яндекса;
- Внешняя: настройки формы поиска и поисковой выдачи, учитывающие пожелания вебмастеров.
![Page 30: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/30.jpg)
30
Эволюция формы. Сейчас
![Page 31: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/31.jpg)
31
Эволюция формы. Будущее
![Page 32: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/32.jpg)
32
Часть II: техническая
![Page 33: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/33.jpg)
33
Мы сделали «HTML & CSS»
![Page 34: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/34.jpg)
34
«Iframe» – хорошо, но мало.
«Поиграйте со шрифтами» (с) «А можно менее зеленый?» (с) «А у нас фон с котиками!» (с) «А можно более розовую и более свинью?» (с)
![Page 35: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/35.jpg)
35
Как работает «HTML & CSS»
![Page 36: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/36.jpg)
36
Страница результатов поиска
![Page 37: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/37.jpg)
37
«HTML & CSS» «IFRAME»
vs
Отличия между структурами выдачи
![Page 38: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/38.jpg)
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»
![Page 39: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/39.jpg)
39
Интерфейс в конструкторе Поиска для сайта
![Page 40: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/40.jpg)
40
Интерфейс в конструкторе ПДС
![Page 41: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/41.jpg)
41
Интерфейс. CSS-шаблон в коде
![Page 42: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/42.jpg)
42
Примеры использования «HTML & CSS»
![Page 43: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/43.jpg)
43
Пример 1. Сложный фон страницы
![Page 44: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/44.jpg)
44
Пример 1. Сложный фон страницы
![Page 45: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/45.jpg)
45
Пример 1. Сложный фон страницы
![Page 46: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/46.jpg)
46
#ya-site-results {!!background: none;!
}!
Пример 1. Сложный фон страницы
![Page 47: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/47.jpg)
47
Пример 1. Сложный фон страницы
![Page 48: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/48.jpg)
48
Пример 2. Мобильная версия
Стандартная выдача
![Page 49: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/49.jpg)
49
Пример 2. Мобильная версия
Стандартная выдача
![Page 50: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/50.jpg)
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. Мобильная версия
![Page 51: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/51.jpg)
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. Мобильная версия
![Page 52: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/52.jpg)
52
Пример 2. Мобильная версия
После применения CSS
![Page 53: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/53.jpg)
53
Пример 2. Мобильная версия
После применения CSS
![Page 54: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/54.jpg)
54
Пример 2. Мобильная версия
После применения CSS
![Page 55: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/55.jpg)
55
![Page 56: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/56.jpg)
56
![Page 57: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/57.jpg)
57
А еще можно CSS3 Но об этом подробнее на Я.Субботнике в Санкт-Петербурге – следите за анонсами!
![Page 58: Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи](https://reader034.vdocuments.net/reader034/viewer/2022042613/546f7971af7959bd0a8b456e/html5/thumbnails/58.jpg)
58
Елена Першина Менеджер по работе с партнерами
http://site.yandex.ru http://clubs.ya.ru/sitesearch
[email protected] Twitter: @wulbrun
Спасибо!
Дмитрий Вульбрун Менеджер проектов
Twitter: @1firstlena [email protected]
Заходите на сайт сервиса:
Задавайте вопросы в Клубе: