Компания
1 078,74
рейтинг
17 апреля 2012 в 11:03

Разное → Новая Главная портала Mail.Ru

Думаю, многие из вас хоть раз видели старую главную страницу Mail.Ru, которая довольно долго не менялась. Поэтому для общего понимания, небольшая преамбула: технический апдейт, о котором пойдет речь в этом посте, стал возможен после внутренних изменений в компании.



Разработкой новой главной занималась довольно большая команда: в нее входили дизайнеры, специалисты по юзабилити и, конечно, разработчики, среди которых я и note.



Во-первых, старая страница была сверстана на таблицах и загружалась не так быстро, как хотелось бы. А значит, первым делом нужно было ускорить загрузку.

Во-вторых, надо было осовременить страницу как визуально, так и технологически. Страница должна соответствовать современным ожиданиям и тенденциям.
Для примера, могу сказать, что одним из требований к редизайну было отсутствие скролла.

Обо всем по порядку.

Быстрая загрузка



Mail.ru загружают пользователи как с хорошим, так и с очень медленным интернет-каналом. Мы хотели, чтобы портальная навигация, логотип, почтовый и социальный блоки отображались максимально быстро, чтобы пользователи с медленным каналом могли как можно скорее начать работу со страницей.



<style>
	/* mailbox styles */
</style>
<div class="mailbox">
	<!-- mailbox HTML -->
</div>
<script>
	// mailbox JS
</script>


Для этого мы поместили перед HTML-кодом каждого из блоков описывающие его CSS-правила в теге style. Браузер, имея на руках все необходимое для рендеринга блока, делает это сразу же.

Чтобы не получилось так, что блок уже отрисован, а функцию свою еще не выполняет, например, форма авторизации в почтовом блоке с «кастомными» элементами интерфейса, следом за HTML помещен базовый JS-функционал в инлайновых скриптах.

Таким образом, ускоряемые блоки отображаются последовательно по мере загрузки страницы, и после отрисовки полностью работоспособны.



Далее можно заняться остальными блоками.
После левой колонки мы загружаем внешнюю таблицу стилей, содержащую оставшиеся правила, HTML центральной колонки, скрипт расширенного функционала и HTML правой колонки.

Мы экспериментально нашли оптимальное место загрузки JS-файла расширенного функционала.
По нашим замерам, переходы на Поиск сильно зависят от наличия поисковых саджестов. Поэтому скрипт, содержащий логику саджестов, хочется загрузить как можно ближе к блоку поиска. Но ниже в центральной колонке находятся не менее важные блоки с контентом, за которым приходят на страницу пользователи. Значит, перемещаем скрипт за центральную колонку.

Если переставить скрипт еще чуть дальше по коду, придется ждать загрузки баннера, который в среднем грузится 180ms, а центральная колонка в два с лишним раза меньше.
Соответственно, оптимальное место – между центральной и левой колонками.



Следующим этапом загружаются блоки, которые нет возможности или необходимости загружать сразу же.
Это блок с фотографиями в левой колонке и скрытые изначально табы новостей.



Блок с фото содержит внешний нестатичный контент. Это изображения, которые пользователь в любом случае увидит позже отображения левой колонки, т.к. придется ожидать их загрузки, а значит, можно отложить загрузку.

Изначально вместо блока стоит placeholder просто занимающий необходимое пространство. В конце страницы, в пост-загрузке, placeholder заменяется реальным кодом блока и начинается загрузка изображений.



При загрузке страницы пользователь увидит всего одну вкладку новостей, а остальные – лишь после клика по табу. Скрытые вкладки мы поместили в пост-загрузку и подставляем в нужное место лишь по запросу пользователя, что существенно сокращает время загрузки блока.



Существует еще ряд редко используемых блоков (вроде различных промо-попапов), элементы вызова которых находятся до объявления самих блоков.
Например, ссылка «Узнайте больше» в промо-плашке о новом дизайне, открывающая попап с дополнительной информацией.

Т.к. блок редко используемый, нет никакого смысла загружать его рядом со ссылкой вверху страницы, замедляя загрузку более важного контента. Поэтому скрытый попап находится в конце страницы. Но ссылка отображается почти сразу же, и пользователь может на нее кликнуть еще до загрузки попапа.

Чтобы обработать такие ситуации, мы используем простенькую систему отложенного вызова функций.
На ссылку вешается обработчик, сохраняющий переданную ему функцию в очереди:

<a onclick="callbackQuery.run(function(){openPopup()});">...</a>


В конце страницы обработчику очереди отдается команда о том, что страница загружена, обработчик запускает все сохраненные в очереди функции, после чего все новые переданные ему функции будут запускаться сразу же.

	<div class="popup">...</div>
	<script>
		function openPopup(){
			…
		}
	</script>
	...
	<script>
		callbackQuery.loaded();
	</script>
</body>




Забегая вперед, стоит обсудить загрузку логотипа.
На самом деле их два. Большой – для больших разрешений, и маленький – для остальных.
При загрузке страницы покажется один из них, а второй логотип пользователь все равно не увидит в данный момент. Чтобы отложить загрузку скрытого логотипа, используется следующее решение:
изначально в коде вместо изображений стоят две span’ки с аналогичными изображениям классами

