Gestaltungsraster gibt es mittlerweile wie Sand am Meer. Das Besondere am Semantic Grid System ist jedoch, dass es ohne zusätzliche Klassen im HTML Markup auskommt. Dabei setzt es auf den cleveren Einsatz von Selektoren innerhalb des Stylesheets, die mit einem CSS Preprocessor (in diesem Beispiel mit SASS) generiert werden können. In Verbindung mit MediaQueries lassen sich so im handumdrehen flexible, responsive Gestaltungsraster für Mobiles Webdesign aufziehen. weiterlesen

Das Box-Modell von CSS nach W3C Spezifikationen sieht vor, dass sich die tatsächlich gerenderte Breite eines Elementes aus with, border und padding zusammensetzt. Bei elastischen Layouts ist diese Berechnung hinderlich und frustrierend. Wie dies mit box-sizing: border-box deutlich vereinfacht werden kann: hier im Artikel! weiterlesen

Die Slice-Funktion von Photoshop ist hoffnungslos veraltet und dem aktuellen Workflow Webseiten zu gestalten nicht mehr angemessen. Sie stammt noch aus einer Zeit, in der Layouts hauptsächlich mittels Tabellen aufgebaut wurden. Um den Export von Grafik-Elementen aus .psd-Dateien auch auf einer Windows-Umgebung zu automatisieren, wird hier im Artikel das Photoshop CS6 Plugin „Cut&Slice me“ vorgestellt. weiterlesen

Bei sogenannten Fluid-Layouts die sich immer an die aktuelle Browser-Breite anpassen, steht man spätestens beim Einbetten von Videos vor einem Problem.
weiterlesen

Zu guter Letzt möchten wir die Reihe der Artikel um die Website Druckversion abschließen, indem wir die letzten Hinweise zum Bereich der Inhalte erwähnen. Nachdem wir bereits auf die Schriftart und die Hyperlinks eingegangen sind folgen nun Logo und Seitenumbrüche.
Zwar stellen letztere nicht die wichtigste Optimierung der Druckversion dar, allerdings rundet eine Berücksichtigung der hier gegebenen Tipps die Anpassung der Website an die analoge Welt ab. weiterlesen

Möchte man eine CSS-Datei für eine Website Druckversion einbinden geschieht dies wie bereits beschrieben über das Link-Tag. Das media Attribut bestimmt, für welche Situationen die verlinkte CSS-Datei zur Verfügung stehen soll. weiterlesen

Im vorangegangenen Artikel wurden die notwendigen Anpassungen hinsichtlich des Designs thematisiert, die im Rahmen der Druckversion einer Website umgesetzt werden sollten. Daran anschließend geben wir hier Beispiele für Optimierungen, die sich im Bereich der Inhalte anbieten. weiterlesen

Nachdem die Grundlagen für die Druckversion einer Website gelegt wurden, geht es an die Optimierung der Seite selbst. Wie bereits angedeutet, gibt es hierbei zwei Bereiche, die berücksichtigt werden können. Zum einen gibt es Anpassungen hinsichtlich des Designs der Seite, zum anderen sind auch Optimierungen im Content von Vorteil.
Dieser Artikel beschäftigt sich mit den Aspekten, die unter Design-Gesichtspunkten für eine Website Druckversion zu optimieren sind. weiterlesen