Tags ‘Tools’

Wireframe Showcase: Der Vorher-Nachher Vergleich beim Webdesign

Webdesign | Mittwoch, 30.06.2010 | Noch kein Kommentar

Plant man ein neues Webprojekt, ist es sinnvoll, als ersten Schritt das Layout grob zu skizzieren. Hierbei legt man fest, welche Elemente die Seite beinhalten soll (Navigation, Logo, Suche, Content, Footer usw.) und wo diese grundsätzlich angeordnet werden sollen (z. B. die Navigation oben links). Webdesigner bezeichnen solch einen frühen Prototypen als Wireframe oder Mock-Up. Da es in diesem ersten Schritt lediglich um eine Festlegung des konzeptionellen Layouts geht, sollten konkrete Designfragen zunächst vollkommen außen vorbleiben. Umsetzen lassen sich solche Skizzen entweder mit Papier und Stift oder computerbasiert mit zahlreichen Werkzeugen.

Mehr lesen … »

Software Paket für den lokalen Cross-Browser-Test

Cross-Browser-Test | Montag, 19.04.2010 | Noch kein Kommentar

Wer regelmäßig die Darstellung seiner erstellten Websites auf verschiedenen Betriebssystem- und Browserversionen abtesten muss, landet früher oder später bei einem kostenpflichtigen Online-Dienst wie etwa BrowserCam. Aus Anwendersicht überzeugt bei diesen Anbietern nicht nur die Wartungsfreiheit, sondern auch die Vielzahl an Möglichkeiten. So ermöglichen die “besseren” Dienste sowohl das automatisierte Erstellen von Screenshot-Serien, wie auch den fallweisen Remote-Access. Dennoch sind diese Dienste nicht ohne Fehl und Tadel. Wer häufiger mit ihnen arbeitet, wird zumindest temporär immer mal wieder Zugangs- und Performanceprobleme feststellen. Und zumindest bei sensiblen Kundenprojekten steht man immer wieder vor der Frage, ob das Übermitteln der Inhalte an einen Dritten in der Entwicklungsphase vom Kunden überhaupt akzeptiert wird.

Mehr lesen … »

Platzhalter-Grafiken ohne Photoshop

Anfänger, Web allgemein, Webdesign | Mittwoch, 07.04.2010 | Noch kein Kommentar

Während der Entwicklungsphase einer Homepage konzentriert sich der Entwickler im Regelfall ausschließlich auf die Umsetzung des Layouts. Erst wenn dieser Prozess abgeschlossen ist, erfolgt das Einpflegen von Texten und Bildern, die nicht zum Grundlayout gehören. Da die Fläche aber trotzdem reserviert werden soll, arbeitet man temporär mit Platzhaltern. Im Textbereich greift man hierzu auf sogenannte Blindtexte zurück, für die ich sinnvolle Generatoren bereits in einem früheren Artikel vorgestellt hatte.

Mehr lesen … »

Internet Explorer Testen und Debugging

Cross-Browser-Test | Montag, 29.03.2010 | Noch kein Kommentar

Trotz validem HTML und CSS kommt es immer wieder Abweichungen bei der Darstellung der eigenen Homepage. Das Hauptaugenmerk sollte insbesondere auf die verschiedenen Versionen des Internet Explorers liegen, der erfahrungsgemäß am weitesten von den Vorgaben des W3C abweicht. Unter Windows ist der Aufbau einer Testumgebung mit Bordmitteln nicht möglich, da es das Betriebssystem nicht gestattet, mehrere Versionen des Internet Explorers parallel zu installieren. Insofern muss man in die Trickkiste greifen, etwa mit dem IETester oder Spoon.

Mehr lesen … »

HTML Texte mit CSS formen

Webdesign | Sonntag, 14.03.2010 | Noch kein Kommentar

Das Layout von HTML Fließtext ist auf den meisten Websites eine recht langweilige Angelegenheit. Gerne würde mancher Webdesigner auf die aus dem Printbereich bekanten Layoutmöglichkeiten zurückgreifen. So ist es beim Desktop-Publishing kein Problem, etwa runden Text um ein rundes Bild herumfließen zu lassen. Bei Verwendung der CSS-Eigenschaft float fließt der Text zwar um das Bild herum, allerdings wieder in eckiger Form. Das verwundert nicht, denn Websites bestehen nun mal aus viereckigen Kästen, die übereinander, nebeneinander oder ineinander gestapelt werden.

Mehr lesen … »