Header-Collage

jQuery simple FadeSlideShow – Content / Image Slider einbauen und verwenden

Facebook Like-Button und OpenGraph in Webseiten einbinden

WordPress 3.1 MultiSite / Blognetzwerk Installation

Mehr Kundenbindung und Kundenloyalität durch Social Media Marketing

HTML5 und CSS3 Handbuch von Selfhtml-Gründer Stefan Münz und Clemens Gull kostenlosS

Nur für euch: 10% Rabatt auf die PSD-Tutorials.de Webdesign-Workshop DVD Vol. 2

verfasst von Pascal Bajorat, veröffentlicht am 12.08.2011 und noch nicht kommentiert

(Rabatt-Code am Ende des Artikels) Die meisten von euch wissen mit Sicherheit, dass ich die letzten Monate hart an der neuen Webdesign DVD Vol. 2 von PSD-Tutorials.de gearbeitet habe, natürlich nicht alleine, sondern mit einigen weiteren ausgezeichneten Autoren. Auf der DVD sind über 19+ Stunden Video-Trainings, diverse Text-Tutorials und Bonusmaterial – Wer sich die kostenlose HTML5 und CSS3 Folge hier angesehen hat, weiß welche Power in der DVD steckt.

Jetzt gibt es extra für alle Leser und Zuschauer des Webdesign-Podcast.de 10% Rabatt, aber nicht nur auf die Webdesign DVD Vol. 2, sondern auf den gesamten Einkauf im Shop (ausgenommen sind Sparpakete und Events).

Wer bis jetzt noch nicht zugeschlagen hat, der sollte dies schnellstens nachholen, denn es gibt aktuell kein aktuelleres und zukunftsweisenderes Lern-Medium zum Thema Webdesign. Vom Anfänger – zum Profi, mit nur einer DVD. Komplette Webseiten werden von grund auf erstellt, dabei wird kein Schritt ausgelassen. Doch auch für Profis sind genügend anspruchsvolle Trainings enthalten.

Kategorien des Artikels: Angebote / Gewinnspieleweiter

20 innovative und moderne Webdesigns / Layouts

verfasst von Pascal Bajorat, veröffentlicht am 15.04.2011 und noch nicht kommentiert

In diesem Artikel möchte ich euch gerne 20 innovative und moderne Webseiten vorstellen, die meiner Meinung nach eine gute Inspiration für den Webdesign Alltag sein können:

Kategorien des Artikels: Inspiration / Showcaseweiter

Anzeige - Hier werben…

Home-Screen Bookmark Icon für iPhone

verfasst von Pascal Bajorat, veröffentlicht am 07.12.2010 und noch nicht kommentiert

Das iPhone hat seinen Siegeszug im Smartphone Bereich schon vor mehr als 1 Jahr begonnen und ringt aktuell Herstellern wie RIM (Research In Motion – Black Berry) die Marktanteile. Dies ist allerdings gar nicht mal der wichtigste Punkt auf den ich hinaus will, sondern das iPhone Nutzer prozentual viel häufiger und länger im Netz surfen als andere Smartphone-Besitzer. Somit macht es natürlich Sinn seine Webseite mit ein paar kleinen Kniffen an die Gegebenheiten des iPhone anzupassen.

Oftmals reichen hier schon Kleinigkeiten um Webseiten für das iPhone einwenig schöner zu machen. Zum Beispiel ein Bookmark Icon für den Home-Screen vom iPhone. Dieser ist vergleichbar mit einem Favicon bei den Desktop-Browsern.

Mit folgendem Code könnt ihr ein eigenes Icon einbinden. Das Icon muss ein PNG sein und 57×57 Pixel groß.

<link rel="apple-touch-icon" href="/Pfad/iphone-icon.png" />

Wer eine extra mobile CSS einbinden möchte um zum Beispiel kleine Schönheitsfehler zu eliminieren, die auf dem iPhone dargestellt werden, kann dies mithilfe des folgenden Codes tun:

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/iphone.css" type="text/css" />

Durch media=”only screen and (max-device-width: 480px)” wird diese CSS ausschließlich in Browsern geladen die “Screen-Geräte” sind und eine maximale Weite von 480 Pixeln haben.

Eine gute Webseite zum testen eurer eigenen Webseite auf kompatibilität zum iPhone ist dieser online iPhone Simulator unter: www.iphonetester.com. Dieser rendert allerdings nicht als iPhone sondern mit dem Browser, mit dem ihr die Seite aufruft. Nehmt also am besten eine aktuelle Safari Version.

Umfassende Informationen zur WebEntwicklung auf den mobilen Apple Geräten findet ihr in Apples Dev Center: http://developer.apple.com/devcenter/safari/index.action

Viel Spaß mit den kleinen Tipps.

Kategorien des Artikels: Blog, HTML / CSSweiter

Ladezeiten-Optimierung von Webseiten

verfasst von Pascal Bajorat, veröffentlicht am 10.11.2010 und 6 mal kommentiert

In dieser Podcast-Folge möchte ich euch einige Techniken zur Optimierung der Ladezeit von Webseiten zeigen. Die Techniken sind einfach einzusetzen und effizient, des Weiteren erzähle ich euch ein paar Worte über das neue Apache Modul von Google: mod_pagespeed.

Nach unten springen, um das Video zu sehen.

Googles mod_pagespeed umfasst mehrere Anpassungen der Apache Konfiguration, die das Laden von Webseiten beschleunigen sollen. Dadurch werden Optimierungen umgesetzt, die Google seit geraumer Zeit im Rahmen seiner Pagespeed-Initiative propagiert. Das Apache Modul steht unter einer Open Source Lizenz und ist somit für jeden frei nutzbar. Jeder der über einen eigenen Root-Server verfügt, kann das Modul z.B. als rpm ganz einfach installieren. Wer seine Webseite auf einem Shared-Webspace hostet, hat es hier nicht ganz so einfach, denn in diesem Fall seid ihr auf euren Hoster angewiesen und das er dieses Modul installiert. mod_pagespeed Video auf YouTube

Kommen wir nun zu den Optimierungs-Möglichkeiten die ihr relativ einfach für eure eigene Webseite umsetzen könnt:

HTTP-Requests reduzieren

Ein HTTP-Request ist eine einfache Anfrage an den Webserver z.B. eine GET oder POST Methode. Anders gesagt, wenn ihr z.B. eine CSS oder JavaScript Datei via <link /> oder <script> Tag einbindet wird damit ein HTTP-Request ausgelöst. Das selbe gilt auch für das einbinden von Bildern via <img /> Tag oder wenn Bilder in der CSS-Datei mit Hilfe von background-image eingebunden werden, hierbei wird ebenfalls jedesmal ein HTTP-Request ausgeführt.

Je mehr HTTP-Requests eine Webseite ausführt um komplett geladen zu werden, umso langsamer wird sie, daher macht es Sinn diese HTTP-Requests auf ein Minimum zu reduzieren. Welche Möglichkeiten es da gibt, zeige ich euch in den folgenden Beispielen:

Zusammenlegen von CSS und JavaScript Dateien:
Eine Möglichkeit um HTTP-Requests zu reduzieren ist z.B. wenn ihr mehrere CSS und / oder JavaScript Dateien habt die in einzelne Dateien aufgeteilt sind, aber trotzdem auf allen Seiten geladen werden, diese einfach zusammenzulegen.

Als konkretes Beispiel stellen wir uns vor, dass wir in unserer Webseite die normale CSS und JavaScript Datei und zusätzlich noch zwei JavaScript Dateien und eine CSS Datei von der Lightbox integriert haben. So könnten wir nun die zwei CSS Dateien zu einer Datei bündeln und auch die insgesamt drei JavaScript Dateien in einer einzigen Datei zusammenführen. Auf diese einfache Art und Weise hätten wir bei diesem Beispiel drei HTTP-Requests gespart.

CSS Media Types in einer Datei bündeln:
Wenn ihr auf eurer Webseite mehrere CSS-Dateien mit unterschiedlichen Media Types verwendet besteht die Möglichkeit diese in einer Datei zu bündeln (wie oben bereits erwähnt). Hier gilt allerdings Obacht, denn eine Handheld CSS wird normalerweise nur geladen, wenn die Webseite auch mit einem mobilen Endgerät aufgerufen wird. Werden diese Dateien nun gebündelt und die Handheld CSS enthält z.B. über 50-100 Zeilen Code extra für Mobilgeräte, so wird dieser Code jedes mal mitgeladen auch wenn die Seite gar nicht von einem mobilen Endgerät geöffnet wurde. Würde unsere Handheld CSS nun aber z.B. nur aus 5-10 Zeilen bestehen, so wäre es kein Probleme diese in die normale Screen CSS mit aufzunehmen.

Hier ein Beispiel wie eine CSS-Datei mit mehreren Media Types auszusehen hat:

/* Der allgemeine CSS Code */
body{font-weight:bold;}
 
@media print {
  /* StyleSheet für den Druck der Webseite */
}
 
@media handheld {
  /* StyleSheet für Mobilgeräte */
}

Grafiken zusammenfügen zu einer großen Grafik:
Bei einem sehr grafiklastigen Layout habt ihr in der Regel viele Bilder die in der CSS Datei via background eingebunden werden. Das verursacht nicht nur eine enorme Menge an HTTP-Requests, sonden bedeutet auch eine Erhöhung der Gesamtgröße aller Bilder zusammen, z.B. wenn in jeder Grafik das ICC-Profil mit eingebunden wird.

Abhilfe schafft hier folgende Methode: Ihr verfrachtet soweit wie möglich alle PNG Bilder in ein großes PNG, alle JPG Bilder in eine einzige große JPG Datei usw. Hierbei sollte natürlich beachtet werden, dass sinvoll aufgeteilt wird: Nur weil z.B. eine PNG 24-Datei vorhanden ist die Transparenzen benötigt, sollten nicht auch die restlichen JPG Bilder in eine große PNG Datei gebündelt werden, denn ein PNG ist von der Dateigröße später viel größer als ein JPG es mit allen Grafiken wäre. In so einem Fall bleibt die PNG dann einfach als Einzelgrafik weiter bestehen bzw. wird mit anderen PNG-24 Grafiken gebündelt, sowie alle JPG Bilder in einer JPG Datei zusammengefasst werden.

Wenn ihr dann später eine Grafik aus diesem großen Paket als Hintergrund für einen Div-Container verwenden wollt, so könnt ihr via CSS background-position die Hintergrundgrafik soweit verschieben, dass auch nur der gewünschte Bereich zu sehen ist.

Durch diese Methode spart ihr euch eine Menge HTTP-Requests und reduziert die Dateigröße der Grafiken, da nicht in jeder Grafik aufs neue (z.B.) das ICC-Profil eingebunden wird.

Beispiel für CSS Background-Position:

/* 200px 250px ( X / Y ) */
background:url(images/layout.jpg) no-repeat 200px 250px;

Grafiken richtig komprimieren und speichern

Ihr solltet Grafiken im richtigen Format und mit entsprechend passender Kompression speichern. So sollte ein kleines Icon mit z.B. 64 Farben nicht als JPG gespeichert werden, sondern als GIF (bis zu 256 Farben möglich) Datei.

Des Weiteren bietet euch das JPG Format die Möglichkeit Bilder mit einem bestimmten Qualitätsfaktor (Kompression) zu speichern um die Dateigröße zu veringern.

Sehr hilfreich ist hier auch der Dialog “Für Web und Geräte speichern…” in Photoshop, mehr dazu im Podcast.

Podcast Info:
Titel: Ladezeiten-Optimierung von Webseiten
Autor: Pascal Bajorat
Länge: 23 Min
Dateigröße: 120MB

Video-Podcast in HD 720p über Vimeo ansehen:

Ladezeiten-Optimierung von Webseiten from Pascal Bajorat on Vimeo.

Mac / PC Version [ 22:52 ]

iPod / iPhone Version [ 22:52 ]

Kategorien des Artikels: Podcast, Webseitenoptimierungweiter

Navigation in Photoshop

verfasst von Pascal Bajorat, veröffentlicht am 27.10.2010 und 1 mal kommentiert

In diesem Tutorial möchte ich euch zeigen wie ihr eine einfache Navigation in Photoshop erstellen könnt. Die Navigation ist vom Stil her so angelegt, dass ihr relativ einfach auch mit anderen Farbkombinationen experimentieren könnt.

Hier könnt ihr die Beispieldateien herunterladen…

In Kooperation mit Terrashop präsentieren wir euch in dieser Podcast-Folge das Buch Little Boxes Teil 0 von Peter Müller erschienen im Verlag Markt und Technik.

Auszug aus dem Buch:
Webseiten bauen beginnt nicht erst mit HTML & CSS. Sondern mit dem Wissen um den richtigen Einsatz von Text und Bild. Mit dem Wissen um den richtigen Aufbau Ihrer Website, damit Besucher und Suchmaschinen gern vorbeischauen. Mit der passenden Auswahl von Technologie, Webhoster und Werkzeugen. Und mit einem guten Plan für die Umsetzung Ihres Vorhabens. Kurz: Webseiten bauen beginnt mit den Grundlagen. Bei Null. Wie dieses Buch. weitere Informationen…

Das Buch könnt ihr bei Terrashop im Rahmen einer Aktion für 4,95€ bekommen anstatt der üblichen 17,95€, da kann man also nicht viel falsch machen -> Little Boxes Teil 0 auf Terrashop.de ansehen

Ein Exemplar des Buches könnt ihr hier bei uns im Rahmen einer Verlosung gewinnen.

Podcast-Info:
Titel: Navigation für Webseiten
Autor: Sascha Rudolph
Länge: ca. 19 Min
Dateigröße: 85 MB

Video-Podcast in HD 720p über Vimeo ansehen:

Navigation erstellen in Photoshop from Pascal Bajorat on Vimeo.

Mac / PC Version [ 18:47 ]

iPod / iPhone Version [ 18:47 ]

Kategorien des Artikels: Photoshop / Design, Podcastweiter

Header-Collage

verfasst von Pascal Bajorat, veröffentlicht am 22.10.2010 und 3 mal kommentiert

In diesem Tutorial möchte ich euch erklären, wie ihr eine Collage für den Header eurer Webseite erstellt. Es handelt sich dabei um einen Header, den ihr z.B. für eine Reise- / Urlaubsseite verwenden könnt bzw. durch die in dem Tutorial verwendete Burg eher für ein mystisch wirkendes Portfolio. Natürlich könnt ihr statt der Bug auch etwas anderes nehmen und für euren Zweck anpassen. Ich werde euch zeigen wie ihr einen Wasser-Hintergrund anlegt und eine Insel mit Felsen die aus dem Meer ragen erstellt.

Für das Tutorial verwende ich folgende Stockgrafiken aus dem Bildarchiv von StockXchange – sxc.hu:
http://www.sxc.hu/photo/1253789
http://www.sxc.hu/photo/1310577
http://www.sxc.hu/photo/1287251

Die Dateien zum Nachbauen findet ihr hier als *.zip Datei (64MB). Es sind zwei *.psd Dateien enthalten, die eine die ich zur Vorschau erstellt habe und die andere die ich während der Podcast-Folge erstellt habe. Tutorial Dateien herunterladen

In Kooperation mit Terrashop präsentieren wir euch in dieser Podcast-Folge das Buch Little Boxes Teil 0 von Peter Müller erschienen im Verlag Markt und Technik.

Ein Exemplar des Buches könnt ihr hier bei uns im Rahmen einer Verlosung gewinnen.

Podcast-Info:
Titel: Header-Collage für Webseite
Autor: Sascha Rudolph
Länge: ca. 27 Min
Dateigröße: 160 MB

Video-Podcast in HD 720p über Vimeo ansehen: