Google Web Fonts in Cross Media Kampagnen verwenden

Der Cross Media Designer bringt von Hause aus nur eine gewisse Anzahl an verfügbaren Fonts mit. Nun kann es aber sein, dass genau der Font der für das Kampagnen Design angedacht war nicht in der Auswahl der Standard Fonts enthalten ist. Durch die Implementierung der Google Web Font in den Cross Media Designer haben Sie die Möglichkeit spezielle Fonts für Ihr Design zu laden. Ich werde Ihnen daher heute zeigen, wie Sie Google Web Fonts Ihrer Kampagne hinzufügen und für ihr Design verwenden.

Bitte beachten Sie, dass Google Web Fonts nur auf Kampagnen Webseiten, mobilen Seiten und in dynamischen Dokumenten verwendet werden können.

 

Google Fonts auf Kampagnen Webseiten

Sie haben an mehreren Stellen im Cross Media Designer die Möglichkeit Google Web Fonts hinzuzufügen. Die einfachste Art ist es über den Reiter ‘GoogleFonts’ einen Web Font zu laden. Klicken Sie auf das grüne Plus in der Auswahl und markieren Sie einen Font der für die Kampagnen Webseite verwendet werden soll.

image

 

Nach dem Bestätigen des ausgewählten Web Fonts wird er der Google Font Liste und der klassischen Font Liste zur Auswahl hinzugefügt.

image

 

Jetzt können Sie wie gehabt ihren Text entsprechend formatieren. Ein kleiner Tipp: Wenn Sie auf mehreren Seiten Ihrer Kampagne den Font benutzen wollen, bietet es sich an, einen Text Style zu erstellen. Diesen brauchen Sie dann nur noch für das jeweilige platzierte Item auswählen. Zum Erstellen eines Text Style wechseln Sie zu dem Reiter ‘Styles’ und klicken auf das kleine ‘+’. Editieren Sie den Text Style und wählen Sie Ihren hinzugefügten Web Font aus.

image

 

Nach dem Bestätigen des erstellten Text Style markieren Sie in Ihrer Kampagnen Webseite ein Item ihrer Wahl und wählen unter ‘Style’ den angelegten Text Style aus.

image

Advertisements

Google Web Fonts einem jQuery Style zuweisen

Sie haben eine neue Kampagnen-Webseite erstellt in der Sie sowohl GoogleFonts für ihre Texte als auch ein bestimmtes jQuery Theme benutzen wollen.

image

 

Damit das ausgewählte jQuery Theme, welches auch die Schriftart u.a. von Buttons bestimmt, den selben GoogleFont benutzt, müssen Sie das jQuery Theme entsprechend anpassen.

image

 

Wählen Sie im Menü unter Options “jQuery Styles” aus.

image

 

In dem geöffneten jQuery Style Fenster klicken Sie auf den Link “jQuery Theme Roller”.

image

 

Suchen Sie unter “Gallery” ihren jQuery Style aus und editieren ihn.

image

 

In der Auswahl Font Settings fügen Sie den Namen des GoogleFonts an erster Stelle hinzu und klicken anschließend auf ‘Download theme’. Vergeben Sie ihrem Theme einen aussagekräftigen Namen und klicken anschließend auf ‘Download’.

imageimage

 

Wechseln Sie zurück zum Cross Media Designer und wählen Sie unter ‘Add Style’ ihr heruntergeladenes jQuery Theme aus.

image

 

Wählen Sie für die Webseite das neue jQuery Theme aus.

image

 

Nachdem Sie das neu angepasste jQuery Theme der Webseite zugewiesen haben werden alle Items die die Auswahl jQuery zugeschalten haben mit dem richtigen GoogleFont dargestellt.

image

Nützliches für die Anzeige von mobilen jQuery Seiten

 

Trennlinien zwischen Items entfernen

Mit dem DirectSmile Cross Media Designer kann man neben der normalen Webseitengestaltung für Kampagnen auch mobile Seiten (mobile pages) erstellen. Der Besucher hat somit die Möglichkeit mit seinem mobilen Gerät auf angepasste Inhalte von Webseiten zuzugreifen.

Platziert man einige Items wie Bilder, Texte oder ein Eingabefeld auf einer mobilen Seite werden vom jQuery Mobile Framework automatisch Trennlinien zwischen den einzelnen Items angezeigt. Diese Linien dienen der optischen Abgrenzung der Items, wenn das mobile Gerät vertikal ausgerichtet ist. Sobald man das Gerät dreht und horizontal hält, verschwinden diese Linien automatisch, da die Items dann für diese Darstellung optimiert ausgerichtet werden. Bei einer vertikalen Ausrichtung können diese Linien jedoch recht störend sein. Um sie zu entfernen, platziert man einfach ein HTML-Item auf einer Seite, in welches man folgendes Script einfügt:

<!-- Script zum Ausblenden der Gruppen Linien -->
<script type="text/javascript">

$('[data-role*="page"]').live("pageshow", function(event, ui) {
$('[class*="ui-br"]').removeClass('ui-br');
});
</script>

 

ohne Skript mit Skript
image image

 

Ränder von platzierten jQuery Items entfernen

Items die auf einer mobilen Seite platziert werden sind grundsätzlich immer mit Rändern versehen. Um diese zu entfernen fügt man auf der mobilen Seite ein CSS Item hinzu und platziert darin den folgenden Code:

.ui-content, .ui-field-contain{
	margin: 0 !important;
	padding: 0 !important;
}

 

ohne CSS mit CSS
image image