kulturbanause® blog » Tutorials

Flexible CSS-Hintergründe mit „background-size“ gestalten – Responsive Web Design

Jonas Hellwig — Fri, 12 Apr 2013 14:51:33 +0000

Die grafischen Elemente einer Website müssen flexibel gestaltet werden, um den Anforderungen im Responsive Webdesign zu entsprechen. Für die Gestaltung des Layouts nehmen Hintergrundgrafiken daher eine besondere Rolle ein. In diesem Video zeige ich euch welche Möglichkeiten Ihr habt CSS-Hintergründe zu skalieren oder zu transformieren und wie in diesem Zusammenhang die CSS-Eigenschaft background-size genutzt werden kann.

Das Video ist eine Lektion des Video-Trainings "Responsive Webdesign".

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Die CSS-Pseudoklasse :target – Funktion & Beispiele

Jonas Hellwig — Fri, 01 Mar 2013 07:55:08 +0000

Mit Hilfe der CSS-Pseudoklasse :target können recht komplexe Techniken ohne den Einsatz von JavaScript realisiert werden. Häufig wird :target in letzter Zeit im Zusammenhang mit Slider- oder Off-Canvas-Effekten im responsive Design erwähnt. Doch wie funktioniert die Pseudoklasse überhaupt?

Wofür braucht man :target?

Mit :target könnt ihr prüfen, ob ein Ankeridentifikator angesprochen wurde. Das ist zum Beispiel der Fall wenn ihr einen Link auf eine ID setzt oder einen Anker verwendet. Das folgende Beispiel zeigt einen Link dessen Ziel eine ID ist. Sofern sich ein Element mit dieser ID auf der Seite befindet, springt die Ansicht zu dieser Stelle.

Klick mich

Wenn der Link angeklickt wird, verändert sich auch die URL der Seite. Die Adresse http://kulturbanause.de würde nach dem Klick so aussehen: http://kulturbanause.de#test. Daran ist auch im nachhinein erkennbar, dass dieser Ankeridentifikator gerade angesprochen wurde.

Mit der Pseudoklasse :target kann nun geprüft werden, ob sich eine ID gerade im Ziel befindet und folglich in der Adressleiste steht. :target funktioniert allerdings nur, wenn die ID auf der Seite auch existiert.
Wir erweitern den Beispiel-Code daher ein wenig und fügen die ID in den body ein:


  Klick mich

Jetzt prüfen wir mit CSS, ob die ID #test angesprochen wurde. Wenn das der Fall ist, wird der Hintergrund des Elements mit dieser ID (in diesem Fall der body selbst) rot eingefärbt.

#test:target  { background:red; }

Wenn wir das Beispiel um einen zweiten Hyperlink ohne Ziel erweitern, kann der Effekt zurückgesetzt werden.


  Klick mich

  Reset

Eine Live-Demo dieses Beispiels könnt ihr euch hier anschauen:

Beispiel öffnen

Mehrere Elemente verändern

Wir haben die ID auf den body gesetzt, was es einfach macht auch untergeordnete Elemente zu verändern. Ich habe einen div und eine h1 hinzugefügt und verändere nun Position, Größe und Farbe mit Hilfe der übergeordneten ID des body.

Eine Live-Demo könnt ihr euch hier anschauen:

Beispiel öffnen


  Klick mich

  Reset
  
    kulturbanause.de

h1, div { 
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

h1 {font-size:100%;}

div {
	position: absolute;
	top: 50px;
	left: 0;
	padding: 10px 20px;
	background:#eee;
}

#test:target div {
	background: #0C0;
	left: 200px;
}

#test:target h1 { font-size: 200%;}

Off-Canvas-Navigation mit :target

Das folgende Beispiel setzt den Off-Canvas-Effekt mit Hilfe von :target um. Es geht mir darum die elementare Funktion zu verdeutlichen. Der Code kann nicht ohne Optimierung für Live-Projekte verwendet werden.

Eine Live-Demo des Beispiels findet ihr hier:

Beispiel öffnen


   
  

  
    Open Navi
    Close Navi

    Off-Canvas mit :target
    Hier steht der Inhalt

* {
	margin:0;
	padding:0;
}

html, body {
	height:100%;
	overflow-x:hidden;
}

.navMain, #content { 
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.navMain {
	width:240px;
	height:100%;
	position:fixed;
	left:-240px;
	background:gray;
}

#content {
	margin-left:20px;
	padding-top:20px;
}

#openBtn, 
#closeBtn {
	width:40px; 
	height:40px; 
	margin:0 0 20px 0; 
	color:white; 
	padding:10px;
}

#openBtn {
	background:green; 
	display:block;
}

#closeBtn {display:none;}


/* if nav open */

#openNav:target .navMain {left:0;}

#openNav:target #content {
	margin-left:260px;
	position:fixed;
}

#openNav:target #openBtn {display:none;}

#openNav:target #closeBtn {
	display:block; 
	background:red;
}

Nachteile

Mit :target lassen sich interessante Effekte erzeugen, doch die Technik hat auch Nachteile.

Die URL muss verändert werden und der Effekt funktioniert nur, wenn hier eine Anpassung möglich ist
Der Effekt basiert auf IDs, mit Klassen funktioniert es nicht. Es ist aber nicht möglich mehrere IDs auf ein Objekt anzuwenden, :target hat daher seine Grenzen
Der Besucher springt bei einem Klick auf den Anker natürlich zu entsprechender Stelle
Der Browser-Support ist auf moderne Browser beschränkt

Quellen / Links

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Responsive Webdesign mit Adobe Edge Reflow

Jonas Hellwig — Thu, 14 Feb 2013 18:57:28 +0000

Responsive Webdesign stellt Designer vor eine Herausforderung: es müssen flexible Layouts auf Basis von Prozentwerten gestaltet werden, obwohl innerhalb der Grafikprogramme Pixelwerte verwendet werden. Designer müssen daher während der gesamten Gestaltungsphase im Hinterkopf haben, dass alle Spalten des Designs später in der Breite variabel sind. Der klassische Workflow stößt hier an seine Grenzen, da es wenig Sinn macht, zunächst unzählige statische Layouts zu entwerfen und diese anschließend in eine flexible Website umzuwandeln. Aus diesem Grund wird direkt zu Beginn des Projektes ein sog. interaktiver Prototyp erstellt, der die gesamte Flexibilität abbilden kann. Anschließend wird die Gestaltung der Website und die technische Umsetzung mit HTML, CSS und JavaScript parallel vorangetrieben. Mit Adobe Edge Reflow ist jetzt das erste Programm erschienen, das den Workflow im Responsive Webdesign abbilden kann.

Wie funktioniert Adobe Edge Reflow?

Edge Reflow ist eine Art Hybridlösung zwischen Illustrator, Fireworks und Dreamweaver. Auf der Arbeitsfläche wird das Web-Layout mit Hilfe simpler Formen zusammengestellt, im Hintergrund schreibt das Tool jedoch HTML- und CSS-Code. Die verschiedenen Elemente der Website werden innerhalb des Rasters platziert und können mit gestalterischen Effekten versehen werden. Hier stehen hauptsächlich die Möglichkeiten von CSS3 zur Verfügung, es können jedoch auch Grafiken eingebunden werden.

Benutzeroberfläche von Adobe Edge Reflow

Breakpoints im Layoutprogramm

Der große Unterschied zu allen anderen Programmen ist die Möglichkeit Breakpoints zu setzen. Über einen Schieberegler auf der rechten Seite kann die Arbeitsfläche gestaucht werden. Dabei verhalten sich alle Elemente flüssig - entsprechend des gewählten Rasters.

Reflow is not meant to replace Photoshop/Fireworks for design or Dreamweaver/Edge Code for development, but to provide a place to explore responsive layouts and design using standards based CSS on a web based design surface.

Sobald das Design nicht mehr funktioniert, kann über einen Button ein Breakpoint gesetzt werden. Anschließend werden gestalterische Anpassungen vorgenommen. Über farbige Balken am oberen Ende der Arbeitsfläche kann zwischen den Breakpoints unterschieden werden.

Edge Reflow kann im Rahmen einer kostenlosen Creative Cloud Mitgliedschaft heruntergeladen werden.

Download Edge Reflow

Die Benutzeroberfläche

Das Interface von Edge Reflow ist unterteilt in folgende inhaltliche Bereiche:

Arbeitsfläche mit Schieberegler (grün)
Media Query Leiste (blau)
Werkzeugauswahl (violett)
Eigenschaften-Leiste mit den Tabs „Layout“ und „Styling“ (orange)
Canvas Bar (gelb)
Icon für Adobe Edge Inspect (rot)

Das Reflow-Interface mit den Bereichen Arbeitsfläche (grün), Media Query-Leiste (blau), Werkzeugauswahl (violett), Eigenschaften-Leiste (orange), Canvas-Bar (gelb) und Edge Inspect Icon (rot)

Arbeitsfläche

Die Arbeitsfläche ist beim Erstellen einer neuen Datei automatisch mit einem 12er-Raster unterteilt, was der Arbeitsweise vieler aktueller Frameworks entspricht. Darüber hinaus ist ein 12er Raster sehr flexibel und bietet sich für die meisten Websites gut an. Das Raster kann in der Eigenschaften-Leiste detailliert angepasst werden.

Über den Schieberegler rechts neben der Arbeitsfläche kann die Breite der Bühne stufenlos verändert werden. Dabei skalieren sich das Raster sowie alle Elemente auf der Bühne.

Media Query-Leiste

Die Media Query-Leiste zeigt die verschiedenen angelegten Media Queries an. Per Klick auf einen Bereich kann zwischen den Media Queries gewechselt werden. Über den Button rechts neben der Leiste wird ein neuer Media Query hinzugefügt. Der Breakpoint wird entsprechend der aktuellen Breite der Arbeitsfläche gesetzt.

Wenn ihr auf das "+"-Icon klickt und etwas länger gedrückt haltet, öffnet sich ein neues Menü mit detaillierten Optionen. Hier kann der exakte Pixelwert des Breakpoint eingestellt und ein Name vergeben werden. Ihr könnt auch festlegen, ob der Media Query mit einer max- oder min-Angabe (mobile First) geschrieben wird.

Media Queries in Edge Reflow: Klassisch und Mobile First

Werkzeuge

Die Werkzeuge von Reflow sind äußerst übersichtlich.

Mit dem Auswahl- / Verschieben-Werkzeug werden die Elemente auf der Arbeitsfläche ausgewählt, verschoben oder transformiert. Die Optionen in der Eigenschaften-Leiste ändern sich entsprechend des aktiven Elements.
Mit dem Box-Werkzeug werden neue Elemente gezeichnet, oder bestehende Elemente verändert.
Das Text-Werkzeug erzeugt per Klick einen Text, alternativ kann ein Textrahmen aufgezogen werden.
Das Bild-Werkzeug ermöglicht das Einfügen von externen Bildquellen.

Eigenschaftenleiste / Eigenschaften-Inspector

Die Eigenschaftenleiste erlaubt Einstellungen in Abhängigkeit zum gerade aktiven Element. Wenn das Container-Element ausgewählt ist, kann das Raster editiert werden.
Im Bereich „Layout“ werden Einstellungen zu Größe, Padding, Margin, Floating-Modell etc. festgelegt. Im Bereich „Styling“ werden die Elemente mit Farben, Schatten, Verläufen etc. ausgestattet.
Normalerweise betrifft die Änderung einer Eigenschaft nur den aktuellen Media Query. Bei vielen Angaben erscheint jedoch per MouseOver über dem Eingabefeld ein weiterer Button (siehe Abb.). Wird hier geklickt, übernimmt Reflow die Eigenschaft für alle Media Queries.

Eigenschaften können per Klick auf alle Media Queries übertragen werden

Einige Eigenschaften werden farblich hinterlegt. Daran erkennt ihr in welchen Media Queries die Eigenschaft definiert wurde und ob eine Vererbung stattfindet.

Die typischen Einstellungen in Edge Reflow. Farbige Hinterlegungen zeigen in welchem Media Query eine Eigenschaft festgelegt wurde

Canvas Bar

Die Canvas-Bar (Leinwand-Leiste?) zeigt den Pfad der Elemente an und beschreibt wie die HTML-Objekte auf der Bühne verschachtelt sind. Per Klick kann ein Element ausgewählt werden, was die Navigation innerhalb der Website enorm erleichtert. Wenn ihr das „<>“-Icon neben dem aktuellen Element anklickt, erscheint ein Pop-Up mit den CSS-Eigenschaften.

Die Canvas-Bar erlaubt eine schnelle Navigation im Dokument und zeigt die CSS-Angaben

Edge Inspect

Mit einem Klick auf den „Edge Inspect“-Button, kann eine Synchronisation zwischen verschiedenen mobilen Endgeräten hergestellt werden. Mehr über Edge Inspect erfahrt ihr hier.

Edge Reflow Tutorial

Ich möchte euch die Funktionsweise von Edge Reflow mit einem kleinen Tutorial erklären. Ziel ist es eine Mini-Website mit zwei Breakpoints zu erstellen, an der ich alle wichtigen Funktionen von Edge Reflow zeigen kann. Den ästhetischen Anspruch stellen wir heute mal hinten an.

Projekt anlegen

Erstellt ein neues Dokument und speichert die Datei ab. Reflow erstellt keine einzelne Datei, sondern einen Projektordner. Hier werden später HTML- & CSS-Dokumente sowie weitere Dateien abgelegt. Innerhalb des Dokuments legt Reflow automatisch einen Div-Container und ein Gestaltungsraster an.

Edge Reflow verwaltet die Website in einem Projektordner

Media Queries festlegen

Als erstes legen wir die Media Queries fest. Da es im Vorfeld immer schwierig ist abzuschätzen wann ein Breakpoint gebraucht wird verwenden wir zunächst die typischen Größen für Smartphone und Tablet. Die Media Queries können später noch erweitert oder angepasst werden.
Zieht mit dem Schieberegler die Arbeitsfläche auf eine Breite von 960 Pixel und fügt per Klick auf die „+“-Schaltfläche oben rechts einen Breakpoint hinzu. Wenn die Pixel nicht genau getroffen wurden, könnt ihr lange auf das Icon klicken um die erweiterten Optionen aufzurufen. Hier kann der Wert in Pixel angegeben werden.
Erstellt nach dem gleichen Prinzip zwei weitere Breakpoints bei 780 und 480 Pixeln. Per Klick auf die farbigen Bereiche in der Leiste könnt ihr zwischen den Media Queries wechseln.

Beispiel-Website mit Media Queries und zwei Breakpoints

Raster anpassen

Edge Reflow erstellt automatisch ein Raster mit 12 Spalten. Für die Desktop-Variante unserer Beispiel-Website ist das soweit in Ordnung. Die anderen Ansichten passen wir an. Aktiviert zunächst den Bereich von 0-480 Pixel und wählt mit Hilfe des Auswahl-Werkzeugs oder der „Canvas-Bar“ das Container-Element aus. In der Eigenschaften-Leiste verringert ihr die Anzahl der Spalten auf 3 und erhöht den Abstand zwischen den Spalten auf 5%.

Raster in der Smartphone-Ansicht mit drei Spalten

Für den Media Query von 480-780 Pixel vergebt ihr 6 Spalten und einen Abstand von 3%. Sollte euch das eingeblendete Raster stören, könnt ihr über „Opacity“ die Deckkraft regeln.
Im Bereich von 870-960 Pixel muss das Raster nicht angepasst werden, der Container sollte jedoch eine maximale Breite erhalten um sich nicht unendlich weit auszudehnen. Vergebt bei max-width 960 Pixel.

Der Container erhält eine maximale Breite um eine unendliche Ausdehnung zu verhindern

Elemente hinzufügen und ausrichten

Jetzt sollten wir ein paar Elemente hinzufügen um die Seite zu gestalten. Aktiviert zunächst den Media Query für die Desktop-Ansicht und wählt anschließend das „Box-Werkzeug“ aus.
Zeichnet nun einen Header-Bereich mit einer Höhe von 250 Pixeln über die gesamte Breite des Containers. Mit 50 Pixel Abstand, zeichnet ihr darunter drei Boxen mit einer Höhe von 200 Pixel ein. Die genauen Pixelwerte könnt ihr in der Eigenschaften-Leiste nummerisch angeben. Hilfreich ist sicher auch das Icon unten rechts in der „Canvas-Bar“. Mit dem hier versteckten Menü können Elemente aneinander ausgerichtet oder auf gleiche Höhe gebracht werden.

Die einzelnen Boxen können in Edge Reflow manuell verschoben oder automatisch ausgerichtet werden

Wenn ihr die Shift/Umschalt-Taste drückt, könnt ihr per Klick mehrere Elemente auswählen. Markiert nun die drei unteren Boxen und vergebt in der Eigenschaften-Leiste ein padding von 20 Pixeln.

Die Elemente erhalten ein Padding von 20 Pixeln

Header gestalten

Markiert den Header und wechselt in der Eigenschaften-Leiste in den Bereich „Styling“. Im oberen Abschnitt könnt ihr Farben, Bilder und Verläufe hinzufügen. Wählt über das kleine Icon einen Verlauf aus und erstellt im sich nun öffnenden Dialog einen linearen Verlauf von Hellblau (#72D4FF) zu Dunkelblau (#04528B). Anschließend könnt ihr den Dialog schließen.

Verläufe können in Edge Reflow unkompliziert auf Elemente angewendet werden

Im mittleren Abschnitt können Rahmen gestaltet werden. Um den Header mit einer Linie vom Inhaltsbereich abzutrennen, erstellen wir hier eine 5px starke, nach unten ausgerichtete Linie in Dunkelblau (#003053).

Linien und Umrandungen werden in der Eigenschaftenleiste gestaltet

Boxen gestalten

Nun gestalten wir die Boxen. Markiert alle drei Elemente und vergebt ein helles Blau-Grau (#E9EDEF) als Hintergrundfarbe. Im Bereich „borders“ rundet ihr die Ecken um 5 Pixel ab.
Im unteren Bereich können Schatten gestaltet werden. Fügt einen Schatten hinzu und wählt Schwarz als Farbe. Im Auswahlmenü für die Farbe findet ihr rechts auch einen Regler für die Transparenz. Stellt hier einen Wert von ca. 30% ein. Als Weichzeichnungsgrad (Blurring) legt ihr 2px fest, den Abstand nach unten gebt ihr mit einem Pixel an.

Abgerundete Ecken und Schatteneffekte sind in Edge Reflow mit wenigen Klicks erstellt

Texte hinzufügen

Wählt das Textwerkzeug aus und bewegt den Cursor über eine der drei Boxen. Ein veränderter Rahmen bedeutet, dass ihr den Text innerhalb der Box erstellt. Reflow erzeugt dann also verschachtelte HTML-Elemente. Ihr könnt die Verschachtelung auch in der Canvas-Bar kontrollieren.
Zieht einen Textrahmen innerhalb der Boxen auf, passt mit dem Auswahlwerkzeug oder über den „Layout-Tab“ die Abmessungen an und schreibt ein wenig Beispiel-Text. Verfahrt so mit allen drei Boxen.

Die Textrahmen werden innerhalb der Boxen erstellt, damit sie sich am Padding orientieren

Schriften und Typografie

Wenn ihr einen Textrahmen ausgewählt habt, könnt ihr im „Styling-Tab“ der Eigenschaftenleiste den Text gestalten. Vergebt eine Schriftgröße von 0.9em und einen Zeilenabstand von 1.2em.
Im Bereich Typeface kann eine Schriftart gewählt werden. Über den Pfeil im Auswahlmenü habt ihr die Standard-Schriften der Browser zur Auswahl. Über den „T+“-Button links können Webfonts über die Adobe Edge Webfonts geladen werden. Wählt hier eine beliebige Schrift aus (erkennbar am blauen Haken) und verlasst das Menü. Anschließend steht die Schrift in der Auswahlliste ganz oben zur Verfügung. Vergebt für alle Texte einen Webfont.

Reflow arbeitet eng mit den Edge Webfonts zusammen - Webfonts über Typekit oder die Google Webfonts lassen sich schnell integrieren

Externe Bilder laden

In den Header unserer Beispielseite laden wir jetzt noch ein Logo. Klickt auf das Bild-Werkzeug und ladet eine Grafik. Als Beispiel könnt ihr auch das kulturbanause Logo verwenden. Die Grafik klebt nun vorerst am Cursor und kann per Klick positioniert werden.

Media Queries optimieren

Das Layout ist nun soweit fertig und alle Inhalte wurden positioniert. Jetzt ist es Zeit die Anpassung für andere Viewport-Größen zu übernehmen. Per Klick auf einen Bereich in der Media Query Leiste könnt ihr schon sehen wie sich das Layout verhält.
In der mittleren Ansicht sind die Textboxen zusammengedrückt was Auswirkung auf die Zeilenlänge hat. Die Boxen sind zu niedrig. Wählt die Elemente aus und passt die Höhe an. In der Eigenschaften-Leiste wählt ihr dazu den Wert „auto“. Auch der Header ist in der Tablet-Variante vielleicht ein wenig hoch. Hier verringern wir die Höhe auf 110px und rücken die Boxen entsprechend weit nach oben.

Angepasstes Layout für die Tablet-Ansicht: Die Boxen passen sich nun in der Höhe an, der Header ist manuell verkleinert worden

In der Smartphone-Ansicht wird die Zeilenlänge der Boxen dann endgültig zu kurz. Verschiebt die Boxen untereinander und erhöht die Breite auf 100%. Achtet darauf, dass auch hier die Höhe der Box auf „auto“ gesetzt ist. Den Abstand zum Header und den Abstand zwischen den Boxen geben wir mit 30px an. Somit wäre auch dieser Darstellungsfahler korrigiert.

In der Smartphone-Ansicht werden die Boxen untereinander abgebildet

Code exportieren

Über den Schieberegler könnt ihr nun alle Ansichten stufenlos testen. Wenn die Website in allen Viewport-Größen funktioniert, ist es Zeit den Code zu exportieren.
Der finale Code-Export scheint in dieser frühen Version von Reflow noch nicht integriert worden zu sein. Über „View → Preview in Chrome“ kann allerdings eine Vorschau gestartet werden.

This code is only meant for previewing your Reflow design.

Die Daten werden parallel in den /assets-Ordner im Projektordner gespeichert. Reflow erstellt eine HTML-Datei, sowie reflow.css und boilerplate.css.

Die Beispieldateien könnt ihr hier herunterladen oder online anschauen.

Demo anzeigen

Update: Edge Reflow Preview 2

Adobe hat die Preview 2 von Edge Reflow veröffentlicht. Die wichtigsten Features der neuen Version sind u.a. die Unterstützung von position:absolute;, position:fixed; und z-index, Inline-Text-Styling auf Basis von , ein überarbeiteter Farbwähler, ein verbesserter Workflow sowie optimierte Performance.

Einen vollständigen Bericht der neuen Version findet ihr im Edge Reflow Blog.

Links / Quellen:

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Starre Layouts in flüssige Layouts umwandeln – Responsive Webdesign Basics

Jonas Hellwig — Fri, 18 Jan 2013 14:09:23 +0000

Ein wichtiger Bestandteil einer responsive Website ist das flüssige Gestaltungsraster auf Basis von Prozent- oder em-Werten. Doch wie wandelt man ein auf Pixelwerten basierendes, evtl. bereits programmiertes Layout in ein flüssiges Raster um? Anhand eines leicht verständlichen Beispiel-Projekts möchte ich euch die grundlegende Vorgehensweise erklären.

Das flüssige Raster im RWD

Ein responsive Design besteht mindestens aus folgenden drei Komponenten:

Flüssiges Gestaltungsraster
Flexible Medieninhalte (Bilder, Videos etc.)
Media Queries

In diesem Beitrag behandle ich das Raster der Website. Ergänzende Infos zum Thema findet ihr in meinen folgenden Beiträgen:

Quellcode des starren Layouts

Das Markup des Beispiel-Projekts ist denkbar simpel aufgebaut. Durch das Container-Element (.container) wird die Website mit einer Breite von 960 Pixeln mittig im Browserfenster positioniert. Die restlichen Elemente erhalten Breiten- und Höhenangaben und werden innerhalb des Containers untergebracht. Der Hauptinhalt und die Sidebar werden nach links und rechts gefloatet, der Footer hebt den float wieder auf.

Aufbau des starren Layouts

HTML-Markup

[…]


   Logo 
  
     … 
     … 
     … 
     … 
  
   … 
  


[…]

CSS-Code

body {
	margin: 20px;
	padding: 0;
}

#container {
	margin: 0 auto;
	width: 960px;
	background: white;
}

#header {
	float: left;
	background: orange;
	width: 960px;
	margin: 0 0 20px 0;
}

#logo {
	width: 120px;
	display: block;
	background: white;
	margin: 30px 20px;
	padding: 20px;
	text-align: center;
	text-decoration: none;
	color: grey;
}

#article {
	float: left;
	width: 600px;
}

.info {
	background:yellow;
	padding:30px;
	margin:20px 0;
}

#aside {
	float: right;
	width: 280px;
	background: #FC0;
	padding: 20px;
}

#footer {
	clear: both;
	padding: 10px;
	background: orange;
}

Beispiel des starren Layouts anzeigen

Pixelwerte in Prozentwerte übertragen

Um das statische Layout für ein responsive Design vorzubereiten, müssen lediglich alle Pixelwerte in Prozentwerte umgerechnet werden. Das führt allerdings nicht nur dazu, dass das Design sich kleinen Viewports anpasst, es dehnt sich auch unendlich weit aus. Auf großen Bildschirmen oder Smart-TVs hätten wir demnach viel zu lange Zeilen. Aus diesem Grund wird das Layout nach oben in der Ausdehnung begrenzt.

Max-Width

Die Begrenzung des Layouts nach oben hin wird auf den umschließenden .container angewendet. Mit der CSS-Eigenschaft max-width: 960px; hindern wir das Design daran sich über diesen Wert hinaus zu verbreitern.

#container {
	margin: 0 auto;
	max-width: 960px;
	background: white;
}

Die Formel

Nun geht es daran die restlichen Pixelwerte in Prozent umzurechnen. Die Größe des Bezugs-Elements ist dabei entscheidend. Normalerweise ist das Bezugs-Element das Eltern-Element, doch dazu später noch etwas mehr.
Mit folgender Formel lassen sich die Werte schnell umrechnen. Achtet drauf, ausreichend viele Nachkommastellen im CSS-Code anzugeben um ein sauberes Ergebnis zu erhalten.

Zielgröße in Pixeln / Bezugs-Element in Pixeln x 100 = Wert in Prozent

Am Beispiel des 600 Pixel breiten Inhaltsbereichs (#article) sieht die Rechnung wie folgt aus. Das Bezugs-Element ist der umschließende .container mit einer Breite von 960px.

600 / 960 * 100 = 62,5%

Der zugehörige CSS-Code wird also wie folgt angepasst. Den Rechnungsweg habe ich als Kommentar hinzugefügt.

#article {
	float: left;
	width: 62.5%; /* 600/960x100 */
}

Hilfsmittel zur Berechnung

Um euer Leben ein wenig zu erleichtern, möchte ich euch einige Online-Tools zur Berechnung des Verhältnisses vorstellen. Verschiedene "Responsive Calculator" findet Ihr hier.

Veränderte Bezugs-Elemente

Wenn ihr padding-Angaben in Prozent darstellen wollt, ist das Bezugs-Element übrigens nicht das umschließende Element. Entsprechend des CSS-Box-Models orientiert sich padding am Element selbst.

Erwähnenswert ist in diesem Zusammenhang der gelb hervorgehobene Textabsatz (.info). Ein Absatz ist ein Block-Element und hat daher automatisch eine Breite von 100%, gemessen am umschließenden Element. Da sich der Absatz innerhalb des #article befindet, muss daher auch die Breite des #article für die Berechnung verwendet werden.

.info {	
  background:yellow;
  padding: 5%; /* 30/600x100 */
  margin: 3.333333333% 0;  /* 20/600x100 */
}

Quellcode des flüssigen Layouts

Das war eigentlich auch schon alles. Ein wenig Rechenarbeit ist natürlich notwendig, aber nach kurzer Zeit basieren alle Abmessungen auf Prozentwerten.

Flexibler Aufbau auf Basis von Prozentwerten

CSS-Code

Der vollständige CSS-Code für alle Elemente sieht so aus:

body {
	margin: 20px;
	padding: 0;
}

#container {
	margin: 0 auto;
	max-width: 960px;
	background: white;
}

#header {
	float: left;
	background: orange;
	width:100%; 
	margin: 0 0 2.08333333% 0; /* 20/960x100 */
}

#logo {
	width: 12.5%; /* 120/960x100 */
	display: block;
	background: white;
	margin: 3.125% 2.08333333%; /* 30/960x100, & 20/960x100*/
	padding: 2.08333333%; /* 20/960x100 */
	text-align: center;
	text-decoration: none;
	color: grey;
}

#article {
	float: left;
	width: 62.5%; /* 600/960x100 */
}

.info {
	background:yellow;
	padding:5%; /* 30/600x100 */
	margin:3.333333333% 0;  /* 20/600x100 */
}

#aside {
	float: right;
	width: 29.16666667%; /* 280/960x100 */
	background: #FC0;
	padding: 2.08333333%; /* 20/960x100*/
}

#footer {
	clear: both;
	padding: 1.0416666667%; /* 10/960x100 */
	background: orange;
}

Beispiel des flüssigen Layouts anzeigen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Absatzformate und Zeichenformate in Photoshop CS6 nutzen und exportieren

Jonas Hellwig — Mon, 17 Dec 2012 12:51:33 +0000

Aufgrund vieler Nachfragen habe ich ein Video zum Thema Absatz- und Zeichenformate von PS CS6 erstellt. In diesem Screencast zeige ich euch wie ihr die Formate einsetzen könnt, und wie ihr häufige Probleme im Umgang mit diesen Werkzeugen vermeidet. Da insbesondere die Export-Funktion häufig angefragt wurde, gehe in diesem Zusammenhang auch auf den Export/Import von Absatzformaten ein. Ich hoffe das Video hilft euch weiter, dieses wirklich hilfreiche Werkzeug endlich auch produktiv zu nutzen

Absatz- und Zeichenformate in Photoshop CS6

In diesem Video zeige ich anhand eines Beispiel-Dokuments, wie ihr Absatzformate/Zeichenformate anlegt und verschiedenen Textelementen zuweist. Wichtig ist dabei vor allem, dass ihr den Basisabsatz von Photoshop nicht mit individuellen Einstellungen überschreibt und Formate nicht versehentlich auf gesamte Ebenen anwendet.

Probleme im Umgang mit Absatzformaten vermeiden

Die Absatz- und Zeichenformate reagieren häufig anders als erwünscht. Wenn ihr euch über ein bestimmtes Verhalten wundert, prüft ob einer der folgenden Lösungsvorschläge das Problem behebt:

Ist das Format auf zuvor formatierten Text angewendet worden? Wenn ja: Überschreibung löschen
War die gesamte Textebene aktiv? Wenn ja, wirkt sich ein zugewiesenes Format auf alle Texte dieser Ebene aus

Photoshop CS6: Absatzformate exportieren

Wenn ihr Absatzformate exportieren möchtet, so speichert einfach die gesamte Photoshop-Datei. Absatzformate werden in Form einer PSD importiert, ein eigenes Format existiert nicht.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Verschachtelte Kommentare (nested comments) in WordPress aktivieren

Jonas Hellwig — Fri, 19 Oct 2012 06:56:55 +0000

WordPress bietet die Möglichkeit Kommentare in verschiedenen Ebenen zu verschachteln. Ist die Funktion aktiviert, können User auf Kommentare antworten. Die Antwort wird eingerückt unter dem ursprünglichen Kommentar abgebildet.
Verschachtelte Kommentare sind sehr übersichtlich und erleichtern die Diskussion der Besucher untereinander. Es macht also durchaus Sinn die Funktion in den eigenen Blog zu integrieren.

Was muss getan werden?

Zunächst wird über den Header die Funktion global aktiviert. Anschließend wird die comments.php bearbeitet: Das Template für Kommentare wird in die functions.php ausgelagert und dort entsprechend angepasst. Nun muss in den WordPress-Einstellungen die Verschachtelungstiefe der Kommentare eingestellt werden. Im letzten Schritt müssen die Kommentare mit CSS gestaltet werden.

Bitte beachtet, dass es auch andere Lösungswege für verschachtelte Kommentare gibt. Wer keine Lust hat das Theme anzupassen, kann auch ein Plugin verwenden.

1. header.php anpassen

Öffnet die header.php eures Themes und fügt anstelle von folgenden Code ein.

2. comments.php anpassen

Öffnet nun die comments.php des Themes und sucht nach der Liste (

functions.php


   // Dieses Template wird später in der functions.php definiert

3. functions.php anpassen

Nun muss das Template für die Darstellung von Kommentaren definiert werden. Kopiert folgenden Code in die functions.php des Themes und nehmt ggf. Änderungen vor.

/* template for comments  */
function kb_comment_template($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
    id="li-comment-">
     
      
         comment_author_email, 48 ); ?>

         %sschrieb:'), get_comment_author_link()) ?>
      
      comment_approved == '0') : ?>
         
         

      

      

      

      
          $depth, 'max_depth' => $args['max_depth']))) ?>
      
     

4. WordPress-Einstellungen überprüfen
Wechselt nun ins WordPress-Dashboard und ruft dort den Bereich „Einstellungen → Diskussion“ auf. Hier findet ihr den Punkt „Verschachtelte Komentare in X Ebenen organisieren“. Wählt die Tiefe der Verschachtelung aus und bestätigt die Einstellungen.  


WordPress-Einstellungen für verschachtelte Kommentare

5. style.css anpassen
Das war auch schon alles. Ab sofort unterstützt euer Theme verschachtelte Kommentare. Ihr müsst nur noch das CSS-Dokument entsprechend anpassen. Eine Liste aller theoretisch möglichen CSS-Klassen findet ihr hier. Ich habe Sie wiederum hier gefunden.  
#commentList {}
#commentList li {}
#commentList li.alt {}
#commentList li.bypostauthor {}
#commentList li.byuser {}
#commentList .comment-author-admin {}
#commentList .comment {}
#commentList .comment div.comment-author {}
#commentList .comment div.vcard {}
#commentList .comment div.vcard cite.fn {}
#commentList .comment div.vcard cite.fn a.url {}
#commentList .comment div.vcard img.avatar {}
#commentList .comment div.vcard img.avatar-32 {}
#commentList .comment div.vcard img.photo {}
#commentList .comment div.commentmetadata {}
#commentList .comment div.comment-meta {}
#commentList .comment div.comment-meta a {}
#commentList .comment * {}
#commentList .comment div.reply {}
#commentList .comment div.reply a {}
#commentList .comment ul.children {}
#commentList .comment ul.children li {}
#commentList .comment ul.children li.alt {}
#commentList .comment ul.children li.bypostauthor {}
#commentList .comment ul.children li.byuser {}
#commentList .comment ul.children .comment {}
#commentList .comment ul.children .comment-author-admin {}
#commentList .comment ul.children li.depth-2 {}
#commentList .comment ul.children li.depth-3 {}
#commentList .comment ul.children li.depth-4 {}
#commentList .comment ul.children li.depth-5 {}
#commentList .comment ul.children li.odd {}
#commentList li.even {}
#commentList li.odd {}
#commentList li.parent {}
#commentList li.pingback {}
#commentList li.pingback div.comment-author {}
#commentList li.pingback div.vcard {}
#commentList li.pingback div.vcard cite.fn {}
#commentList li.pingback div.vcard cite.fn a.url {}
#commentList li.pingback div.commentmetadata {}
#commentList li.pingback div.comment-meta {}
#commentList li.pingback div.comment-meta a {}
#commentList li.pingback * {}
#commentList li.pingback div.reply {}
#commentList li.pingback div.reply a {}
#commentList li.pingback ul.children {}
#commentList li.pingback ul.children li {}
#commentList li.pingback ul.children li.alt {}
#commentList li.pingback ul.children li.bypostauthor {}
#commentList li.pingback ul.children li.byuser {}
#commentList li.pingback ul.children .comment {}
#commentList li.pingback ul.children .comment-author-admin {}
#commentList li.pingback ul.children li.depth-2 {}
#commentList li.pingback ul.children li.depth-3 {}
#commentList li.pingback ul.children li.depth-4 {}
#commentList li.pingback ul.children li.depth-5 {}
#commentList li.pingback ul.children li.odd {}
#commentList li.thread-alt {}
#commentList li.thread-even {}
#commentList li.thread-odd {} 

Links / Quellen:

How to Add Nested Comments to Your WordPress Theme
Enable threaded comments

Jetzt bist Du gefragt
Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Farbkonzepte mit Adobe kuler oder auf Grundlage eines Fotos entwickeln

Jonas Hellwig — Thu, 18 Oct 2012 06:56:59 +0000

Ein stimmiges Farbkonzept ist entscheidend für den Erfolg einer Website. Farben transportieren Emotionen und werden unmittelbar und unterbewusst wahrgenommen. Es lohnt sich also hier etwas Zeit zu investieren um auch die richtigen Emotionen in der Zielgruppe zu erzeugen. In diesem Video zeige ich euch wie Ihr mit Hilfe von Adobe kuler ein Farbkonzept entwickeln könnt. Darüber hinaus erstellen wir ein zweites Farbkonzept auf Grundlage eines Fotos.

Videos

Beschreibung von Galileo Press: Wenn Sie das Farbkonzept von Text und Bild optimal aufeinander abstimmen, wirkt Ihr Design bereits viel ansprechender und hochwertiger. Der Profi-Designer Jonas Hellwig zeigt Ihnen in dieser neuen Folge der »Photoshop-Profis«, wie Sie mithilfe von Photoshop und Adobe Kuler ein eigenes Farbschema für Ihre Designs entwerfen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Frame-Animation mit Photoshop – Einen Ladebalken animieren

Jonas Hellwig — Wed, 29 Aug 2012 13:36:26 +0000

Mit Photoshop lassen sich verschiedene Arten von Animationen herstellen. Eine davon ist die sog. Frame-Animation, in der verschiedene Einzelbilder nacheinander abgespielt werden. In diesem Video-Tutorial zeige ich euch am Beispiel eines Ladebalkens, wie ihr das Grundobjekt gestaltet und anschließend mit Hilfe der Photoshop-Zeitleiste animiert. Das Ergebnis speichern wir als GIF-Animation ab.

Dieses Video ist ein Auszug aus dem Training »Webdesign mit Photoshop« von Galileo Press und wurde auf Photoshop Profis veröffentlicht.

In dieser neuen Folge der »Photoshop-Profis« zeigt Ihnen Jonas Hellwig, wie Sie einen Ladevorgang ansprechend visualisieren können. Bei der Animation des Fortschrittbalkens hilft Ihnen die neue Zeitleiste in Photoshop CS6. Den Ladebalken selber können Sie über Ebenenstile plastisch gestalten und zum Leuchten bringen. Naürlich zeigt Ihnen der Profi auch, wie Sie die Animation als GIF speichern.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Photoshop: Schärfen mit dem Hochpass-Filter

Jonas Hellwig — Sun, 15 Jul 2012 08:54:07 +0000

In Photoshop existieren verschiedene Standards was die Schärfung eines Bildes angeht. Die Klassiker dürften wohl die Filter "unscharf maskieren" oder "selektiv scharfzeichnen" sein. Eine alternative Methode das Motiv nachträglich zu schärfen führt über den Hochpass-Filter und den Blendmodus "weiches-" bzw. "hartes Licht". Bei dieser Methode muss zwar manuell vorgegangen werden, das Ergebnis kann jedoch sehr detailliert eingestellt werden und bietet sich je nach Bild oder Workflow besser an. In diesem Photoshop-Screencast möchte ich euch zeigen wie ihr ein Bild mit dem Hochpass-Filter bearbeiten könnt.

Auch dieser Screencasts ist auf Wunsch eines Lesers dieses Blogs entstanden.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

WordPress-Mediathek auf Subdomain auslagen. Warum und wie.

Jonas Hellwig — Fri, 11 May 2012 11:58:57 +0000

Die Performance gehört zu den wichtigsten Faktoren wenn es um die technische Optimierung einer Website geht. User erwarten schnelle Seiten und auch Google rankt Sites mit hoher Performance im Index weiter nach vorne. Es lohnt sich also hier zu optimieren.
Um zu prüfen welche Bereiche eurer Website verbesserungswürdig sind, könnt ihr beispielsweise Google Page Speed oder Yahoo YSlow nutzen. Beide Dienste empfehlen die Nutzung eines sog. CDN (= Content Delivery Network), also die Auslagerung von Medianinhalten auf verschiedene Server dessen Aufgabe ausschließlich die Verwaltung und Verteilung dieser Inhalte ist. Es muss aber kein echter CDN-Dienst sein. Häufig reicht eine eigene Subdomain.

Bessere Website-Performance durch „Load Sharing“

Wenn eine Website im Browser geladen wird, erzeugt jede geladene Datei einen sog. HTTP-Request (Server-Anfrage). Der Browser kann in der Regel zwischen zwei und vier Requests parallel bearbeiten. Je mehr Dateien eure Website laden muss, desto länger wird die Warteschlange der Anfragen und desto länger wird der Seitenaufbau verzögert. Moderne Websites fassen Dateien und Scripte daher in Paketen wie beispielsweise CSS-Sprites zusammen um Requests zu sparen - aber das ist ein anderes Kapitel.

Die Begrenzung der Requests erfolgt pro Domain! Wenn wir Daten auf externe Domains, in unserem Fall eine Subdomain, auslagern, können mehr Serveranfragen parallel bearbeitet werden. Diese Vorgehensweise kann den Seitenaufbau spürbar beschleunigen.
Es wäre also möglich Bilder auf images.domain.de und Scripte auf scripts.domain.de auszulagern. Achtet jedoch darauf, dass ihr nur dann Daten auf eine Subdomain auslagert, wenn die Datenmenge angemessen ist. Die Auflösung der Domain kostet nämlich auch wieder Zeit.

Google Page Speed Online

Die optimale Lösung wäre der Einsatz eines echten Content Delivery Network (kurz: CDN). Hierbei werden die Daten auf verschiedene physikalische Server ausgelagert. Häufig werden auch verschiedene Standorte für die Server berücksichtigt um Inhalte für den Besucher optimal ausliefern zu können. Diese Methode ist jedoch technisch sehr aufwändig und kostenintensiv. Ein CDN lohnt sich daher meist erst für richtig große Websites.

Kurz und knapp. Was haben wir vor?

Damit ihr wisst was euch erwartet, fasse ich einmal kurz zusammen was getan werden muss um die Mediathek erfolgreich auszulagern.

Zunächst wird natürlich eine Subdomain benötigt. Wenn bereits Inhalte in die "alte" Mediathek hochgeladen wurden, müssen diese nun auf die Subdomain verschoben werden. Dafür ist ein Update der Datenbank notwendig damit die Dateizuordnungen nicht verloren gehen. Anschließend wird innerhalb von WordPress als Upload-Verzeichnis die Subdomain eingerichtet. Von nun an werden auch neue Inhalte automatisch auf die Subdomain hochgeladen. Zuletzt sollte die Google Bildsuche nicht vernachlässigt werden.

Nicht vergessen! Datenbank-Backup erstellen, Serverbackup erstellen.

Subdomain einrichten, Pfad ermitteln

Als erstes braucht ihr natürlich eine Subdomain. Wie ihr eine Subdomain einrichtet ist abhängig von eurem Provider. Bei 1und1, Strato und HostEurope könnt ihr Subdomains unkompliziert über das Kunden-Administrationsinterface einrichten. Solltet ihr nicht wissen wie eine Subdomain einzurichten ist, wendet euch bitte an den entsprechenden Provider.
Sobald die Subdomain aktiv ist, müsst ihr den Serverpfad ermitteln. Diesen Pfad benötigen wir später um in WordPress angeben zu können wo die Daten hochgeladen werden sollen.
Erstellt eine Datei mit folgendem Inhalt und speichert sie unter dir.php ab.

Ladet die Datei nun auf die Subdomain hoch und ruft sie im Browser auf (http://subdomain.deine-domain.de/dir.php). Ihr seht nun den Pfad zu der Datei. Er sollte in etwa so aussehen:

/is/htdocs/12784521_GGTZAIUHSDN/www/subdomain.deine-domain.de

Notiert euch den Pfad und löscht die Datei wieder vom Server!

Daten der Mediathek umziehen

Nun verschieben oder kopieren wir die Mediathek an Ihren neuen Ort. Die Mediathek findet ihr auf dem Server unter ../wp-content/uploads/.
Wenn ihr die Möglichkeit habt mit einer Kopie zu arbeiten, tut das. Da Google einige Zeit braucht um zu merken, dass die Bilder umgezogen sind vermeidet ihr mit einer Kopie tote Bild-Links in Googles Bildersuche.

Ihr solltet nun also eine unveränderte alte Mediathek besitzen und eine Kopie des Orders uploads auf der Subdomain erstellt haben.

Datenbank aktualisieren

Nun geht es an die Datenbank. Wenn ihr mit einer Kopie der Mediathek arbeitet, sieht eure Website noch aus wie immer. Wenn ihr die Mediathek verschoben habt, sind alle Inhalte der Mediathek jetzt verschwunden. Wir müssen also die Pfade in der Datenbank auf den neuen Standort der Mediathek aktualisieren. Dafür gibt es verschiedene Methoden.

SQL-Section zur Ausführung von SQL-Befehlen in phpMyAdmin.

In der Regel werdet ihr die Datenbanken über phpMyAdmin verwalten. Noch einmal zur Erinnerung: erstellt ein Backup eurer funktionierenden Datenbank, damit ihr im Notfall alles wieder herstellen könnt.

Möglichkeit 1: MySQL-Befehl in phpMyAdmin absetzen

Ihr könnt die Pfade in der Datenbank über folgenden SQL-Befehl direkt in phpMyAdmin anpassen. Achtet darauf, dass die Tabellen der Datenbank, sowie der alte und der neue Domainname stimmen.

UPDATE wp_posts SET post_content = REPLACE(post_content, 'http://deine-domain.de/wp-content/uploads/', 'http://subdomain.deine-domain.de/');

Möglichkeit 2: Datenbank exportieren, Pfade ersetzen, Datenbank importieren

Alternativ könnt ihr über phpMyAdmin auch zunächst die Datenbank exportieren. Anschließend öffnet ihr die *.sql-Datei mit einem Texteditor und ersetzt den alten Pfad (bsp: http://deine-domain.de/wp-content/uploads/) mit dem neuen Speicherort der Mediathek (bsp: http://subdomain.deine-domain.de/).
Anschließend importiert ihr die Datenbank wieder.

Wenn ihr eure Seite nun im Browser aufruft sollte alles funktionieren. Ihr könnt im Quellcode einmal nachschauen ob die Medieninhalte korrekt auf die Subdomain verweisen.

Einstellungen im WordPress-Backend

Jetzt müssen wir WordPress noch mitteilen, dass neu hinzugefügt Medieninhalte auch in die neue Mediathek geladen werden. Dazu ruft ihr im WordPress-Dashboard den Punkt „Einstellungen → Mediathek“ auf.

Im unteren Bereich seht ihr den Abschnitt „Dateien hochladen“. Tragt in das obere Feld den anfangs ermittelten Serverpfad ein. In das untere Feld gehört der komplette Pfad zu den Dateien.

Speichert die Einstellungen und ladet ein Testbild in die Mediathek hoch um zu prüfen ob das Bild auch an den richtigen Ort geladen wird. Wenn alles funktioniert seid ihr mit dem Umzug der Mediathek fertig.

Google informieren

Je nachdem wie viele Bilder eure Website beinhaltet stellt die Google Bildersuche eine nicht zu vernachlässigende Besucherquelle dar. Google benötigt einige Zeit um zu merken dass die Bilder umgezogen sind. Daher haben wir die Mediathek zunächst auch kopiert und nicht verschoben. Besucher gelangen über Google also solange auf das „alte“ Bild bis Google den Pfad aktualisiert hat.
Damit Google alle Pfade aktualisiert, solltet ihr mit einem Redirect 301 per .htaccess nachhelfen.

redirect 301 /wp-content/uploads/bild.jpg http://subdomain.deine-domain.de/bild.jpg

Leider kann es sich als ziemlich lästig erweisen alle Bilder in der Mediathek zu finden und aufzulisten. Mit folgendem PHP-Snippet könnt ihr allerdings alle Bilder der Mediathek auflisten. Das sollte schon einmal deutlich helfen.

 'attachment', 'post_mime_type' =>'image', 'post_status' => 'inherit', 'posts_per_page' => -1,
);

$query_images = new WP_Query( $query_images_args );
$images = array();
foreach ( $query_images->posts as $image) {
    $images[]= $image->guid;
}
?>

";
     next($images);
}
?>

Laut Martin dauert es ca. eine Woche bis Google merkt, dass die Bilder umgezogen sind. Ihr müsst also einfach ein paar Stichproben in der Bildsuche machen. Sobald Google alle Pfade geändert hat, könnt ihr die alte Mediathek löschen.

Links zum Thema

Was beachten beim Bilder-Umzug - tagSeoBlog
Google Bildsuche: 301-Weiterleitungen für Bilder. Test-Auswertung - tagSeoBlog
Subdomains WordPress beschleunigen - nikonierer.de
Praxistipps: Steigerung der Website Performance - t3n

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Screencast: Moderne Web-Icons entwerfen

Jonas Hellwig — Wed, 28 Sep 2011 12:36:58 +0000

In Folge 69 der Photoshop-Profis wurde ein Screencast von mir zum Thema Icon-Design veröffentlicht. Das etwa 11 Minuten lange Video behandelt die Grundlagen der Icon-Erstellung und zeigt wie man mit Photoshop-Basics wie den Ebenenstilen und Formebenen sehr schnell zu einem ansehnlichen Ergebnis kommt. Auch die Arbeit mit Lichtern und Verläufen wird ausführlich beschrieben.

Die Photoshop-Profis beschreiben den Inhalt so:

Individuelle Icons verleihen Ihrer Webseite einen unverwechselbaren Look. In dieser Folge der »Photoshop-Profis« zeigt Ihnen Webdesigner Jonas Hellwig, wie Sie mit wenigen Mitteln ein Web-Icon erstellen. Dabei erfahren Sie, wie Sie das Icon mit Gold überziehen und ein Symbol einstanzen. [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Transparentes Rauschen: Photoshop und CSS3

Jonas Hellwig — Wed, 27 Jul 2011 08:11:55 +0000

Moderne Websites realisieren mittlerweile einen Großteil der grafischen Elemente vollständig über CSS3. Hierbei stehen die Möglichkeiten von CSS3 denen von Photoshop in nichts nach, und es lassen sich mitunter sehr beeindruckende Effekte erzielen.
Leider wirken über Code erstellte Grafiken häufig zu glatt und zu einheitlich, was den fotorealistischen Gesamteindruck negativ beeinflusst. Es liegt ja gerade im Trend dezente Strukturen einzusetzen und so dem Design etwas mehr "Griff" zu geben. Was also tun? Die Lösung ist eine Kombination aus Photoshop-Pattern und CSS3.
In diesem Tutorial möchte ich euch zeigen, wie ihr zunächst eine transparente Struktur in Photoshop erstellt, und diese anschließend auf CSS3-generierte Objekte anwenden könnt.

Alle Dateien dieses Tutorial könnt ihr herunterladen. Das Download-Paket umfasst eine Photoshop-Datei, eine PNG-Struktur und das HTML-Beispiel.

Beispieldateien herunterladen

Datei anlegen und Smart-Filter vorbereiten

Erstellt zunächst einen neue Datei mit weißer Hintergrundfarbe. Ich habe in diesem Beispiel mit einer 500x300 Pixel großen Arbeitsfläche gearbeitet - die Abmessungen der Datei sind für das Verständnis dieser Technik allerdings irrelevant.

Wandelt nun die Hintergrundebene in eine normale Ebene um. Das erreicht ihr entweder mit einem Doppelklick auf die Hintergrundebene innerhalb der Ebenenpalette, oder alternativ über das Menü. "Ebene → Neu → Ebene aus Hintergrund".

Wandelt nun über "Filter → Für Smartfilter konvertieren" die Ebene in ein Smart-Objekt um. Das hat den Vorteil, dass ihr später den Rausch-Effekt noch anpassen könnt, ohne das ihr die Pixel unwiderruflich zerstört habt.

In Smart-Object umgewandelte Hintergrundebene.

Rauschfilter anwenden

Wählt nun über "Filter → Rauschfilter → Rauschen hinzufügen" den Rauschfilter aus und erstellt ein leichtes, gleichmäßiges, monochromatisches Rauschen.

Rauschen hinzufügen: leicht, gleichmäßig, monochromatisch

Auswahl aus Farbbereich erstellen

Erstellt jetzt eine zusätzliche Ebene oberhalb des Smart-Objektes. Auf dieser Ebene werden wir nun mit Hilfe einer automatischen Auswahl das transparente Rauschen erzeugen.

Achtet darauf, dass ihr die neue Ebene ausgewählt habt und ruft nun über "Auswahl → Farbbereich" den Farbbereich-Dialog auf. Mit diesem Werkzeug könnt ihr nun Pixel auf eurer Arbeitsfläche auswählen und anschließend eine Auswahl aller gleichfarbigen Pixel erstellen lassen. Die Toleranz bestimmt wie viele farblich benachbarte Pixel ebenfalls in die Auswahl aufgenommen werden.

Ich habe in diesem Beispiel mit einer Toleranz von 15 gearbeitet. Die Miniaturansicht zeigt welche Pixel ihr ausgewählt habt. Versucht hier ein möglichst gleichmäßiges Verhältnis von Schwarz und Weiß zu erreichen.

Photoshop: Farbbereiche auswählen

Bestätigt nun den Dialog und füllt die Auswahl anschließend über "Bearbeiten → Fläche füllen" schwarz ein. Jetzt könnt ihr die Auswahl wieder aufheben (Auswahl → Auswahl aufheben).

Struktur fertigstellen

Ihr könnt nun die ehemalige Hintergrundebene (Ebene 0) ausblenden oder löschen. Anschließend reduziert ihr die Deckkraft der Rausch-Ebene auf 5%-10% - je nachdem wie stark ihr das Rauschen einsetzen möchtet.

Struktur exportieren

Die transparente Rausch-Struktur ist nun fertig und muss lediglich exportiert werden. Speichert die Daten nun also über "Datei → Für Web und Geräte speichern" im PNG24-Format ab. Nur so erreicht ihr die benötigte Transparenz im Hintergrund.

Als PNG24 speichern

Struktur mit CSS3 kombinieren

Die fertige Struktur könnt ihr nun wie gewohnt per CSS auf ein Element anwenden. Die Technik wird allerdings erst richtig interessant, wenn ihr fortgeschrittene CSS3-Techniken - wie Verläufe oder 3D-Effekte - mit der Rausch-Struktur noch weiter aufwertet.

Das folgende Live-Beispiel zeigt einen simplen CSS3-Button mit angewandter Rausch-Textur. Der Code wurde in Firefox, Chrome und Safari getestet.

Im direkten Vergleich nun das Beispiel ohne Rauschen.

CSS-Code des Beispiel-Buttons

.button {
	padding:15px 17px;	
	
	background-color: #b5bdc8;
	background-image:url(rauschen.png);
	border-top:1px solid rgba(255,255,255,0.4);

	color:#222;
	font:22px Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-decoration:none;
	text-shadow: rgba(255,255,255,.3) 0 1px 0;
	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	
	-webkit-box-shadow: 
		inset 0px -5px 35px rgba(0,0,0,0.7), 
		inset 0px 5px 15px rgba(255,255,255,.7),
		inset 0px -1px 0px rgba(255,255,255,0.3), 
		0px 3px 3px rgba(0,0,0,0.5);
		
	-moz-box-shadow: 
		inset 0px -5px 35px rgba(0,0,0,0.7), 
		inset 0px 5px 15px rgba(255,255,255,.7),
		inset 0px -1px 0px rgba(255,255,255,0.3), 
		0px 3px 3px rgba(0,0,0,0.5);
	
	-ms-box-shadow: 
		inset 0px -5px 35px rgba(0,0,0,0.7), 
		inset 0px 5px 15px rgba(255,255,255,.7),
		inset 0px -1px 0px rgba(255,255,255,0.3), 
		0px 3px 3px rgba(0,0,0,0.5);
		
	-o-box-shadow: 
		inset 0px -5px 35px rgba(0,0,0,0.7), 
		inset 0px 5px 15px rgba(255,255,255,.7),
		inset 0px -1px 0px rgba(255,255,255,0.3), 
		0px 3px 3px rgba(0,0,0,0.5);
		
	box-shadow: 
		inset 0px -5px 35px rgba(0,0,0,0.7), 
		inset 0px 5px 15px rgba(255,255,255,.7),
		inset 0px -1px 0px rgba(255,255,255,0.3), 
		0px 3px 3px rgba(0,0,0,0.5);	
}

Download aller Beispiel-Dateien

Ihr könnt alle Dateien dieses Beispiels hier herunterladen. Das Paket enthält eine Photoshop-Datei mit der Basis-Struktur, die exportier PNG und das HTML-Beispiel mit dem Button.

Beispieldateien herunterladen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Screencast: Holzstruktur in Photoshop erstellen

Jonas Hellwig — Sat, 09 Jul 2011 17:20:11 +0000

Mit realistischen Strukturen lässt sich die grafische Qualität einer Website spürbar verbessern, und auch im App-Design gehören simulierte Materialien wie Leder, Papier, Metall oder Holz heutzutage einfach dazu. Die Photoshop-Profis haben in Folge 58 einen Screencast von mir veröffentlicht, in dem ich erkläre, wie ihr mit Hilfe einiger Photoshop-Filter und etwas Handarbeit, eine realistische Holzstruktur herstellen könnt.

Die Photoshop-Profis beschreiben den Inhalt des ca. 14-minütigen Videos so:

Sie möchten Ihre Webseite mit ansprechenden Holzstrukturen veredeln? In dieser Folge der Photoshop-Profis zeigt Ihnen Webdesign-Experte Jonas Hellwig, wie Sie mit wenigen Handgriffen eigene Holzstrukturen entwerfen. Dazu erzeugen Sie zunächst mit dem Fasern-Filter eine Grundstruktur, auf der Sie schließlich die Astlöcher und Baumringe anbringen. Die Holzstruktur können Sie übrigens auch verwenden, um anschließend Holzbretter für einen Parkettboden zu simulieren.

Edle Holzstrukturen nachbauen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Screencast: Kunstfaser-Struktur mit Photoshop erzeugen

Jonas Hellwig — Tue, 31 May 2011 04:30:11 +0000

Im App- und Web-Design erfreut sich die Kunstfaser-Struktur aktuell allergrößter Beliebtheit. Seit Apple die dezente Struktur im iOS-Betriebssystem verwendet hat, taucht sie auch bei vielen anderen prominenten Websites und Apps auf. So nutzen beispielsweise Twitter oder Reeder die Struktur für das Interface-Design der iPad-App.
Ich möchte euch in diesem Screencast zeigen, wie ihr die Struktur in sehr kurzer Zeit und mit nur einem Filter in Photoshop umsetzt.

Zeichenfilter anwenden

Der Kunstfaser-Effekt ist sehr einfach hergestellt. Eine schwarz eingefärbte Arbeitsfläche wird mit dem Zeichenfilter "Feuchtes Papier" bearbeitet. Anschließend kann die Struktur noch verfeinert und farblich angepasst werden.

Die HD-Version findet ihr hier.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Screencast: Wassertropfen mit Photoshop erstellen

Jonas Hellwig — Mon, 23 May 2011 04:30:42 +0000

Wassertropfen können im Webdesign, wie auch in der Werbung, ein mächtiges Gestaltungselement sein. Verwenden wir Wassertropfen z.B. in Kombination mit der Abbildung von Lebensmitteln oder Getränken, so wirkte das Produkt frisch, kühl und vital. Was wäre die berühmte Coca-Cola-Flasche ohne Wassertropfen? In diesem Screencast möchte ich euch zeigen wie einfach es ist in Photoshop Wassertropfen zu zeichnen.

Was wird in diesem Sceencast behandelt?

Ich möchte euch zeigen wie ihr mit Hilfe der Ebenenstile Wassertropfen selbst zeichnen könnt. Diese Vorgehensweise hat gegenüber der Arbeit mit Filtern einige Vorteile.
Zum einen könnt ihr den fertigen Stil abspeichern und mehrfach verwenden. Zum anderen könnt ihr nur so selbst festlegen, wo welcher Wassertropfen platziert werden soll und wie er geformt ist. Für die grafische Qualität des Layouts ist das sehr entscheidend. Ein Filter lässt sich für diesen Effekt zu ungenau steuern.

Die HD-Version findet Ihr auf Vimeo

Download des Photoshop-Stils (*.asl)

Ihr könnt den gespeicherten Stil aus diesem Screencast hier herunterladen und per Doppelklick in Photoshop importieren. Achtet darauf, dass ihr den Stil nur auf Objekte anwendet, die über eine scharfe Kante verfügen und eine hohe Deckkraft besitzen. Anderenfalls wirkt der Stil nicht wie gewünscht.

Photoshop-Stil (*.asl) herunterladen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Screencast: 3D-Text mit Repoussé in Photoshop CS5

Jonas Hellwig — Fri, 20 May 2011 06:11:23 +0000

Auf Photoshop-Profis wurde mit Folge 52 erneut ein Video von mir veröffentlicht. In dieser Folge zeige ich wie ihr mit Hilfe des 3D-Dialogs "Repoussé" von Photoshop CS5 Extended, sehr schnell einen ansehnlichen 3D-Text erstellen könnt. In etwa neun Minuten Spielzeit gehe ich auf die Basics des Dialogs ein und erkläre wie Ihr aus einer Textebene ein 3D-Objekt erstellt, texturiert und beleuchtet.

Die Photoshop-Profis beschrieben den Inhalt des Videos so:

Photoshop Extended bietet Ihnen auch die Möglichkeit, 3D-Texte zu erzeugen. In dieser Folge der »Photoshop-Profis« zeigt Ihnen Jonas Hellwig, wie Sie ein 3D-Objekt erstellen, ausleuchten, texturieren und rendern. Als Ergebnis erhalten Sie einen Schriftzug mit modernen 3D-Effekten, den Sie zur Gestaltung Ihrer Webseite verwenden können.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Facebook: So nutzt ihr den neuen Send-Button

Jonas Hellwig — Wed, 27 Apr 2011 09:25:49 +0000

Facebook hat ziemlich genau ein Jahr nach der Einführung des Like-Buttons (Gefällt mir) das Sortiment der Social-Plugins um einen neuen Button erweitert. Mit dem Send-Button können Website-Besucher Beiträge nun gezielt an bestimmte Freunde senden. Facebook erfährt so noch mehr über die individuellen Beziehungen der Mitglieder.
Wie Ihr den Send-Button verwenden könnt, bzw. den Like-Button um die neuen Funktionen erweitert erkläre ich in diesem Beitrag.

So sieht der Senden-Dialog aus, wenn ein Besucher den Button benutzt

Den Facebook Send-Button "normal" in die Website einbinden

Wie auch beim Like-Button steht auf developers.facebook.com/docs/reference/plugins/send ein Tool zur Verfügung mit dem Ihr den Send-Button generieren könnt. Ihr müsst lediglich die URL die ihr "senden" möchtet eintragen und eine Schriftart festlegen. Anschließend erhaltet ihr folgendes Snippet:

Solltet Ihr bereits ein anderes Facebook-Social-Plugin wie die Like-Box oder den Like-Button eingebunden haben, so nutzt ihr bereits die Facebook-JavaScript-API. In diesem Fall reicht es den Button ohne JavaScript einzubinden.

Den Gefällt-Mir-Button um die Senden-Funktion erweitern

Wenn Ihr bereits den Like-Button (Gefällt-Mir-Button) auf Eurer Seite verwendet, so könnt ihr ihn ganz einfach um die "send"-Funktion erweitern.

Dazu müsst ihr in den bestehenden Code des Like-Buttons folgendes Attribut einfügen.

send=true

Anschließend stellt Facebook beide Buttons nebeneinander dar. Es wäre sicherlich schöner gewesen die Buttons irgendwie zu kombinieren - aber vielleicht kommt das ja noch.

Der Code für einen Like-Button inkl. Send-Funktion sieht dann beispielsweise so aus:

Den Like und Send-Button in WordPress verwenden

Wenn Ihr den Button in WordPress verwenden möchtet, so müsst Ihr den Permalink als URL angeben. Der Code inkl. Send-Button sähe dann beispielsweise so aus:

Der Button scheint Probleme mit einem Permalink in einer lokalen Serverumgebung wie MAMP zu verursachen. Bei mir wurde der Button erst online angezeigt.

Sprache festlegen

Wenn Ihr Probleme mit der Sprache des bzw. der Facebook-Plugins haben solltet, so schaut nach ob Ihr die Facebook JavaScript-API richtig eingebunden habt. Für gewöhnlich wird nämlich die englische Variante eingebunden. Um die Buttons auf Deutsch anzuzeigen müsst ihr das nachfolgende Snippet verwenden.

Bekanntes Problem im Internet Explorer 7/8

Im Internet Explorer 7 bzw. 8 wird der Button häufig nicht angezeigt. Sollte das bei euch der Fall sein, so achtet darauf, dass ihr die Facebook-JavaScript-API vor dem Like-Button eingebunden habt. Also nicht im Footer. Mehr dazu findet ihr in diesem Artikel.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Screencast: Futuristische Navigation mit Oberflächenglanz

Jonas Hellwig — Thu, 21 Apr 2011 12:28:11 +0000

Die Photoshop-Profis haben in Folge 48 erneut einen Screencast zum Thema Webdesign von mir veröffentlicht.
In diesem 14-minütigen Video-Tutorial beschreibe ich wie Ihr mit Grundformen und Verläufen eine futuristische anmutende "Web 2.0"-Navigationsleiste entwerfen könnt.
Die Online-Redakteure von Photoshop-Profis beschreiben den Inhalt des Videos wie folgt:

Sie können mit Photoshop auch eigene Navigationselemente für Webseiten entwerfen. Jonas Hellwig erklärt Ihnen in dieser Folge der »Photoshop-Profis«, wie Sie eine Navigationsleiste mit Glanz- und Glüh-Effekten sowie abgerundeten Ecken komplett in Photoshop gestalten. Dabei zeigt er Ihnen gleich zwei verschiedene Wege, um einen Oberflächenglanz in Photoshop zu simulieren.

Die Photoshop-Profis - Folge 48: Navigationsleisten für Web 2.0

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Websites mit CSS3 Media Queries für iPhone, iPad, Android & Co. optimieren

Jonas Hellwig — Mon, 11 Apr 2011 07:14:40 +0000

Das Web ist längst mobil geworden und moderne Websites müssen nicht nur auf dem Monitor, sondern auch auf unzähligen Ausgabemedien eine Top-Figur machen. Zwar rufen die meisten User Websites noch über einen Computer auf, aber die Zugriffe über mobile Endgeräte wie iPad, Smartphones und portable Spielekonsolen steigt stetig an. Wie soll man da eine Website für all diese Geräte optimieren können? Mit CSS3 Media Queries ist das gar nicht so schwierig.
In diesem Beitrag möchte ich Euch die Vor- und Nachteile dieser Technik erklären und an einem praktischen Beispiel zeigen wie schnell Ihr auch Eure Website für Smartphones und Tablet PCs optimieren könnt.

Video: Media Queries und Breakpoints

Neben einer Erklärung in Textform habe ich auch ein Video zu diesem Thema erstellt. In diesem Screencast zeige ich euch wie Ihr mit Hilfe von Media Queries das Layout einer Website in Grenzbereichen umstrukturiert. Dabei setzen wir Media Queries sowohl in der klassischen Variante (max-width) als auch nach dem Mobile-First-Prinzip (min-width) ein und lernen darüber hinaus die technischen Hintergründe der CSS-Technologie kennen. Der Screencast ist eine Lektion aus meinem Video-Training Responsive Webdesign.

Von CSS2 Media Types zu CSS3 Media Queries

Media Queries bieten die Möglichkeit CSS-Inhalte für bestimmte Medien auszugeben. Sie haben also eine ähnliche Funktion wie das media-Attribut (auch als media-type bezeichnet) mit dem Ihr bestimmen könnt für welches Ausgabemedium, z.B. den Monitor oder Drucker, ein Stylesheet verwendet werden soll.

Die bisherige Einbindung eines Stylesheets unter Berücksichtigung des Media-Types sieht so aus:

Ihr könnt auch bestimmte Bereiche innerhalb des CSS-Dokuments entsprechend kennzeichnen. In diesem Beispiel wird nur die Bildschirmansicht berücksichtigt.

@media screen {
  h1 { background:red; }
}

CSS3 Media Queries gehen hier noch einen Schritt weiter. Neben der Art des Ausgabemediums könnt Ihr auch festlegen für welche Auflösung, Bildschirmgröße, Ausrichtung oder Farbdarstellung ein Stylesheet gelten soll. Dabei habt Ihr nach wie vor die Wahl ob Ihr Media Queries bei der Einbindung des CSS-Dokuments verwendet, oder ob Ihr bestimmte Abschnitte innerhalb der CSS-Datei definiert. Auf die Unterschiede beider Varianten gehe ich später noch einmal im Detail ein.

Wenn Ihr die entsprechenden Rahmenbedingungen kennt, so könnt Ihr also beispielsweise ganz gezielt ein Stylesheet für die Darstellung der Website auf dem iPad im Querformat erstellen. Oder Ihr optimiert die Website für alle modernen Smartphones (iOS, Android). Oder für Bildschirme mit stark reduzierter Farbdarstellung, oder oder oder ...

Optimierte Darstellungs-Varianten meines Blogs mit Media-Queries

Welche Werte könnt Ihr mit Media Queries abfragen?

Mit Media Queries lassen sich erstaunlich viele Eigenschaften abfragen. Damit die späteren Beispiele leichter verständlich sind möchte ich hier einmal einige Optionen auflisten. Diese fünf Eigenschaften sind die wichtigsten wenn es um das Ansprechen mobiler Endgeräten geht.

width: Viewport-Breite (z.B.: Der zur Verfügung stehende Platz innerhalb des Browserfensters)
Beispiel: @media handheld and (min-width: 20em) { ... }
height: Viewport-Höhe (z.B.: Der zur Verfügung stehende Platz innerhalb des Browserfensters)
Beispiel: @media screen and (max-height: 700px) { … }
device-width: Breite des Mediums (Smartphone-Bildschirm, Monitorgröße etc. )
Beispiel: @media screen and (device-width: 800px) { … }
device-height: Höhe des Mediums (Smartphone-Bildschirm, Monitorgröße etc.)
Beispiel: @media screen and (device-height: 400px) { … }
orientation: Beschreibt ob ein Gerät im Querformat (landscape) oder im Hochformat gehalten wird (portrait).
Beispiel: media all and (orientation:portrait) { … }

Wenn Ihr es ganz genau wissen wollt, so findet Ihr die oben genannten Beispiele sowie alle zur Verfügung stehenden Eigenschaften und den sehr komplexen Syntax auf der Website des W3C.

W3C - Official Specs

Wie können Media Queries verwendet werden?

Wie ich zu Beginn bereits erklärt habe könnt Ihr Media Queries auf zwei Arten verwenden.
Zunächst könnt Ihr direkt bei der Verknüpfung des CSS-Dokuments im Eurer Website die entsprechenden Angaben machen und somit verschiedene Stylesheets für verschiedene Endgeräte einbinden.

Wenn Ihr also eine CSS-Datei für die Desktop-Version Eurer Website anlegen möchtet und eine für die iPhone-Version, dann kann das Ganze so aussehen.

Zur Info: Smartphones und Tablet-PCs melden sich als screen bei einer Website an. Der Media-Type handheld ist für diese Geräte also nicht geeignet.

Alternativ könnt Ihr auch bestimmte Bereiche innerhalb eines CSS-Dokuments mit Media Queries ansprechen. Im folgenden Beispiel wird der body auf dem iPhone rot eingefärbt.

only screen and (max-device-width: 480px) {
  body {background:red;}
}

Ich persönlich empfehle die zweite Variante da Ihr nur ein CSS-Dokument laden müsst. Somit vermindert Ihr HTTP-Requests und beschleunigt die Ladezeiten Eurer Website.

Die Website für iPhone und iPad optimieren

Nun möchte ich Euch gerne anhand eines Beispiels zeigen wie Ihr mithilfe von Media Queries eine simple Website für die Desktop-Darstellung, für das iPad und für das iPhone optimieren könnt.
In diesem Beispiel erstellen wir eine sehr simple Website mit einem Header, einem Content-Bereich sowie zwei Sidebars. In der Desktop-Version befinden sich beide Sidebars nebeneinander. In der iPad-Version steht in der Breite zu wenig Platz zur Verfügung, daher rutscht die eine Sidebar unter den Content. In der iPhone-Version werden dann alle Inhalte untereinander dargestellt.

Ich erkläre Schritt für Schritt wie ich vorgegangen bin. Das fertige Beispiel findet Ihr hier.

Demo-Seite anzeigen

Anordnung der Inhalte für die Desktop-, iPad- und iPhone-Version

HTML-Grundgerüst

Der HTML-Aufbau des Beispiels ist denkbar einfach. Innerhalb eines umschließenden

habe ich den Header, den Content und die Sidebar eingebunden. Ganz unten seht Ihr noch einen Div mit Inline-CSS. Dieser dient dazu die späteren CSS-floats wieder aufzuheben. Die Lösung mit Inline-CSS dient nur der Übersichtlichkeit des Beispiels und ist kein guter Code!




Websites mit CSS3 Media Queries für iPhone, iPad, Android & Co. optimieren





  header
  content
  sidebar 1
  sidebar 2

CSS-Code der Desktop-Anzeige

Wir beschäftigen uns zunächst mit der Desktop-Anzeige der Website. Den nachfolgenden CSS-Code habe ich im des Dokuments eingebunden. Ich verwende zunächst einen CSS-Reset und weise anschließend den Seitenelementen Ihre Grundeigenschaften zu.

Auffällig ist vielleicht, dass ich dem #container eine feste Breite zugewiesen habe. Innerhalb des Containers habe ich dann alle Elemente mit %-Breiten definiert. Diese Technik hat für mich den Vorteil, dass ich in der Desktop-Version mit festen Werten arbeiten kann. In den späteren mobilen Versionen ändere ich dann die Breite des Containers und passe das Verhältnis der Inhalte aneinander an.

DIe Angabe von Prozentwerten ist wichtig um nicht nur iPhones und iPads anzusprechen sondern auch andere Smartphones und Tablets die mit sehr ähnlichen Abmessungen arbeiten. Die Angabe fixer Pixelwerte kann leicht zu Fehldarstellungen auf diversen Geräten führen und wir können ja nicht alles testen und anpassen.

* {
	margin:0;
	padding:0;
	color:white;
}

#container {
	margin:30px auto;
	width:960px;
}

#header {
	width:100%;
	background:#80c9e3;
	margin-bottom: 2%;
	height:150px;
}

#content {
	float:left;
	width:56%;
	margin-right:2%;
	background:#3f90ae;
	height:800px;
}

#sidebar1 {
	float:left;
	width:20%;
	margin-right:2%;
	background:#2e6a80;
	height:800px;
}

#sidebar2 {
	float:left;
	width:20%;
	background:#153a48;
	height:800px;
}

CSS-Code der iPad-Version

Wenn die Desktop-Version der Website steht können wir mit Media-Queries jetzt die iPad-Version optimieren. Dazu füge ich unterhalb meines bisherigen CSS-Codes den entsprechenden Media Querie ein und überschreibe alle Eigenschaften die ich verändern möchte.
Um das iPad gezielt ansprechen zu können müsst Ihr natürlich wissen welche Abmessungen das Gerät bzw. der Bildschirm hat. Diese Werte könnt Ihr der Liste am Ende dieses Tutorials entnehmen.

Bitte beachtet, dass ich in diesem Beispiel die Eigenschaft width anstelle von device-width verwende. Das hat für mich den Vorteil, dass ich das Verhalten meiner Website testen kann indem ich die Größe des Browserfensters verändere. device-width wirkt sich auf die Größe des Bildschirms aus - das Beispiel wäre dann also nur auf einem iPad sichtbar.

Ich spreche also zunächst alle Viewports bis zu einer Breite von 1024 Pixeln an und vergebe anschließend einige neue Eigenschaften. Der Content wird breiter und Sidebar 2 erhält eine Breite von 100%.

@media only screen and (max-width: 1024px) {

#container { width:100%; }

#content { width:78%; }

#sidebar1 {
	width:20%;
	margin-right:0;
	margin-bottom:2%;
}

#sidebar2 {
	width:100%;
	height:200px;
}

}

CSS-Code der iPhone-Version (inkl. Smartphones mit Android etc.)

Die Smartphones lassen sich nach dem gleichen Prinzip ansprechen. Auch hier müsst Ihr lediglich die Abmessungen kennen und anschließend den CSS-Code anpassen.
DIe iPhone-Version dieses Beispiels sieht wie folgt aus und wird unterhalb des iPad-Codes eingebunden:

@media only screen and (max-width: 480px) {

#content {
	width:100%;
	margin-right:0;
	margin-bottom:2%;
}

#sidebar1 {
	width:100%;
	height:200px;
	margin-right:0;
	margin-bottom:2%;
}

#sidebar2 {
	width:100%;
	height:200px;
	margin-top:2%;
}
}

Zoom deaktivieren, Skalierung festlegen

Smartphones ermöglichen es dem User in der Website zu zoomen. Das macht nur dann Sinn wenn die Dektop-Version auf dem Handy angezeigt wird. Bei einer optimierten Version ist der Zoom eher störend (dieser Punkt wird kontrovers diskutiert). Über einen -Tag kann der Zoom deaktiviert werden.
Darüber hinaus kann (und sollte) die minimale und maximale Skalierung festgelegt werden.

Das war auch schon alles. Ein deaktivierter Zoom behebt übrigens auch den iOS-Skalierungs-Bug. Bei diesem Fehler werden Bilder nicht korrekt umgerechnet, wenn das Gerät gedreht wird.

Demo-Seite anzeigen

