Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 39): Die verschiedenen Layoutvarianten

HTML & CSS für Einsteiger (Teil 39): Die verschiedenen Layoutvarianten

In den bisherigen Video-Trainings wurden die Grundlagen zur Arbeit mit HTML und CSS dargelegt. Jetzt sollen natürlich auch erste Früchte geerntet werden. In den nächsten Video-Trainings wird daher eine Beispiel-Webseite Schritt für Schritt aufgebaut. In diesem Video-Training lernt ihr jedoch zunächst die verschiedenen Layoutvarianten kennen. Denn die Wahl der passenden Layoutform sollte immer am Anfang eurer Überlegungen für die Gestaltung einer Webseite stehen.

... übrigens findest du die komplette Serie hier: HTML & CSS für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Bevor ihr ein Layout praktisch umsetzt, sind einige grundlegende Dinge zu klären. So solltet ihr euch zunächst einmal für die Art des Layouts entscheiden. Prinzipiell gibt es hier drei Möglichkeiten.

• Fixiert
• Flexibel
• Elastisch

CSS ermöglicht Layouts mit festen oder flexiblen Abmessungen. Bei den festen Layouts wird üblicherweise mit Maßangaben in Pixel gearbeitet. Flexible Layouts basieren hingegen auf prozentualen Werten. Beide Layoutvarianten haben dabei durchaus ihre Vor- und Nachteile.

Feste Layouts verwendet man meistens dann, wenn Grafiken layoutbildend eingesetzt werden sollen. (Wobei es auch hier durch den Einsatz von CSS-Hintergrundgrafiken durchaus Ausnahmen gibt). Kommt es bei den Layouts auf eine pixelgenaue Positionierung der Elemente an, greift man für gewöhnlich ebenfalls zur festen Positionierung. Bei dieser Layoutform wird meistens zumindest die Breite des Layouts auf eine feste Pixelanzahl festgelegt. Diese Breite zielt dann üblicherweise auf bestimmte Bildschirmauflösungen.

Bilder


 
 
Anders sieht die Sache bei flexiblen Layouts aus. Hier gibt man keine feste Breite an. Das Layout richtet sich hier dann nach der Breite des Browserfensters.

Bilder


 
 
Bei solchen Layouts wird dann beispielsweise die Breite in Prozentwerten angegeben. Passt ein Benutzer die Größe des Browserfensters an, verändert sich auch die Größe des Layouts.

Bilder


 
 
Dank moderner CSS-Eigenschaft gibt es mittlerweile übrigens auch noch eine andere Layoutvariante, nämlich das sogenannte responsive Layout. Hier verändert sich das Layout so, dass es beispielsweise auf einem Smartphone völlig anders als auf einem Desktop-Rechner aussieht. Hier auf PSD-Tutorials.de wurde beispielsweise mit einem solchen Layout gearbeitet. Ruft man die Seite am Desktop mit einer "normalen" Browserfenstergröße auf, ergibt sich folgendes Bild.

Bilder


 
 
Schiebt man das Fenster jetzt allerdings zusammen, verändert sich tatsächlich die Anordnung der auf der Webseite vorhandenen Elemente.

Bilder



Der Aufwand für die Erstellung eines responsiven Layouts ist vergleichsweise hoch. Schließlich muss die Bildschirmgröße des Besuchers ermittelt und ihm dann ein passendes Layout präsentiert werden. Und dieses passende Layout müsst ihr eben für die unterschiedlichen Bildschirmgrößen tatsächlich entwickeln. Ein Besucher, der eure Webseite also mit einem großen Monitor aufruft, bekommt beispielsweise ein dreispaltiges Layout präsentiert. Ruft ein anderer Besucher eure Webseite hingegen mit einem Smartphone auf, wird ihm ein einspaltiges Layout angezeigt.

 
 

Vor- und Nachteile der Varianten

Bevor ihr ein Layout umsetzt, müsst ihr euch überlegen, welche der genannten Layoutformen ihr einsetzen wollt. Ich möchte euch dazu kurz zeigen, welche Vor- und Nachteile feste Layouts haben.

• Designvorlagen lassen sich hier sicherlich am einfachsten umsetzen.
• Orientiert man sich an Standardauflösungen, gibt es kaum Probleme bei der Darstellung der Webseite.
• Die Layouts sind leicht verständlich zu vermitteln. (Dieser Vorteil kommt euch natürlich zugute, wenn ihr als Webentwickler einem Kunden ein Layout erklären wollt).

Die festen Layouts haben allerdings auch Nachteile.

• Aufgrund der festen Maße sind sie unflexibel, passen sich also beispielsweise auch sehr kleinen oder großen Bildschirmen nicht an. Oftmals wird viel Platz verschwendet.
• Sie unterliegen hinsichtlich der Barrierefreiheit einiger Einschränkungen.

Auch die flexiblen Layouts haben Stärken und Schwächen. Zunächst zu den Vorteilen.

