CSS – Seifen mit Format – und Webdesign mit Style

Wer sich mit Webdesign auseinandersetzt, kommt nicht um diese Web-Sprache herum. Weshalb Sie den Begriff Responsive-Webdesign unbedingt kennen sollten, woher Webseiten ihre Farben beziehen und wie Programmierung mit Design verschmilzt , erfahren Sie in diesem Blogbeitrag.

Was sind HTML, PHP, MySQL oder CSS? pbits widmet diese Serie allen, die sich das Grundwissen und die Terminologie der Internetwelt aneignen wollen.
In dieser Serie gehen wir vom Beispiel eines fiktiven Geschäftsmodells aus. Wir geben dem Kunden die Möglichkeit seine Seife online individuell zu erstellen. Nebst Seifenfabrik gehört auch ein Online-Shop zum Geschäftsmodell. Wir vergleichen die Web- und Seifenindustrie, um die virtuelle Welt etwas visueller erklären zu können. Hier können Sie die Einführung nachlesen.

Von Seifenformel zu Seifenformen – von HTML zu CSS

In unserem letzten Blogbeitrag über HTML haben wir aufgezeigt, wie HTML Inhalte strukturiert wiedergibt. Wenn wir nun den Vergleich der HTML-Sprache mit einer Seifenformel fortführen, stellt sich die Frage nach Form, Farbe und Design der Seife – beziehungsweise des Online-Shops.

Unsere Seife soll je nach Kundenwunsch eine andere Duftnote, eine andere Form oder Farbe bekommen. Mit der Zugabe verschiedener Elemente und Stoffe wird unsere duftlose Seifenformel veredelt. Da wir dafür der ursprünglichen Formel (HTML) nur die Zusätze (CSS) hinzugeben müssen, sparen wir viel Zeit und Mühe.

Wie der Zusatz von CSS zur HTML-Sprache zu einer schöneren Darstellung führt, veranschaulichen wir hier am Beispiel von letzter Woche.

In HTML: <h1> Hier kommt ein Titel zu Websprachen </h1>
Sieht in HTML so aus

 

 

Wenn wir es nun mit CSS formatieren: h1 {color: white; background-color: green;}

Sie können unschwer erkennen, dass wir, das h1 Element von HTML erwähnen und ihm dann zwei Eigenschaften zuweisen: Weisse Farbe für die Schrift und einen grünen Hintergrund. Das Resultat sieht dann wie folgt aus:

Hier kommt ein Titel zu Websprachen

Unterschiedliche Klassen, unterschiedliches Aussehen

Am Beispiel unserer Seifenfabrik überlegen wir uns, hinsichtlich der Wiedererkennbarkeit, in der Verpackung ein einheitliches Design zu verwenden, mit unterschiedlichen Grössen und Behältern für z.B flüssige oder feste Seife.

In unserem Online-Shop stellt sich uns eine ähnliche Herausforderung. Denn eine Einzelprodukt-Seite, soll nicht wie die Startseite aussehen und doch als Teil des Online-Shops wahrgenommen werden. Wir legen somit übergeordnete Merkmale für die ganze Webseite und andere Merkmale für spezifische Seiten fest.

In unserem Beispeil zu HTML haben wir folgenden Button erstellt:

In HTML: <a href=“https://pbits.ch“ class=“myButton“>Hier ist ein Link zur Home-Seite von pbits</a>
Sieht dann so aus:

Hier ist ein Link zur Home-Seite von pbits

Mit CSS formatiert:
Hier ist ein Link zur Home-Seite von pbits

Doch auf der Produktseite für Flüssigseife, soll der Button für den Warenkorb eine andere Farbe haben.

In HTML: <a href=“https://pbits.ch“ class=“warenkorb“>Warenkorb</a>
Sieht dann, mit CSS formatiert so aus::

Warenkorb

CSS macht Ihre Webseite freundlicher

Anhand der Beispiele oben sehen Sie, wie CSS durch unterschiedliche Klassen unterschiedliches Aussehen ermöglicht. Darüber hinaus gibt CSS Ihnen die Möglichkeit, das Aussehen der Webseite an jegliche Fenstergrössen anzupassen. Diese Eigenschaft nennt sich Responsive-Webdesign (responsive = reaktiv).
Die Webseite unseres Kunden sieht dadurch sowohl auf Handy und Tablet als auch auf Desktop-Geräten gut aus, und kann ohne Mühe bedient werden.

 

 

Wenn Sie das Thema CSS und Responsive-Webdesign interessiert, empfehlen wir Ihnen diese Englische Anleitung von W3Shools.

Wir freuen uns weiterhin auf Ihr Feedback in Bezug auf Ergänzungen, Ideen und Fragen hinsichtlich dieser tollen Websprache, die Inhalte neu formt und ansprechend wiedergibt.

Kommentar hinterlassen!

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.