<style>
	@media all and (min-height: 765px) {
		.logo__link__img_medium {
			display:none;
		}
	}

	@media all and (min-height: 765px) {
		.logo__link__img_wide {
			display:block;
		}
	}
</style>
<span class="logo__link__img logo__link__img_medium"></span>
<span class="logo__link__img logo__link__img_wide"></span>


После чего скриптом определяется, какая из них скрыта через Media Queries для разрешения данного пользователя и соответствующее изображение добавляется в пост загрузку. Второе выводится сразу же.

<script>
	logos.forEach(function(logo){
		if (logo.currentStyle.display === "block"){
			document.write("<img … />");
		} else {
			var image = document.createElement("img");
...	
		}
});
</script>


Разумеется в noscript выводятся оба изображения для пользователей с отключенным JS.

<noscript>
	<img class="logo__link__img logo__link__img_medium" … />
	<img class="logo__link__img logo__link__img_wide" … />
</noscript>


CSS


Стили каждого из блоков отделены друг от друга и лежат каждый в своем файле.



Для блоков, загрузку которых надо ускорить, стили собираются поблочно в соответствующие подкаталоги папки forced-blocks, и затем автоматически подставляются в тег style в необходимом месте на странице.

/* css/forced-blocks/mailbox.scss */
@import "../../blocks/mailbox/mailbox";


<style>
	<fest:insert src="css/forced-blocks/mailbox.scss" />
</style>


Остальные стили собираются в один файл (/css/styles.scss) и загружаются на страницу через link, стоящий после левой колонки.

@import "blocks/news/_news.scss";
@import "blocks/text-banner/_text-banner.scss";
@import "blocks/banner/_banner.scss";
@import "blocks/informers/_informers.scss";


<link href="styles.css" />


Такой подход дает возможность легко манипулировать загрузкой блока. Если нам нужно ускорить какой-то блок, нужно всего лишь иначе подключить его стили.

JS


В процессе загрузки JS тоже есть некоторые нюансы.
В HEAD страницы инлайном загружается базовая часть «ядра», например функции работы с событиями, необходимые для базового функционала ускоренных блоков.

<head>
	<script>
		var mr = {
			bind: function(){}
		};
	</script>
</head>

<div class="mailbox">...</div>
<script>
	mr.bind
</script>


После чего идет загрузка внешнего скрипта расширенного функционала, в котором
базовый набор функций расширяется.

<script>
	extend(mr, {
	position: function(){}
});
</script>


Таким образом, загрузкой скриптов тоже легко управлять.

Что это дало


В результате проделанной работы получились следующие усредненные цифры:
  • Страница полностью загружена через 550ms после начала запроса, из которых 16ms – время генерации страницы сервером
  • Портальная навигация отображается через 195ms
  • Левая колонка – 180ms
  • Поиск – 40ms
  • Новости — 12ms
  • Информеры – 30ms
  • Баннер – 180ms
  • Стили – 190ms
  • Пост-загрузка – 117ms
  • Скрипты – 500ms


Что хорошо проиллюстрирует видео процесса загрузки страницы с эмуляцией медленного соединения.





Как показано на графике, пользователь видит большую часть страницы, а именно портальную навигацию и левую и центральную колонки уже через 600 с небольшим миллисекунд, а большая часть функционала работоспособна еще через 500ms. А через 1,5 секунды страница полностью работоспособна.

Скролл





Второй большой задачей было отсутствие скролла.
Всем сразу вспомнилась технология Media Queries, с помощью которой можно подогнать страницу под необходимые размеры.
Главное – понять, подо что подгонять.

Самым простым, на первый взгляд, решением было бы посмотреть уже имеющуюся статистику по разрешениям экранов.



Эти данные хоть и дают представление о конкретных цифрах, но не дают реальной картины: не учитывают настроек элементов интерфейса ОС и браузера. Непонятно, сколько же места доступно странице.
Потому было решено сделать собственные замеры реальных вьюпортов.


По оси x – высота вьюпорта, по оси y – количество пользователей, у которых вьюпорт меньше этой высоты.

Сначала мы измеряли вьюпорт на загрузке страницы. Но нам казалось, что на эти данные не стоит опираться, т.к. все мы часто видели, как пользователи открывают страницу, затем разворачивают окно браузера и продолжают работу со страницей.
Мы посчитали количество ресайзов окна. Делающих это пользователей оказалось довольно много, порядка 12%.
Чтобы подтвердить наши догадки, мы решили измерять максимальный вьюпорт за сеанс. А также максимальный вьюпорт за сеанс в браузерах, не поддерживающих Media Queries, которых у наших пользователей довольно много – около 15%.



Полученные данные подтвердили наши догадки.
По графику видно, что у одних и тех же пользователей при открытии страницы один размер окна, а позже – иной.

На графиках отчетливо видны скачки, означающие, что на данной высоте очень много пользователей. На эти скачки мы и решили ориентироваться.



Мы выбрали следующие значения:
  • 633px, что чуть ниже большого скачка
  • 765px, что чуть ниже второй группы скачков
  • 830px – максимальная высота, выше которой мы ничего не меняем




Что означает 633px?
Что 21% пользователей, у которых вьюпорт меньше, увидят скролл. Нас это не устраивало, и мы разбили эту область еще одним значением в 576px – там, где практически нет изменений на графике.



Область от 633 до 765 пикселей мы так же решили разбить еще одним значением в 670 пикселей. Исключительно из эстетических соображений, решили заполнить свободное пространство у большой группы пользователей.

Итак, начиная с 576px у пользователя нет скролла.

На 633px мы изменяем отступы, отображаем подписи в левой колонке, дополнительную информацию по главной новости и пару игр в правой колонке.

На 670px мы просто изменяем отступы, чтобы заполнить свободное пространство.

На 765px мы увеличиваем логотип и блок фото в левой колонке, отображаем блок «Сейчас ищут» под поиском, дополнительные информационные блоки и большую игру в правой колонке.

На 830px изменяются отступы и отображается дополнительная новость.

По ширине тоже есть изменения.
На широких страницах увеличиваются отступы между колонками, а на узких не влезающие табы новостей переносятся в выпадушку «Ещё».

Для браузеров без поддержки Media Queries мы выбрали вариант в 633px по высоте.



Реализация


Код Media Queries и пороговые цифры могут в любой момент поменяться.
Поэтому, чтобы не пришлось перелопачивать полпроекта, нужно централизованное место генерации media-выражений.
Мы решили использовать SASS mixin.

Для блока сначала указываются стили по умолчанию, а ниже в minxin передаются динамические стили с указанием высот и оси, к которым надо их применить.

.someblock {
	margin-top:10px;
	
	@include respond-to-media(xsmall, vertical, margin-top, 5px);
	@include respond-to-media(small, vertical, margin-top, 10px);
}

@mixin respond-to-media($screen, $direction, $property, $value: "") {
	@if $direction == vertical {
		@if $screen == xsmall {
			@media only screen and (max-height: 632px) { ... }
		} @else if $screen == small {
			@media only screen and (min-height: 633px) and (max-height: 668px) {...}
		} 
		...
	} @else if $direction == horizontal {
		...
	}
}


Mixin по переданным константам понимает, какое media-выражение нужно вывести, и в результате получается следующий код:

Состояние по умолчанию

.someblock {
	margin-top:5px;
}


И изменение состояний для браузеров, поддерживающих Media Queries

@media only screen and (max-height: 632px) {
	.someblock {
		margin-top:5px;
	}
}

@media only screen and (min-height: 633px) and (max-height: 668px) {
	.someblock {
		margin-top:10px;
	}
}


Синхронизация с портальной навигацией





На всем портале Mail.Ru вверху страницы находится единый блок активной портальной навигации.
В нем по таймауту обновляются пользовательские данные: количество непрочитанных писем в Почте, количество новых событий в Моем Мире и Одноклассниках.

На новой главной странице в левой колонке, кроме почтового блока, размещена расширенная информация по социальным сетям, которую тоже нужно динамически обновлять.

Первая проблема в том, что данные мы получаем из разных источников: в портальной навигации данные Моего Мира и Почты с одного сервера, Одноклассники – с другого, а расширенные данные по Моему Миру мы получаем с самой главной страницы.

Вторая проблема в том, что портальная навигация, будучи кросс-портальной, выделена в отдельный проект, и на странице мы на нее влиять не можем, а данные нужно обновлять синхронно: при получении в портальной навигации данных от Одноклассников обновлять также данные на странице, а при получении данных по Моему Миру и Почте делать запрос за расширенными данными Моего Мира, обновлять свою часть страницы, и только потом обновлять портальную навигацию.

Для этого в JSONP callback’ах в портальной навигации была внедрена возможность отдать управление скриптам на странице и обновить цифры по обратной команде.

Отрисовка запускается только если не объявлен callback на странице, возвращающий false.

// Портальная навигация
function JSONPCallback(data){
	var _cb = JSONPCallback._pageCallback;
	if (typeof _cb == 'function'  && _cb(data, draw) !== false){
	draw();
};
	function draw(){
		// обновление портальной навигации	
	}
}


Если объявить такой callback, можно сделать асинхронный запрос, обновить необходимые блоки на странице, и лишь потом вернуть управление портальной навигации, запустив переданную функцию отрисовки портальной навигации.

// Страница
JSONPCallback._pageCallback = function(data, draw){
	new AJAX('/', …, function(data){
	// обновление расширенной информации
	…
	// возврат управления портальной навигации
	draw();
});
// возвращаем false, чтобы отложить обновление портальной навигации
return false;
}


Т.о. страница может управлять отображением обновлений в зависимости от наличия необходимой информации.

Итоги



  • Добились ускорения загрузки страницы в целом и управляемости этапов загрузки на медленных каналах
  • Избавились от скролла – весь контент доступен на одном экране
  • Стабильность работы


Хотя тема стабильности выходит за рамки данной статьи, не могу совсем ее не затронуть.
Главная страница, по сути – агрегатор данных с разных проектов. Раньше с проектов мы получали непосредственно HTML-блоки. Проектов много, контролировать выдачу нереально. Высоки шансы, что страница развалится из-за незакрытого атрибута или какой-то другой ошибки.
В процессе разработки новой главной страницы мы перешли на получение данных и трансформацию уже на нашей стороне, что существенно снизило вероятность взрыва.

Егор Дыдыкин,
лидер команды разработки главной страницы Mail.Ru и кросс-портальных проектов
Автор: @madimp

Комментарии (125)

  • +23
    Стало реально лучше. Благодарю за такой развернутый пост.
    • +1
      А мне старый дизайн нравился — такой олдскульный. Почти что ретро. Нынешний лучше, функциональнее, но безликий;)
      • +3
        Тёплый ламповый интерфейс? Новый интерфейс не безликий — это у вас просто ностальгия проснулась. Как и у аудиофилов по винилу, и в остальных подобных случаях а-ля «раньше трава была зеленее» (:
      • +1
        Старый дизайн тормозил по жесткому, с недавнего времени стал замечать что веб фейс почты стал шустрее работать, а спам стал падать в папку со спамом, хотя я ей и не пользуюсь. Исправляетесь, ребята, молодцы. И как знать, может через месяц, после 5 лет использования, я сменю буржуйский gmail на русский mail.ru.
  • –8
    Табом после поля логина в поле пароля не перекидывает. Дальше можно не смотреть.
    • +5
      У нас есть select с доменом, который является частью логина. Поэтому в в последовательности tabIndex’ов его нельзя пропустить.
      • +3
        Каково реальное соотношение пользователей с ящиками в домене mail.ru и остальных? Если довольно велико, то есть смысл поменять последовательность табуляции: 1 — поле логина, 2 — поле пароля, 3 — список доменов. Тогда для mail.ru придется нажать tab всего один раз, тогда как для остальных ничего не поменяется — так же придется нажимать tab 2 раза, только в другой последовательности.
        • 0
          Этот вариант возможен. Мы тоже о нем думали.
          • +1
            Да, из-за этого tabindex'а уже немало споров возникало. Я считаю, что все-таки текущий вариант правильный. Неудобства в любом случае остаются (2 таба до пароля либо за борт всех кто не с mail.ru).

            Попробую предложить свой вариант, в котором таб переводит фокус на ввод пароля:



            Идея состоит в добавлении в текущий вариант принципов, использованных в выборе цвета, т.е. пользователю видно не только mail.ru, но и еще по одному домену сверху и снизу от текущего значения. В момент ввода логина действуют кнопки Up и Down (можно указать это в виде схематичного изображения данных клавиш рядом рядом со стрелками или вместо них).
            • +3
              У нас есть смелые идеи, надеюсь одна из них выдержит критику и все будет намного лучше.
            • 0
              Отличная идея!
        • +2
          Мне кажется что после ввода пароля большинство рефлекторно нажмет на enter\вход
          • 0
            Enter должен сработать. Но прикол в другом, есть программы хранения паролей вроде KeyPass, и они могут автоматически вбивать идентификационные данные. И там это происходит именно так: логин, таб, пароль, энтер.
            • 0
              Я использую одну из таких. Легко настраивается на автовыбор значения в списке доменов.
        • 0
          Тогда стоит подумать об ином расположении полей, иначе будет нелогично, потому что традиционный обход по контролам слева направо, сверху вниз.

          А вот то, что уже сейчас стрелочками происходит переход внутри списка доменов — это уже хорошо.
          • 0
            А вот то, что уже сейчас стрелочками происходит переход внутри списка доменов — это уже хорошо.
            Вообще это стандартное поведение выпадающего списка, когда фокус на нем.
        • 0
          Кыш;) или пусть по умолчанию list.ru делают
  • +17
    Спасибо за качественную статью, всегда интересно проследить за ходом мыслей при работе над такими большими проектами. Было бы клево, если и другие порталы и сервисы подхватили бы такое начинание
  • +8
    у меня на убунте 1366x768 все отлично.
    Местами mail действительно меняется к лучшему — по последним постам и изменениям виден переход от «а навернем еще десяток флэш баннеров» к более технологичным вещам.
  • +2
    возможно я ретроград.
    Но мне не нравится.
    Погоня за модными тенденциями в оформлении сайта, убивает его индивидуальность. По делу претензия одна — шрифты стали субъективно мельче и трудночитаемей.
    И оффтопик — сегодня мне заявили что с моего аккаунта шлется спам и ящик заблокирован, для разблокировки потребовали сменить пароль И ВНЕСТИ НОМЕР ТЕЛЕФОНА. Это правда инициатива МАИЛа? я уже готов отказаться от своего ящика который пользую с 98 года.
    • +1
      На самом деле шрифты увеличились. А в самом маленьком варианте (576px) остались прежними.
      • +2
        да поэтому и написал «субъективно». Вообще со зрением у меня не очень, поэтому я в этом плане не очень репрезентативен.
    • +3
      Ящик могли взломать и использовать для рассылки спама если у вас достаточно простой пароль или взломали какой либо другой сайт где пароль хранятся в открытом виде. Мы пароли в открытом виде не храним в принципе.

      Телефон, к сожалению, единственный достаточно надежный способ доказать что вы это вы. Более того, лично меня мой телефон просят ввести все популярные соц. сети и почтовики.

      Мой совет, подтвердите свой аккаунт телефоном и вы сто раз скажете себе за это спасибо если что-то случится с ящиком.
      • 0
        А потом после смены номера или просто заброса симки, номер достаётся другому человеку…
        • +2
          Предложите способ надежнее. Моему номеру, например, 7 лет.
          • 0
            А, к примеру, моему 8 лет, но он не принимает SMS… GSM принципиально не пользуюсь… С меня номер телефона требуют только вот подобного рода социгрушки, соответственно — отказ от них.
      • +1
        моему телефонному номеру много лет.
        почта постарше будет :)
        Но когда вопрос ставится таким образом — ваша почта заблокирована, и разблокировка только с указанием телефона, то я пожалуй откажусь от почты. популярные соц сети и прочие убиватели рабочего времени по той же причине практически исключены из личного пространства.
        • +1
          По этой причине ОЧЕНЬ нужен сервис не отправления, а получения смс онлайн — слишком много мудаков, считающих, что их сервис для меня важнее приватности. Спасибо за предупреждение — отвяжу старую почту ото всюду, пока не стали вымогать номер телефона.
          • 0
            Согласен, но у меня и так хватает желающих поспамить мой номер. Так что не особо страшно… но бесит.
  • +4
    Спасибо, развёрнуто (не просто сделали абы как, а что-то поисследовали и поанализировали), хотя читал эту информацию в пресс-релизе еще на той неделе :) Но всё равно молодцы!
  • 0
    Вы молодцы, очень радуют изменения, — теперь на главную зайти не страшно, но все еще кажется, что у вас есть проблема с расположением самих блоков. С шапкой при этом всё окей, а вот дальше такое ощущение, что блоки понатыканы «абы как».
    • 0
      А можно более развернуто?
  • 0
    А что, еще не по всем пользователям раскатали? Я вот зашел залогиненным на mail.ru, стал менять размер Fifrefox-окна по горизонтали — на 997px появляется горизонтальный скролл.
    • 0
      Есть оранжевая плашка сверху?
      • 0
        Оранжевой плашки нет и на ваших скриншотах, которые вы в статью выше вставили. :-)
        Вот мой скриншот: habrastorage.org/storage2/361/147/035/361147035ff03eaa8ae2ac085335aa89.png
        • 0
          Большая часть адаптивности завязана на высоту окна.
          По ширине тоже есть, но установлены жесткие ограничения. В частности, минимальная ширина 980px.
          • +3
            Ах, черт… И правда, речь в статье о высоте, а не о ширине. Надо же, привычка бороться с горизонтальным скроллингом настолько въелась в сущность, что уже даже явное указание о высоте в тексте не воспринимается…
  • –11
    Задача дизайнера, имхо, должна была состоять из пункта «убрать баннеры» для главной страницы.
    • +11
      Вы хоть представляете, сколько этот баннер в секунду приносит денег компании? :-)
    • –9
      Ок. Судя по минусам к этому комментарию, компания Mail.ru озабочена не пользователями своих сервисов, а собственным обогащением.
      • +13
        Назовите хоть одну компанию в мире для которой обогащение стоит после мнения пользователей?)
        • 0
          да сотни таких, инстаграм допустим
    • 0
      мало кто знает, что для доступа к почте можно пользоваться — pro.mail.ru. айакс!
      так что не такой уж мейл.ру меркантильный ;)
      я только этой ссылкой и пользуюсь, т.к. обилие баннеров в старом дизайне напрягало, да и в новом, думаю, их будет немало.
      • +1
        Можно собирать почту с мейлру яндекс почтой или гмейлом.
      • 0
        разве этот pro до сих пор работает? вроде как отключили и редиректит на обычную версию
  • +4
    Какая красивая обёртка :)
  • +5
    Чудесная подробная статья. Уверен и юзабилити и дизайн стали лучше. НО, без тотально ребрендинга как в случае с российской полицией не обойтись. Слишком сильный осадок остался с прошлых лет, и к нему прибавился еще неположительный опыт общения с молоток-ру, который, как известно тоже из мэйл-ру-групп. Тем не менее, огромная благодарность за проделанную титаническую работу!
  • +2
    По делу.

    1. Открываем консоль.
    uncaught exception: CustomError: Error in protected function: )55
    if (data.hasAuth !== oldData.hasAuth){


    2. Амперсанд (не сущность) в ссылках?

    3. Закрытие попап-слоев по Esc (дизайнеры!) и использование альтернативной навигации (кажется, я уже где-то об этом писал).

    4. И для любителей валидной верстки и модного нынче HTML5 DOCTYPE — в валидаторе лучше не открывать (назвался груздем — полезай в кузов).
    • +3
      1. Нет более подробной информации? Не можем воспроизвести.

      2. Ссылки к нам приходят как данные, не все сразу

      3. Согласен

      4. Вы серьезно?
      validator.w3.org/check?uri=http%3A%2F%2Fgoogle.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3

      validator.w3.org/check?uri=http%3A%2F%2Fwww.yandex.ru%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3

      Я не против валидации, когда она помогает, но когда она мешает пусть свое время на нее тратит кто-то другой.
      Более того инлановые сили мы вставляли осознанно. Тчательно подбирали для них место в DOM, вы предлагаете сделать хуже, но зато валидно?
      • 0
        Про валидацию: благодаря таким вот соображениям, интернет еще долго будет переходить от неправильного к правильному. Есть стандарт, почему так сложно его соблюдать? Хуже, как вы говорите, не будет, если всё правильно делать.
        1) => The cellspacing attribute on the table element is obsolete. Use CSS instead.
        2) r2.mail.ru/d635786.gif?rnd=166158321&ts=1334714525 => & did not start a character reference. (& probably should have been escaped as &.)
        3)Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)
        4) => Bad value for attribute action on element form: Must be non-empty.

        Или вы считаете, что если заменить во всех ссылках, к примеру, "&" на &, станет совсем всё плохо? или в теге form указать значение атрибута action? Или использовать устаревшие атрибуты, вместо описания в стилях поможет сохранить кроссбраузерность?
        Не понимаю.

        Если хотябы один крупный проект сделает всё максимально правильно, то другие менее крумные или мелкие проекты будут брать пример у «взрослых». А раз большинство так пишет, как тот же яндекс, гугл, то почему и мне нельзя делать ошибки в верстке? вот уж действительно здравое умозаключение.
        • 0
          прошу прощения, отрезались некоторые примеры из вёрстки.
        • 0
          А я и не говорил что про ссылки не согласен. Я сказал что они приходят как данные и их исправить не быстрая операция.

          При условии что мы используем местами inline css осознанно, cellspacing не играет роли, но тут тоже соглашусь.

          Я против третьего пункта, а валидатор ругается в основном на второй и третий пункт.
        • +1
          В некоторых случаях приходится использовать cellspacing осознанно — с включенным border-collapse не работает border-radius на таблицу, а с cellspacing-ом — работает. Такие дела.
          • 0
            Более того, есть еще IE6, у которого наблюдаются проблемы с поддержкой border-spacing
            • 0
              И IE 7 туда же.
            • 0
              IE6, насколько мне известно, не поддерживает HTML5. На новый маил именно таков.
              • 0
                Что вы подразумеваете под HTML5?
                Из HTML5 у нас только несколько малозначимых мелочей и доктайп, а его отлично поддерживают все популярные браузеры, даже IE6.
                • –1
                  Приведу только один простой пример:
                  <input type="number" name="quantity" min="1" max="5" />
                  

                  HTML5 — это несколько шире, нежели привычные теги div, table, br

                  PS: IE9, как было заявлено, понимает HTML5. Да, это так, но не в полной мере. А вы говорите про IE6.
                  • 0
                    Я говорю только про доктайп HTML5 в IE6, а не про то, что вы отнесли к «несколько шире».
                    Использование нового доктайпа никак не обязывает к использованию кастомных тегов, новых хитрых атрибутов и прочих прелестей HTML5. Поэтому, как я уже сказал, у нас от HTML5 только доктайп и пара малозначимых мелочей вроде атрибута autocomplete.
  • 0
    А меня новый дизайн mail.ru не пускает в почту… Перекидывает на недоступную страницу auth.mail.ru/cgi-bin/auth. https-протокол работает. Если авторизоваться через старый дизайн или со странички e.mail.ru/cgi-bin/login — пускает. Чистил кэш браузера, прокси — все равно не пускает. Где собака порылась? Не сильно напрягает, но все же неприятно…
    • +1
      А тут можно подробнее, я рад что вас это не напрягает, но проблема выглядит серьезно.
      Можете скинуть мне на рабочий ящик логин, ось, браузер? andrewsumin@corp.mail.ru
      • 0
        аккаунт- любой. Клиент: Любой браузер. (FireFox, Opera, Хром)
        Прокси-сервер: Win2000 SP4, UserGate 2.7, OutPost FireWall Pro, Nod32 v.4
        Открыты 80 и 443 порты.
        Проблема явно с прокси, так как с него самого в почту пускает.
        А с клиентских машин — нет.

        • 0
          Могу предположить, что логин нужен для того, чтобы посмотреть в логах сервера на каком этапе ломается.
        • +1
          Дело в том, что мы с редизайном жестко прописали https протокол для авторизации.
          Если с этим есть проблемы, придется откатить.

          А на других сайтах где логин по https проблемы есть?
          • 0
            На других сайтах проблем с https нет. Явно тупит Outpost, но где именно…
            • 0
              Попробуем воспроизвести.
      • 0
        Если отключить Outpost полностью — то все нормально. Отключение отдельно модулей DNS-кэширования и Блокирования интерактивных элементов (ActiveX и всплывающих окон) не помогает. Больше вариантов нет.
        Простите за флуд.
  • +3
    Грузится все и правда быстро. Еще бы мелькание некоторых блоков/картинок при обновлении страницы убрать и совсем шоколадка была бы.
  • +3
    Одного меня удивило, что на видео в хроме установлен яндекс бар?

    Врага надо знать в лицо? :)

    • +15
      Почему врага? Конкурента, пристально следим, надеюсь взаимно.
  • –2
    Насколько знаю, Яндекс не видит в Mail конкурента, прежде всего потому что у Mail нет своего поиска (или все еще нет), их реальный конкурент Google. Ну и отношение к Mail доброе.
    Mail.ru же видит Яндекс конкурентом, что тоже объяснимо.

    Мне честно говоря не нравился прежний дизайн, хоть он и был вполне хорош, но перегружен.
    Потому рад такому освежению, просто супер, я в восторге. Стильно, не перегружено, легко ориентироваться… Очень нужные изменения. Думаю, чаще буду заходить.
    • +5
      У mail.ru есть свой поиск, который активно развивается и увеличивает свою долю.
    • +3
      > прежде всего потому что у Mail нет своего поиска

      go.mail.ru/
    • +3
      > у Mail нет своего поиска (или все еще нет)

      Может вам будет полезно, рекомендую блог команды Поиска@Mail.ru go.mail.ru/blog/
      • –2
        А разве не Google поиск использует Mail.ru?
        Mail.ru пытался делать свой поиск и попытка не удалась.
        Потом снова было серьезно заявлено о создании своего поиска.
        У меня появилось серьезное ожидание.
        Что-то не верится, что по тихому свой поиск заработал.
        • +1
          Немного про текущее положение поиска mail.ru можно прочитать здесь roem.ru/2012/03/27/msearch45110/
        • +1
          Почему тихо? На каждой конференции о нём говорится, новости анонсируются отраслевой прессой, на хабре пишутся статьи, в прошлом году даже реклама на ТВ и радио была.

          Вот самые свежие факты:
          go.mail.ru/blog/2012/03/29/press-zavtrak-poiskmailru/
        • +2
          Более того, в прошлом году Поиск@Mail.Ru стал самым быстрорастущим поиском в Рунете
          • 0
            Вероятно, это «заслуга» маилгуарда, часто встречаю дефолтовый поиск на маил.ру.
            • +1
              Узко мыслите. Доля дистрибуции в трафике поиска мейла, ниже, чем у Яндекса. А гарды есть у всех. К тому же это далеко не единственный инструмент.
    • +1
      Да, Поиск@Mail.Ru занимает 3-е место в Рунете по трафикогенерации, — 9.4%, объём аудитории — 33 млн. человек в месяц по всему миру.
    • +3
      У меня сосед в яндексе работает, так они в рассылках внутренних мейла считают конкурентом номер 1.
  • +7
    Читаю про технологии — душа радуется за вас.

    Захожу на сайт(ы) — и ворочу нос: «какое же оно у вас пестрое!»

    Но это лирика. А вообще — спасибо за рассказ, интересно.
  • +1
    После смены стиля, мне 1 кажется, открывая каждый раз mail.ru, что он не догрузился?
  • +3
    Ну и как теперь отличить вашу страницу от главной Яндекса?

    Где индивидуальность, где прежний теплый ламповый mail.ru?
    • 0
      Не, ну зачем Вы так — реклама-то на месте, так что 70% (глаз говорит что не меньше) площади все так же отвлекает внимание (если нет AdBlock) :)
  • +1
    Спасибо за интересную статью!
    Скажите, а при оценке разрешений экранов, учитывали смену ориентации в мобильных устройствах с горизонтальной на вертикальную?
    • +1
      Если вы имеете ввиду телефоны, то для них будет отдельная главная.
      Если планшеты, то нет их пока слишком мало и мы делали для горизонтальной ориентации.
  • +1
    BEM полностью используете или только правила именования/файловой структуры?

    Долго заняло обучение работы с BEM-tools? Учавствуйете в их разработке?

    Как и у Яндекса на главной, css-классы не обфускацированы (а на странице почты e.mail.ru/cgi-bin/signup вроде да) — с чем это связанно?

    Адаптивная верстка — круто, несколько минут игрался с окном браузера, гипнотизирует.

    Спасибо заранее за ответы!
    • +2
      BEM используем как методологию.

      BEM-tools не используем, но это не значит что не будем.
      Пара комитов в tools было, но это было уровня сделать совместимыми с NodeJS v0.5.*

      Классы не обфусцируем, головной боли много, профита мало.
    • +1
      На странице регистрации просто старая вёрстка пока, т. е. не БЭМ вообще.
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Про печать каких документов вы спрашиваете?

      image
      • НЛО прилетело и опубликовало эту надпись здесь
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            Поддержка документов Microsoft Office реализована через Office Web Apps. К сожалению, Opera нет в списке поддерживаемых браузеров, поэтому в ней есть проблемы и не только с печатью.
          • 0
            Здесь, к сожалению, с нашей стороны ничего не поделаешь. Microsoft разрабатывает продукт с прицелом на американский рынок, без поддержки Opera. А Mail.Ru решили использовать Office Web Apps и лишить треть своих пользователей этой возможности.

            И ладно бы отсутствие поддержки, но пользователям это отдаётся как есть в виде «есть, но не нажимается…»
  • 0
    Немножко не в тему, но скажите пожалуста как нибудь можно смотреть mail.ru видео на ios?
  • +1
    А чем плох вертикальный скрол?
    • –1
      данное заблуждение свойственно топ-менеджерам, которые считают своих пользователей слишком тупыми, чтобы пользоваться скроллом.
      • –2
        это вполне может быть правдой в случае данного сайта
        вероятно среди мейлрушечных пользователей большой процент таких, у кого мышь без колесика и монитор 15 дюймов CRT, иначе как объяснить что они не ушли на гмейл 10 лет назад
  • 0
    Стало лучше, но всё равно страница перегружена.
    Я не играю в игры, меня не интересуют гороскопы, нафига мне всё это показывают?
    • 0
      Мы думаем о возможности отображения интересного конкретному пользователю контента. Не все сразу.
  • НЛО прилетело и опубликовало эту надпись здесь
    • НЛО прилетело и опубликовало эту надпись здесь
      • –7
        Не побоюсь еще раз сказать, что mail.ru — Говно! А те кто хомячки, что минусуют тоже говно, и отностся к классу пидорофффф, которые дрочат на своя карму! — Говно!
        • +3
          А меня не правильно поняли )) или я неправильно выразился )))
  • –8
    «Новая главная портала» сверстали насяльнике!
    P.S. Извините.
  • +3
    Осталось убрать табы, пробелы и переводы строк в скриптах и стилях и будет совсем хорошо :)
  • –2
    Прелоадер логотипа у вас мог бы выглядить проще.

    Вставляйте картинки сразу, без джаваскрипта, но не через img, а через тэг с бэкраундом,
    оберните эти тэги во врапперы, у этих врапперов, для нужного логотипа, в медиа куиррисах поставьте дисплей нон, в этом случае браузеры не будут подгружать не нужную картинку. В том же скрипте, что смотрит на скрытый/показанный логотип, делайте просто new Image().src = «путь до картинки». Если большой/маленький логотип будет показан, то он будет взят из кеша.

    В некоторых браузерах бэкраунд будет рендериться медленнее, чем img, но в данном случае разница минимальна.

    Цикл вам не нужен, как и getElementsByTagName, firstChild, lastChild будет быстрее. В ифе на проверку показаности логотипа не используйте currentStyle, только getComputedStyle, в ie8 нет поддержки медиа куиррисов. А если и была бы, то нужно было бы использовать грейсфул деградйшен. То есть сначала
    должен был бы идти стандартизованный метод – getComputedStyle и только после него уже альтернатива – currentStyle. Из-за невнимания к этой технике вы используете устаревший интерфейс получения стилей в ie9.

    noscript вам будет не нужен, для определения того какую картинку показать используйте ваш jsHtml, у тэга html, камел кейс кстати, для классов – плохой тон, так же как это и противоречит концепции бэма, вообще концепцию эту, вы как-то странно используете.

    Удачи! Но маил.ру все равно говно.
    • +1
      Разница между img и background в том, что img выводится на печать и загрузка img начинается раньше, а мы все-таки ускоряем загрузку логотипа.
      Поэтому img. Но даже есть у img выставить display:none, он все равно будет загружаться сразу же.
      Поэтому на сцене появляются span'ки, script и noscript.
      Image().src это предзагрузка. Если всем картинкам так сделать, они будут грузиться сразу же, а нам нужно загрузить на месте только видимую в данный момент, а остальные потом догрузить.

      По поводу цикла. Есть вероятность, что количество изображений изменится. Потому сделан именно цикл: перебрать span'ки, изображение, соответствующее видимому элементу, подставить на месте, остальные в постзагрузку.

      С учетом того, что в коде нет самих img, чтобы разделить загрузку, вариант с jsHtml уже не подходит.

      А вот с порядком вызова currentStyle и getComputedStyle полностью согласен. Надо поменять.
      • 0
        Вы не поняли, это правда, если картинке выставить дисплей нон, то запрос на нее все равно пойдет. Но пожалуйста, прочитайте второй абзац моего прошлого комментария, я же не просто так про врапперы вам написал. Воспользовавшись описанным мною способом, для скрытой картинки запроса не будет, но при условии, если вы задаете картинку через бэкраунд. Это одна из особенностей работы с медиа куиррисами. Поэтому в скрипте будет достаточно строчки с new Image.

        Цикл, сейчас, вам не нужен, об этом стоит задуматься только когда вероятность нескольких логотипов станет реальностью. Из-за того что у вас используется цикл, стили у элемента спрашиваются дважды, когда достаточно и одного раза.
        • +2
          Я написал почему мы именно img используем, а не background — img выводится на печать и начинает загружаться раньше.
          И написал почему вверху страницы не используем new Image() — использовать его вверху тоже самое, что просто наставить элементов img — все изображения будут загружаться сразу, а не только видимое.
          • 0
            Кстати, еще лого картинкой удобно тем, что каждый пользователь может скопировать его адрес и использовать, например, в своем бложике.
  • +3
    Это вин. Прям «Мой мир» захотелось завести снова.
  • 0
    Лучше, но хотелось бы поменьше рекламы. Новый дизайн также перегружен, как и старый.
  • –2
    Статья супер, но мейл.ру я ненавижу пуще брежнего.
    • +2
      А Брежнева за что?
      • –2
        Пуще, чем ОН! А не пуще, чем ЕГО.
        А все знают, что больше него mail.ru ненавидел никто!
  • 0
    Все хорошо, и тесты, и грузится быстро… Но мына нет. Мын потерялся.
  • –5
    Бла-бла-бла!
    Добавили новых свистелок и перделок на главную.
    Тоже мне, новость!
    Лучше бы добавили возможность входа по HTTPS в свою мыло-почту https://mail.ru/
    • +1
      Главная и почта разные проекты, плюс ввод именно логина и пароля на главной уже давно происходит по https.
      • 0
        А, эт ниче, что если кукисы стоят, то при входе на главную по http, логин все же «светится»?

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Самое читаемое Разное