Сегодня был представлен новый браузер Yandex — первый, который мы не просто собрали из готовых составных частей, а спроектировали его внешний вид фактически с нуля, проработав каждую возможную деталь. Теперь можно рассказать о том, почему и как мы это делали.
Над браузером работала команда из нескольких десятков человек, которая тщательно взвешивала все плюсы и минусы каждого решения. Мы должны были понимать, какие из существующих технологий и почему должны быть в браузере от Яндекса. А самой главной задачей было найти и реализовать такие решения, которые бы делали Yandex действительно новым продуктом на высококонкурентном рынке подобных программ.
Устройство браузера
Одним из первых перед нами встал выбор между движками. Фактически, на рынке есть четыре, о которых стоит говорить: Trident, Presto, Gecko и WebKit. На первом работает Internet Explorer. Его могут использовать и сторонние разработчики, но, во-первых, вносить в него изменения может только Microsoft, а во-вторых, в этом случае браузер был бы совместим только с Windows. Второй — проприетарная закрытая разработка Opera Software. Это и стало главной причиной, по которой мы отказались от этого варианта.
По сути серьёзный выбор шёл между двумя движками с открытым исходным кодом — Gecko и WebKit, причём мы сразу выбирали между связками движка и кода, на котором будет работать интерфейс браузера и расширения к нему. Мы думали о написании собственной оболочки, но в результате могли получить систему расширений, не совместимую ни с чем, что есть на рынке. В итоге решили, что не стоит тратить на это дополнительные ресурсы, что в итоге может себя не оправдать. Выбор сузился до вариантов Gecko плюс Firefox и WebKit плюс Chromium.
С точки зрения скорости, они не уступают друг другу, поэтому аргументами при принятии решения стали другие факторы. Главный плюсом связки Gecko плюс Firefox стала возможность легко кастомизировать дизайн. Это с самого начала было одной из наших приоритетных потребностей — мы хотели делать программу с новым интерфейсом, который будет создан командой Яндекса. Но при выборе этого варианта возникли бы проблемы с производительностью. В оболочке Firefox, в отличие от Chromium, браузер сам занимается управлением памятью, и, несмотря на почти полное отсутствие утечек, её фрагментация всё же происходит. К тому же, код Firefox не самый аккуратный и вносить в него многие важные для нас изменения было бы непросто.
У связки WebKit плюс Chromium этих недостатков не было. В Chromium каждый таб является отдельным процессом и за освобождением памяти следит операционная система. А обычно ОС справляется с этой задачей эффективней, чем сам браузер. Чистый и аккуратный код Chromium позволяет гораздо проще создавать на его основе что-то новое. Было решено выбрать этот вариант, даже несмотря на важный для нас минус — интерфейс этой оболочки очень сложно изменить. А мы хотели рисовать браузер с нуля и по-новому проектировать в нём взаимодействие с пользователем. Даже чтобы изменить форму табов, пришлось очень глубоко разбираться в коде и многое переписывать.
Работа с интерфейсом
Кажется, что интерфейсы современных браузеров настолько минималистичны, что в них не осталось ничего лишнего. Но мы решили, что глядя в окно Yandex, человек не должен видеть те элементы интерфейса, которые ему в данный момент не нужны. Так появилась — а точнее, исчезла — стрелка «Вперёд». Её можно увидеть только тогда, когда уже есть, куда идти вперёд.
Кстати, даже над такой мелочью, какой может показаться эта стрелка, мы долго думали. Было нарисовано 50 разных вариантов.
В итоге мы решили, что формат этого элемента стал устоявшимся каноном, который нужно соблюсти. А окончательный вариант рисовали, отталкиваясь от стрелки, которую создал Американский институт дизайна. Когда-то он разрабатывал набор пиктограмм для навигации, которые сейчас условно считаются идеальными. Мы перерисовали его вариант, изменили форму и пропорции в соответствии со своим видением, вписали в пиксельную решётку и получили стрелку, которая нам подошла.
Во время работы над Yandex мы изучили и историю интерфейсов веб-обозревателей. Раньше их было легко отличить друг от друга, а сейчас, если закрыть логотипы популярных браузеров, даже не каждый сотрудник Яндекса сможет их распознать. Стандарт их интерфейсов сформировался: наверху — табы, под ними — адресная строка, слева от неё — управляющие кнопки. Мы решили не устраивать революций. Пользуясь Yandex, человек не должен радикально менять свои привычки. Нужно сделать так, чтобы они еще легче формировались.
Но чтобы внести что-то новое, необходимо было понять, как работает старое. Мы опирались на множество исследований, но проводили и свои эксперименты. Например, работавшие над интерфейсом Yandex наблюдали за тем, как некоторые наши коллеги пользуются браузерами. Причём принципиальным было то, чтобы это были не разработчики. Так мы смогли «вживую» увидеть, какие у обычных людей есть привычки при работе с интернетом.
По данным исследований, человек посещает до семи постоянных сайтов. И выходит, что обычно он открывает новый таб, чтобы увидеть закладку того из них, на который хочет сейчас перейти. Одним из наших нововведений стало Табло, которое показывается после клика по адресной строке. Таким образом, в Yandex не нужно открывать новую вкладку, чтобы перейти на новую страницу. Мы поменяли и представления сайтов, отказавшись от скриншотов. На наш взгляд, они плохо помогают человеку узнать нужную ему страницу. В Табло вы увидите лакончиные виджеты-«кирпичики».
Для таких популярных сайтов, как Хабрахабр, ВКонтакте, Лента.ру, Facebook и еще полутора сотен других, мы отрисовали их вручную. Представления других страниц будут формироваться сами. Браузер определит фавиконку сайта, главный цвет в ней и сам «нарисует» блок. И все уведомления из социальных сетей и почтовых ящиков можно будет видеть сразу на Табло.
Кстати, логотип браузера, как и он сам, нарисован внутри Яндекса. В этом случае мы привлекали внешних дизайнеров, в том числе и иностранных, но всё, что они рисовали, нам не подходило. Эскиз логотипа, который в итоге утвердили, просто ручкой в блокноте нарисовал менеджер проектов Дмитрий Тимко. А потом его доработали вместе с нашим дизайнером Михаилом Неждановым.
Логотип Yandex, как и других браузеров, круглый. Мы думали сделать его другим, но решили отдать дань традиции, по которой логотипы подобных программ обыгрывают форму земного шара. К тому же, круглая форма поможет человеку быстро определить иконку браузера на рабочем столе.
Начинка браузера
Работая над интерфейсом, мы отталкивались от мысли, что его элементы не должны мешать человеку видеть сайты. В работе над начинкой браузера одной из важных для нас посылок было то, что он должен корректно отображать любой документ, который пользователь встретил в интернете. Мы попытались максимально уменьшить количество дополнительных действий, которые нужно будет предпринять, чтобы просмотреть или прослушать тот или иной файл. Для решения этой задачи нам приходилось выбирать между разными технологическими вариантами. В итоге на некоторые из них мы получали лицензии, посчитав, что именно они лучше всего решают нашу задачу. Например, мы договорились с Adobe и сразу встроили в браузер Flash. Для просмотра файлов PDF можно было использовать и pdf.js, над которым работает сама же компания Adobe, но мы остановились на просмотрщике от FoxIt. Пока кажется, что он лучше решает наши задачи, но тем не менее, мы продолжаем следить за разработкой Adobe.
А, например, проигрывать файлы MP3 Yandex будет через системные функции операционных систем. Но мы подумали и о том, что не все страницы должны сразу открываться пользователю, потому что не все страницы в интернете одинаково безопасны. Браузер использует нашу собственную технологию Safe Browsing. Она даёт ему возможность проверять URL по базе известных нам как опасные. Каждый день мы проверяем больше 20 млн страниц и наша база наиболее актуальна для пользователей сервисов Яндекса. А с помощью системы от Лаборатории Касперского программа проверяет на наличие вирусов файлы, которые пользователь скачивает непосредственно на свой компьютер. Это не отменяет необходимости иметь антивирус, но позволяет предотвратить загрузку файлов, о которых точно известно, что они могут нанести вред.
В браузере будут применяться также решения компании Opera Software. В частности, мы будем использовать технологию Opera Turbo, которая позволяет быстро загружать страницы даже при низкой скорости соединения. Режим Turbo появится уже в следующей версии продукта.
Облачные технологии
На заре Веба браузер был обычной программой, у которой была одна задача — хорошо показать страницу, адрес которой пользователь набрал в адресной строке или открыл, нажав на кнопку открытия файла. Теперь даже сложно поверить, что такая была у первых веб-обозревателей.
Сейчас всё изменилось настолько, что обычные люди редко набирают настоящий адрес в омнибоксе современного браузера. А его задачей стала и необходимость помогать людям ориентироваться в огромном интернете, давать возможность быстро и эффективно найти нужное, обеспечивать безопасность, оставаясь при этом максимально незаметным.
При отображении страниц, вводе поисковых запросов, проверке орфографии и переводе, определении местоположения и проверке на вирусы могут и должны использоваться многочисленные знания, которые есть у мировых компаний. Не все производители браузеров имеют свои облачные технологии и им приходится сотрудничать с теми, кто может их обеспечить.
К счастью, мы обладаем полным спектром облачных сервисов. При этом важно понимать, что Яндекс всегда оставался для Рунета максимально близким, локальным, знающим о том, чем отличается пользователь Рунета и как лучше ответить именно ему.
У нас есть поиск, а следовательно, знания о сотнях миллионов сайтов и миллиардах страниц. Это позволяет нам давать мгновенные ответы прямо из поисковой строки. Например, даже погоду, пробочный балл, телефонный код Калининграда или дату рождения Стива Джобса можно увидеть уже во время ввода запросов в омнибоксе. Как вы могли видеть, всё это есть и в поисковых подсказках Поиска Яндекса. Их же технология позволяет нам показать человеку адреса сайтов на букву m, если он забыл смненить раскладку и вбил в омнибокс мягкий знак.
Переводчик, который в Yandex может переводить как страницы целиком, так и отдельные слова и предложения просто по выделению, полностью работает на статистических данных интернета. То есть огромного количества параллельных документов, которые есть в индексе Яндекса. А маски, по которым происходит проверка Safe Browsing, построены на основании примерно десятков миллионов опасных страниц, известных Яндексу и актуальных для его пользователей.
Кроме того, у Yandex очень качественная для браузера геолокация. Благодаря Картам, множество геоданных будут доступны пользователям прямо из поисковой строки. Например, пробочный балл в их регионе.
Поиск и разработка браузеров становятся сейчас одними из самых интересных областей интернет-индустрии. Это важно как для нас, так и для людей, потому что в высоконкурентной среде выигрывают всегда пользователи.Мы хотим поддерживать разнообразие современных технологий и продолжать давать людям выбор. Именно поэтому, например, выбирать поисковик в браузере от Яндекса можно уже из омнибокса во время ввода запроса. А переезд на Yandex, который умеет импортировать и cookies, сделан максимально удобным — в нём даже откроются вкладки, которые были в окне вашей предыдущей программы.
Скачать и попробовать новый браузер вы сможете уже сегодня, начиная с 17:00, по адресу browser.yandex.ru.
UPD: С этой секунды новый браузер от Яндекса можно скачать. Попробуйте и составьте своё мнение.
Над браузером работала команда из нескольких десятков человек, которая тщательно взвешивала все плюсы и минусы каждого решения. Мы должны были понимать, какие из существующих технологий и почему должны быть в браузере от Яндекса. А самой главной задачей было найти и реализовать такие решения, которые бы делали Yandex действительно новым продуктом на высококонкурентном рынке подобных программ.
Устройство браузера
Одним из первых перед нами встал выбор между движками. Фактически, на рынке есть четыре, о которых стоит говорить: Trident, Presto, Gecko и WebKit. На первом работает Internet Explorer. Его могут использовать и сторонние разработчики, но, во-первых, вносить в него изменения может только Microsoft, а во-вторых, в этом случае браузер был бы совместим только с Windows. Второй — проприетарная закрытая разработка Opera Software. Это и стало главной причиной, по которой мы отказались от этого варианта.
По сути серьёзный выбор шёл между двумя движками с открытым исходным кодом — Gecko и WebKit, причём мы сразу выбирали между связками движка и кода, на котором будет работать интерфейс браузера и расширения к нему. Мы думали о написании собственной оболочки, но в результате могли получить систему расширений, не совместимую ни с чем, что есть на рынке. В итоге решили, что не стоит тратить на это дополнительные ресурсы, что в итоге может себя не оправдать. Выбор сузился до вариантов Gecko плюс Firefox и WebKit плюс Chromium.
С точки зрения скорости, они не уступают друг другу, поэтому аргументами при принятии решения стали другие факторы. Главный плюсом связки Gecko плюс Firefox стала возможность легко кастомизировать дизайн. Это с самого начала было одной из наших приоритетных потребностей — мы хотели делать программу с новым интерфейсом, который будет создан командой Яндекса. Но при выборе этого варианта возникли бы проблемы с производительностью. В оболочке Firefox, в отличие от Chromium, браузер сам занимается управлением памятью, и, несмотря на почти полное отсутствие утечек, её фрагментация всё же происходит. К тому же, код Firefox не самый аккуратный и вносить в него многие важные для нас изменения было бы непросто.
У связки WebKit плюс Chromium этих недостатков не было. В Chromium каждый таб является отдельным процессом и за освобождением памяти следит операционная система. А обычно ОС справляется с этой задачей эффективней, чем сам браузер. Чистый и аккуратный код Chromium позволяет гораздо проще создавать на его основе что-то новое. Было решено выбрать этот вариант, даже несмотря на важный для нас минус — интерфейс этой оболочки очень сложно изменить. А мы хотели рисовать браузер с нуля и по-новому проектировать в нём взаимодействие с пользователем. Даже чтобы изменить форму табов, пришлось очень глубоко разбираться в коде и многое переписывать.
Работа с интерфейсом
Кажется, что интерфейсы современных браузеров настолько минималистичны, что в них не осталось ничего лишнего. Но мы решили, что глядя в окно Yandex, человек не должен видеть те элементы интерфейса, которые ему в данный момент не нужны. Так появилась — а точнее, исчезла — стрелка «Вперёд». Её можно увидеть только тогда, когда уже есть, куда идти вперёд.
Кстати, даже над такой мелочью, какой может показаться эта стрелка, мы долго думали. Было нарисовано 50 разных вариантов.
В итоге мы решили, что формат этого элемента стал устоявшимся каноном, который нужно соблюсти. А окончательный вариант рисовали, отталкиваясь от стрелки, которую создал Американский институт дизайна. Когда-то он разрабатывал набор пиктограмм для навигации, которые сейчас условно считаются идеальными. Мы перерисовали его вариант, изменили форму и пропорции в соответствии со своим видением, вписали в пиксельную решётку и получили стрелку, которая нам подошла.
Во время работы над Yandex мы изучили и историю интерфейсов веб-обозревателей. Раньше их было легко отличить друг от друга, а сейчас, если закрыть логотипы популярных браузеров, даже не каждый сотрудник Яндекса сможет их распознать. Стандарт их интерфейсов сформировался: наверху — табы, под ними — адресная строка, слева от неё — управляющие кнопки. Мы решили не устраивать революций. Пользуясь Yandex, человек не должен радикально менять свои привычки. Нужно сделать так, чтобы они еще легче формировались.
Но чтобы внести что-то новое, необходимо было понять, как работает старое. Мы опирались на множество исследований, но проводили и свои эксперименты. Например, работавшие над интерфейсом Yandex наблюдали за тем, как некоторые наши коллеги пользуются браузерами. Причём принципиальным было то, чтобы это были не разработчики. Так мы смогли «вживую» увидеть, какие у обычных людей есть привычки при работе с интернетом.
По данным исследований, человек посещает до семи постоянных сайтов. И выходит, что обычно он открывает новый таб, чтобы увидеть закладку того из них, на который хочет сейчас перейти. Одним из наших нововведений стало Табло, которое показывается после клика по адресной строке. Таким образом, в Yandex не нужно открывать новую вкладку, чтобы перейти на новую страницу. Мы поменяли и представления сайтов, отказавшись от скриншотов. На наш взгляд, они плохо помогают человеку узнать нужную ему страницу. В Табло вы увидите лакончиные виджеты-«кирпичики».
Для таких популярных сайтов, как Хабрахабр, ВКонтакте, Лента.ру, Facebook и еще полутора сотен других, мы отрисовали их вручную. Представления других страниц будут формироваться сами. Браузер определит фавиконку сайта, главный цвет в ней и сам «нарисует» блок. И все уведомления из социальных сетей и почтовых ящиков можно будет видеть сразу на Табло.
Кстати, логотип браузера, как и он сам, нарисован внутри Яндекса. В этом случае мы привлекали внешних дизайнеров, в том числе и иностранных, но всё, что они рисовали, нам не подходило. Эскиз логотипа, который в итоге утвердили, просто ручкой в блокноте нарисовал менеджер проектов Дмитрий Тимко. А потом его доработали вместе с нашим дизайнером Михаилом Неждановым.
Логотип Yandex, как и других браузеров, круглый. Мы думали сделать его другим, но решили отдать дань традиции, по которой логотипы подобных программ обыгрывают форму земного шара. К тому же, круглая форма поможет человеку быстро определить иконку браузера на рабочем столе.
Начинка браузера
Работая над интерфейсом, мы отталкивались от мысли, что его элементы не должны мешать человеку видеть сайты. В работе над начинкой браузера одной из важных для нас посылок было то, что он должен корректно отображать любой документ, который пользователь встретил в интернете. Мы попытались максимально уменьшить количество дополнительных действий, которые нужно будет предпринять, чтобы просмотреть или прослушать тот или иной файл. Для решения этой задачи нам приходилось выбирать между разными технологическими вариантами. В итоге на некоторые из них мы получали лицензии, посчитав, что именно они лучше всего решают нашу задачу. Например, мы договорились с Adobe и сразу встроили в браузер Flash. Для просмотра файлов PDF можно было использовать и pdf.js, над которым работает сама же компания Adobe, но мы остановились на просмотрщике от FoxIt. Пока кажется, что он лучше решает наши задачи, но тем не менее, мы продолжаем следить за разработкой Adobe.
А, например, проигрывать файлы MP3 Yandex будет через системные функции операционных систем. Но мы подумали и о том, что не все страницы должны сразу открываться пользователю, потому что не все страницы в интернете одинаково безопасны. Браузер использует нашу собственную технологию Safe Browsing. Она даёт ему возможность проверять URL по базе известных нам как опасные. Каждый день мы проверяем больше 20 млн страниц и наша база наиболее актуальна для пользователей сервисов Яндекса. А с помощью системы от Лаборатории Касперского программа проверяет на наличие вирусов файлы, которые пользователь скачивает непосредственно на свой компьютер. Это не отменяет необходимости иметь антивирус, но позволяет предотвратить загрузку файлов, о которых точно известно, что они могут нанести вред.
В браузере будут применяться также решения компании Opera Software. В частности, мы будем использовать технологию Opera Turbo, которая позволяет быстро загружать страницы даже при низкой скорости соединения. Режим Turbo появится уже в следующей версии продукта.
Облачные технологии
На заре Веба браузер был обычной программой, у которой была одна задача — хорошо показать страницу, адрес которой пользователь набрал в адресной строке или открыл, нажав на кнопку открытия файла. Теперь даже сложно поверить, что такая была у первых веб-обозревателей.
Сейчас всё изменилось настолько, что обычные люди редко набирают настоящий адрес в омнибоксе современного браузера. А его задачей стала и необходимость помогать людям ориентироваться в огромном интернете, давать возможность быстро и эффективно найти нужное, обеспечивать безопасность, оставаясь при этом максимально незаметным.
При отображении страниц, вводе поисковых запросов, проверке орфографии и переводе, определении местоположения и проверке на вирусы могут и должны использоваться многочисленные знания, которые есть у мировых компаний. Не все производители браузеров имеют свои облачные технологии и им приходится сотрудничать с теми, кто может их обеспечить.
К счастью, мы обладаем полным спектром облачных сервисов. При этом важно понимать, что Яндекс всегда оставался для Рунета максимально близким, локальным, знающим о том, чем отличается пользователь Рунета и как лучше ответить именно ему.
У нас есть поиск, а следовательно, знания о сотнях миллионов сайтов и миллиардах страниц. Это позволяет нам давать мгновенные ответы прямо из поисковой строки. Например, даже погоду, пробочный балл, телефонный код Калининграда или дату рождения Стива Джобса можно увидеть уже во время ввода запросов в омнибоксе. Как вы могли видеть, всё это есть и в поисковых подсказках Поиска Яндекса. Их же технология позволяет нам показать человеку адреса сайтов на букву m, если он забыл смненить раскладку и вбил в омнибокс мягкий знак.
Переводчик, который в Yandex может переводить как страницы целиком, так и отдельные слова и предложения просто по выделению, полностью работает на статистических данных интернета. То есть огромного количества параллельных документов, которые есть в индексе Яндекса. А маски, по которым происходит проверка Safe Browsing, построены на основании примерно десятков миллионов опасных страниц, известных Яндексу и актуальных для его пользователей.
Кроме того, у Yandex очень качественная для браузера геолокация. Благодаря Картам, множество геоданных будут доступны пользователям прямо из поисковой строки. Например, пробочный балл в их регионе.
Поиск и разработка браузеров становятся сейчас одними из самых интересных областей интернет-индустрии. Это важно как для нас, так и для людей, потому что в высоконкурентной среде выигрывают всегда пользователи.Мы хотим поддерживать разнообразие современных технологий и продолжать давать людям выбор. Именно поэтому, например, выбирать поисковик в браузере от Яндекса можно уже из омнибокса во время ввода запроса. А переезд на Yandex, который умеет импортировать и cookies, сделан максимально удобным — в нём даже откроются вкладки, которые были в окне вашей предыдущей программы.
Скачать и попробовать новый браузер вы сможете уже сегодня, начиная с 17:00, по адресу browser.yandex.ru.
UPD: С этой секунды новый браузер от Яндекса можно скачать. Попробуйте и составьте своё мнение.