Nach exakt diesem Prinzip habe ich auch die Anpassung an die verschiedenen Endgeräte für meine eigene Seite umgesetzt. Ich habe mich auch dafür entschieden den Viewport (width) und nicht die Größe des Endgeräts abzufragen (device-width). Außerdem verwende ich eigene Abmessungen und nutze nicht exakt die iPad und iPhone-Werte. Aber das ist alles Geschmacksache und abhängig vom Projekt.
Da in den Kommentaren zum Relaunch meiner Seite von Lukas die Frage gestellt wurde wie ich die verschiedenen Anpassungen umgesetzt habe, hoffe ich sehr die Frage mit diesem Artikel nun beantwortet zu haben.

Und das sind die wichtigsten Formate

Damit Ihr nicht lange suchen müsst findet Ihr hier die Media Queries der wichtigsten Endgeräte.

Wenn Ihr diese Liste ergänzen könnt (Android, Windows Phone, Nokia, etc.) dann schreibt doch bitte einen Kommentar.

iPhone / iPod Touch: @media only screen and (max-device-width: 480px) {}
iPhone mit Retina Display: @media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { }
iPad: @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : landscape) {}
oder:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) {}

Browser-Unterstützung

Der native Browser-Support für Media Queries beschränkt sich auf die folgenden Browser-Versionen: Chrome, Safari 3+, Firefox 3.5+, Opera 7+, Internet Explorer 9. Das insbesondere ältere Browser die Technik nicht interpretieren können halte ich aber für nicht sonderlich schlimm. Wenn Ihr Media Queries für die Anpassung an mobile Endgeräte einsetzt, könnt Ihr nämlich auf einen sehr umfangreichen Support bei den mobilen Browsern zurückgreifen.
Solltet Ihr dennoch für einen veralteten Desktop-Browser Media Queries einsetzen müssen, so hilft Euch sicher folgendes jQuery-Plugin um die Technik per JavaScript nachzurüsten.

Media Queries für hochauflösende Displays (iPad 3, iPhone 4 & Co.)

Wenn ihr euch noch weiter mit Media Queries beschäftigen wollt, insbesondere was die Optimierung einer Website für das Retina-Display von Apple und andere hochauflösende Displays (die da vielleicht bald kommen) angeht, so schaut euch auch folgenden Artikel an:

Websites und Bilder für High-Resolution-Displays optimieren

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Screencast: Stift-Icon entwerfen mit Photoshop

Jonas Hellwig — Fri, 25 Mar 2011 07:58:23 +0000

Auf dem hauseigenen Video-Blog "Photoshop-Profis" hat der Galileo-Verlag einen Screencast von mir veröffentlicht. In diesem 13 Minuten langen Video schaut Ihr mir bei der Erstellung eines Buntstift-Icons mit Photoshop CS5 über die Schulter. Ich arbeite in diesem Beispiel mit diversen Verlaufsüberlagerungen und einem Smart-Object.
Galileo Press schreibt folgendes über den Inhalt dieses Screencasts:

Anhand eines Buntstift-Icons zeigt Ihnen Jonas Hellwig in dieser Folge der »Photoshop-Profis«, wie Sie mit Photoshop individuelle Icons und Symbole gestalten können. Im ersten Schritt zeichnen Sie mit Hilfslinien und dem Pfad-Werkzeug die Form und füllen sie anschließend mit Farbe. Zum Schluss setzen Sie Glanzlichter und Schatten ein, um die Plastizität des Objekts zu unterstreichen. Für eine möglichst realistische Ausleuchtung sorgen außerdem gezielte Verlaufsüberlagerungen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Photoshop: Wasserspiegelungen mit Verschiebungsmatrix

Jonas Hellwig — Tue, 01 Mar 2011 17:30:25 +0000

Spiegelungen sind ein wichtiges Gestaltungsmittel. Insbesondere im Webdesign wird der sogenannte Wet-Floor-Effekt gerne verwendet um einen hochwertigen und sauberen Eindruck zu erzeugen. Allerdings sollte der Effekt dezent eingesetzt werden denn der Glossy-Trend ist vorbei und stark glänzende Objekte und Flächen wirken schnell billig statt hochwertig. Und nicht nur im Webdesign werden Spiegelungen gerne verwendet. Insbesondere in Illustrationen oder naturalistischeren Abbildungen sind sie unverzichtbar um ein realistisches Gesamtbild zu simulieren.
In diesem Screencast möchte ich Euch zeigen wie einfach es ist mit Hilfe einer Verschiebungsmatrix eine wellige Wasseroberfläche zu simulieren. Die generellen Basics im Bezug auf Spiegelungen habe ich bereits in einem früheren Beitrag erklärt.

Das verwendete Bildmaterial stammt von William Murphy (Flickr-User Informatique):

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Photoshop-Profis-Screencast: Eigene Bedienfelder erstellen

Jonas Hellwig — Wed, 23 Feb 2011 14:16:42 +0000

Auf Photoshop-Profis.de - der Screencast-Website von Galileo Press - wurde heute ein Video von mir veröffentlicht. In ca. zehn Minuten Spielzeit zeige ich Euch wie einfach Ihr eigene Bedienfelder für Photoshop CS5 herstellen könnt. Die Vorgehensweise demonstriere ich an einem Beispiel aus dem Webdesign: Ich fasse alle für mich relevanten Arbeitsschritte beim Button-Design in einem Bedienfeld zusammen und teste es anschließend in Photoshop.
Darüber hinaus gehe ich am Beispiel von Twitter auch auf die Integration von Websites in Photoshop ein.

Photoshop-Profis

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Facebook: Fanpage mit iFrame-Tabs erweitern

Jonas Hellwig — Mon, 21 Feb 2011 13:26:13 +0000

Mit der Einführung der neuen Fanpages hat Facebook auch die schon lange angekündigten iFrame Tabs veröffentlicht. Mit Einführung dieser Tabs werden die bisher gebräuchlichen FBML-Tabs überflüssig und in Kürze nichtmehr unterstützt. Insbesondere wenn Ihr neue Seiten hinzufügen wollt müsst Ihr zukünftig iFrame-Tabs verwenden.
Ich möchte Euch kurz erklären was Ihr benötigt um die iFrame-Tabs nutzen zu können, wie Ihr einen neuen Tab erstellt, und wo die Vor- und Nachteile der neuen Tabs liegen.

Voraussetzungen für iFrame-Tabs

Bisher war es so, dass Ihr für die Benutzung von FBML-Tabs lediglich eine bereits existierende Anwendung zu Eurer Facebook-Seite hinzufügen musstet. Anschließend ermöglichte es Euch diese Anwendung Quellcode in die Facebook-Seite zu schreiben und somit individuelle Inhalte darzustellen.
Bei iFrame-Tabs ist das Ganze etwas anders: Ihr müsst zunächst für jede zusätzliche Unterseite (also jeden Tab) eine neue, eigene Facebook-Anwendung erstellen. Diese Anwendung zieht sich dann Quellcode von externem Webspace und stellt diesen mittels iFrame dar. Im letzten Schritt müsst Ihr die Anwendung Eurer Fan-Page hinzufügen.
Die Vorraussetzungen für die Einrichtung eigener Fanpage-Tabs sind damit etwas höher geworden: Um eine Anwendung erstellen zu können müsst Ihr Euch zunächst als Developer verifizieren. Dafür könnt Ihr Eure Kreditkarte oder Euer Handy benutzen.

Handy: facebook.com/confirmphone.php
Kreditkarte: secure.facebook.com/cards.php

Darüber hinaus benötigt Ihr ab sofort natürlich auch eigenen Webspace auf den Ihr den Code Eurer Fan-Page-Unterseite hochladen könnt.

Wenn all diese Vorraussetzungen erfüllt sind ist das Erstellen eines iFrame-Tabs keine große Sache mehr. Wir wollen uns das mal im Detail Schritt für Schritt anschauen.

Neue Anwendungen erstellen

Öffnet zunächst den Entwickler-Bereich von Facebook (facebook.com/developers) und klickt oben rechts auf "Erstelle eine neue Anwendung".

Im nachfolgenden Screen vergebt Ihr einen beliebigen Namen (kann nachträglich geändert werden), bestätigt die AGB und klickt auf "Anwendung erstellen".

Nach einer eventuellen Sicherheitsabfrage werdet Ihr zu den Anwendungs-Einstellungen weitergeleitet. In den Anwendungs-Optionen habt Ihr nun umfangreiche Möglichkeiten Angaben zu Eurer neuen Anwendung zu machen und Einstellungen festzulegen. Ich beschränke mich jetzt nur auf die Optionen die nötig sind um einen iFrame Tab zu erstellen.

Einstellungen "Website"

In den Website-Einstellungen müsst Ihr die Adresse zu Eurem eigenen Webspace eintragen. Hierbei muss ein Ordner angegeben werden (mit / am Ende!), keine einzelne Datei.

Einstellungen "Facebook-Einbindung"

In den Settings zu den "Facebook-Einbindungen" müsst Ihr ebenfalls einige Angaben machen. Im Abschnitt "Canvas" gebt Ihr sowohl die Canvasseite, als auch die Canvas-URL an.
Bei der Canvasseite könnt Ihr einen beliebigen Namen vergeben. Unter dieser Adresse ist die Facebook-Anwendung dann verfügbar.
Die Canvas-URL muss Euer Webspace sein. Hier tragt Ihr demnach den identischen Pfad ein wie zuvor in den Website-Einstellungen.

Im Abschnitt "Page Tabs" müssen ebenfalls Angaben gemacht werden. Tragt hier zunächst die Bezeichnung des Tabs ein. Dieser Name wird später in der Navigation angezeigt. Achtet darauf, dass als Typ "iFrame" ausgewählt ist und vergebt zuletzt die "URL des Reiters". Hierbei muss jetzt die Datei (üblicherweise index.html oder index.php) angegeben werden die auf Eurem Webspace liegt und den Code des späteren Tabs beinhaltet.

Ihr könnt jetzt alle Optionen speichern und werdet zum Bildschirm "Meine Anwendungen" weitergeleitet.

Externe Daten hochladen und bereitstellen

Ihr habt jetzt eine eigene Anwendung erstellt und Euren externen Webspace hinterlegt. Falls noch nicht geschehen müsst Ihr jetzt natürlich den externen Inhalt bereitstellen. Hierfür habt Ihr alle Möglichkeiten die beim coden einer normalen Website auch zur Verfügung stehen. Also Multimedia, jQuery, PHP, Tracking-Tools etc. Viele der neuen Möglichkeiten waren mit den bisherigen FBML-Tabs nicht realisierbar.
Erstellt eine neue HTML/PHP-Datei, fügt Inhalt ein und ladet diese Datei unter dem zuvor angegebenen Dateinamen in das zuvor angegebene Verzeichnis hoch.
Achtung! Aktuell sind die iFrame-Tabs auf eine Höhe von 800 Pixeln begrenzt.

Anwendung der eigenen Seite hinzufügen

Wenn Ihr Euch im Dialog "Meine Anwendungen" (facebook.com/developers/apps.php) befindet, so klickt nun auf "Anwendungs-Profilseite".

Ihr gelangt auf eine weitere Seite über die Ihr Eure neue Anwendung bewerben könntet. Hier stehen ähnliche Möglichkeiten zur Verfügung wie dies auch bei privaten Profilen und FanPages der Fall ist. Klickt auf "Zur Anwendung" um Euren iFrame-Tab-Inhalt zu testen.
Über den Link "Zu meiner Seite hinzufügen" fügt Ihr diesen Tab nun Eurer Fan-Page zu.

Anschließend erscheint der Tab unter dem zuvor angegebenen Namen in der linken Navigationsleiste. In den Einstellungen zu Eurer Seite könnt Ihr zudem festlegen, dass Besucher als Startseite einen iFrame-Tab sehen. Auch das Icon des neuen Tabs lässt sich über die Anwendungs-Einstellungen individualisieren.

Das war's auch schon. Diese Prozedur müsst Ihr nun ab sofort für jede zusätzliche Unterseite der Fan-Page durchführen. Ihr habt Ergänzungen oder Anmerkungen zu diesem Artikel? Dann schreibt einfach einen Kommentar.
Was haltet Ihr von den neuen iFrame Tabs? Überwiegen die Vorteile und die Freiheiten beim Coding oder findet Ihr die neuen Tabs zu kompliziert, lästig oder gar überflüssig?

Update: Sichere Verbindungen sind nun Pflicht

Facebook erlaubt seit Oktober 2011 nur noch sichere Tabs. Was das zu bedeuten hat und wie ihr einen Tab mit einem Sicherheitszertifikat ausstattet erfahrt ihr hier: So geht’s: Sicheres durchstöbern (https) für Facebook-Fanpages gewährleisten

Update 2: Facebook veröffentlicht Anleitung für Fanpage-Tabs

Facebook hat nun eine eigene Anleitung zum Hinzufügen von Fanpage-Tabs veröffentlicht.

developers.facebook.com/docs/appsonfacebook/pagetabs/

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Photoshop: Strahlen-Effekt mit Polarkoordinaten

Jonas Hellwig — Mon, 27 Dec 2010 11:52:47 +0000

Einen Strahlen-Effekt kann man wirklich häufig gebrauchen. Insbesondere im Webdesign wird die Technik häufig eingesetzt um Gestaltungselemente im Header zu betonen. Wie Ihr den Effekt in Sekunden umsetzt zeigt dieses Photoshop-Mini-Tutorial.

Ausgangsmaterial

Legt eine neue Datei mit quadratischen Abmessungen an und erstellt auf einer neuen Ebene ein vertikales Linienmuster. In diesem Beispiel ist die Arbeitsfläche 500x500 Pixel groß. Die Linien sind 20 Pixel breit, die Abstände zwischen den Linien ebenfalls.

Wenn Ihr ganz schnell ein Linienmuster mit Hilfe von Photoshop erstellen wollt, so lest auch Photoshop-Tipp: Objekte mit gleichen Abständen positionieren

Polarkoordinaten-Filter anwenden

Nun öffnet Ihr über "Filter > Verzerrungsfilter > Polarkoordinaten" den Polarkoordinaten-Filter und wählt im nun erschienenen Dialog "Rechteckig -> Polar" aus. Anschließend bestätigt Ihr den Dialog. Das wars auch schon.

Wie Ihr seht wird der Strahlen-Effekt zum Zentrum hin ein wenig pixelig. Es empfiehlt sich also das Objekt immer größer anzulegen als eigentlich benötigt. Durch die Skalierung in Photoshop wird diese Verpixelung korrigiert.

Anwendungsbeispiel

Nehmt die gleiche Datei und zeiht auf der Hintergrundebene einen radialen Farbverlauf von #844a0e zu #2c0000 auf. Anschließend fügt Ihr über "Filter > Rauschfilter > Störung hinzufügen" eine ganz leichte Körnung hinzu. Ich habe hier eine Stärke von 1% mit gaußscher Verteilung und monochromatischer Farbgebung eingestellt.
Zur Verdeutlichung habe ich in der folgenden Grafik die "Strahlen-Ebene" ausgeblendet.

Nun wählt Ihr wieder die Strahlen-Ebene aus, reduziert die Deckkraft auf 15% und zeichnet die Ebene anschießend über "Filter > Weichzeichnungsfilter > Gaußscher Weichzeichner" nach Belieben weich.

Im letzten Schritt fehlt natürlich noch das Objekt was optisch betont werden soll. Ich habe hier mein Logo verwendet und über die Ebeneneffekte einen Schein nach außen und nach Innen hinzugefügt. Anschießend habe ich die Strahlen-Ebene kopiert und ein wenig gedreht.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Facebook-Power Teil 3: Open Graph Protocol nutzen

Jonas Hellwig — Thu, 25 Nov 2010 10:49:39 +0000

Der berühmte „gefällt mir/like“-Button ist weit mehr als lediglich eine simple Verlinkung zu Facebook. Vielmehr ist er ein wesentlicher Bestandteil von Facebooks Schnittstelle um mithilfe des Open Graph Protocols Websiteinhalte in den Social Graph zu integrieren. Aber mal der Reihe nach.

Der Social Graph dient dazu die verschiedenen und sehr komplexen Beziehungen zwischen Objekten (z.B. Facebook-Usern) auszudrücken. Er ist allerdings nicht auf Facebook allein beschränkt sondern besteht global und schließt beispielsweise auch den E-Mail-Verkehr oder Aktivitäten auf anderen Netzwerken und Blogs ein.

Quelle: designforfun.com

Das Open Graph Protocol ermöglicht es Euch nun mithilfe des Like-Buttons externe Web-Inhalte in den Social Graph auf Facebook zu integrieren. In erster Linie ist das Protokoll dafür gedacht reale Dinge wie ein Restaurant oder einen Kinofilm auf Facebook zu repräsentieren aber Ihr könnt es auch einsetzen um Euren Blog zu vermarkten. Ich möchte Euch erklären wie das funktioniert und welche Vor- und Nachteile abgewogen werden müssen.

Das Wichtigste zuerst

Bitte lest diesen Artikel erst komplett durch bevor Ihr anfangt die Funktionen in Eure Website zu integrieren. Somit sollten sich einige Fragen bereits erübrigen und Probleme vermeiden lassen.

Sollte sich auf der Seite die Ihr um Graph-Funktionen erweitern wollt bereits ein Like-Button befinden, so könnt Ihr die URL nur dann nachträglich an den Graph andocken wenn Ihr bisher keinen "Like" erhalten habt. Das hängt damit zusammen, dass Graph-Objekte sich tief in die Benutzerprofile von Facebook-Usern schreiben und es wohl technisch kaum möglich ist nachträglich hier noch Änderungen vorzunehmen. Was genau alles passiert wenn ein Objekt Bestandteil des Graphs ist erläutere ich später im Detail.

Open Graph verwenden

Um Website-Inhalte wie beispielsweise einen Blog-Post in den Social Graph zu intergrieren müssen die Inhalte zunächst in ein sogenanntes Graph-Element umgewandelt werden. Das geschieht mit Hilfe von -Befehlen im der entsprechenden Seite. Neben einem Titel, einer Beschreibung und der Quelle kann auch eine Kategorie und ein Bild bereit gestellt werden. Kickt anschießend ein Besucher auf den "gefällt mir"-Button werden diese Meta-Informationen an Facebook übertragen und lösen dort eine Reihe von Aktionen aus. Dazu später mehr.

Das folgende Beispiel zeigt die Einbindung der -Tags anhand dieses Artikels. Achtet darauf, dass auch der -Tag erweitert werden muss.



 ... 








...

...

Wenn Ihr WordPress im Einsatz habt, so sollten die Werte natürlich dynamisch geladen werden. In diesem Fall könnte der -Bereich so aussehen.

Das soeben gezeigte Beispiel nutzt die Standard-Werte für Graph-Objekte die ich nun kurz erklären möchte:

og:title: Titel des gesamten Objekts
og:site_name: Titel der aktuellen Seite. Zum Beispiel der aktuelle Artikel.
og:description: Beschreibungstext
og:type: Kategorie. Welche Kategorien zur Verfügung stehen steht Ihr hier: http://developers.facebook.com/docs/opengraph#types
og:url: Permalink/Permanente URL
og:image: Grafik die innerhalb des Objekts dargestellt werden soll. Die Grafik sollte mindestens 50x50 Pixel groß sein und ein möglichst quadratisches Format haben. Maximal ist ein 3:1 Verhältnis umsetzbar – das sieht allerdings nicht schön aus.
fb:admins: User-ID des Administrators. Wenn die Seite von mehreren Leuten administriert wird können durch Komma getrennt auch mehrere IDs angegeben werden
fb:app_id: Facebook-Application ID al Alternative zum Admin

Es lassen sich allerdings auch noch weitere Attribute nutzen die Ihr ebenfalls der folgenden Liste entnehmen könnt, die im Beispiel jedoch keine Anwendung finden. Eine detaillierte Anleitung findet Ihr auf http://opengraphprotocol.org. Bedenkt auch, dass Graph-Objekte in Kombination mit Mikroformaten verwendet werden können.

og:latitude: Breitengrad: zum Beispiel „37.416343“
og:longitude: Längengrad: zum Beispiel: „122.153013“
og:street-address: Straße
og:locality: Stadt
og:region: Bundesland/-Staat
og:postal-code: Postleitzahl
og:country-name: Land/Staat
og:email: E-Mail-Adresse
og:phone_number: Telefonnummer (inkl. intern. Vorwahl)
og:fax_number: Faxnummer (inkl. intern. Vorwahl)

Um zu testen ob Ihr die Werte korrekt eingetragen habt und welche Werte wie übertragen werden empfiehlt es sich folgendes Facebook-Tool zu nutzen: http://developers.facebook.com/tools/lint

Like-Button einbinden

Nachdem Ihr nun die -Daten in Eure Seite integriert habt fehlt lediglich der „gefällt mir“-Button. Hierzu könnt Ihr das Tool auf http://developers.facebook.com/docs/reference/plugins/like nutzen oder folgenden Code einbinden.

Lösung mit iframe:

Lösung mit FBML

Wenn Ihr WordPress nutzt, so lest hier nach wie Ihr die URL korrekt übergeben könnt: Facebook „gefällt mir“-Button in WordPress einbinden

Fluch und Segen von Graph-Objekten

Das war im Grund schon alles um den Like-Button funktionell zu erweitern und die Website an den Social Graph anzuschießen. Wenn jetzt ein Besucher auf den "gefällt mir" Button klickt werden eine Reihe von Funktionen ausgelöst die ich nun im Detail beschreiben möchte. Beachtet bitte, dass je nach Projekt entschieden werden muss ob es Sinn macht eine Website an den Graph anzuschießen, bzw. welche Meta-Daten übertragen werden sollen.

Automatisch erzeugte Facebook (Fan-)Pages

Sobald der Like-Button betätigt wird generiert Facebook aus den Meta-Daten und der URL eine Micro-Fanpage! Facebook nennt diesen Seitentyp schicht "Seite". Da Ihr selbst in der Regel Administrator Eurer Seite seid (Zur Erinnerung: Ihr übergebt die Admin-ID in den Meta-Daten) werdet Ihr zunächst davon ausgehen, dass diese Seite eine "normale" Fan-Page ist und für jeden User sichtbar. Das ist nicht der Fall - nur Ihr könnt sie sehen.

Um auf die Seite nun zugreifen zu können gibt es zwei mir bekannte Möglichkeiten. Zum Einen wird der Like-Button in der entsprechenden Quelle um einen "Administrator-Link" erweitert der Euch zur Seite führt. Dieser ist natürlich auch nur für Euch sichtbar.
Alternativ wird für jede Seite der Seitenliste innerhalb Eures Profils hinzugefügt. Ihr erreicht sie also in der Hauptnavigation über "Konto > Seiten verwalten".

Was ist jetzt das Besondere an dieser Seite? Ganz einfach: Links könnt Ihr sehen welchen Benutzern dieser Beitrag gefällt. Das könnt Ihr sonst so ohne weiteres nicht herausfinden wenn Ihr nicht selbst mit dem Benutzer befreundet seid.
Darüber hinaus hat die Micropage eine eigene Pinnwand. Wenn Ihr nun hier eine Statusmeldung verfasst postet Ihr diese Nachricht auf die Pinnwand aller User die auf "gefällt mir" geklickt haben. Je nach Art des Inhalts kann diese Methode enorm effektiv sein um eine bestimmte Zielgruppe zu erreichen.

Automatisch erzeugte Interessen in User-Profilen

Wenn ein Besucher auf den „Like-Button“ klickt, so werden die Meta-Informationen mit übertragen. Im Info-Tab des entsprechenden Benutzers werden die Interessen und „gefällt mir“ kategorisiert. Hier greift der og:type und ordnet das Objekt entsprechend ein. Das passiert bei einem Objekt was nicht an den Graph angeschlossen ist nicht. Auch das Benutzerbild wird übertragen und ein Link zur Website!

Seiten und externe Links in der Facebook-Suche

Jede neue Micro-Facebook-Page wird in die Facebook-Suche aufgenommen. Besonders interessant an dieser Sache ist, dass die Links von Facebook weg auf Eure Seite führen. Wenn Ihr die Funktion also in Euren Blog einbaut so könnt Ihr über längere Zeit eine enorme Menge an Content und externen Verlinkungen von Facebook aus generieren. Wie das genau mit PageRank etc. aussieht kann ich im Moment jedoch noch nicht sagen.

Teilen, Empfehlen und Co.

Die Meta-Daten werden auch dann verwendet wenn ein Benutzer innerhalb von Facebook eine Statusmitteilung mit seinen Freunden teilt. Das Benutzerbild wird beispielsweise angezeigt was die Mitteilung zumindest optisch hervorhebt.

Fazit, Hinweise, Bedenken

Ich gebe zu die Funktion ist ebenso mächtig wie unübersichtlich. Auch kann ich aktuell schlecht einschätzen wie groß eine eventuelle Gefahr ist.
Sofern man wie ich eine "echte" Fan-Page betreibt muss man zumindest damit rechnen, dass die automatisch generierten Seiten eine Konkurrenz zur Fan-Page darstellen. Ich für meinen Fall habe mich dazu entschlossen alle meine Blog-Posts vorerst an den Graph anzudocken. Ich schaue dann mal wie sich das alles entwickelt und gehe das Risiko ein, dass es schief geht.

Für elementar halte ich auch ein eventuelles Datenschutz-Problem. Ich weiß nicht in wie fern ich den Besucher darüber informieren muss, sollte etc, dass die Informationen in sein Profil geschrieben werden. Und hier ist eben nicht von der Pinnwand die Rede sondern von den Interessen die - je nach Privatsphäre-Einstellungen - öffentlich sichtbar sind. Was allerdings wiederum gut für mich ist da öffentliche Inhalte auch von Google indexiert werden können. Wenn hier jemand einen Link oder Anregungen hat dann immer her damit.

Zuletzt möchte ich darauf hinweisen, dass die Funktion natürlich auch missbraucht werden kann. Ich wäre durchaus in der Lage Werbung (inkl. Bild!) in die Meta-Daten einzupflegen um alle bereits besprochenen Vorteile zum Spamming zu nutzen. Vor allem da der Besucher nicht direkt sieht welche Daten übertragen werden wenn er den Button klickt.

Update: Das Open-Graph-Protocol erzeugt invaliden HTML-Code. Wie ihr das Problem in den Griff bekommt habe ich in einem weiteren Artikel beschrieben.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.