Kategorie: Web-Design

Linksammlung – jQuery Lightbox Scripts

Da ich gerade für ein Projekt eine Lightbox suche, wollte ich euch einige auf jQuery basierende Lightbox Scripts vorstellen. Einfache Scripte mit nur wenigen Funktionen oder Projekte die schon lange nicht mehr aktualisiert wurden, habe ich nicht aufgeführt. Insgesamt sind es zwölf Alternativen geworden.

(mehr …)

Kategorien: Internet Web-Design

Präsentation über CSS3

Gerade bin ich über eine sehr tolle Präsentation zum Thema CSS3 gestolpert.Folgende Themen werden auf insgesamt 103 Seiten behandelt:

  • Everything you ever wanted to know about CSS3 selectors
  • Transparency and new color formats, including RGBA
  • New ways to work with backgrounds, including CSS gradients, multiple background images and natively supported CSS sprites
  • Rounded corners and border images
  • Box and text shadows
  • Transforms, transitions and their potential downsides
  • New values, including calc(), attr() and new units
  • Browser support information and techniques to take advantage of the exciting new stuff with respect to browsers of the past, to create experiences that are enjoyable for everyone

Die Präsentation wurde von Lea Verou erstellt und sollte unbedingt mit der Betaversion von Firefox 4 angeschaut werden. Falls dies nicht möglich ist, kann man auf die Online-Version zurückgreifen.

Kategorien: HTML5 & CSS3 Web-Design

Browser auf HTML5-Kompatibilität testen

Unter html5test.com hat Niels Leenheer einen Test veröffentlich, um Browser auf ihre HTML5-Unterstützung hin zu testen. Ähnlich wie beim Acid3-Test werden Punkte vergeben, um die unterschiedlichen Browser besser vergleichen zu können. Das Ergebnis wird übersichtlich zusammengefasst und zeigt genau auf, welche HTML5-Funktionen bereits unterstützt werden und welche noch nicht.

Allerdings muss man bedenken, dass die Spezifikation von HTML5 noch nicht fertig ist und sich daher noch einiges ändern kann. Zudem räumt der Entwickler ein, dass der Test nur überprüft ob die Funktionen im Browser bereit stehen. Die richtige Implementierung bzw. Umsetzung werden nicht näher geprüft.

Aktuell können maximal 300 Punkte erreicht werden. Hier eine kleine von mir erstellte Übersicht:

Browser Punkte
Firefox 3.6.8 139
Firefox 4.0 beta 2 189
Chrome 5.0.375.125
197
Chrome 6.0.472.22 dev
217
Internet Explorer 8
27
Opera 10.60
159
Safari 5.0.208
208

Kategorien: HTML5 & CSS3 Web-Design

Grafiken und Bilder verlustfrei komprimieren

Im Internet sollte man bei Bildern und Grafiken immer auf eine angemessene Dateigröße achten. Natürlich sollte die Qualität darunter nicht leiden. Deshalb verwende ich persönlich sehr gerne das verlustfreie Grafikformat PNG.

Es gibt auch die Möglichkeit, mit Optimierungen eine Datei verlustfrei zu verkleinern.
Hier kommt der kostenlose Service PunyPNG ins Spiel. Dort kann man Grafiken (PNG, JPG, GIF) bis 350 KByte hochladen und optimieren lassen. Anschließend erscheint eine Übersicht mit den hochgeladenen Dateien und die gesparte Dateigröße. Nun kann man die optimierte Datei wieder herunterladen. Bei mehreren Bildern kann man auch eine ZIP-Datei mit allen Bildern herunterladen.

Zur Veranschaulichung habe ich zwei Beispieldateien hochgeladen. Wie ihr sehen könnt, wurden die zwei PNGs insgesamt um 39,2 KByte verkleinert.

Gut zu wissen: Webdesigntrends 2010

Minimalistisches Design - Fortschritt oder Rückschritt?

Minimalistisches Design – Fortschritt oder Rückschritt? (Quelle: http://www.markenpersonal.de)

Nicht mehr lange, dann ist es getan. Das Jahr geht zu Ende. Überall beginnt es zu weihnachten. Die Zeit wird besinnlicher. Und uns stehen zahlreiche Jahresrückblicke ins Haus, bevor wir letzten Endes das neue Jahr willkommen heißen. Während der Eine noch über das vergangene Jahr mit all seinen Höhen und Tiefen sinniert, fiebert der Andere schon 2010 entgegen.

Auch im Web hat sich in den letzten Jahren durchaus viel getan. Web 2.0. Social Communities. eCommerce. Das spiegelte sich natürlich auch im Erscheinungsbild des www wieder. Altbekanntes wurde verbessert, neue Technologien ersetzten alte und ermöglichten ganz neue Vorgehensweisen der Web-Präsentation. Traditionen wurden über den Haufen geworfen, neue Trends entstanden.

Und auch für das neue Jahr 2010 gibt es Tendenzen und Richtungen, in die die Gestaltung geht. Zwar ändert sich nicht alles am 1. Januar, doch die Entwicklung vom Beginn des Jahres bis jetzt zeigt doch recht klar, in welche Richtung der Weg gehen könnte. Das reicht von der optischen Gestaltung, der Platzierung von Headern und übergroßen Footern bis hin zum erneut auflebenden Retro-Look der im Gegensatz zum einschlägigen Minimalismus steht.

Die Trends unterscheiden sich nicht von Grund auf von dem was 2009 aktuell war. Und was auch immer der Anwender, Designer oder Programmierer von den Trends halten mag, ob sie gefallen oder nicht, hängt sicherlich auch von persönlichen Faktoren ab. Dennoch wollen wir uns die Trends zumindest ansehen, um gewappnet zu sein, mitreden zu können und uns evtl. weiterzuentwickeln…

(mehr …)

Kategorien: Web-Design

Gut zu wissen: 5 Tips zur SEO

Beschäftigt man sich mit Webdesign, bemerkt man schnell, das das Geschäft weit über die Designarbeit hinausragt. Was verlangt wird ist mehr als das pure Look & Feel einer Website zu erstellen. Oft ist es wichtig, sich auch direkt um den Code fürs Front End zu kümmern.

Und das bedeutet, dass die Verantwortung der Suchmaschinenoptimierung (SEO) in die Hände des Webdesigners fällt. Dieses Thema geht jedoch am eigentlich Design Thema vorbei und fällt nicht zwingend unter die Kernkompetenzen eines Webdesigners.

Darum kommen hier ein paar nützliche Starter-Tips, die dem einen oder anderen unter euch helfen mögen. Viel Spaß! Kein Anspruch auf Vollständigkeit…

(mehr …)

Kategorien: Web-Design

Eine Site, viele Gesichter

Die Entwicklung von Websites bringt oft verschiedenste Probleme mit sich. Eines dieser Probleme: Die final umgesetzte und durchprogrammierte Site schaut im Browser irgendwie anders aus, als in der Entwicklungsumgebung.

Ansatz zur Problemlösung kann die Optimierung auf spezielle Browser sein. Doch derer gibt es viele. Wie schaut die Site in anderen Browsern aus, für die die Site nicht optimiert wurde? Welche Browser gibt es überhaupt und muss ich alle auf meinem Testsystem installiert haben?

BrowserShots. Check browser compatibility

BrowserShots. Check browser compatibility

browsershots.org schafft hier Abhilfe. Einfach Link zur Site (z.B. hochgeladen auf einen Testserver) eingeben, gewünschte Browser auswählen und staunen, wie entstellt die eigene Seite auf exotischen Browsern daherkommt – ganz ohne lästige Installation unbenötiger Browser. Versierte Anwender wählen noch Details wie Bildschirmgroße, Farbtiefe, Java-, JavaScript und Flash-Aktivierung aus.

Abschließend stehen die png-Screenshots als zip gepackt zum Download und Vergleichen bereit. So macht Optimierung Spaß!

Kategorien: Sonstiges Web-Design

PNG-Gamma-Bug (im IE) und die Lösung

links unverfälscht, rechts IE

links unverfälscht, rechts IE

Ab Version 7 kann der Internet Explorer mit transparenten PNGs umgehen. Allerdings besteht bei allen Versionen, auch im IE 8, ein weiteres Problem in Verbindung mit PNGs. Der IE interpretiert den hinterlegten Gamma-Wert in der PNG-Datei und stellt deshalb alle Grafiken ein wenig dunkler dar. Rechts habe ich ein Beispielbild hochgeladen. Je nach Monitor solltet ihr die Unterschiede erkennen.
Fairerweise muss man dazusagen, dass nicht direkt der IE die Ursache des Problems ist. Viel mehr ist das PNG-Format selbst die Wurzel allen Übels.

Wie kam es dazu?

Die Gamma Korrektur wurde eingeführt, um eine identische Darstellung von PNGs auf allen Plattformen (MAC, PC, …) zu ermöglichen. Wenn ein Bild alleine angezeigt wird ist alles OK. Verwendet man das PNG jedoch neben anderen Grafiken und Farben taucht ein neues Problem auf, welches deutlich unangenehmer als das Originale ist. Beispielsweise auf Webseiten sind die Farben nun uneinheitlich. Hier gibt es mehr Informationen, wie das Problem entstanden ist.

Lösung – TweakPNG

Wer PNGs in seinem Design benutzt, sollte daher den Gammawert aus den Bildern entfernen. Das geht ganz einfach mit dem Tool TweakPNG.

Öffnet das Bild mit dem Programm oder zieht es einfach per Drag&Drop in das Fenster. Nun seht ihr eine Übersicht aller Chunks. Dort einfach „gAMA“ auswählen und löschen. Eigentlich könnt ihr alles löschen, was nicht als „critical“ in der Spalte „Attributes“ markiert ist.

Anschließend die Datei abspeichern und schon seid ihr fertig. Leider muss der Vorgang mit allen PNG-Dateien wiederholt werden.

Visuelle Rhetorik – How-To 1: Schrift und Gestaltungsraster

Dieses How-To zeigt den sinnvollen Einsatz eines Gestaltungsrasters in Verbindung mit Typografie. Dabei steht das dazu verwendete Programm (z.B. Adobe InDesign, Adobe Photoshop) weniger im Vordergrund als der Leitfaden zur Gestaltung einer schnell wirksamen textlichen Informationsdarstellung.

Beim Website-Erstellungsprozesses stößt man früher oder später auf die Frage, welcher Inhalt kommuniziert werden soll. Ist dieser Inhalt bei Websites meist unterschiedlich, so gilt für dessen Gestaltung umso mehr das Gesetz des Screen-Designs. Wichtiges Merkmal hierbei: Der Inhalt muss einfach und präszise zu erfassen sein – die Kommunikation muss schnell funktionieren. Teil 4 der Reihe „Visuelle Rhetorik“ beschreibt, inwiefern Textgestaltung und Inhalt zusammenpassen müssen.

(mehr …)

Kategorien: Tutorials Web-Design

Sehr nützliches Tool zur Webseitenentwicklung – IETester

IETester ist ein sehr nützliches Tool für alle Webentwickler.
Das Programm beinhaltet die Versionen 5.5, 6.0, 7.0 und 8.0 des IEs.

Unter Windows kann standardmäßig nur eine Version des Internet Explorer installiert sein. Durch die Möglichkeit, verschiedene Versionen des Internet Explorers in Tabs zu öffnen, wird die Entwicklung von Webseiten deutlich vereinfacht.

IETester Homepage mit Download

Visuelle Rhetorik – Tutorial 1: Extraktion einer Farbpalette

Stimmungsbild für eine Website mit Thema Kaffee

Stimmungsbild für eine Website mit Thema Kaffee

Das Tutorial zeigt Vorgehensweisen zur Extraktion und Reduzierung eines Farbschemas mit Adobe Photoshop CS3, wie man es für die Erstellung einer Website benötigt.

Im Laufe eines Website-Erstellungsprozesses stellt sich üblicherweise die Frage nach der farblichen Gestaltung der Web-Präsenz. Das Farbklima soll letztlich auch zur Botschaft, zur Aussage und zur Stimmung der Präsenz passen und diese unterstreichen. Im Teil 4 der Reihe „Visuelle Rhetorik“ wird beschrieben, inwiefern Stimmungsbilder zur Klima- und Farbschemafindung beitragen können.

(mehr …)

Kategorien: Tutorials Web-Design

Visuelle Rhetorik – Teil 4

Form und Farbe des Inhalts als Botschafter der Website.

Nach längerer Zeit persönlicher Abwesenheit folgt nun Teil 4 der Reihe. Ich habe mich entschieden, die Publikation über die Binnengliederung einer Website wegzulassen. Somit wird dies der vorerst letzte Teil der Reihe werden. Sollte der Wunsch nach Informationen über die Binnengliederung bestehen, kann ich einen entsprechenden Artikel natürlich nachliefern.

Die Website befindet sich nun in einem Stadium, in welchem die Eckpfeiler bereits gesetzt sind. Die Grenzen der Site sind gezogen. Was folgt, müssen Inhalte sein. Dabei soll nicht erklärt werden, wie man zu Inhalten kommt (denn diese sollten – wie wir wissen – längst feststehen). Vielmehr geht es um die Frage, wie Inhalte auf gestalterischer Ebene aufbereitet werden können. Wie kann Inhalt aussehen? Inhalt und Form müssen zusammenpassen und rhetorisch überzeugen.

(mehr …)

Kategorien: Web-Design