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

Mitglieder (Frontend-Benutzer)

Registrierung

Über ein Benutzerkonto auf unserer Website erhalten Sie Zugang zu ansonsten gesperrten Bereichen und können sich im Onlineshop anmelden, was die Bestellung erheblich vereinfacht, da Sie nicht mehr bei jeder Bestellung Ihre persönlichen Daten (Name, Anschrift etc.) an der „Kasse” angeben müssen. Die Registrierung ist selbstverständlich kostenlos und jederzeit kündbar.

Falls Sie bereits registriert sind und Ihre persönlichen Daten lediglich bearbeiten möchten, können Sie dies hier tun: Persönliche Daten. Falls Sie sich erneut registrieren und ein neues Benutzerkonto erstellen möchten, melden Sie sich bitte zuerst ab und kehren Sie dann zu dieser Seite zurück.
­

Registrierung: Bestätigung

Danke für Ihre Anmeldung. Bevor wir Ihr Benutzerkonto freischalten können, ist es nötig Ihre E-Mail-Adresse zu überprüfen, um einen Missbrauch dieser ausschließen zu können. Wir haben Ihnen hierfür soeben eine E-Mail geschickt. Bitte klicken Sie den Link (Verweis) in der E-Mail an, um Ihre E-Mail-Adresse zu bestätigen. Ihr Benutzerkonto ist anschließend freigeschaltet und uneingeschränkt nutzbar.
­

Registrierung: E-Mail-Bestätigung

Vielen Dank für Ihre Registrierung auf ##domain##.

Bitte klicken Sie auf diesen Link ##link## um Ihre Registrierung abzuschließen und Ihr Konto zu aktivieren. Wenn Sie keinen Zugang angefordert haben, ignorieren Sie bitte diese E-Mail. Wir löschen Ihre Daten dann selbständig nach einiger Zeit aus unserem System.

--
Signatur
­

Registrierung: Abgeschlossen

Die Aktivierung Ihres Benutzerkontos war erfolgreich und Ihre Registrierung für unsere Website ist abgeschlossen. Wenn Sie Ihren persönlichen Zugang vervollständigen oder anderweitig bearbeiten möchten, können Sie dies hier tun: Persönliche Daten.
­

Anmeldung

Wenn Sie bereits einen persönlichen Zugang für unsere Website haben, können Sie sich hier mit Ihrem Benutzernamen und Passwort anmelden. Falls Sie einen neuen Zugang erstellen möchten, können Sie dies hier tun: Benutzerregistrierung.
­

Passwort vergessen

Falls Sie Ihr Passwort für Ihren persönlichen Zugang für unsere Website vergessen haben sollten, können Sie hier ein neues erstellen lassen und erhalten so wieder Zugang zu Ihrem Benutzerkonto. Sie benötigen hierfür nur Ihre E-Mail-Adresse, mit der Sie sich bei uns registriert haben. Wir senden Ihnen dann an diese Adresse eine E-Mail mit den nötigen Daten, um Ihr Passwort ändern oder gegebenenfalls wiederherstellen zu können.
­

Passwort vergessen: Bestätigungs-E-Mail

Sie haben ein neues Passwort für Ihren persönlichen Zugang auf ##domain## angefordert.

Bitte klicken Sie auf diesen Link ##link## um das neue Passwort zu erstellen.

Wenn Sie diese E-Mail nicht angefordert haben, kontaktieren Sie uns bitte umgehend, da eventuell Ihr Benutzerkonto missbräuchlich verwendet wurde.

--
Signatur
­

Passwort vergessen: Bestätigung

Wir haben soeben eine E-Mail an die von Ihnen angegebene E-Mail-Adresse versendet, mit der Sie ein neues Passwort für Ihren persönlichen Zugang erstellen können. Um das neue Passwort zu erstellen, klicken Sie bitte auf den Link in der E-Mail. Sie werden dann zur entsprechenden Eingabemaske weitergeleitet.
­

Passwort vergessen: Abgeschlossen

Ihr Passwort wurde aktualisiert. Bitte verwenden Sie zukünftig nicht mehr das alte Passwort für Ihre Anmeldung. Falls Sie Ihr Passwort zu einem anderen Zeitpunkt noch einmal ändern müssen, können Sie dies hier tun: Persönliche Daten.
­

Persönliche Daten

Hier können Sie Ihre Registrierungsdaten vervollständigen oder anderweitig bearbeiten, um zum Beispiel Ihr Passwort oder Ihre E-Mail-Adresse zu ändern. Falls Sie stattdessen Ihr Konto löschen möchten, können Sie dies hier tun: Konto löschen.
­

Konto löschen

Wenn Sie den Zugang zu unserer Website dauerhaft nicht mehr nutzen möchten, können Sie hier Ihr persönliches Benutzerkonto löschen. Wir entfernen daraufhin alle Daten sicher aus unserem System.
­

Konto löschen: Abgeschlossen

Ihr Benutzerkonto und damit Ihr Zugang zu unserer Website wurde erfolgreich gelöscht. Ihre Daten werden bis zur nächsten routinemäßigen Bereinigung der Datenbank in unserem System belassen. Falls Sie Ihr Konto irrtümlich gelöscht haben und es wiederherstellen lassen möchten, kontaktieren Sie uns bitte. Ebenso können Sie uns kontaktieren, um die endgültige Löschen Ihrer Daten aus dem System vorzeitig zu veranlassen.

Falls Sie unser Angebot zu einem anderen Zeitpunkt wieder nutzen möchten, können Sie sich jederzeit erneut registrieren: Registrierung.
­

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


Butterfly