Webstandard & Webdesign - CSS, HTML

 

Sollten Designer CSS und oder HTML können?

Sollten Designer CSS und oder HTML können? - Eine Frage die in den letzten Wochen bereits in verschiedenen Blogbeiträgen gestellt und auch rege diskutiert wurde. Mit dem Begriff "Designer" ( "Screendesigner" ) sind natürlich diejenigen gemeint die Screendesigns für die Umsetzung von Webseiten, meistens in Form von Photoshop-Vorlagen die im Idealfall auf einem Konzept und einer Informationsarchitektur basieren, erstellen. Ein weiterer Aspekt der bei der Beantwortung der Frage mit hineinspielt ist der der Arbeitsumstände bzw. -abläufe. Denn ein Screendesigner in der "3-Mann-Agentur" sollte 100% coden können, ein Screendesigner der bspw. bei einer Agentur mit mehr als 50 Mann angestellt ist, muss dies aufgrund der dortigen Strukturen oftmals nicht. Frage ist - sollte er oder sie es trotzdem können?

 (weiter)

CSS3 Animation Tutorial - Sliding Navigation without JavaScript

Aufbauend auf dem "CSS3-Tutorial" bezüglich eines Navigations-Konzeptes bei dem die einzelnen Navigationspunkte mittels der CSS-Eigenschaft Border-Radius rund dargestellt werden, ist das Ziel dieses kleinen Tutorials, der Navigation Bewegung in Form eines Slide-Effektes einzuhauchen. Der Unterschied zu anderen hier bereits vorgestellten Variantionen an Navigationen, basiert dieses nicht auf JavaScript, sondern erhält seine Bewegung aus der CSS3-Eigenschaft Animation. Hiermit lassen sich für die entsprechenden Elemente flüssig animierte Bewegungen erzeugen. Weiterhin werden neben der Art der Bewegung, auch die Anzahl der Wiederholungen, die Dauer der Animation und vieles andere mehr festgelegt.

 (weiter)

Onpage Linkanalyse mit FireLinkReport - Firebug-Extension

LinkReport - Ausgehende Verlinkungen und die damit verbundenen Eigenschaften wie dem Linkziel, dem verwendeten Linktext, aber auch die Angabe des nofollow-Attributes für eine Webseite auf einen Blick zu erhalten, wären für den ein oder anderen User sicherlich durchaus hilfreiche Informationen. Die noch relativ neue Firebug-Erweiterung FireLinkReport für den Firefox-Browser ist eine Anwendung, die alle Links auf der aktuell geöffneten Seite in einer Übersichtsliste aufgeführt. Die von allen Firebug-Extensions bekannte einfache und intuitive Benutzeroberfläche kann jedem Anwender kaum eine schnellere und unkompliziertere Auswertung und Analyse der Verlinkungen eigener und fremder Webseite auf einen Blick ermöglichen.

 (weiter)

CSS3 Tutorial - Website-Navigation - Border-Radius

CSS3-Tutorial - Inspiriert von dem hier im Webstandard-Blog kürzlich vorgestellten CSS-Tutorial "The hidden power of border-radius" und der vielerorts ausgetragenen Diskussionen zum Thema Progressive Enhancement im Bereich Webdesign bezüglich vorhandener Webstandards, ist das folgende kleine aber hoffentlich für den ein oder anderen Leser inspirierende CSS3-Tutorial mit Hauptaugenmerk auf der CSS3 Eigenschaft Border-Radius und den damit durchaus vorhandenen Gestaltungsmöglichkeiten entstanden. Keine Tricks, keine Zauberei und vor allem keinerlei Grafiken (!), lediglich ein paar übersichtliche Zeilen CSS. Aber seht selbst!

 (weiter)

JavaScript Popup - TopUp the jQuery Solution

Javascript Popup - Nicht wenige von Euch die Webseiten umsetzen benötigen aufgrund vorhandenen Bildermaterials einen Ansatz dieses bspw. auch in einer vergrößerten Darstellung abbilden zu können. Sei es ein Online-Shop, eine Bilder-Galerie oder Arbeiten des eigenen Portfolios. Und die vielen von Euch sicherlich bereits bekannte Übersicht an Lightbox-Klonen verdeutlicht auch, dass es genügend Varianten gibt ein JavaScript-Popup mittels eines kleines Scriptes realisieren zu können. Wer einen Blick auf diese Übersicht wirft fragt sich allerdings, welches dieses Plugins das Richtige für die eigenen Anforderungen ist. Wer neben Bildern auch inline HTML, Videos und Flash in diesem JavaScript-Popup abbilden muss, dem empfehle ich das auf jQuery basierende Plugin TopUp.

 (weiter)

Quicksand - The animated jQuery-Filter

Quicksand - Das in Anlehnung an Mac-Applikationen und hier insbesondere an die Datenvisualisierung CoreAnimation ( animierte Benutzeroberfläche die bspw. auch im iPhone Anwendung findet ), entstand das auf dem JavaScript-Framework jQuery basierende Filter-Plugin Quicksand. Um auch den Besuchern von Webseiten dieses Feeling nicht vorzuenthalten wurde dieses 3KB große Plugin ( komprimierte Version ) für eine Neuordnung und / oder Filterung von Elementen anhand der Bezeichnung oder auch der Dateigröße entwickelt. Ein durchaus interessanter Ansatz zur Filterung von Produkten eines Online-Shops. Das jQuery-Plugin Quicksand bietet hierfür auch einige Optionen, wie bspw. die Art und Weise und die Dauer des Animations-Effektes für die Neuordnung der Elemente.

 (weiter)

Überwachung von Backlinks und Linkpartnern - Backlink-Spinne

Dies ist ein durch hallimash vermittelter, honorierter Eintrag - Eine der Säulen von Suchmaschinenoptimierung ist der Auf- und Ausbau von Backlinks für Webprojekte. Egal ob manueller Linkaufbau, Linkkauf oder Linktausch, die Verwaltung solcher Backlinks und die damit verbundene Überwachung dieser und der Linkpartnern, ist oftmals mit einem unglaublich zeitintensiven Arbeitsaufwand verbunden. Da man nicht selten viel Zeit und Energie in einen Backlink mit bspw. hoher Domainpopularität investiert hat, möchte man natürlich auch wissen, ob dieser seinen "Linkjuice" auch noch in einigen Monaten auf das gewünschte Projekt weiterleitet. Software-Anwendungen und Online-Tools die Webmastern, SEOs und Agenturen diese Arbeit abnehmen gibt es zunehmend mehr, allerdings fällt die Auswahl aufgrund der oftmals recht unterschiedlichen Features nicht immer leicht. Im folgenden Artikel möchte ich Euch daher eine Anwendung vorstellen, die in Sachen Überwachung von Backlinks und Linkpartnern kompetente Abhilfe schaffen kann.

 (weiter)

Puffing Smoke Effect with jQuery

Auf der Suche nach JavaScript-Ansätzen der vielleicht nicht ganz alltäglichen Art, bin ich kürzlich auf das jQuery-Plugin SmokeEffect gestossen. Das von Gaya Kessler entwickelte und 2KB "große" und auf jQuery basierende Plugin ist ein recht verspieltes Script, in dem aus 2 Schornsteinen abwechselnd Wolken ausgestossen werden. Die grafischen Elemente sind leicht den eigenen Anforderungen entsprechend anpassbar. Ein durchaus idealer Platz für solche Anwendungen wären vor allem auf Webseiten mit einer besonders jungen Zielklientel, auf der dieses Feature durchaus einen Weg zu steigenden Interaktionen seitens der Webseitenbesucher auf der Seite bedeuten könnte.

 (weiter)

PhotoShoot - The Photoshoot Effect with jQuery and CSS

PhotoShoot - jQuery Features die einen dazu bringen, nach einem flüchtigen ersten Blick auch einen zweiten Blick zu riskieren, gibt es allein aufgrund der zunehmenden Anwender dieser JavaScript-Bibliothek zunehmend mehr. Ein solches Beispiel hierfür ist das Plugin PhotoShoot. Dieses Plugin, welches mindestens die jQuery-Version 1.3.2 als Grundlage seiner Funktionsfähigkeit benötigt, ist gerade einmal 4KB groß erzeugt einen ganz besonderen Foto-Shooting-Effekt, mit dessen Hilfe man das Arbeiten mit einer Kamera nachempfinden kann. PhotoShoot bietet hierbei einige durch den Anwender modifizierbare nützliche Optionen wie bspw. Unschärfe und Deckkraft an.

 (weiter)

Photoshop Tutorial - Wallpaper im Apple-Style

Photoshop Tutorial - Die umfassenden Funktionen und die durchaus vorhandene Komplexität von Adobe Photoshop macht den Umgang mit dieser Anwendung insbesondere für Einsteiger oftmals nicht sehr einfach. Das heutige 17 Schritte umfassende Step-by-Step Tutorial einer Fotowand soll daher insbesondere den Einsteigern in diese Software, aber auch dem geübten Nutzer, ähnlich dem hier bereits veröffentlichten Photoshop-Tutorial "Welcome to the jungle", einige Tricks und Kniffe für die Gestaltung von Grafiken ( u.a. Spiegelung und Biegung von Objekten, Perspektivisch verzerren, zuweisen von Ebenen-Effekten ), wie dem hier vorgestellten "Wallpaper im Apple-Style", mit an die Hand geben.

 (weiter)

PC.DE - IT-Community der neuen Generation

Trigami-Review - Bloggen und Community sind zwei Begriffe die auf den ersten Blick nicht unbedingt viel gemein haben, denn bloggen ist, bis auf Blogs die von mehreren Autoren betrieben werden, weitgehend eine Angelegenheit für Einzelkämpfer. PC.de - die IT Community der neuen Generation, deren Kernidee das Gemeinschaftsblogging ist, geht in diesem Fall ein etwas anderen Weg. Auch wenn diese Plattform sich noch im Beta-Stadium befindet, habe ich mit diesem Website-Review mal einen Blick hinter die Kulissen geworfen und dabei insbesondere den Umgang mit der Plattform ( Stichwort: Usability ) und deren technische Umsetzung näher beleuchtet.

 (weiter)

52Framework - HTML5 and CSS3 Framework

HTML5 und CSS3 - Nicht wenige Anwender können es aufgrund der interessanten Features kaum abwarten, neueste Standards wie bspw. HTML5 oder CSS3 endlich testen und dann auch in Projekten einsetzen zu können. Für entgültige Umsetzungen auf Basis dieser Standards ist es aufgrund der ( noch ) fehlenden Unterstützung wie bspw. des Internet Explorers, momentan leider noch ein wenig zu früh. Einen Ausweg aus dieser Misere bietet das 52framework an. 52framework ist ein CSS-Framework welches diese neuen Standards und deren Eigenschaften wie header, nav, section, article, footer, den ::selection Selektoren, Border-Radius, aber auch Text- & Box-Shadow bereits unterstützt und somit für Projekte zugängig macht.

 (weiter)

Border-Radius - Circles and Curvy Shapes with CSS3

Border-Radius - Die oftmals unspektakulär wirkende CSS-Eigenschaft Border-Radius, die mittlerweile von ( fast ) jedem Browser unterstützt wird, kann wie der Blog-Beitrag The hidden power of border-radius von Liam McCabe zeigt, doch einiges mehr als der ein oder andere vielleicht gedacht hat. Warum warten bis alle Browser SVG-Grafiken unterstützen, wenn man Elemente wie einen Kreis oder Kurven auch auschließlich mit der CSS-Eigenschaft Border-Radius umsetzen kann? ;o) Weiterhin zeigt Liam in seinem Beitrag auch, wie einfach es ist beispielsweise mittels überlappender Elemente einen Mond abbilden zu können. Sich einfach mal ein wenig Zeit nehmen und testen und schon eröffnen sich einem vollkommen neue Ansätze zum Thema Border-Radius. Auf diese Weise könnte man bspw. ein Badge oder ähnliches, ausschließlich via CSS umsetzen.

 (weiter)

