Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи
•
0 likes•1,331 views
Поиск – неотъемлемая часть хоро��его современного сайта. И чаще всего для организации поиска можно найти готовое решение с базовыми возможностями. Но что делать, если сайт имеет сложный дизайн? Или, скажем, вы имеете дело с капризным заказчиком, который хочет использовать нестандартные шрифты или его любимый оттенок зеленого в качестве фона? Как вписать готовое поисковое решение в дизайн сайта, чтобы любой заказчик остался доволен? Все просто – можно изменять дизайн поисковой выдачи Яндекс.Поиска для сайта! В докладе были рассмотрены несколько примеров того, как, используя только CSS, можно полностью адаптировать поиск к дизайну любого сайта.
Report
Share
Related slideshows
Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи
- 1. поиск для сайта Вебмастерская. Москва, 20 апреля 2013г. Новые возможности Елена Першина, Дмитрий Вульбрун
- 2. 2 Часть I • Проблемы, которые решает поиск • Руководство к действию Часть II • Зачем мы сделали «HTML & CSS» • Как это работает • Интерфейс в конструкторе Поиска для сайта • Примеры использования «HTML & CSS» О чем пойдет речь
- 8. 8 Что важно в поиске: морфология
- 9. 9 Что важно в поиске: морфология … а нам это не надо!
- 10. 10 Что важно в поиске: морфология
- 11. 11 Что важно в поиске: морфология
- 12. 12 Что важно в поиске: морфология
- 13. 13 Что важно в поиске: морфология
- 14. 14 Что важно в поиске: морфология
- 15. 15 Что важно в поиске: морфология
- 18. 18 Что важно в поиске: подсказки - Помогают верно ввести запрос; - Обращают внимание пользователей на ту информацию, которую вы хотите до них донести;
- 19. 19 Что важно в поиске: подсказки
- 20. 20 Что важно в поиске: фильтры- уточнения - Задают область поиска; - Отражают структуру сайта.
- 21. 21 Что важно в поиске: фильтры- уточнения
- 22. 22 Что важно в поиске: фильтры- уточнения
- 23. 23 Статистика - Анализ интереса аудитории; - Анализ контента сайта.
- 24. 24 Статистика
- 25. 25 Статистика
- 26. 26 Статистика
- 27. 27 Статистика
- 28. 28 Статистика
- 29. 29 Две составляющие поиска - Внутренняя: поисковая технология большого Яндекса; - Внешняя: настройки формы поиска и поисковой выдачи, учитывающие пожелания вебмастеров.
- 33. 33 Мы сделали «HTML & CSS»
- 34. 34 «Iframe» – хорошо, но мало. «Поиграйте со шрифтами» (с) «А можно менее зеленый?» (с) «А у нас фон с котиками!» (с) «А можно более розовую и более свинью?» (с)
- 35. 35 Как работает «HTML & CSS»
- 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 Заходите на сайт сервиса: Задавайте вопросы в Клубе: