Netway Media Blog - Webdesign und mehr » Webdesign http://www.netway-media.com/blog Tipps und Tricks zum Thema Webdesign Mon, 16 Aug 2010 14:33:07 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 OnPage SEO – Das perfekte SEO Layout http://www.netway-media.com/blog/2010/04/24/onpage-seo-das-perfekte-seo-layout/ http://www.netway-media.com/blog/2010/04/24/onpage-seo-das-perfekte-seo-layout/#comments Sat, 24 Apr 2010 11:13:10 +0000 Birger http://www.netway-media.com/blog/?p=244 Auch wenn  Content und Verlinkung einer Seite vermutlich schon immer die wichtigsten Ranking Faktoren darstellen, so herrscht bei den meisten SEOs Einigkeit darüber, dass eine vernünftige OnPage Optimierung das Fundament für vernünftiges SEO ist. Angestachelt durch eine Diskussion, wie eine perfekt optimierte Seite aussehen sollte, habe ich ein Grundlayout erstellt, welches imo alle wichtigen Faktoren beinhaltet.

Der Code

In vielen Blogs wurde das Thema OnPage SEO schon ausgiebig behandelt, deshalb werde ich nicht allzu genau auf die einzelnen Elemente des Layouts eingehen, sondern zuerst direkt den entstandenen Quellcode präsentieren:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Keyword1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et Keyword2 dolore magna aliquyam erat, sed" />
<meta name="keywords" content="Keyword1, Keyword2" />
<meta name="robots" content="index,follow,noodp,noydir" />
<meta name="Language" content="DE" />
<link rel="stylesheet" href="css/keyword1.css" type="text/css" media="screen" />
<title>Keyworddomain.de - Keyword1 ein paar Wörter Keyword2</title>
</head>
<body>
	<div id="main">
		<div id="header">
			<h1><a href="#" title="Keyworddomain">Keyworddomain.de</a></h1>
			<h2><i>Pagetitle</i></h2>
		</div>
		<div id="menu">
          <ul><li><a href="page1.htm" title="page1">PAGE1</a></li><li><a href="page2.htm" title="page2">PAGE2</a></li><li><a href="page3.htm" title="Page3">PAGE3</a></li></ul>
</div>
        <div id="content">
        	<h3>Keyword1</h3>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero Keyword1 eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et Keyword1 accusam et justo duo dolores et ea rebum. Stet Keyword1 clita kasd gubergren, no sea takimata sanctus est Lorem Keyword2 ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea Keyword2 rebum. Stet clita kasd gubergren, <strong>Keyword2</strong> no sea takimata sanctus est Lorem ipsum dolor sit amet Keyword1.</p>
      <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros Keyword1 et accumsan et iusto Keyword2 odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Keyword2.</p>
 
			<img class="img_right" src="img/keyword1.jpg" alt="keyword1" width="500" height="150" />   
			<h3>Keyword2</h3>
			<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut Keyword1 aliquip ex ea commodo consequat Keyword2. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat Keyword1, vel illum dolore Keyword2 eu feugiat nulla facilisis at vero Keyword1 eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi Keyword2.Nam liber tempor cum soluta nobis eleifend option congue <strong>Keyword1</strong> nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit Keyword1, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Keyword2. Ut wisi enim ad minim veniam, quis nostrud exerci Keyword2 tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
            <img src="img/keyword2.jpg" alt="keyword2" width="500" height="150" />
			<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu Keyword1 feugiat nulla facilisis. Keyword1 At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet Keyword2. Lorem ipsum dolor sit amet, Keyword1 consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata Keyword2 sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat keyword1, et nonumy sed tempor et et Keyword2 invidunt justo labore Stet clita ea et gubergren, kasd magna Keyword1 no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur.</p>
		</div>
		<div id="footer">
        	<h4>Sitemap</h4>
            	<ul>
            		<li><a href="#" title="Page1">Page1</a></li><li><a href="#" title="page2">Page2</a></li><li><a href="#" title="Page3">Page3</a></li>
            	</ul>
		</div>
	</div>
</body>
</html>

Wie man sieht, ist das Layout auf Keyword1 und Keyword2 optimiert. Meiner Erfahrung nach lassen sich mit der Optimierung auf 2 Keywords die besten Ergebnisse erzielen. Weiterhin wurde die Seite sehr simpel aufgebaut und die XHTML Spezifikationen wurden eingehalten, was die Suchmaschinen Bots freuen sollte und durch die h1-h4 Tags wird zusätzlich ein Fokus auf die Keywords gelegt. Viele SEOs sind weiterhin der Ansicht, dass sich eine angemessene Anzahl an Bildern positiv auf das Ranking auswirken können.

Das ganze Layout lässt sich mit CSS sehr leicht gestalten und auf jegliche Bedürfnisse anpassen.

Hier kann man das ganze in Action sehen mit einem sehr simplen Design, welches allein mit CSS erstellt wurde.

Insgesamt basiert das Ganze natürlich nur auf Spekulationen, Erfahrung und Meinungen verschiedener SEOs. Nach meiner Erfahrung erkennt Google mittlerweile ziemlich gut, wenn eine Seite sinnlos für ein Keyword optimiert wurde. Dennoch werde ich die Tage einen Versuch starten und in unserem Blog dokumentieren. Dabei werde ich zunächst eine Nische suchen, passende Keyworddomain reggen und dieses Layout aufsetzen. Mal schauen, wie sich das Ganze ohne OffPage Optimierung in den Rankings so macht.

Über Anmerkungen, Tipps, etc. in den Kommentaren würde ich mich sehr freuen.

Achso, das Layout steht zur freien Verfügung und vielleicht hat ja jemand Lust einen ähnlichen Test zu starten oder ein alternatives CSS Layout zu erstellen.

Update
Danke für die Kommentare! Ich habe die Sachen jetzt umgesetzt und hoffe nun dem “perfekten” Layout etwas näher zu kommen ;) .

Arndt von seocomplete.de hat sich sogar die Mühe gemacht ein eigenes Stylesheet zu erstellen, welches nun hier zu bewundern ist. Danke dafür!

Ich freue mich natürlich über jegliche weitere Anmerkungen.

No related posts.

]]> http://www.netway-media.com/blog/2010/04/24/onpage-seo-das-perfekte-seo-layout/feed/ 18 Mobile Apps und Mobile Webdesign mit JQtouch Tutorial http://www.netway-media.com/blog/2010/02/27/mobile-apps-und-mobile-webdesign-mit-jqtouch-tutorial/ http://www.netway-media.com/blog/2010/02/27/mobile-apps-und-mobile-webdesign-mit-jqtouch-tutorial/#comments Sat, 27 Feb 2010 14:15:48 +0000 Birger http://www.netway-media.com/blog/?p=206 Seit dem iPhone und Co. in aller Munde sind, wird es immer wichtiger seinen Besuchern auch mobilen Content zur Verfügung zu stellen. Jede größere Website bietet mittlerweile eine für mobile Geräte optimierte Website und oft auch zusätzlich ein passendes App an. Spätestens jetzt sollte es auch für kleinere Webmaster und Unternehmen an der Zeit sein auf den Zug aufzuspringen und mit kreativen Ideen für Besucher und Kunden zu punkten.

Fängt man nun an, sich über mobile Webdesign und Apps zu informieren, so werden einem schnell einige Hürden klar: Auch wenn das iPhone auf den ersten Blick zu dominieren scheint, so sind dennoch die Nutzer anderer Geräte in der Mehrzahl. Das bedeutet, man muss seine Website für jedes Gerät optimieren (iPhone, Android, Symbian, Windows Mobile…) und im besten Fall für jedes OS (Betriebssystem) ein eigenes App entwickeln. Gerade für das iPhone wird einem hier schnell die nächste Hürde klar: Es müssen verschiedene Programmiersprachen gelernt werden und im Falle des iPhones muss auch noch ein Mac her.

jQTouch

jQTouch ist ein Plugin für JQuery, mit dem sich kinderleicht Mobile Websites und Webapplikationen entwickeln lassen. Hier seien einmal einige Vor- und Nachteile dieser Methode aufgezeigt: Vorteile:

  • Eine Lösung für alle Endgeräte
  • Sehr einfache und unkomplizierte Entwicklung
  • Leicht anpassbar
  • Von anfang an stylisches Webdesign

Nachteile:

  • Apps lassen sich nicht in die verschiedenen Marketplaces einbinden
  • Es lassen sich nur begrenzt die vielen Funktionen der Geräte Nutzen

Ein Beispiel

So, nun will ich einmal demonstrieren, wie leicht sich eine schicke Mobile Website mit ansprechendem Webdesign mit jQTouch realisieren lässt. Als erstes muss hierzu ein Grundgerüst aus einfachem HTML her. Dieses Gerüst besteht im Wesentlichen aus einfachen Listen und Divs mit dem Content. Also fügen wir als erstes folgenden Code in BODY-Tag unserer Seite:

<div id="seite1">
<div class="toolbar">
<h1>Seite1</h1>
<a class="button flip" href="#login">Login</a></div>
<ul class="edgetoedge">
	<li><a href="#seite2">Seite2</a></li>
	<li><a href="#seite3">Seite3</a></li>
</ul>
</div>
<div id="login">
<div class="toolbar">
<h1>Login</h1>
</div>
<ul class="edgetoedge">
	<li><a href="#seite2">Seite2</a></li>
	<li><a href="#seite1">Seite1</a></li>
	<li><a href="#seite3">Seite3</a></li>
</ul>
</div>
<div id="seite2">
<div class="toolbar">
<h1>Seite2</h1>
</div>
<ul class="edgetoedge">
	<li><a href="#seite3">Seite3</a></li>
	<li><a href="#seite1">Seite1</a></li>
</ul>
</div>
<div id="seite3">
<div class="toolbar">
<h1>Seite3</h1>
</div>
<ul class="edgetoedge">
	<li><a href="#seite2">Seite2</a></li>
	<li><a href="#seite1">Seite1</a></li>
</ul>
</div>

Hier kann man sich das Ganze anschauen.

Nun ein paar Worte zu den gewählten IDs und Klassen.

Eine einzelne Seite wird immer mit einem DIV-Tag umschlossen, welches als ID den namen der Seite besitzen muss. Hierdurch wird klargemacht, dass dieser Inhalt bei einem Link auf die ID angezeigt werden soll. Darauf folgt ein DIV mit der Klasse “toolbar”. Dieses beinhaltet zum einen die Überschrift der Seite (umschlossen von H1-Tags) und kann auch noch einen weiteren Link beinhalten, welcher dann mit im oberen Bereich der Seite angezeigt wird. Was dies genau bedeutet wird erst im nächsten Schritt deutlich.

Als nächstes folgt eine einfache Liste (UL-Tag) mit der Klasse) “edgetoedge”. Im Prinzip stellt diese Liste die Hauptnavigation dar. Die Links der Listenelemente zeigen hierbei jeweils auf den entsprechenden DIV des Inhalts, der bei Click angezeigt werden soll. Diese Gesamtkonstruktion muss für jede Seite angelegt werden.

Nun sieht unsere Seite aber noch nicht sehr nach mobile webdesign oder einem App aus. Daher muss dem ganzen jetzt mit jQTouch Leben eingehaucht werden. Dann sollte auch die vorher erwähnte Funktionsweise klarer werden. Also fügen wir in den Header-Bereich unserer Seite folgenden Code hinzu:

<script type="text/javascript" src="jqtouch/jquery.1.3.2.min.js"></script>
<script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="jqtouch/jqtouch.css"/>
<link rel="stylesheet" type="text/css" href="themes/jqt/theme.css"/>
<script language="javascript"> 
    $.jQTouch({
        statusBar: 'black'
 
    });
</script>

Das Ergebnis ist hier zu sehen

Tadaa, fertig ist die erste optimierte mobile Webseite. Im letzten Teil wurden die für jQTouch benötigten CSS und Javascript Dateien eingebunden. Da wäre zum einen jQuery, welches die Rahmenbibliothek für jQTouch darstellt. Dann natürlich jQTouch selbst und das dazugehörige Stylesheet. Ich habe hier der Einfachheit halber ein Standard Template eingebunden. Prinzipiell ist dieses sehr einfach anpassbar und muss somit nicht zwingend mit eingebunden werden. Für den erfahrenen Webdesigner sollte es kein Problem darstellen, ein eigenes Template zu schreiben.

In dem JavaScript Code findet die Initialisierung einer Grundvariablen statt. Hier lässt sich zum beispiel auch ein Icon festlegen:

<script language="javascript"> 
    $.jQTouch({
	icon: 'icon.png',
        statusBar: 'black'
 
    });
</script>

Hier findet sich eine Übersicht aller Initialisierungoptionen. Die hier im Beispiel verwendeten Klassen “edgetoedge”, “button” und “flip” dienen im Prinzip zur festlegung des Styles der verschiedenen Links. jQTouch beinhaltet verschiedene Styles, was bei einem Klick auf den Link geschehen soll, also auf welche Weise der Inhalt wechseln soll. Am Besten lassen sich diese durch einfaches Probieren verstehen.

Dies war nur ein sehr einfaches Beispiel um eine kleine Einführung in jQTouch zu bieten. Es bietet natürlich noch zahlreiche weitere Funktionen, welche jedoch den Rahmen dieses Beitrages sprengen würden. jQTouch gibt es hier zum Download mit allen benötigten Dateien und einigen weiteren Demos, mit denen man sich die verschiedenen Funktionen anschauen und verstehen kann. Gerade für die Entwicklung von Apps bietet  jQTouch noch deutlich mehr. Viel Spaß beim Probieren und Entwickeln!

No related posts.

]]> http://www.netway-media.com/blog/2010/02/27/mobile-apps-und-mobile-webdesign-mit-jqtouch-tutorial/feed/ 3 Kostenlose Website Templates http://www.netway-media.com/blog/2009/12/08/kostenlose-website-templates/ http://www.netway-media.com/blog/2009/12/08/kostenlose-website-templates/#comments Tue, 08 Dec 2009 20:47:27 +0000 Birger http://www.netway-media.com/blog/?p=169
  • Kostenloses CSS Design
  • 10 kostenlose Twitter Backgrounds
  • Templates verbreiten / veröffentlichen
    • ]]>     Heute mal ein ganz ganz kurzer Beitrag. Wir haben einen neuen Bereich auf unserer Website für Homepagevorlagen erstellt. Hier habt ihr ab sofort Zugriff auf einige von uns erstellte Designs. Die Tempaltes stehen euch zur freien Verfügung und wir werden den Bereich in unregelmäßigen Abständen updaten. Also guckt am Besten regelmäßig vorbei:

    Homepagevorlagen

    Viel Spaß damit!

    Related posts:

    1. Kostenloses CSS Design
    2. 10 kostenlose Twitter Backgrounds
    3. Templates verbreiten / veröffentlichen

    ]]>     http://www.netway-media.com/blog/2009/12/08/kostenlose-website-templates/feed/ 1     Photoshop Tutorial: Coole Hintergründe erstellen http://www.netway-media.com/blog/2009/11/03/photoshop-tutorial-coole-hintergrunde-erstellen/ http://www.netway-media.com/blog/2009/11/03/photoshop-tutorial-coole-hintergrunde-erstellen/#comments Tue, 03 Nov 2009 10:17:41 +0000 Birger http://www.netway-media.com/blog/?p=142
  • Bilder Vektorisieren leicht gemacht
  • JPG Bilder komprimieren / verkleinern leicht gemacht
  • 10 kostenlose Twitter Backgrounds
    • ]]>     Heute möchte ich euch zeigen , wie man mit Photoshop innerhalb weniger Minuten unterschiedliche Hintergründe erstellen kann. Die so erstellten Backgrounds kann man z.B. für Header Grafiken, als Desktop Backgrounds oder als Hintergrund für den eigenen Blog verwenden. Denn gerade in Zeiten der schnellen Breitband Verbindungen, spielt die Dateigröße von Hintergründen immer weniger eine Rolle. So werden z.B. bei Twitter oftmals sehr große Hintergrundgrafiken genutzt.

    Nun will ich euch als erstes das Produkt dieses Tutorials präsentieren:

    Der fertige Hintergrund

    Der fertige Hintergrund

    Das schöne an der Methode ist, dass sie sich sehr leicht anpassen und verändern lässt, wodurch sich je nach bedarf ganz unterschiedliche Backgrounds erstellen lassen.

    Was man braucht:

    Als Grundlage für den Background wird zunächst eine hochauflösende Textur benötigt. Viele Blogs veröffentlichen regelmäßig wirklich schöne Texturen zur freien Verwendung. Ein bisschen googlen hilft hier ;) .  Ich habe mich hier jedoch nicht bei einem Blog, sondern bei http://freetextures.org bedient. Genau gesagt benötigt ihr für dieses Tutorial diese Textur.

    Als erstes erstellen wir in Photoshop ein neues Dokument mit den Maßen 800px x 600px. Im Prinzip könnt ihr die Auflösung je nach Bedarf auch deutlich größer wählen, dies hängt letztendlich von der Auflösung der verwendeten Textur ab. Aber in diesem Tutorial beschränken wir uns auf 800×600.

    Wir beginnen in unserem neuen Dokument mit einem reflektierenden Verlauf
    (hier: Vordergrundfarbe: #c8866d, Hintergrundfarbe: #93527f). Den Verlauf ziehen wir von der unteren linken in die obere rechte Ecke:

    Verlauf

    Verlauf

    Wie schon erwähnt lassen sich die Farben natürlich nach belieben ändern, aber ich mag Lila (wie man an unserer Seite sieht ;) ).

    Nun öffnen wir die Textur und stellen diese über “Bild->Modus” auf “Graustufen” um. Außerdem verkleinern wir das Bild über “Bild->Bildgröße” auf 800px x 600px. Die entfärbte und verkleinerte Textur ziehen wir nun über unseren Verlauf und stellen die Deckkraft auf 17%:

    Textur über unseren Verlauf

    Textur über unseren Verlauf

    Das sieht doch für’s Erste schon einmal ganz nett aus, allerdings ist es noch weit entfernt von dem gewünschten Ergebnis. Die Ebene mit der Textur (”Ebene 1 im Bild”) duplizieren wir nun und drehen sie um 180°:

    Ebene drehen

    Ebene drehen

    Nun öffnen wir ein weiters mal die Textur und stellen sie wieder auf Graustufen um, die Größe lassen wir jedoch unberührt (auf 1200px x 900px). Jetzt ziehen wir die Textur in voller Größe in unseren Hintergrund und drehen sie um 90°. Theoretisch hätte man die Ebene mit der Textur auch ein weiteres mal duplizieren können und dann um 90° drehen. Da das Bild jedoch höher als es breit ist, ließe sich so nicht die volle Fläche füllen.

    90° Drehung

    90° Drehung

    Die Deckkraft der gerade gedrehten Ebene stellen wir wiederum auf ca. 15%. Man könnte die Textur noch weitere Male einfügen, drehen und die Deckkraft runterstellen, für diesen Hintergrund soll es jedoch reichen. Insgesamt sollte das ganze bis jetzt so aussehen:

    Aktueller Stand der Dinge ;)

    Aktueller Stand der Dinge ;)

    Nun fehlt noch ein letzter Schritt, welcher sehr viel ausmacht. Und zwar werden wir die Kanten des Bildes mit Hilfe eines großen Pinsels leicht und sanft verdunkeln. Hierzu erstellen wir als nächstes über “Ebene->neu” eine neue Ebene, welche vorerst ganz vorne sein sollte. Jetzt wählen wir das Pinselwerkzeug und hier einen sanften Pinsel mit etwa 200px Durchmesser:

    Pinsel wählen

    Pinsel wählen

    Mit diesem Pinsel malen wir nun am Rand des Bildes entlang, sodass das Ganze dann etwa so aussehen sollte (Nicht vergessen, die Vordergrundfarbe auf schwarz zu stellen…):

    Mit dem Pinsel

    Mit dem Pinsel

    Ich empfehle hierbei nicht allzu penibel zu sein, sondern lieber frei darauf loszuzeichnen: Einmal rum und fertig. Die Ebene, welche wir gerade so schön mit dem Pinsel bemalt haben, stellen wir jetzt noch auf eine Deckkraft von ca. 30 % und voila: Fertig ist unser hübscher Background:

    Der fertige Background

    Der fertige Background

    So das war es auch schon. Geht ziemlich schnell, oder?

    Das ganze soll jedoch nur ein sehr einfaches Beispiel darstellen, welches wirklich schnell zu erstellen ist. Es soll die lediglich Grundprinzipien dieser Methode zeigen. Durch Kombination verschiedener Texturen und Verläufe und Änderungen in der Ebenenreihenfolge und Deckkraft, stehen einem wirklich unmengen an Möglichkeiten zur Verfügung, sich einen individuellen Background zu erstellen.

    Related posts:

    1. Bilder Vektorisieren leicht gemacht
    2. JPG Bilder komprimieren / verkleinern leicht gemacht
    3. 10 kostenlose Twitter Backgrounds

    ]]>     http://www.netway-media.com/blog/2009/11/03/photoshop-tutorial-coole-hintergrunde-erstellen/feed/ 0     JPG Bilder komprimieren / verkleinern leicht gemacht http://www.netway-media.com/blog/2009/10/20/jpg-bilder-komprimieren-verkleinern-leicht-gemacht/ http://www.netway-media.com/blog/2009/10/20/jpg-bilder-komprimieren-verkleinern-leicht-gemacht/#comments Tue, 20 Oct 2009 12:56:53 +0000 Birger http://www.netway-media.com/blog/?p=110
  • Bilder Vektorisieren leicht gemacht
  • Photoshop Tutorial: Coole Hintergründe erstellen
  • 10 kostenlose Twitter Backgrounds
    • ]]>     Heute widme ich mich dem Thema wie man auf einfache Art und Weise Bilder für’s Web komprimieren kann. Die meisten Bildbearbeitungsprogramme bieten lediglich die Möglichkeit über die Qualität Bilder zu verkleinern. Allerdings leidet die Qualität der Bilder hierbei teilweise enorm. Generell macht es häufig Sinn, Grafiken für das Web als PNG Grafiken zu speichern. Dies liefert jedoch nur bei Grafiken mit wenigen Farben gute Ergebnisse. Wenn es sich bei den zu komprimierenden Bildern jedoch um Fotos handelt, wird die Sache schon komplizierter.

    Ich nutze schon seit Längerem zu diesem Zweck als Alternative zu Photoshop das kostenlose Tool XAT Image Optimizer. Mit Hilfe der “Magic Compression” lässt sich die Dateigröße von JPG Dateien hiermit deutlich verkleinern (ohne große Qualitätsverluste).

    Der XAT Image Optimizer kann in der Standardversion hier kostenlos runtergeladen werden:

    http://www.xat.com/io/index.html

    Hat man das Programm installiert ist die Bedienung denkbar einfach. Als erstes muss das zu verkleinernde Bild über “File->Open..” (STRG+O) öffnen:

    Datei öffnen

    Datei öffnen

    Danach öffnet man das “Compress Image” Werkzeug:

    Komprimieren Werkzeug

    Komprimieren Werkzeug

    Mit dem Werkzeug hat man nun die Möglichkeit die Magic Compression und die JPG Quality einzustellen. Die Magic Compression kann man ruhig auf 100% stellen. Es ist sehr hilfreich, dass man sobald das Compress Werkzeug geöffnet ist, sowohl das Originalbild als auch das komprimierte Bild angezeigt bekommt. So kann man mögliche Qualitätsverluste sofort erkennen. Außerdem wird die Dateigröße sowohl absolut als auch prozentual zum Originalbild angezeigt.

    Beispiel

    Beispiel

    Im Beispiel sieht man, dass das Bild auf 54% der Originalgröße geschrumpft werden kann. Die Qualität ist hierbei fast gleichbelibend.

    Mit dem Compression Werkzeug kann man außerdem andere Dateiformate auswählen und sieht sofort wie stark das Bild komprimiert werden kann und ob die Qualität darunter leidet.

    Möchte man das komprimierte Bild abspeichern, muss man nur noch auf “File->Save Optimized As…” (STRG+S) gehen und die komprimierte Datein am gewünschten Ort abspeichern.

    Abspeichern

    Abspeichern

    Müssen mehrere Dateien auf einmal komprimiert werden bietet der Image Optimizer weiterhin einen Batch Wizard an (”File->Batch Wizard…”).  Ich persönlich nutze die Funktion jedoch lieber für einzelne Dateien, da ich so immer direkt die Qualität sehe. Die restlichen Werkzeuge des Tools sind in meinen Augen nicht wirklich zu gebrauchen und die üblichen Bildbearbeitungsprogramme (Photoshop, IrfanView) liefern hier bessere Ergebnisse.

    Related posts:

    1. Bilder Vektorisieren leicht gemacht
    2. Photoshop Tutorial: Coole Hintergründe erstellen
    3. 10 kostenlose Twitter Backgrounds

    ]]>     http://www.netway-media.com/blog/2009/10/20/jpg-bilder-komprimieren-verkleinern-leicht-gemacht/feed/ 1     RSS Button hinzugefügt http://www.netway-media.com/blog/2009/10/18/rss-button-hinzugefugt/ http://www.netway-media.com/blog/2009/10/18/rss-button-hinzugefugt/#comments Sun, 18 Oct 2009 18:55:20 +0000 Birger http://www.netway-media.com/blog/?p=112
  • 10 kostenlose Twitter Backgrounds
    • ]]>     Gestern bin ich endlich einmal dazu gekommen, einen großen RSS Button zu meiner Sidebar hinzuzufügen. Da ich ein wenig zu faul war, habe ich mich bei Snap2Objects RSS Icons bedient, welche in meinen Augen sehr gelungen sind und außerdem als Vektorgrafik bereitgestellt werden. Danke für die Icons!

    Außerdem habe ich mich entschieden, Feedburner zu nutzen, was ich nur jedem empfehlen kann. Feedburner ist sehr einfach einzurichten und ermöglicht dem potentiellen Feed Abonnenten ein einfaches hinzufügen des Feeds zu allerlei verschiedenen Readern. Für mich hat das ganze außerdem den Vorteil, dass Feedburner mir ausführliche Statistiken über die Feed Abonnenten liefert.

    So und nun bitte rechts klicken und den Feed abonnieren!

    Related posts:

    1. 10 kostenlose Twitter Backgrounds

    ]]>     http://www.netway-media.com/blog/2009/10/18/rss-button-hinzugefugt/feed/ 0     10 kostenlose Twitter Backgrounds http://www.netway-media.com/blog/2009/10/14/10-kostenlose-twitter-backgrounds/ http://www.netway-media.com/blog/2009/10/14/10-kostenlose-twitter-backgrounds/#comments Wed, 14 Oct 2009 13:11:00 +0000 Birger http://www.netway-media.com/blog/?p=102
  • Photoshop Tutorial: Coole Hintergründe erstellen
  • Bilder Vektorisieren leicht gemacht
  • Wir sind auf Twitter
    • ]]>     Da ich immer wieder von Problemen höre, wo man Backgrounds für Twitter herbekommt, welche auch bei einer hohen Auflösung noch vernünftig aussehen, stelle ich euch heute 10 kostenlose Backgrounds zur Verfügung. Die Bilder haben eine Größe von 2048px x 900px und reichen somit bei nahezu jeder Auflösung volkommen aus. Für weitere Backgrounds kann ich euch außerdem diesen Artikel empfehlen.

    Hier nun eine kleine Vorschau, was euch bei meinen Backgrounds erwartet:

    Vorschaubild der Twitter Backgrounds

    Vorschaubild der Twitter Backgrounds

    Hier könnt ihr euch alle 10 Backgrounds als ZIP-Datei runterladen:

    > Jetzt Downloaden <

    Ihr könnt mit den Backgrounds anstellen, was ihr wollt (Ja, sogar verkaufen ;) ). Wenn ihr Farbwünsche oder Ähnliches habt, schreibt einfach ein Kommentar. Jetzt viel Spaß mit den Backgrounds.

    Related posts:

    1. Photoshop Tutorial: Coole Hintergründe erstellen
    2. Bilder Vektorisieren leicht gemacht
    3. Wir sind auf Twitter

    ]]>     http://www.netway-media.com/blog/2009/10/14/10-kostenlose-twitter-backgrounds/feed/ 1     CSS Zen Garden – Was CSS alles kann… http://www.netway-media.com/blog/2009/10/05/css-zen-garden-was-css-alles-kann/ http://www.netway-media.com/blog/2009/10/05/css-zen-garden-was-css-alles-kann/#comments Mon, 05 Oct 2009 20:59:01 +0000 Birger http://www.netway-media.com/blog/?p=99
  • Automatisch in CSS Verzeichnisse
    • ]]>     Heute mal ein ganz kurzer Beitrag. 2001 wurde von Dave Shea das Projekt CSS Zen Garden ins Leben gerufen. Ziel der Seite ist es, zu demonstrieren, was mit CSS alles möglich ist. Jeder kann eine eigene CSS Datei bereitstellen, der HTML Teil der Seite bleibt immer gleich. Die Seite leistet mir schon lange gute Dienste um sich inspirieren zu lassen:

    http://www.csszengarden.com

    Leider wurde die Seite schon seit Längerem nicht mehr upgedatet, aber ein Blick lohnt sich allemal. Ich habe mich auch mal daran versucht, hier das Ergebnis:

    Rainbow

    So, jetzt viel Spass im CSS Garten ;) .

    Related posts:

    1. Automatisch in CSS Verzeichnisse

    ]]>     http://www.netway-media.com/blog/2009/10/05/css-zen-garden-was-css-alles-kann/feed/ 0     Automatisch in CSS Verzeichnisse http://www.netway-media.com/blog/2009/09/30/automatisch-in-css-verzeichnisse/ http://www.netway-media.com/blog/2009/09/30/automatisch-in-css-verzeichnisse/#comments Tue, 29 Sep 2009 22:07:52 +0000 Birger http://www.netway-media.com/blog/?p=94
  • OnlyWire: Blogposts automatisch in SB-Dienste eintragen
    • ]]>     Mittlerweile gibt es ja massig CSS Directories, die zum Einen sehr praktisch sind um sich inspirieren zu lassen und zum Anderen natürlich auch um seine eigenen Sites bewerten zu lassen. Ich habe die Erfahrung gemacht, dass viele dieser Verzeichnisse auch tatsächlich Traffic generieren (auf jeden Fall mehr als die meisten üblichen Verzeichnis). Eine nette Liste ausgewählter, guter CSS Directories findet sich z.B. bei stonesouptech oder Tweeaks.

    Erst vor Kurzem bin ich auf einen neuen kostenlosen Dienst gestoßen, der einem das Eintragen erleichtert:

    http://csssubmiter.com/

    Sobald man das Formular ausgefüllt hat, öffnen sich die Verzeichnisse in einem Frame mit automatisch ausgefüllten Daten. Man muss also nur noch bestätigen und ab und zu einen Captcha eingeben. Die Liste an Directories ist lang und die meisten wichtigen sind dabei. Insgesamt sehr praktisch und zeitsparend!

    Related posts:

    1. OnlyWire: Blogposts automatisch in SB-Dienste eintragen

    ]]>     http://www.netway-media.com/blog/2009/09/30/automatisch-in-css-verzeichnisse/feed/ 1     Templates verbreiten / veröffentlichen http://www.netway-media.com/blog/2009/09/25/templates-verbreiten-veroffentlichen/ http://www.netway-media.com/blog/2009/09/25/templates-verbreiten-veroffentlichen/#comments Fri, 25 Sep 2009 09:23:18 +0000 Birger http://www.netway-media.com/blog/?p=83
  • Viele kostenlose Backlinks durch Profile
  • Kostenlose Website Templates
  • Automatisch in CSS Verzeichnisse
    • ]]>     Eine gute Methode um Backlinks zu generieren besteht ja bekanntlich darin, Templates zu erstellen. Ich finde, dass dies eine sehr faire Methode ist, da man den Leuten seine Arbeit kostenlos zur Verfügung stellt. Ich selber nutze diese Methode, wie ihr in meinem letzten Post sehen könnt. Nur mit einer Veröffentlichung in seinem Blog nutzt man noch lange nicht das volle Potential der Templates aus.

    Es gibt viele Portale, welche es ermöglichen seine Templates hochzuladen und so zu verbreiten.  Drweb.de hat hier eine sehr vollständige Liste an Seiten, welche kostenlose Templates anbieten veröffentlicht. Ich bin diese durchgegange, um zu sehen, welche dieser Seiten auch einen Upload erlauben. Nun habe ich folgende Liste an Seiten, auf denen ich meine Templates veröffentliche:

    1. http://www.csstemplates.net/
    2. http://www.oswd.org/
    3. http://www.free-css.com/
    4. http://themebot.com/
    5. http://www.opendesigns.org/
    6. http://www.fresheezy.com/
    7. http://templates4net.com/
    8. http://css4free.com/
    9. http://freecss.info/
    10. http://www.webmaster-elite.de

    Es sei noch gesagt, dass es hierbei um HTML / CSS Tamplates geht und nicht um Wordpress Templates.

    So falls ich eine Seite vergessen habe, einfach als Kommentar posten, dann füge ich sie hinzu.

    Related posts:

    1. Viele kostenlose Backlinks durch Profile
    2. Kostenlose Website Templates
    3. Automatisch in CSS Verzeichnisse

    ]]>     http://www.netway-media.com/blog/2009/09/25/templates-verbreiten-veroffentlichen/feed/ 4