Barrierefreiheit & DOM
Browser und wie sie uns beim Entwickeln unterstützen, Arten von Websites, Barrierefreiheit und die Tatsache, dass Websites eigentlich nur Boxen innerhalb von Boxen sind.
Wiederholung
In der letzten Vorlesung haben wir uns damit beschäftigt, was wir uns in diesem Kurs näher ansehen, und die Werkzeuge kennengelernt, mit denen wir arbeiten werden. Ein bisschen Stoff war aber auch schon mit dabei!
Was ist HTML?
HTML ist eine Auszeichnungssprache, mit der man die Struktur von Informationen beschreiben kann. Sie ist die Grundlage für alle Websites im World Wide Web.
Was ist das WWW?
Das World Wide Web ist ein von Sir Tim Berners-Lee begründeter Teil des Internets, in dem Server über die Protokolle HTTP und HTTPS HTML-Dokumente und darin eingebettete Mediendateien an Clients, also Internetnutzende, ausliefern.
Was ist ein Server?
Ein Server ist ein Computer im Internet, der von anderen Computern erreicht werden kann und deren Anfragen verarbeitet und Daten zurückgibt.
Weshalb ist es besser, eigenen Code zu schreiben, als einen WYSIWYG-Editor zu verwenden?
Wer eigenen Code schreibt, behält volle Kontrolle und Freiheit über das Endergebnis. Das mag am Anfang komplizierter und langsamer wirken, aber „What You See Is What You Get“-Editoren sind nur vermeintliche Abkürzungen, die schnell zu Problemen führen:
Man ist dem Anbieter und dessen Geschäftspraktiken ausgeliefert
Man hat nur eingeschränkte Gestaltungsmöglichkeiten
Der Quellcode, der von diesen Werkzeugen generiert wird, ist oft suboptimal und führt zu längeren Ladezeiten und schlechteren Platzierungen in Suchergebnissen
Was ist ein Auto-Layout in Figma und weshalb ist das für das Webdesign besonders relevant?
Auto-Layouts sind besondere Rahmen in Figma, die ihre Inhalte nicht anhand von Pixelpositionen, sondern anhand von Layoutparametern wie Ausrichtung, Richtung, Umbruch, Innenabstand und Zwischenabstand platzieren. Das ist sehr ähnlich zu dem, wie man Elemente auf einer Website platziert, denn Websites müssen responsiv sein. Responsiv bedeutet, dass die Website auf jeder erdenklichen Bildschirmgröße funktioniert und sich die Elemente dynamisch anpassen. Das geht mit „fix“ platzierten Elementen nur sehr umständlich.
Auto-Layouts können dazu verwendet werden, einen besseren Eindruck von der Responsivität der Seite zu bekommen, auch wenn das Web deutlich flexibler ist als Auto-Layouts in Figma.
Das Web ist nichts ohne Browser
Eine der am meisten verwendeten Anwendungen auf einem Smartphone oder Computer ist der Webbrowser – das „Fenster zum Internet“. Ein Webbrowser ist eine Software, die dafür verantwortlich ist, die Anfragen des Nutzenden an Server weiterzuleiten und die Rückgabewerte anzuzeigen. Inzwischen können diese Programme aber noch deutlich mehr – was uns auch bei der Entwicklung nützlich werden kann.
Einige der am häufigsten verwendeten Browser sind:
Google Chrome
Safari
Firefox
Microsoft Edge
Früher gab es auch noch den famosen Internet Explorer, aber zu eurem Glück wurde dieser vor ein paar Jahren endgültig aufgegeben – denn er hat nur Probleme verursacht.
Es gibt natürlich noch eine Vielzahl anderer Browser wie Opera, Arc, Vivaldi, Brave, Orion, Zen – aber in den meisten Fällen handelt es sich hierbei nur um leicht angepasste Versionen von Google Chrome, oder besser der quelloffenen Version „Chromium“. Auch Microsoft Edge verwendet die Chromium-Technologie.
Für uns Entwickelnde ist das gut, denn es bedeutet: Ganz gleich, wie viele Browser es gibt, solange unsere Website in Chrome, Safari und Firefox funktioniert, wird sie so gut wie überall funktionieren. Zwischen den „großen Drei“ kann es zwar auch heute noch zu Inkompatibilitäten kommen – gerade Safari ist leider bekannt dafür, „sein eigenes Ding“ zu drehen –, aber gerade in den letzten zehn Jahren sind die Browser immer näher zueinander gerückt.
Innerhalb der Browser gibt es die sogenannte „Rendering Engine“, den Teil des Programms, der dafür verantwortlich ist, HTML- und CSS-Code zu interpretieren und euch als eine Website anzuzeigen. Auch hier gibt es drei große Rendering-Engines:
Blink (Chrome)
WebKit (Safari)
Gecko (Firefox)
Fun Fact: Auf iPhones und iPads ist jeder Browser Safari und verwendet WebKit als Rendering Engine. Auch Chrome und Firefox. Apple wurde zwar von der EU gezwungen, auch andere Engines zuzulassen, aber die Firma hat sich dazu entschieden, die Auflagen für Entwickelnde so komplex zu gestalten, dass bisher noch niemand eine alternative Engine für iPhones und iPads erstellt hat.
Das Web ist transparent – lernt davon!
Ganz gleich, welchen Browser ihr verwendet: Alle Browser bieten Entwicklungswerkzeuge oder „Dev-Tools“, die euch die Arbeit an euren eigenen Seiten erleichtern können – und euch die Möglichkeit bieten, von jeder anderen Website zu lernen.
Die typische Tastenkombination, um die Entwicklungswerkzeuge aufzurufen, ist Strg + Shift + i auf Windows- und Linux-Systemen, oder ⌘ + Option + i in macOS. Oft reicht es aber auch aus, irgendwo auf einer Website einen Rechtsklick zu machen und „Element-Informationen“ / „Untersuchen“ anzuklicken.
Extrawurst: Safari
In Safari geht das leider nicht von Haus aus, sondern muss erst aktiviert werden. Geht dazu bitte in Safari in die Einstellungen und dort in den Reiter „Erweitert“. Hier findet ihr ganz unten die Option „Funktionen für Web-Entwickler anzeigen“. Sobald ihr diese aktiviert habt, könnt ihr auch in Safari die Entwicklungswerkzeuge verwenden.
Innerhalb der Entwicklungswerkzeuge bekommt ihr eine Übersicht des gesamten HTML-Codes einer Website, sowie weitere Informationen über die angewandten CSS-Stile und habt sogar über die Konsole die Möglichkeit, direkt JavaScript-Code auf der Website auszuführen.
Die Werkzeuge haben noch viele weitere Funktionen, wie zum Beispiel das Abfangen von Netzwerkanfragen, oder die Verwaltung von Speicher, aber das geht über den Rahmen dieses Kurses hinaus. Wichtig sind für euch höchstens noch die Optionen, einen Light- oder Dark-Modus zu forcieren, oder euch eine responsive Ansicht einzublenden, mit der ihr eure Website auf verschiedenen Bildschirmgrößen testen könnt. Außerdem könnt ihr in diesen Werkzeugen leicht Screenshots einer gesamten Seite erstellen, indem ihr in z.B. Chrome Strg / ⌘ + Shift + P drückt und nach „Screenshot“ sucht. In Firefox gibt es dafür ein Kamera-Icon, das ihr aber womöglich erst unter den Einstellungen der Entwicklungswerkzeuge aktivieren müsst.
Arten von Websites
Es gibt natürlich sehr viele verschiedene Arten von Websites, im Wesentlichen lassen sie sich aber in zwei Kategorien einteilen, zumindest wenn man von klassischen Websites ausgeht. Unter den Begriff klassische Websites fallen Seiten, deren Ziel es ist, Informationen zu transportieren, also z.B. die Seite eines Unternehmens, eine Marketing-Landing-Page und auch eure Portfolioseiten. Online-Shops, soziale Netzwerke, etc. sind eigene Kategorien.
One-Pager
Die einfachste Art einer Website ist eine Website, die aus einem einzigen HTML-Dokument besteht, einem sogenannten One-Pager. Diese Art von Seite wird oft als Platzhalter für eine Website im Aufbau, oder einfache Marketing-Seiten verwendet, die zum Beispiel ein spezielles Produkt bewerben sollen. Auch für Events und besondere Anlässe sind solche Seiten geeignet.
Gerade wenn man nur eine Visitenkarte im Netz haben möchte, oder nicht besonders viele Inhalte hat, kann sich ein One-Pager auch für ein Unternehmen oder Individuum lohnen. Für die meisten Portfolios sind One-Pager aber ungeeignet, da sie mit steigender Zahl an Inhalten schnell unübersichtlich werden.
One-Pager sind schneller zu erstellen und zu verwalten als andere Arten von Websites, aber sie sind recht unflexibel und oft nicht die richtige Wahl für einen Webauftritt.
Multipage-Website
Die zweite Kategorie sind die mehrseitigen Websites, oder „Multipage Websites“. Diese bestehen aus mehreren untereinander verlinkten HTML-Dokumenten. Obwohl sie etwas aufwändiger zu erstellen und zu pflegen sind, sind sie gleichzeitig auch deutlich flexibler und vor allem erweiterbar, wenn man seinen Webauftritt z.B. um einen Blog ergänzen möchte.
Dadurch, dass einzelne Inhalte, z.B. Projekte, in eigenen HTML-Dokumenten für sich stehen können, werden diese stärker hervorgehoben und sind auch für Suchmaschinen leichter auffindbar, da einzelne Seiten spezifischer sind. Gleichzeitig erhöht sich auf einer mehrseitigen Website auch die Übersicht, da man Inhalte besser gliedern und voneinander abgrenzen kann.
Dennoch sollte man immer darauf achten, die Gesamtzahl der Seiten nicht zu groß werden zu lassen, da man sich ansonsten leicht verirren kann und Inhalte nicht gefunden werden können. Das ist beispielsweise bei Krankenhauswebsites oft der Fall.
Für eure Portfolios bietet sich eine mehrseitige Website an, die maximal drei Ebenen, aber in den meisten Fällen sogar nur zwei Ebenen besitzt:
Die obere Ebene mit eurer Startseite, eurer About- und Kontaktseite, sowie rechtlich vorgegebenen Seiten wie dem Impressum und der Datenschutzerklärung
Eine zweite Ebene für die individuellen Seiten zu euren Projekten
Content ist King
Das Allerwichtigste auf einer Website sind die verschiedenen Inhalte. Ohne Inhalt ist jede Website nur eine leere Hülle. Unterschätzt auch nie, wie viel Aufwand es ist, eine Website mit Inhalten zu befüllen – das ist ein Aspekt, der auch in der Berufswelt oft untergeht, denn alle Inhalte müssen natürlich für das Web aufbereitet werden.
Deshalb lohnt es sich, immer mit einem klaren Inhaltskonzept an eine Website heranzugehen, bevor man sich überhaupt detaillierte Gedanken zur Gestaltung macht. Diesen Prozess bezeichnet man auch als die Erstellung einer Informationsarchitektur.
Dabei werden alle Informationen, die mithilfe der Website transportiert werden sollen, in Stichpunkten zusammengefasst und sinnvoll gruppiert. Diese Gruppierungen bilden dann die Basis für eine Sitemap, also eine Auflistung aller konkreten Seiten (HTML-Dokumente) und ihrer Vernetzung auf der Website.
Inhaltskonzept für euer Portfolio
Ihr seid in der inhaltlichen Konzeption eures Portfolios genauso frei wie in der Gestaltung – eurer Kreativität sind keine Grenzen gesetzt, solange ihr die inhaltlichen Vorgaben aus der ersten Vorlesung beachtet. Damit ihr aber nicht völlig bei Null starten müsst, habe ich euch hier einige Anhaltspunkte vorbereitet.
Ihr solltet auf eurem Portfolio ein Maximum von 8 Arbeiten / Projekten nicht überschreiten. Die meisten Menschen, die sich eure Portfolios ansehen, haben kaum bis gar keine Zeit. Euer Portfolio sollte also die Bandbreite eurer Fähigkeiten präsentieren und ein Highlight-Reel eurer Arbeit zeigen, kein vollständiges Archiv eures Werdegangs als Gestalterin oder Gestalter.
Hinweis zur Abgabe: Es ist in Ordnung, wenn ihr für die Abgabe nur ein Projekt ausarbeitet und die anderen Projekte darauf verlinkt, so wie es auch im Abgabebeispiel gemacht ist.
Denkt auf jeden Fall daran, bei Teamarbeiten immer anzugeben, welche Aufgaben ihr übernommen habt, damit es nicht so wirkt, als hättet ihr ein Gruppenprojekt allein gestemmt. Außerdem solltet ihr nur Arbeiten zeigen, die ihr auch gerne wieder machen würdet. Es bringt nichts, wenn ihr in eurem Portfolio zeigt, dass ihr tolle Animationen machen könnt, wenn ihr das nicht gerne macht – im schlimmsten Fall bekommt ihr nur Jobangebote in diese Richtung!
Wenn ihr die einzelnen Projekte ausgestaltet, zeigt gerne etwas vom Prozess, aber langweilt nicht mit jedem Schritt. Haltet Texte möglichst kurz und lasst Bilder sprechen, wir sind visuelle Menschen – und wenn ihr Bilder aufbereitet, fragt euch immer: „Würde das auf Social Media gut performen?“
Wenn es das nicht tun würde, solltet ihr das Bild noch etwas besser aufbereiten oder ganz weglassen. Weniger ist mehr, euer Content muss interessant sein, keine Sammlung von zehn lieblosen Screenshots. Überlegt euch immer, wie ihr eine kleine Geschichte erzählen könnt.
Zeigt eure Persönlichkeit, präsentiert euren Ansatz und eure Stärken – und beweist, dass ihr Probleme lösen könnt.
User Experience und Barrierefreiheit
Seit Juni 2025 ist ein neues Gesetz in Kraft getreten, das bestimmte Websites, z.B. Online-Shops, dazu verpflichtet, vollständig barrierefrei zu sein. Wir können davon ausgehen, dass diese Verpflichtung nach und nach auf alle Arten von gewerblich betriebenen Websites ausgeweitet wird. Wenn ihr mit eurem Portfolio darauf aus seid, Geld zu verdienen, indem ihr z.B. darüber neue Aufträge oder Jobangebote erhaltet, zählt auch das als gewerblich.
Allgemein ist Barrierefreiheit nicht nur für die Gesetzeskonformität wichtig, sondern eine Sache der Menschlichkeit. Niemand fühlt sich gern ausgeschlossen, also warum solltet ihr ganze Gruppen von Menschen von eurer Website ausschließen, nur weil ihr sie nicht barrierefrei gestaltet habt?
Das Thema Barrierefreiheit im Web an sich bräuchte einen vollständig eigenen Kurs. Ich kann euch hier nur grundlegende Informationen mit auf den Weg geben, die euch hoffentlich aber schon ein solides Fundament bieten können. Eine barrierefreie Website verbessert nämlich die Nutzererfahrung (oder UX) aller Besucher und Besucherinnen – und die UX spielt auf eurer Website eine genauso wichtige Rolle wie die grafische Gestaltung!
WCAG und Barrierefreiheitslevel
Es gibt für das Web die sogenannten „Web Content Accessibility Guidelines“ (WCAG), eine Sammlung von Richtlinien, die barrierefreie Websites befolgen sollten. Wie gesagt, genug Informationen für einen eigenen Kurs – ich möchte euch an dieser Stelle nur die verschiedenen „Level“ für Konformität mit diesen Richtlinien vorstellen, weil ihr diesen vermutlich immer wieder einmal begegnen werdet.
Die WCAG teilen sich in drei Stufen ein:
A: das grundlegendste Level, das die meisten Seiten mit Standardeinstellungen bereits erfüllen
AA: das Level, das alle Websites erfüllen sollten. Um rechtlich als barrierefrei zu gelten, sollte eine Website alle Richtlinien des Levels AA erfüllen
AAA: das strengste Level, das dem höchsten Standard an Barrierefreiheit entspricht, aber nicht für alle Situationen notwendig, oder sogar möglich ist
Für eure Portfolios solltet ihr also versuchen, die Richtlinien für das Level AA zu erfüllen, müsst euch aber nicht bemühen, AAA zu erreichen – auch wenn natürlich mehr Barrierefreiheit immer besser ist!
Grundlegende Richtlinien
Über die Mindestbreite, auf der eure Website ohne zu scrollen funktionieren muss, haben wir letztes Mal bereits gesprochen: 320px, was bei einer Fensterbreite von 1280px einer Vergrößerung von 400% entspricht. Verwendet diese Breite also ruhig als Basis, wenn ihr die mobile Version eures Portfolios gestaltet.
Eine weitere Mindestgröße sind 16px für Schriften. Ihr solltet nur in den seltensten Fällen kleinere Schriften als 16px verwenden, z.B. wenn ihr Text in Versalien setzt, und wenn, dann niemals kleiner als 12px und nur für wenig Text. Fließtext sollte 16px oder größer sein und eine maximale Zeilenlänge von 68 – 72 Zeichen pro Zeile nicht überschreiten. Benutzt dabei einen Zeilenabstand von 140 – 150%.
Ganz besonders wichtig sind auch Farbkontraste. Fließtext sollte immer einen Kontrast von mindestens 4,5 zu 1 zum Hintergrund haben, größere Texte wie Überschriften und Grafiken wie Icons 3 zu 1. Diese Kontraste könnt ihr in Figma mit dem „Contrast“-Plugin, oder dem neuen Kontrast-Checker im Farbwähler testen.
Kontrast spielt auch bei interaktiven Elementen eine Rolle. Generell sollten interaktive Elemente auch immer wie interaktive Elemente aussehen und gängige Konventionen befolgen. Im Umkehrschluss bedeutet das: Wenn etwas klickbar aussieht, dann sollte es auch klickbar sein!
Achtet darauf, dass interaktive Elemente immer mindestens eine Fläche von 24x24px aufweisen, besser sogar 36x36px und nicht zu nah beieinanderstehen. Einzige Ausnahme sind hier Links im Fließtext. Diese Mindestgrößen stellen sicher, dass sich die Elemente auch mit der Fingerspitze aktivieren lassen, die viel ungenauer ist als ein Mauszeiger.
Widersteht bitte auch der Versuchung, die Unterstreichung bei allen Links, oder den Fokusrahmen bei interaktiven Elementen ersatzlos zu deaktivieren. Es ist wichtig zu erkennen, welche Elemente klickbar sind, und Farbe allein reicht nicht aus. Verwendet also bitte immer mindestens zwei Hervorhebungsmerkmale.
Wichtige Konventionen im Web
Das Logo einer Website ist klickbar und führt zur Startseite
Rechteckige Formen mit Text sind Buttons und somit klickbar – ganz besonders, wenn die Ecken abgerundet sind
Alles, was unterstrichen ist, ist ein Link
Text in einer Menüleiste ist klickbar, auch wenn er nicht aussieht wie ein Link
Der „Hamburger“ öffnet ein Menü, aber nicht jede:r weiß das, d. h., der Beisatz von „Menü“ als Text ist hilfreich
Ein Klick außerhalb eines Dialogfensters schließt das Dialogfenster
Wenn sich etwas bewegt/verändert, wenn man es mit der Maus überfährt, dann ist es klickbar
Websites sind Boxen innerhalb von Boxen
Ihr könnt euch eine Website wie eine Kommode vorstellen, bei der jede Schublade für eine Unterseite innerhalb der Website steht:
Jede dieser Schubladen ist ein HTML-Dokument, das unabhängig von den anderen Schubladen geöffnet werden kann. Die Front der Schublade ist dann nicht mehr sichtbar, sie erklärt nur, was in der Schublade steckt. Der eigentliche Inhalt der Schublade ist wiederum in verschiedene Abschnitte unterteilt:
Die einzelnen Abschnitte innerhalb der Schublade sind wieder unterteilt, der Infotext besteht zum Beispiel vielleicht aus einer Überschrift und mehreren Textabsätzen:
Die Form des Rechtecks ist nicht zufällig gewählt. Eine Website besteht immer aus gestapelten Rechtecken, auch wenn die Rechtecke manchmal aussehen wie Kreise oder Ellipsen, es sind Rechtecke. Es gibt auch immer ein klares Raster – auch wenn es möglich ist, einzelne Elemente aus dem Raster ausbrechen zu lassen. Spätestens, wenn ihr euch die Mühe macht, die verschiedenen Abschnitte einer Website auf einem Screenshot einzuzeichnen, wird das offensichtlich:
Behaltet das auf jeden Fall im Hinterkopf, wenn ihr eure Seiten gestaltet! Je weiter ihr euch von diesem klaren Raster und Box-Modell entfernt, desto komplizierter wird später die technische Umsetzung.
Das Document Object Model (DOM)
Formal wird diese Schubladenkastenstruktur als „Document Object Model“ oder auch kurz „DOM“ bezeichnet. Es stellt eine Baumstruktur dar, bei der die Knotenpunkte Teile eines Dokuments repräsentieren. So gibt es bei jedem HTML-Dokument ein „Wurzelelement“ (in unserem Beispiel die gesamte Schublade), in dem sich weitere Elemente befinden, die wiederum Elemente beinhalten können. Für einen Browser ist diese Struktur die Basis, um ein HTML-Dokument anzeigen zu können.
Das wirkt alles sehr komplex – die gute Nachricht ist, dass für uns als Autoren und Autorinnen des HTML-Dokuments die Baumstruktur des DOM nicht wichtig ist. Stattdessen schreiben wir HTML in „Schachteln“:
<article>
<h1>Hallo Welt!</h1>
<p>
Das hier ist nur ein kleiner <strong>Einleitungstext</strong> zu Beispielzwecken, um das Konzept des DOM verständlicher zu machen.
</p>
</article>
body {
font-family: system-ui, sans-serif;
}
In diesem Beispiel haben wir eine Box „article“, die zwei kleinere Boxen beinhaltet: „h1“ und „p“. Innerhalb dieser Boxen befindet sich Text, im Falle des p-Elements mit noch einer kleineren Box, nämlich „strong“.
Hieran sieht man besonders gut den beschreibenden Charakter von HTML, denn ohne das Dokument im Browser zu sehen, haben wir nur durch den Code eine Vorstellung, womit wir es hier zu tun haben: einem Artikel mit einer Überschrift, einem Textabsatz und einem gefetteten Teilsatz innerhalb des Texts.
Alles in HTML findet innerhalb dieser „Boxen“ statt, die man auch Elemente nennt. Wie genau diese aufgebaut sind, schauen wir uns nächstes Mal an. Wichtig für heute ist nur, dass diese Boxen in zwei Arten existieren:
Block-Elemente
Diese Elemente nehmen den gesamten horizontalen Raum ihres Elternelements ein, d. h., sie füllen z.B. das gesamte Browserfenster von links nach rechts. Article, H1 und P im Beispiel sind Block-Elemente. Deshalb steht der Textabsatz auch unterhalb der Überschrift, denn auch wenn „Hallo Welt!“ nicht lang genug ist, um das gesamte Browserfenster zu füllen, nimmt die H1 die gesamte Breite ein.
Der Textabsatz (das P-Element) läuft auch von links nach rechts über die gesamte Breite und bricht dann um, wenn die Zeile nicht ganz in den Browser passt – von Haus aus sind alle Block-Elemente prinzipiell responsiv! Die Dinge gehen erst kaputt, wenn ihr anfangt, mit festen Breiten oder anderen Befehlen in das Layout der Seite einzugreifen.
Der Artikel selbst ist auch ein Block-Element, auch wenn er nicht sichtbar ist, sondern nur Überschrift und Absatz zusammenbündelt. Visualisieren könnt ihr das, indem ihr im Code-Beispiel den Artikel dupliziert – er wird unterhalb des ersten Artikels auftauchen, nicht daneben.
Inline-Elemente
Der Text selbst und das Strong-Element sind Inline-Elemente. Sie nehmen nur so viel Breite ein, wie sie brauchen, und brechen um, wenn der Platz nicht ausreicht. Merken kann man sich das leicht, wenn man „Inline“ auf Deutsch übersetzt: „in der Zeile“.
Häufige Inline-Elemente sind Fettungen, kursiver Text, Links und hervorgehobene Textabschnitte. Alles Elemente, die nicht für sich auf einer eigenen Zeile, sondern innerhalb einer Zeile vorkommen sollen.
Inline-Block-, Flex- und Raster-Elemente
Es gibt noch einige weitere Arten von Elementen, die sich aber entweder wie Inline- oder wie Block-Elemente verhalten. Diese schauen wir uns zu einem späteren Zeitpunkt noch einmal an. Wichtig für euch ist: Steckt keine Block-Elemente in Inline-Elemente!
Praxis
Um das Prinzip der Boxen in Boxen zu verinnerlichen und ein besseres Gefühl für den Aufbau von Websites zu bekommen, nehmt euch bitte einen Screenshot einer Website. Versucht in Figma Rechtecke um jede Box zu legen, die ihr erkennen könnt.
Aussehen könnte das zum Beispiel so:
Um euer Ergebnis zu überprüfen, könnt ihr die Entwicklungswerkzeuge eures Browsers öffnen und mit der Maus über die HTML-Elemente fahren. Dadurch zeichnet euch der Browser die Boxen ein. Alternativ könnt ihr auch eine CSS-Regel anlegen, die einen Rahmen um jedes Element legt:
<article>
<h1>Hallo Welt!</h1>
<p>
Das hier ist nur ein kleiner <strong>Einleitungstext</strong> zu Beispielzwecken, um das Konzept des DOM verständlicher zu machen.
</p>
</article>
* {
box-shadow: inset 0 0 0 1px magenta !important;
}
body {
font-family: system-ui, sans-serif;
}
Mit dem Wissen aus diesem Block und eurem Moodboard von letzter Woche solltet ihr nun alle Bausteine haben, um mit der Gestaltung eurer Website zu beginnen. Macht euch heute bitte einen Plan zu den Inhalten eurer Seite und beginnt, sie über die nächsten Wochen zu gestalten.
Dazu bietet es sich an, zunächst ein Wireframe zu erstellen, das im Prinzip eine grobe Verortung aller Inhalte ohne zu viel Gestaltung ist. Das Wireframe könnt ihr dann später mit Typo, Farben, Bildern und Gestaltungselementen bestücken. Es ist auch empfehlenswert, mit der mobilen Version der Seite anzufangen, da es tendenziell leichter ist, Inhalte von wenig auf viel Platz auszubreiten als andersherum.
Mitte / Ende November werdet ihr eure fertige Gestaltung für die Mobile- und Desktop-Version dem Rest der Gruppe und mir in der Zwischenpräsentation vorstellen.