Sliding Labels - jQuery and Mootools Version

Wer im eCommerce erfolgreich sein will kommt um eines nicht herum - Formulare. Ob zur Registrierung und einer darauffolgenden Bestellung, der Umsetzung von Formularen kommt eine hohe Verantwortung zu, um so wichtiger ist es, dass es für die zukünftigen Kunden verständlich ist. Einen sehr interessanten Ansatz hierzu liefert Tim Wright mit Form Design with Sliding Labels. In diesem Umsetzung eines Formulars werden die Label-Elemente als Inline-Labels direkt in das Eingabefeld geschrieben. An sich nichts neues, aber auf focus gleiten diese Label mittels jQuery zur Seite, so dass der Anwender immer weiß und auch erkennt was in diesem Eingabefeld von ihm oder ihr an Angaben erwartet wird.

 (weiter)

Browserstatistics 01/2010 - And the winner is the Internet Explorer 8

Browserstatistiken - Das Marktforschungsunternehmen NetApplications hat sich mit den gängigen Browserversionen und deren weltweiter Nutzung beschäftigt und kam nicht wirklich überraschend zu dem Resultat, dass der Internet Explorer mit rund 62% immer noch die Browser-Hoheit besitzt, auch wenn es in den letzten Wochen aufgrund der bekannt gewordenen Sicherheitslücken immer mehr Negativ-Presse für die Browserversionen aus Redmond gab. Allerdings muss man beim Internet Explorer einen genaueren Blick auf die einzelnen Versionen werfen, denn der IE6 und sein Nachfolger IE7 verlieren im Vergleich zu den Vormonaten deutlich, während der IE 8 von allen Browserversionen die deutlichsten Zuwächse verzeichnen kann. Der Mozilla Schützling Firefox wächst zwar langsam, aber stetig und nimmt mit nun ca. 24% den zweiten Platz im Browser-Ranking ein.

 (weiter)

Valentines Day - Photoshop-Brushes

Valentine's Day - Am 14.Februar ist es wieder so weit und zahlreiche Online-Shops präsentieren sich am Tag der Liebenden mit "romantischen Elementen und Accessoires" wie bspw. Herzen oder Blumen. Diese haben keine andere Aufgabe als die Emotionen des Betrachters anzusprechen und dann im Idealfall zu einem Kauf, Buchung, ect. zu führen. Diese stilistischen Elemente sind somit keine Verspieltheit des verantwortlichen Webdesigners, sondern einfach ein Mittel um das Augenmerk des Betrachters zielgerichtet auf "Valentinestags-Geschenke" zu lenken. Photoshop-Brushes, können bei der Erstellung solcher Elemente auch aufgrund der zahlreichen Stilrichtungen der Online-Shops, die im Laufe dieser Woche garantiert das ein oder andere Facelifting ihres Designs präsentieren werden, eine große Hilfe sein.

 (weiter)

Internet Explorer 6 - Das Ende naht

Internet Explorer 6 - Für viele ist der Albtraum eines jeden Web-Designers oder Web-Entwicklers. Es ist ja nicht nur die mangelnde Unterstützung von Webstandards wie HTML5 oder auch CSS3, sondern auch die vor allem in letzter Zeit immer häufiger auftretenden und nicht gerade risikolosen Sicherheitslücken, die diese Browserversion aus Redmond mit sich bringt. Alles Gründe die den Global-Player schlechthin nun dazu bringen, den Support für den Internet Explorer 6 bald gänzlich einzustellen. OK, diesen Weg sind bereits viele andere Firmen vorher auch gegangen, aber die Entscheidung von Google, die sicherlich in erster Linie aufgrund ihrer Applikationen Google Docs und Google Sites getroffen wurde, dürfte ein wenig mehr Gewichtung haben.

 (weiter)