Contentpflege - Revision history

Jörn Beyer: Hinzugefügt: Bildaufbereitung für Newsletter

2017-10-10T15:25:25Z

Hinzugefügt: Bildaufbereitung für Newsletter

← Older revision		Revision as of 15:25, 10 October 2017
Line 64:		Line 64:

	[[File:Screen Shot 2017-09-18 at 14.42.24.png\|400px]]		[[File:Screen Shot 2017-09-18 at 14.42.24.png\|400px]]



			==Bildaufbereitung für Newsletter==
			Bei der Erstellung von E-Mail-Newsletter ist die Wahl des richtigen Bildformats wichtig. Nicht alle E-Mail-Clients können jedes, in HTML eingebettete, Bild darstellen. Zudem sollten die Dateigrößen optimiert sein. Daher gilt grundsätzlich folgende Regel: in Newslettern sollten immer in JPEG konvertierte und komprimierte Bilder verwendet werden. PNGs stellen die absolute Ausnahme dar und werden nur dann eingesetzt, wenn das Feature von transparenten Hintergründen unverzichtbar ist.



	==Beispiele==		==Beispiele==

Sebastian: /* Contentpflege HowTo */

2017-09-18T14:04:47Z

Contentpflege HowTo

← Older revision		Revision as of 14:04, 18 September 2017
Line 4:		Line 4:
	# Eine saubere [[Contentpflege#URL\|URL]] generieren.		# Eine saubere [[Contentpflege#URL\|URL]] generieren.
	# Bilder a.) im richtigen [[Contentpflege#Format\|Format]], b.) mit einer möglichst [[Contentpflege#Beispiele\|geringen Dateigröße]], c.) einem sauberen [[Contentpflege#Dateiname\|Dateinamen]] und einem sauberen [[Contentpflege#.3Calt.3E_Attribut\|ALT]] Tag einzupflegen.		# Bilder a.) im richtigen [[Contentpflege#Format\|Format]], b.) mit einer möglichst [[Contentpflege#Beispiele\|geringen Dateigröße]], c.) einem sauberen [[Contentpflege#Dateiname\|Dateinamen]] und einem sauberen [[Contentpflege#.3Calt.3E_Attribut\|ALT]] Tag einzupflegen.
	# An eine grundsätzliche Optimierung für [[Contentpflege#SEO\|Suchmaschinen]] und [[Contentpflege#Social\|Social]] zu denken		# An eine grundsätzliche Optimierung für [[Contentpflege#SEO\|Suchmaschinen]] und [[Contentpflege#Social\|Social]] zu denken.

	===URL===		===URL===

Sebastian at 14:03, 18 September 2017

2017-09-18T14:03:37Z

← Older revision		Revision as of 14:03, 18 September 2017
Line 1:		Line 1:
	==Contentpflege HowTo==		==Contentpflege HowTo==
	~~Lorem Ipsum~~		Content-Pflege erfordert ein wenig Sorgfalt, die sich empfiehlt '''direkt bei der Eingabe''' zu beachten. Die wichtigen Punkte sind:

			# Eine saubere [[Contentpflege#URL\|URL]] generieren.
			# Bilder a.) im richtigen [[Contentpflege#Format\|Format]], b.) mit einer möglichst [[Contentpflege#Beispiele\|geringen Dateigröße]], c.) einem sauberen [[Contentpflege#Dateiname\|Dateinamen]] und einem sauberen [[Contentpflege#.3Calt.3E_Attribut\|ALT]] Tag einzupflegen.
			# An eine grundsätzliche Optimierung für [[Contentpflege#SEO\|Suchmaschinen]] und [[Contentpflege#Social\|Social]] zu denken

	===URL===		===URL===

Sebastian at 13:57, 18 September 2017

2017-09-18T13:57:16Z

← Older revision		Revision as of 13:57, 18 September 2017
Line 41:		Line 41:

	===SEO===		===SEO===
	Man muss kein SEO Experte sein, um eine Seite zumindest grundlegend für eine Suchmaschine vorzubereiten.		Man muss kein SEO Experte sein, um eine Seite zumindest grundlegend für eine Suchmaschine vorzubereiten. Ein sehr gutes Plugin für Wordpress ist "[https://yoast.com Yoast SEO]".

			Im ersten Tab bekommt ihr ein gutes Feedback zur "Readability" Analyse der Inhalte. Die Verbesserungsvorschläge sind eindeutig geschrieben und einfach nachvollziehbar. Elementares Element der (SEO) Optimierung sind Überschriften. Diese sollten von <nowiki><h1></nowiki> bis <nowiki><hx></nowiki> den Artikel nach inhaltlichen Gesichtspunkten klar Strukturieren.

	~~[[File:~~Screen ~~Shot 2017-09-18 at 14~~.37.~~49.png\|400px]]~~		Weiter gibt Euch dieser Screen einen Anhaltspunkte, welche Keywords in diesen Seiteninhalten stark sind. Sollten diese zu weit entfernt von dm sein, was die Seite leisten soll, empfiehlt sich eine Überarbeitung.

	[[File:Screen Shot 2017-09-18 at 14.37.37.png\|400px]]		[[File:Screen Shot 2017-09-18 at 14.37.37.png\|400px]]

			Sollte ein konkretes Keyword Konzept für die Seite vorliegen, könnt Ihr diese über "+ Add Keyword" als Tab hinterlegen und den Seiteninhalt auf dieses spezifische Schlüsselwort analysieren.

			[[File:Screen Shot 2017-09-18 at 14.37.49.png\|400px]]

	===Social===		===Social===

			Im Social Tab seht ihr, wie die Seite beim Teilen im Facebook oder Twitter Stream dargestellt wird. In der Regel reicht hier ein zentral in der Yoast hinterlegtes Facebook Posterframe. Bei speziellen Inhalten, Aktionsinhalten oder anderen promotionalen Anwendungen sollte immer ein aktivierendes eigenes Bild hinterlegt werden.

	[[File:Screen Shot 2017-09-18 at 14.42.18.png\|400px]]		[[File:Screen Shot 2017-09-18 at 14.42.18.png\|400px]]

Sebastian: /* SEO */

2017-09-18T13:32:01Z

SEO

← Older revision		Revision as of 13:32, 18 September 2017
Line 44:		Line 44:


	[[File:Screen Shot 2017-09-18 at 14.37.49.png\|400px]][[File:Screen Shot 2017-09-18 at 14.42.18.png\|400px]][[File:Screen Shot 2017-09-18 at 14.42.24.png\|400px]][[File:Screen Shot 2017-09-18 at 14.42.45.png\|400px]][[File:Screen Shot 2017-09-18 at 14.37.37.png\|400px]]		[[File:Screen Shot 2017-09-18 at 14.37.49.png\|400px]]

			[[File:Screen Shot 2017-09-18 at 14.37.37.png\|400px]]




			===Social===


			[[File:Screen Shot 2017-09-18 at 14.42.18.png\|400px]]

			[[File:Screen Shot 2017-09-18 at 14.42.24.png\|400px]]

	==Beispiele==		==Beispiele==

Sebastian at 12:51, 18 September 2017

2017-09-18T12:51:58Z

@@ Line 1: / Line 1: @@
 ==Contentpflege HowTo==
 ===Bilder===
 ====Format====
 Das Format ist entscheidend für die Dateigröße und damit für die (schnelle) Ladegeschwindigkeit der Website. Als Faustregel gilt: Generell '''immer''' jpeg Dateien nutzen, es sei denn das Bild benötigt transparente Bereiche.
 =====jpeg=====
 jpeg's am besten über den "Für Web sichern" Dialog in Adobe Photoshop speichern. Die Voreinstellungen nutzen. die bps, die Farbprofil Informationen aus der Datei entfernen, und eine möglichst hohe Kompression (gleich niedrige Qualitätszahl) wählen. Nach dem Speichern die Dateigröße des Bild mit einem Bild-Optimierer, bsp. https://tinypng.com weiter verkleinern.
@@ Line 27: / Line 39: @@
 ====<alt> Attribut====
 Das alt="Name" Attribut ist SEO relevant und gehört mit zu einer sauber gepflegten Website. In den meisten CMS Systemen wird dieses Attribut als Name des Bild angelegt. Der Name sollte Die Marke, Das Produkt und den Inhalt des Bildes kurz und knapp beschrieben. Bsp. "John Frieda® - Sheer Blonde Range".
 ==Beispiele==

Sebastian at 12:31, 18 September 2017

2017-09-18T12:31:15Z

New page

==Contentpflege HowTo==
===Bilder===
====Format====
Das Format ist entscheidend für die Dateigröße und damit für die (schnelle) Ladegeschwindigkeit der Website. Als Faustregel gilt: Generell '''immer''' jpeg Dateien nutzen, es sei denn das Bild benötigt transparente Bereiche.
=====jpeg=====
jpeg's am besten über den "Für Web sichern" Dialog in Adobe Photoshop speichern. Die Voreinstellungen nutzen. die bps, die Farbprofil Informationen aus der Datei entfernen, und eine möglichst hohe Kompression (gleich niedrige Qualitätszahl) wählen. Nach dem Speichern die Dateigröße des Bild mit einem Bild-Optimierer, bsp. https://tinypng.com weiter verkleinern.

Folgende Einsparungen lassen sich an einem kleinen Bild (1280x852 Pixel, 72dpi) realisieren mit "Für Web sichern" erreichen (Die Beispiele sind am Ende der Seite):

Originaldatei (tiff): 3.302.600 Byte (3,3 MB) 
 
''PNG: 1.811.856 Byte (1,8 MB)'' 
''JPEG 60: 227.110 Byte (229 KB) (-87%)'' 
''JPEG 30: 114.092 Byte (115 KB) (-93%)'' 
''JPEG 10: 68.826 Byte (70 KB) (-96 %)'' 

Nach der darauf folgenden Optimierung mit https://tinypng.com: 

''PNG: 549.493 Byte (553 KB) (-70% im Vergleich zum Ursprungs png)'' 
''JPEG 60: 185.844 Byte (188 KB) (-18% im Vergleich zum Ursprungs jpeg)'' 

[[File:bildgroesse-Optimierung.jpg|800px]]

====Dateiname====
Der Dateiname folgt einem Schema, also einer Nomenklatur. Bewährt hat sich ''{yymmdd}-{möglichst-aussagekräftiger-name}.{dateityp}'' also bsp. ''160813-guhl-seidenglanz-maui-promotion-header.jpeg''.

====<alt> Attribut====
Das alt="Name" Attribut ist SEO relevant und gehört mit zu einer sauber gepflegten Website. In den meisten CMS Systemen wird dieses Attribut als Name des Bild angelegt. Der Name sollte Die Marke, Das Produkt und den Inhalt des Bildes kurz und knapp beschrieben. Bsp. "John Frieda® - Sheer Blonde Range".

==Beispiele==
===PNG: 1.811.856 Byte (1,8 MB)===

[[File:1st_Floor_-_Graphic_Dep_2_ANALOGUE.png]]

===JPEG 60: 227.110 Byte (229 KB) (-87%)===
[[File:1st_Floor_-_Graphic_Dep_2_ANALOGUE_high_60.jpg]]

===JPEG 30: 114.092 Byte (115 KB) (-93%)===
[[File:1st_Floor_-_Graphic_Dep_2_ANALOGUE_med_30.jpg]]

===JPEG 10: 68.826 Byte (70 KB) (-96 %)===
[[File:1st_Floor_-_Graphic_Dep_2_ANALOGUE_low_10.jpg]]

===PNG Optimiert: 549.493 Byte (553 KB) (-70% im Vergleich zum Ursprungs png)===
[[File:1st_Floor_-_Graphic_Dep_2_ANALOGUE_tinified.png]]

===JPEG 60 Optimiert: 185.844 Byte (188 KB) (-18% im Vergleich zum Ursprungs jpeg)===
[[File:1st_Floor_-_Graphic_Dep_2_ANALOGUE_high_60_tinified.jpg]]