//Notizblog
Webdesign
Opensearch für WordPress
Es gibt schon eine ganze Reihe großer Websites, die Addons anbieten, mit denen die Direktsuchfunktion von Firefox und Internet Explorer der neueren Versionen erweitert werden können.
Wenn einmal kein Addon existiert kann die Siteinterne Suche mit dem Firefox Plugin Add to Search Bar trotzdem genutzt werden.
Wer seinen Seitenbesuchern den Komfort die Funktion ohne Plugin zur Verfügung stellen möchte, kann das einfach per WordPress Plugin nachrüsten. Für die Übrigen gibts auf der Projektseite Basisliteratur oder die Kurzfassung bei bueltge.
Speed mit Sprites
Auf CSS Sprites hat mich ein Blogeintrag bei praegnanz.de gebracht. Die Technik passt ganz gut zu meinen Überlegungen, wie man Websites beschleunigen kann.
CSS Sprites sollen helfen die Anzahl der http-Requests zu reduzieren und beschleunigen vor allem bei Websites mit einer großen Anzahl von Grafiken die Ladezeit. Das Prinzip ist einfach: Man macht aus vielen kleinen Grafiken eine große und definiert per CSS, welcher Bereich angezeigt werden soll.
Ein Beispiel sind z.B. die Icons von Yahoo. Auch die neue Seite der Bahn setzt sie ein.
Ein Video-Tutorial hierfür gibt’s bei CSS-Tricks.com
(cc) picture credit: G. Rivas Valderrama
Websites schneller laden
In den letzten Tagen habe ich mithilfe von Yahoos Firefox Plugin YSlow und der dazugehörigen Dokumentation versucht meine Seite zu beschleunigen.
Hauptsächlich deshalb, weil mein Lightbox Plugin, obwohl es mit ca. 30kb incl. Framework eins der kleinsten ist, die Ladezeit meiner Seite für Modembenutzer sehr lang werden lässt.
Neben kleinen Verbesserungen wie die Javascripts ans Seitenende zu stellen und so erst zu laden, wenn die Seite schon aufgebaut ist, hat hier die GZip-Kompression die größten Geschwindigkeitszuwächse gebracht. So konnte ich allein den Javascript Anteil auf 10kb reduzieren. Auch das von Yahoo empfohlene “far future” (10+ Jahre) Caching, bringt bei Besuchern, die mehrere Seiten besuchen oder wiederkehren ohne ihren Cache geleert zu haben einen deutlichen Geschwindigkeitszuwachs. Einziger Nachteil ist, dass Änderungen an Dateien nur noch wirksam werden, wenn sie unter einem anderen Namen abgespeichert werden, weshalb ich bei meinem CSS darauf verzichte. (weiterlesen …)
Seitenwert feststellen & verbessern
Nachdem die SEO Blogs- und Agenturen das Internet zuhauf bevölkern, habe ich mir für meine Seite auch mal einige Optimierungsmöglichkeiten (natürlich White-Hat 
) angeschaut.
Die meisten Punkte sammelt man natürlich mit vielen guten Inhalten und Geduld.
Beim Handelsblatt kann man sich einen Groben Überblick über die Möglichkeiten der SEO verschaffen.
Um aber häufig gemachte Fehler von vornherein zu vermeiden und Schwächen auszubessern eignen sich folgende Tools: (weiterlesen …)
Best of CSS Grid Design
1250 Tage
Gerade auf WordPress basieren viele interessant gestaltete Seiten. Webdesignerwall hat eine schöne Auswahl von Grid Designs zusammengestellt.
Mehr inspirierende Layouts kann man hier bewundern:
Weitere Galerielinks beim Smashingmagazine
Wer nur ein leeres CSS Grundgerüst sucht wird bei drweb fündig.
Online-Magazin erstellen
Mit Issuu kann man im Handumdrehen ein eigenes Magazin erstellen und publizieren. Dazu lädt man eine PDF-Datei hoch, die dann im Magazin-Style mit Blätteranimation (in Flash) in Blogs etc. eingebunden werden kann. Einschränkungen bezüglich der Themen gibt es nicht.
Die Plattform eignet sich auch hervorragend zum Stöbern.
Via StyleSpion
Soll das Magazin in kurzen Abständen erscheinen und ist eine Blätteranimation nicht so wichtig, wäre ein CMS bzw. Blog sicher die bessere Wahl. Dann könnte der Artikel Bloganbieter im Test einen ersten Überblick verschaffen.
Kreativität kann so einfach sein
 |
