Wie wir Mail-Themen entworfen haben

    Im Sommer 2011 haben wir ein neues Design für Mail.Ru eingeführt. Die Benutzeroberfläche hat sich nicht nur optisch geändert, sondern wurde technisch komplett überarbeitet, was zuweilen die Geschwindigkeit und den Komfort beschleunigte. Notwendig war aber auch die Implementierung eines für den Anwender sehr wünschenswerten Features - das Design der Oberfläche. Ich möchte darüber sprechen, wie wir in diesem Beitrag Themen in der Mail eingeführt haben.



    Nur eine Woche zuvor haben wir die Übersetzung der Hauptseiten in BEM ( http://bem.github.com/bem-method/pages/beginning/beginning.ru.html ) abgeschlossen. Es wurde beschlossen, die thematische Anpassung von E-Mails nur in CSS vorzunehmen. Aber reines CSS ist nicht genug, wir brauchen ein Tool zur CSS-Generierung - und wir haben uns für SASS ( http://sass-lang.com/ ) entschieden.

    Wie ich oben schrieb, waren die Hauptseiten bereits in unabhängige Blöcke übersetzt, als wir anfingen, Themen in der Mail zu bearbeiten.

    /css
     /blocks
        /messages
        ...
     /pages
        main.css
    


    Das Plus, das wir sofort bekamen, ist die mangelnde Kaskadierbarkeit. Wenn Sie einen Block neu streichen, streichen Sie nur diesen Block neu, er schießt nirgendwo hin und explodiert nicht.

    Das Thema sind Bilder im Hintergrund sowie Farben (Schriftart, Hintergrund, Rahmen ...). Wir haben Block für Block den gesamten Farbteil separat ausgeführt.

    /css
     /blocks
        /messages // геометрия блоков
     /themes
        /default
           /messages // файлы с переменными оформления
           default.scss // сборка всех блоков с переменными
           default.vars.scss // значения переменных по умолчанию
        /theme
           theme.scss // файл с нужными инклудами
           theme.vars.scss // “окрас” конкретной темы
     /pages
        …
    


    Natürlich brauchten wir ein Build-System. SASS ging hinüber. Sie können damit scss in einer großen css-Datei zusammenfassen und Variablen verwenden.

    Der Stil eines der Blöcke ist wie folgt aufgebaut:

    /css/blocks/messages/messages.scss
    .messages{
            	padding:20px;
    }
    /css/pages/mail.scss
    @import url(../messages/messages.scss);
    /css/themes/default/messages/messages.scss
    .messages{
     background:$messages-background;
    }
    /css/blocks/default/default.scss
    @import url(messages/messages.scss);
    


    In diesen Formatdateien sind alle Werte der CSS-Eigenschaften Variablen, die in einem bestimmten Thema definiert sind.

    /css/themes/theme/theme.vars.scss
    $messages-background: #FFF;
    /css/themes/theme/theme.scss
    @import url(theme.vars.scss);
    @import url(../default/default.scss);
    


    Nachdem wir mit SASS gearbeitet haben, erhalten wir eine Datei mit der Geometrie aller Blöcke:

    /css/pages/mail.css


    und farbcodierte Dateien, gegliedert nach Themen:

    /css/themes/theme/theme.css;


    Es werden zwei Dateien in den Benutzer hochgeladen - Geometrie und Stile des ausgewählten Themas.

    Schalt Themen

    Da Das Design ist von der Geometrie getrennt. Es ist nicht erforderlich, die Seite neu zu laden, um das Design zu ändern. Sie müssen lediglich die Stile des neuen Themas asynchron laden und dann die alten löschen.

    Für die Arbeit mit Themen wurde eine JS-Klasse erstellt, deren Hauptmethoden für uns von Interesse sind setTheme und switchThemeCss.

    Ein Rückrufsystem für die asynchrone Arbeit mit Themen wird mithilfe von Deferred erstellt.

    Die setTheme-Methode ist der „Einstiegspunkt“ zum Festlegen des Themas. Es wird eine Themen-ID verwendet und ein verzögerter Wert zurückgegeben, der zwei auszuführende Methoden voraussetzt: switchThemeCss (Ändern des Stils der Skin) und eine AJAX-Anforderung zum Speichern des ausgewählten Themas. Diese beiden Methoden arbeiten auch mit aufgeschoben.

    return $.when(AJAX.post(...), switchThemeCss(themeId));


    Das Interessanteste passiert in switchThemeCss. Basierend auf der übergebenen themeId erstellt die Funktion den Pfad zum Stylesheet und versucht, es zu laden.

    Das Projekt verwendete bereits ein Plugin zum Laden von jquery.getCSS-Stilen, und wir entschieden uns, es zu verwenden. Leider lässt sich nicht feststellen, ob die Stile wirklich geladen wurden oder die Anforderung aufgrund einer fehlenden Netzwerkverbindung aufgrund eines Timeouts "abgefallen" ist, was für uns sehr wichtig ist Das Löschen der Stile des alten Themas ist erst nach erfolgreicher Anwendung der neuen Stile erforderlich.

    Wir haben dieses Problem mit Hilfe vieler, wahrscheinlich bekannter, aber erfolgreich vergessener Methoden gelöst.

    Der Seite wird ein ausgeblendeter Block hinzugefügt, auf dem die für jedes Thema spezifischen Stile "aufgehängt" werden. Nach dem Laden des Stylesheets prüfen wir, ob sich die Stile des ausgeblendeten Blocks geändert haben und ob das Design erfolgreich geladen wurde.

    In unserem Fall ist die Theme-ID zu 100% eindeutig. Diese ID hat jedoch nichts mit den möglichen Werten von CSS-Eigenschaften zu tun, was bedeutet, dass die Stile im Allgemeinen nicht angewendet werden.

    Es war eine Eigenschaft erforderlich, deren Wert eine beliebige Zeichenfolge sein konnte. Die Eigenschaften für Inhalt und Schriftfamilie sind dafür geeignet, jedoch mit einigen Einschränkungen.

    Einige Browser wenden die content -Eigenschaft nicht auf Nicht-Pseudo-Elemente an, für die sie bestimmt ist. Andere verwenden die Eigenschaft font-family nicht, wenn eine solche Familie in der Realität nicht vorhanden ist, sie verwenden jedoch die Eigenschaft content. Wir haben beschlossen, beide Eigenschaften zu verwenden. In Browsern, die einen leeren Wert für die content -Eigenschaft zurückgeben, sehen Sie in der font-family -Eigenschaft nach.

    Das Ergebnis ist ungefähr der folgende Code (schematisch):

    
    function getApplyedThemeId(){
            	var ff = hiddenElement.css('font-family'),
            	     content = hiddenElement.css('content');
    return content || ff;
    },
    function switchThemeCss (themeId){
            	var   url = getThemeCssUrl(themeId)
                        	, deferred = newDeferred();
            	var oldThemeId = getApplyedThemeId(); // Получаем текущий themeId
            	$.getCSS(
                        	url,
                        	function(link){
                                   	var newThemeId =getApplyedThemeId(); // Получаем новый themeId
                                   	// Если id не совпадают – тема загрузилась
                                   	if (newThemeId !== oldThemeId){
                                               	$ThemeCSS.remove(); // Удаляем старые стили
                                               	$ThemeCSS = $(link); // Запоминаем новые
                                               	deferred.resolve(); // Возвращаем ОК
                                   	} else { // Тема по какой-то причине не загрузилась
                                               	$(link).remove(); // Удаляем link на неудачные стили
                                               	deferred.reject(); // Возвращаем “все плохо”
                                   	}
                        	}
            	);
    }
    


    Als Ergebnis haben wir Themen, die einfach zu pflegen sind. Darüber hinaus ist der Download einfach zu verwalten, und der Downloadcode kann mit jeder Front-End-Lösung verwendet werden, um Themen auf jeder Seite auszuwählen.

    Die technische Umsetzung, die Erstellung von 12 Themen, das Debugging und die Produktionsfreigabe dauerten 2 Monate von einer Person.

    Am Ende - lustige Statistiken zu den beliebtesten Themen:

    Zombies werden meist von Jungs zwischen 12 und 25 gesetzt. Und es ist auch ein Lieblingsthema des Mail.ru Mail-Teams :)


    Das Spiel der Schneebälle hat die Nase vorn im Segment der Winterthemen. Derzeit wurde es bereits von mehr als 300.000 Personen installiert, von denen 2/3


    Frauen sind. 25-34 Das mädchenhafteste Thema von Anime ( Mädchen zwischen 12 und 17 Jahren)


    Das ausgefallenste Thema ist Blackboard. Sie können es überhaupt nicht über die Benutzeroberfläche aktivieren! Aber du kannst es hier über einen solchen Cheat-Link einschalten: http://e.mail.ru/cgi-bin/msglist?folder=0&setTheme=t1026

    Simons Kat - Themen für junge Frauen 25-34


    PS: Den Schleier der Geheimhaltung öffnen - der erste wird bald veröffentlicht Zwei Themen für Fans der Spiele Allods und Legend.

    Andrey Sumin,
    Leiter der Kundenentwicklung

    Jetzt auch beliebt: