Empfehlungen für das Erstellen von Entwürfen im Webdesign

Grundsätzlich lässt sich alles realisieren, jedoch kann ein fachlich nicht korrekt erstellter Entwurf zu vielen Problemen führen:

  • Die Kosten für die Realisierung steigen deutlich, da das Material aufbereitet oder gar nacherstellt werden muss.
  • Die grafische Treue kann nicht eingehalten werden, da wichtige Informationen im Entwurf nicht klar ersichtlich sind (Schriftgröße, Schriftfarbe, Abstände etc.).
  • Die spätere Pflege mit einem Content-Management-System (CMS) wird erschwert oder ist in bestimmten Bereichen nicht möglich, da grundlegende technische Aspekte nicht bei der Gestaltung berücksichtigt wurden.

Es empfiehlt sich daher, einige Regeln einzuhalten und die technische Realisierung in der Entwurfsphase mitzudenken. Hier finden Sie einige Ratschläge – wenn Sie zudem Fragen haben sollten, können Sie mich gerne kontaktieren.

Wie breit darf und sollte das Layout sein?

Die Breite der Website ist grundsätzlich von der Monitorauflösung (Größe des Displays) abhängig. Hier sollte man vom niedrigsten Standard ausgehen, den Tablets und Netbooks vorgeben: 1024 px. Davon abziehen müssen Sie jedoch noch etwas Rand, links und rechts, sowohl für die Rollleiste als auch für den visuellen Eindruck. Damit kommt man auf die im Webdesign üblichen 960 px Maximalbreite. Dieser Wert hat sich in den letzten Jahren bewährt und etabliert.

Können Schatten und andere Effekte verwendet werden?

Grundsätzlich ja, jedoch sollten Sie immer davon ausgehen, dass solche Effekte nur in Bildform verwendet werden können. Nur wenige Effekte (wie Transparenz und Schlagschatten) können direkt in CSS, also mit technischen Mitteln auf der Website dargestellt werden. Wenn Sie also einen Text mit einem Schlagschatten versehen, müsste dieser als Grafik eingebunden werden, was aus vielerlei Hinsicht nicht zu empfehlen ist. Deshalb gilt: Effekte nur bei grafischen Elementen.

Um die Effekte später sauber als Grafiken exportieren zu können, belassen Sie diese bitte in der Quelldatei (PSD) und verwenden Sie die Effekte so, dass diese leicht exportiert werden können (ein Overlay zum Beispiel lässt sich unter Umständen nicht exportieren). Zudem ist es hilfreich, wenn die Einstellungen für den Effekt einsehbar sind, um zum Beispiel Schlagschatten mit CSS abbilden zu können.

Welche Schriftglättung soll ich verwenden?

Die beste Methode die Schriftglättung unter Windows in Photoshop nachzubilden, ist Sharp. Für Text, der später als Grafik eingebunden werden soll, sollte die Schriftglättung jedoch nicht nachgebildet werden. Smooth wäre hier die richtige Einstellung.

Die beste Methode die Schriftglättung des Browsers in Photoshop nachzubilden, ist die Einstellung scharf (sharp). Für Text, der später als Grafik eingebunden werden soll (wie zum Beispiel bei Logos), sollte die Schriftglättung jedoch nicht nachgebildet werden. Hier ist weich (smooth) zu wählen.

Welche Schriftarten können verwendet werden?

Grundsätzlich alle, die ausdrücklich für die Einbindung in Websites freigegeben wurden. Kommerzielle Schriften gehören hier seltener dazu. Aber auch nicht jede kostenlose Schrift darf eingebunden werden. Um sicherzustellen, dass es nicht zu rechtlichen Verstößen gegen die Lizenzen des Urhebers kommt, können Dienste wie Google Web Fonts (alle dort verfügbaren Schriften) oder auch Font Squirrel (alle Schriften mit dem Hinweis „@font-face compatible”) verwendet werden. Diese Dienste haben zudem den Vorteil, dass die Schriften nicht mehr konvertiert werden müssen und die Einbindung dadurch sehr einfach ist (was Zeit und Geld spart).

Was muss ich bei Abständen und Maßeinheiten beachten?

Ein Entwurf wird im Webdesign immer als Vorlage (Template) angesehen und entsprechend realisiert, wobei Textformatierungen und Abstände als Vorgaben oder Stile definiert sind. Erstellt ein Benutzer dann im Content-Management-System eine Hauptüberschrift, muss er nicht erst Schriftart, Farbe, Größe usw. angeben. Die Website stellt die Überschrift automatisch so wie in der Vorlage definiert dar.

Aus diesem Grund ist es wichtig einheitliche und saubere Formatdefinitionen im Entwurf anzugeben und alle Angaben müssen auch einsehbar sein, um sie übertragen zu können. Zudem ist darauf zu achten, dass Abstände einer gewissen Logik folgen und ebenso einheitlich sind. Im Idealfall verwenden Sie Abstände in Teilschritten: 10 px, 25 px, 50 px, 100 px usw. Damit erhält Ihr Entwurf automatisch ein gewisses Raster, das auch proportionale Aspekte berücksichtigt.

Welche Informationen müssen dem Entwurf zu entnehmen sein?

Grundsätzlich alle verfügbaren, weshalb Sie Effekte möglichst nicht einrechnen oder Formatierungen „von Hand” vornehmen sollten. Sämtliche Elemente des Entwurfs sollten leicht zu exportieren und weiterverarbeitbar sein. Text, der zum Beispiel in Majuskeln (Großbuchstaben) ausgegeben werden soll, sollte auch mit der entsprechenden Funktion hierfür im Entwurf angelegt und nicht mit gedrückt gehaltener Shift-Taste geschrieben werden.

Was muss ich bei der Positionierung von Elementen beachten?

Die Tatsache, dass in Grafikprogrammen alles frei positionierbar ist, verleitet schnell dazu willkürlich Elemente im Entwurf zu platzieren. Die technische Realisierung unterliegt jedoch gewissen Regeln. Wenn Sie für das Web gestalten, gehen Sie eher von einem Textdokument und den hier gegebenen Positionierungsmöglichkeiten aus. Wenn Ihr Entwurf grundsätzlich in einem Textdokument realisierbar ist, stellt auch die Realisierung als Website keine Probleme dar.

Was muss ich bei Textboxen bzw. Textrahmen beachten?

Die Schriftgröße ist im Web grundsätzlich ein relativer Wert. Er kann vom Benutzer individuell geändert werden, um das Schriftbild zum Beispiel durch größere Schrift lesefreundlicher zu machen. Aber auch die einzelnen Betriebssysteme (Windows, Max OS X, Linux) bringen leichte Abweichungen mit sich. Deshalb sollten Schriftgrößen immer so eingesetzt werden, dass „Luft” nach oben bleibt. Passgenaue Umbrüche ergeben keinen Sinn, da der Umbruch bei Erhöhung der Schriftgröße an anderer Stelle erfolgen würde. In Textboxen bzw. -rahmen mit fester Höhe wird der Text schnell abgeschnitten oder läuft über die Abgrenzung hinaus, wenn er überraschenderweise eine weitere Zeile benötigt, da die Schrift im Browser etwas größer ausfällt als im Entwurf geplant. Letzteres können Sie übrigens umgehen, indem die Höhe solcher Textelemente nicht fix sondern flexibel realisiert wird.

­

Seite anzeigen

JPEGmini: Weniger Kilobyte, schnellere Ladezeit

JPEGmini

Programme und Webdienste, die schwergewichtigen Bildern und Grafiken auch noch die letzen Kilobyte aussaugen, gibt es viele. Im Grunde halten sie aber alle nicht mehr, als jedes einfache Progrämmchen auch verspricht. Die 3 KB, die eventuell gegenüber der „Für-Web-speichern”-Funktion in Photoshop eingespart werden, rechtfertigen in der Regel nicht den Extraufwand. Für JPEGmini wurde laut Betreiber jedoch ein völlig neuer Algorithmus entwickelt, der nicht nur ein paar Kilobyte aus den Bildern quetscht, sondern die Dateien um das bis zu Fünffache verkleinert.

Im Test mit 15 Bildern (alle bereits in Photoshop für die Web optimiert) konnte ich immerhin das bis zu Dreifache herausholen. Testobjekt waren 910 × 235 px große Bilder, die in einem Header untergebracht rotieren. Bei vier Bildern brachten es zuvor auf knapp 500 KB, die der Header allein verschlungen hätte. Nun, nach der Reduktion, werden dem Besucher nur noch rund 250 KB zugemutet.

JPEGmini arbeitet also durchaus effizient – und regt geradezu die Phantasie an, was bei einer derartigen Reduktion im Bereich Webdesign / Layout alles so möglich wäre …

Link: JPEGmini

­

Seite anzeigen

Rechnungen per E-Mail bald auch ohne Signatur rechtlich zulässig

Wie viele andere verschicke ich meine Rechnungen ohnehin der Einfachheit geschuldet per E-Mail und nur auf direkte Anfragen per Post. Bisher war dieses Verfahren ohne eine digitale Signatur (eine Art digitales Zertifikat) für den E-Mail-Verkehr jedoch nicht zulässig – weshalb die Anschaffung einer solchen Signatur immer irgendwie auf meiner Agenda stand. Nun hat sich das aber erledigt.

Seite anzeigen


Butterfly