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

  15. Ist vielleicht nicht ganz im Trend von CSS3 aber immer wieder hilfreich, wenn es um das Basiswissen von Stylesheets geht.
    Nahe zu alle Eigenschaften werden dort erklärt und auch kleinere Workshops zum Thema CSS stehen dem User zur Verfügung.

    https://www.css4you.de/

    Ich hoffe der Link ist hilfreich….

    Antworten

  18. Modernizr ist eine JavaScript-Library um moderne Features wie @font-face, Multiple Backgrounds etc. zu ver­wenden aber den­noch alter­na­tive CSS-Styles für ältere Browser anbieten zu können. Echt eine tolle Sache.

    Antworten

  38. Ein Medieninformatik-Student der Uni Bielefeld sollte einen Vortrag halten über HTML5 und CSS3. Herausgekommen ist Material für einen vierstündigen Vortrag. Und weil es so viel Material war, hat dieser Student den gesamten Vortrag mit Folien auf Video aufgenommen und bei Youtube hochgeladen. Inzwischen ist aus dieser Initiative ein Blog geworden mit jeder Menge Tutorials und Videos zum Thema HTML5 und CSS3. Sehr anschaulich und eingänglich: Videotutorials.

    Antworten

  42. Was eventuell auch interessant sein könnte zum Thema CSS3 – modernes Webdesign:
    CSS3 Leitfaden Buch und Info.

    Der Preis ist relativ Hoch, wie bei den meisten Fach und Themenbüchern. Allerdings ist das Buch sehr schön geschrieben und auch relativ hochwertig gedruckt, ob man dafür den recht hohen Preis in kauf nimmt ist jedem selbst überlassen.

    Antworten

  52. Ich denke, die Standard-Elemente des Webs (wie Pulldowns, Checkboxes, Radiobuttons) haben in ihrer aktuellen Form sowohl in Sachen Usability, als auch in Sachen Optik, ausgedient. Sie müssen außerdem neue Anforderungen erfüllen.

    Ein gutes Beispiel für moderne Umsetzungen ist das hier:
    https://harvesthq.github.com/chosen/

    Antworten

  61. Mein Lieblingstool ist das firefox-plugin firebug, mit dem man angezeigte Webseiten „live“ untersuchen und bearbeiten kann. Für jedes Seitenelement (z.B. Eine Überschrift, eine Spalte, ein Bild) wird der zugehörige html und css-Code angezeigt, und kann editiert werden. Die Änderungen werden sofort sichtbar.

    Antworten

  75. Immer wieder von mir genutzt, wenn ich mal wieder Hilfe von jemandem in Sachen HTML oder CSS brauche: Chop :-)

    https://chopapp.com/

    Einfach Quelltext reinkopieren, Kommentare einfügen, und Hilfe suchen ;-)

    PS: Funktioniert auch mit Javascript, Ruby, PHP, uvm.! Kann man also nur weiterempfehlen :-)

    Antworten

  78. Ein gute Idee sind für mich die Galerien von jalbum, mit denen man schnell tolle Grafiksammlungen erstellen kann. Und schon die kleinsten Kenntnisse in CSS reichen aus, um komplett nach Wunsch angepasste Galerien zeigen zu können, ohne dass man mit viel Mühe ganz von vorn anfangen muss.

    Zur Farbgestaltung mit CSS nehme ich gerne den rgb-hex Konverter zur Hilfe. Hier kann ich eine Wunschfarbe direkt in meinem Browser betrachten und sehe eine große Fläche davon. Gerade wenn ich eine Hintergrundfarbe asuwählen möchte, ist ein Vollbild viel aussagekräftiger, als eine Minifläche. Ganz “nebenbei” werden mir die Farbwerte sowohl als rgb als auch als hex angezeigt.

    Einen hab ich noch: Zum Abschalten zwischendurch machen die Goldenen Regeln für schlechtes HTML Spaß und bringen Erinnerungen an die eigenen Anfänge zurück.

    Antworten

  89. Ich hätte auch einen interessanten Tipp – vor allem für Entwickler von Web-Apps und iPhone-kompatiblen Internetseiten: https://jqtouch.com/

    jQTouch ist im Grunde ein Add-On für jQuery mit dessen Hilfe man die typische iPhone-Darstellung (Interface, Animationen zwischen verschiedenen Seiten, …) imitieren kann.

    Antworten

  92. Subtle Patterns stellt einem kostenlose viele schöne, sehr dezente, zurückhaltende Hintergrundmuster zur Verfügung, auch als PS-Muster-Paket

    Wenn das zu wenig CSS lastig ist, kann ich noch Sprite Cow empfehlen, um einfach Koordinaten in Sprite-Sheets auszulesen

    Antworten

  122. Klar, eigentlich ist es Werbung, aber Apple hat ein paar tolle Zukunftsbeispiele aus JS, HTML5 und CSS erstellt, die man unter https://www.apple.com/html5/ einsehen kann – und es gibt per Link ins Dev-Center jeweils Codeschnipsel etc. Sehr schöne Beispiele, um zu zeigen, warum man Flash hoffentlich irgendwann nur noch für Mini-Games braucht.

    Antworten

  133. Sehr interessant finde ich ein Tool von Adobe, das aktuell noch in der Beta-Phase steckt:

    https://labs.adobe.com/technologies/edge/

    Mithilfe dieses Tools ist es bereits möglich, interaktive Webinhalte mithilfe von HTML 5 zu gestalten/generieren. Eine sehr interessante Software, die man sich unbedingt einmal anschauen und ausprobieren sollte.

    Grüße

    Antworten

  147. 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

    Antworten

  149. 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

    Antworten

  151. immer wieder gern nutze ich kuler von adobe. darüber ist es möglich nette farbkombinationen zu finden oder auch selbst zu kreieren.

    für die, die es noch nicht kennen:

    kuler.adobe.com/

    da ich gerade gesehen habe, dass dieses tool bereits genannt wurde, habe ich hier noch einen link zum firefox add-on fireshot:

    https://addons.mozilla.org/de/firefox/addon/fireshot/

    dieses tool macht schnell und einfach screenshots mit der möglichkeite diese zu bearbeiten.. und in mehreren formaten abzuspeichern.

    ein täglicher begleiter in meinem job als mediendesigner….

    ***********************
    dt-Anmerkung
    Zwei Kommentare zu einem zusammengefasst. So ists fair.
    ***********************

    Antworten

  155. https://www.csszengarden.com/tr/deutsch/

    unbedingt mal durchstöbern, man kann interaktiv css seiten selbst gestalten,mit dem vorhandenen quellcode und eigene grafiken hochladen. viele beispiele von anderen usern sind zu sehen und es ist toll zu erleben wie sich das layout verändert ohne das sich der basis-quellcode um nur ein wort ändert.

    Antworten

  163. SEO mit CSS und jQuery

    ZIEL:
    Viel Text auf der Webseite unterbringen, der für Suchmaschinen relevant ist und gut gelesen werden kann

    BEDINGUNG:
    Der Text darf die Usability und die Übersichtlichkeit der Seite nicht beeinträchtigen

    LÖSUNG:

    1. den Text in kleinere Teilabschnitte aufteilen

    2. für jeden Abschnitt eine passende Überschrift (H2) mit passenden, aber ausreichend oft gesuchten Keywords finden (z.B. über google.com/insights/search)

    3. für jeden Textabschnitt eine DIV-Box mit dem Text und eine DIV-Bos für die entsprechende H2 machen

    4. https://jqueryui.com/demos/toggle verwenden, um die Textboxen ein- und ausblendbar zu machen

    5. H2 jeweils als Link formatieren, der die zugehörige Box jeweils ein- oder ausblendet

    6. jeweils DIVs mit Texten und Überschriften nebeneinander anordnen und per Default nur einen Teil der Textboxen einblenden

    ERGEBNIS: Viel suchmaschinenlesbarer Content, ohne dass dieser den User stört

    Wichtig: Der User muss auf den ersten Blick erkennen können, dass er per Klick mehr Content sehen kann, ansonsten wäre das Cloaking. Darauf sollte man beim Design achten.

    Kann man auch mit anderen jQuery-Funktionen kombinieren.

    Ach, btw.: das o.g. Buch habe ich übrigens noch nicht und fände es sehr interessant… ;-)

    Antworten

  166. ***************************************************************************
    Was für eine tolle Linksammlung, die hier entstanden ist! Herzlichen Dank für die rege Teilnahme. Ich denke, nach dem Durchgehen die Tipps ist man eine ganze Ecke schlauer. Sehr inspirierend diese Sammlung.

    Nun also die Bekanntgabe der Sieger. Mit Hilfe des Zufallsgenerators habe ich zwei Zahlen ermittelt und zwar:

    Die Zahlen lassen sich leicht den Kommentaren zuordnen, da diese nummeriert sind. Freuen dürfen sich über ein Exemplar „Modernes Webdesign mit CSS“:
    Nina sowie oli

    Herzlichen Glückwunsch!
    Und allen anderen ganz herzlichen Dank fürs Mitmachen! Die Aktion ist nun beendet. Aber natürlich können auch weiterhin Tipps eingestellt werden.

    ***************************************************************************

    Antworten

  174. wow.. ich kann das Buch nur empfehlen und jedem ans Herz legen der sich mit Webdesign und CSS befassen möchte. Danke für den Artikel!
    Mari/ CDS

    Antworten

Schreibe einen Kommentar

Die Netiquette ist zu beachten. Vor dem Hintergrund einer transparenten, sachlich-fairen Debatte wird die Nutzung eines Klarnamens empfohlen.

Folgende HTML-Elemente können verwendet werden: <b> <i> <img src="bildurl"> <a> <blockquote>

ÄHNLICHE BEITRÄGE

An den Anfang scrollen