• Die Layouts passen sich automatisch der Fenstergröße der Browser an.
• Die Besucher können somit sehr großen Einfluss auf die Darstellung der Webseite nehmen.

Nachteile gibt es aber auch hier.

• Ihr als Entwickler könnt die Ergebnisse nur schwer kontrollieren. Layoutvorgaben lassen sich also nur bedingt umsetzen.
• Die Seiteninhalte müssten aufwendig angepasst werden.
• Bei großen Bildschirmen kann es mit der Darstellung kurzer Texte „unschön“ werden, da diese dann oftmals nur in einer Zeile stehen. (CSS bietet hierfür aber entsprechende Eigenschaften wie min-width).

Eine weitere Layoutform stellt einen Mittelweg zwischen festen und flexiblen Layouts dar. Dabei handelt es sich um die sogenannten elastischen Layouts. Deren Hauptmerkmal ist die Maßeinheit em. (Neuerdings kommt auch immer mehr rem in Mode. Im Unterschied zu em orientiert sich rem immer am Root-Element, nicht wie em am übergeordneten Element).
 
 
Bei diesen Layouts sind Breite und Höhe flexibel. Das Design der Seite skaliert dabei proportional zur Größe des Browserfensters. Diese Gestaltungsform ist auf der einen Seite sicherlich am komplexesten, wenn es um die praktische Umsetzung geht. Das liegt schlicht und ergreifend daran, dass man im Vorfeld sehr genau wissen muss, wie sich die Elemente bei einem sich verändernden Browserfenster verhalten. Verwendet werden elastische Layouts vor allem für Webseiten, auf denen viele Fotos und Videos angeboten werden.

Die Vorteile elastischer Layouts:

• Der zur Verfügung stehende Platz wird optimal ausgenutzt.
• Die Inhalte werden proportional immer so groß wie möglich angezeigt.

Aber natürlich haben elastische Layouts durchaus auch ihre Nachteile.

• Die Gestaltung dieser Layouts ist sehr komplex.
• Auch die Umsetzung stellt sich alles andere als einfach dar.

 

Die Qual der Wahl

Ihr müsst euch also entscheiden, welche der genannten Varianten ihr verwenden wollt. Wenn ihr noch ganz am Anfang eurer HTML/CSS-Entwicklung steht, würde ich euch zunächst zu einem festen Layout raten. Wer bereits fortgeschrittene Kenntnisse auf dem Gebiet der Webentwicklung hat, sollte hingegen direkt mit responsiven Layouts arbeiten. Hier seid ihr auf der richtigen Seite, unabhängig davon, mit welchem Endgerät eure Webseite letztendlich aufgerufen wird.

Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.10.2016 - 17:25

Vielen Dank für das interessante Tutorial

Portrait von Kiasa
  • 06.05.2015 - 13:46

Super gemacht! Herzlichen Dank dafür!

Portrait von dlieb
  • 02.04.2015 - 14:47

Vielen Dank für Teil 39.

Portrait von ZainaPhoto
  • 02.04.2015 - 10:42

Tolles Tutorial!

LG Zaina

Portrait von Schoki
  • 01.04.2015 - 19:35

Danke für den weiteren HTML-Teil!

Portrait von Kundentest
  • 01.04.2015 - 19:03

Herzlichen Dank für das Tutorial.

Portrait von muhtsch
  • 01.04.2015 - 17:46

Sehr gut und verständlich erklärt. Tatsächlich habe ich meine Website in mühevoller Arbeit von einem festen zu einem responsiv Layout umgeschrieben. Das war durchaus lehrreich und wenn man sich da einmal eingefuchst hat ist das Ergebnis einfach WOW!

Portrait von pallasathena
Portrait von BOPsWelt
  • 01.04.2015 - 16:28

Vielen Dank für einen weiteren Teil. :-)

Portrait von Snapshotbysusann
Portrait von WolfgangDittmer
Portrait von fe_web
  • 01.04.2015 - 15:26

Super - Danke für diese weiteren Teil. MfG

Portrait von winzling
Portrait von rocking_sid
  • 01.04.2015 - 15:17

Vielen Dank für das sehr informative Tutorial!

Portrait von Caesarion2004
  • 01.04.2015 - 15:01

Vielen Dank für das interessante Tutorial.

Portrait von Kundentest
  • 15.02.2015 - 12:55

Herzlichen Dank für das Video.

Portrait von dlieb
  • 15.02.2015 - 12:47

Vielen Dank für das interessante Tutorial

Portrait von Luther_Sloan
  • 15.02.2015 - 12:06

Vielen Dank für das informative und interessante Tutorial.

Portrait von arko2013
  • 15.02.2015 - 11:57

Vielen Dank für das interessante Tutorial.

Portrait von Caesarion2004
  • 15.02.2015 - 11:56

Vielen Dank für das informative Videotutorial.

x
×
×