Skip to content

Buchvorstellung: Modernes Webdesign mit CSS

Modernes Webdesign mit CSS

Modernes Webdesign mit CSS

Druckfrisch erreicht mich das Buch „Modernes Webdesign mit CSS“ von Heiko Steigert, den ich im letzten Jahr als Gastautor im Rahmen des Stadtportal-Vergleichs gewinnen konnte. In dem Buch geht Heiko detailliert auf CSS, HTML und JavaScript & Co ein, und er verdeutlicht mit seinem zweiten Buch über Webdesign, dass es bei der Website-Entwicklung unerlässlich ist, sich mit den Veränderungen, die das Internet mit sich bringt, auseinanderzusetzen. Für dt-Leser stehen zwei Exemplare bereit. Wer wissen will, wie man an ein Gratis-Exemplar gelangt und was das Buch zu bieten hat, liest weiter.

„Modernes Webdesign mit CSS“ richtet sich an Webentwickler und Webdesigner, die schon erste Erfahrungen gesammelt haben. Der Autor zeigt, wie man standardkonforme Webseiten mit CSS3 attraktiv und modern gestalten kann. Die Workshop-Beispiele sind praxisnah und räumen mit dem Mythos auf, dass barrierearme und mit Webstandards umgesetzte Webanwendungen langweilig und alles andere als kreativ sind.

Das Buch im Detail

Im ersten Themenschwerpunkt werden Grundlagen und CSS-Basiswissen, wie etwa der Aufbau von CSS-Regeln, unterschiedliche Layouttypen (fix, fluid, elastic) und auch die Vor- und Nachteile absoluter Größenangaben vermittelt. Hilfreich sind auch die unter „Seitenoptimierung und Debugging“ aufgeführten Tools, die eine wertvolle Unterstützung bei der Entwicklung und Überprüfung der Seiten darstellen. Sehr praxisnah ist der zweite Themenblock angelegt, in dem die Struktur der Site und wichtige Seitenelemente, wie etwa die Hauptnavigation, der Footer und die Kommentare besprochen und inklusive Code leicht nachvollziehbar vorgestellt werden. Unter dem Kapitelnamen „Trends, Tipps & Tricks“ werden im dritten Block einige Projekte (Blog, Firmenwebsite, Freelancer-Portfolio und Shop) präsentiert, die als inspirierende Beispiele den Lesern dazu einladen, die erlernten Techniken (u.a. Parallax-Effekt) gleich anzuwenden. Auch die optimale Aufbereitung von Online-Formularen und Kommentaren wird in diesem Abschnitt vermittelt. Der letzte Themenabschnitt beschäftigt sich sowohl mit weiteren kreativen Gestaltungstechniken (z.B. Akkordeon) als auch mit der Optimierung von Websites für mobile Anwendungen. Auf der mitgelieferten DVD liegen die einzelnen Beispiele als fertige HTML-CSS-Anwendungen bereit. Hier einige Seiten aus dem Buch:

Fazit

Insgesamt ein wunderbares Buch, das sehr schön die aktuellen Möglichkeiten des Webdesigns veranschaulicht. Als Nachschlagewerk wie auch als Arbeitsbuch leistet es sehr gute Dienste. Die für den Verlag gewohnt gute Aufmachung des Buchs wie auch die anschauliche Vermittlung des Stoffs durch den Autor sorgen für Kurzweil und laden dazu ein, zeitgemäßes Webdesign anzuwenden.

Basisdaten

erschienen bei Galileo Design
444 Seiten., 2011, gebunden, komplett in Farbe, mit DVD
ISBN 978-3-8362-1666-1
Preis 39,90 Euro

Verlosung / Die Aufgabe

Wie kommt man nun zu einem Gratis-Exemplar dieses Buches? Ganz einfach: Wer bis Donnerstag den 18.08.2011 22.00 Uhr einen Kommentar mit einem Tipp, Trick oder Trend zum Thema (CSS)Webdesign anheftet, hat die Chance, eines der beiden Bücher zu gewinnen. Das kann ein Link zu einem hilfreichen Tool sein, ein Tipp bezüglich einer ansprechend gestalteten Webanwendung oder auch die Vorstellung einer interessanten Technik oder eines sehenswerten Effektes. Jeder Kommentar, der in diese Richtung geht, nimmt an der Verlosung teil.

Dieser Beitrag hat 177 Kommentare

  1. Ich greife auch immer wieder gerne auf SELFHTML zurück – hier der CSS-Bereich der neuesten Version als Wiki.

    Von den Möglichkeiten von Webtechnologien beeindruckt hat mich in der letzten Zeit z.B.:

    280 Slides, eine komplett JavaScript-basierte Präsentationsanwendung, als Vorzeigebeispiel für Cappuccino, ein Framework, mit dem man Webanwendungen wie Desktop-Anwendungen schreiben kann

    pdf.js, ein kompletter, rein JavaScript/HTML5-basierter PDF-Renderer

  2. Animationen und Transformationen mit CSS 3 sind wohl vielen schon geläufig.
    Hier eine kleine Übersicht.

    Bisher war CSS vor allem eine Sprache für statische Gestaltung mit überschaubaren Möglichkeiten. Mit CSS 3 bahnt sich die Zukunft des Webdesigns an. Egal ob Shadow, Gradients usw. Vieles davon lässt sich bereits heute nutzen – wenn der Besucher mit einem älteren Browser surft, bekommt er eben eine weniger ansprechende Version der Seite präsentiert. Das wichtigste ist hier, dass die Inhalte zugänglich bleiben.

    Beispiele für Transformationen:

    transform: rotate(180deg)

    Diese Zeile bewirkt, dass sich das darauf deklarierte Element auf den Kopf stellt, also um 180 Grad dreht.

    Bisher muss man für jeden Browser ein seperates Prefix verwenden:

    -webkit
    -o
    -moz
    -ms

    Nur so funktionert’s überall.
    Um das zu erleichtern, gibts den CSS Prrefixer: https://cssprefixer.appspot.com/

    CSS 3 transistions! Die CSS 3 Königsklasse.
    Transformationen erweitern die Möglichkeiten von CSS, aber mit den Übergängen (transition) erschließen Stylesheets einen komplett neuen Bereich. Javascript wird damit zum animieren überflüssig und wird lediglich zum auslösen der Animation benötigt.
    Animieren lassen sich viele gewöhnliche CSS 2 Eigenschaften wie auch transform.
    Einige Beispiele:

    transistion-property gibt an, welche Eigenschaften animiert werden sollen. Mit duration lässt sich festlegen, wie lange die Animation dauern soll. Timing function bezeichnen die Methode, was das genau bedeutet kann man sich hier ansehen: css3.bradshawenterprises.com/transitions/
    Delay ist die Verzögerung der Animation.

    Animation mit Keyframes

    Mit Keyframes ist es möglich, auch komplexe Animationen/Animationsabfolgen etwa wie in Adobe Flash zu erzeugen. Dazu müssen die Keyframes zuerst gesetzt werden.
    Was das genau bedeutet, kann man hier sehen: bradshawenterprises.com

    Weitere neue CSS 3 Funktionen:

    Gradients. Mit CSS 3 ist es möglich, Elementen Verläufe als Hintergrund zuzuweisen.
    Hier empfiehlt sich der Gradient Generator: http://www.colorzilla.com/gradient-editor/

    font-face. Die Einbindung von eigenen Schriften. Um hierbei eine möglichst hohe Kompatibilität zu erreichen, empfiehlt sich der FontFace Generator: http://www.fontsquirrel.com/fontface/generator

    Media Queries. Damit ist es möglich, verschiedene Stylesheets für verschiedene Auflösungen oder Gerätetypen auszugeben. Etwa wie PHP-if-Abfragen.
    Mehr dazu hier: Webdesignerwall

    Ich hoffe euch hat meine Zusammenstellung geholfen/genutzt.
    Grüße

Kommentare sind geschlossen.

An den Anfang scrollen