| Logo by Logólogos [cc-by-sa v.3.0] |
Weitere Beispiele, wie Corporate-Identity gemacht wird sich ähneln kann, bei Logólogos.
edit: Leider steht die Seite nurnoch geladenen Gästen zur Verfügung.
Freie Bilder für die Website
Wer selbst kein Passendes Bild für seine Website parat hat, wird schnell im Web fündig. Genauso schnell verstößt man mit der Veröffentlichung gegen das Urheberrecht. Aus diesem Grund haben sich viele Foto-Communities zum Bildertausch gebildet. Leider geht es dort meist nicht ohne Anmeldung und manchmal ist auch eine Anfrage an den Fotografen notwendig. Dafür hat man eine Auswahl aus mehreren Hunderttausend gut sortierten Bildern. Auf jeden Fall sollte man sich die Nutzungsbedingungen vor dem Onlinestellen gut durchlesen – wie dieses Beispiel zeigt: ARD – Plusminus
- stock.xchng – mit Anmeldung – 366.422 Bilder [Nutzungsbedingungen]
- pixelio – mit Anmeldung – 223.316 Bilder [Nutzung durch Namensnennung (© Fotografenname / PIXELIO)]
- compfight – Durchsucht Flickr auf Wunsch auch nach Bildern mit Creative Commons Lizenz – ohne Anmeldung ca. 74Mio freie Fotos – Nutzungsbedingungen am Bild
- photocase – Anmeldung nötig, 121.000 Bilder – [Nutzungsbedingungen]
Foto by Jeff Belmonte [cc-by-sa v.2.0]
CMS-Systeme vergleichen
1668 Tage
Da es heute nicht mehr nur für Blogger interessant ist die Homepage mit einem CMS zu betreiben bietet sich vor der Entscheidung für ein System ein Blick auf CMS Matrix an, wo man eine große Anzahl verschiedener kommerzieller und freier Systeme vergleichen kann. Wem zum Ausprobieren die Installation auf dem Server zu umständlich ist kann das Frontend bei OpenSourceCMS vorher mit einem Testaccount ausprobieren. Beim Testen fiel mir SugarCRM auf. Hat man einen zuverlässigen Webserver ist es sicher eine prima Alternative zu Google Calendar & Co.
Web 2.0 Logo Generator
Der Arbeitsgang von der Idee, über den Entwurf, bis zur Erstellung eines Website-Logos ist nicht jedermanns/-fraus Sache. Wer es also etwas leichter haben möchte, kann sich mit dem Logo Creatr einen typischen Web 2.0 Schriftzug erstellen. Ähnliche Effekte, wie mit den Gimp Alpha-Filtern kann man auf Cool Text generieren. Ein wenig selbst kreativ werden darf man bei Logoease in einer Flashbasierten Bildbearbeitung. Interessante Schriftzüge lassen sich auch mit dem Flickr Logo-Generator aus ‘Buchstabenfotos’ herstellen (Wie unten). Ebenfalls mit Text arbeitet der Textorizer, bei dem die Konturen eines Logos mit Textbausteinen nachgebildet werden. Wem das nicht individuell genug ist, der findet in der sehr umfangreichen Linksammlung von Dr. Web sicher das passende Tutorial.
RSS-Feed