Skip to content

ISSUE-14 Fix layout flaws in the German version #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
christophdubach wants to merge 2 commits into
base: main
Choose a base branch
from
Open

ISSUE-14 Fix layout flaws in the German version #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f77381b
ISSUE-14 fix: show in-page nav line
christophdubach Mar 30, 2024
1dbb5de
ISSUE-14 fix: add missing umlauts, add word breaks with soft hyphens,…
christophdubach Mar 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,10 @@ h1 {
margin-top: 1rem;
}

.title-and-illustration h1 {
width: 60%;
}

.title-and-illustration img {
width: 40%;
height: auto;
Expand All @@ -145,6 +149,10 @@ h1 {
}

@media (max-width: 370px) {
.title-and-illustration h1 {
width: 63%;
}

.title-and-illustration img {
width: 37%;
margin-top: 1.5rem;
Expand Down Expand Up @@ -249,13 +257,15 @@ main ul li + li {
padding-top: 0.75rem;
}

nav[aria-label="page"] {
nav[aria-label="page"],
nav[aria-label="Seite"] {
Copy link
Copy Markdown
Author

@christophdubach christophdubach Mar 31, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See issue #18

text-align: right;
background: url(/images/line.svg) repeat-x center;
font-size: 0.8rem;
}

nav[aria-label="page"] ul {
nav[aria-label="page"] ul,
nav[aria-label="Seite"] ul {
padding: 0.5rem 1rem 0.5rem 0.5rem;
display: inline-block;
text-transform: uppercase;
Expand Down
22 changes: 10 additions & 12 deletions de/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,11 @@
<html lang="de">

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link
href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26"
href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÜabcdefghijklmnopqrstuvwxyzäöüß%26"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Asap:400,400i&subset=latin" rel="stylesheet">
<link rel="canonical" href="https://inclusivedesignprinciples.info/" />
Expand All @@ -24,10 +23,10 @@

<body>
<header>
<nav aria-label="seite">
<nav aria-label="Seite">
<ul>
<li><a href="#introduction">Einführung</a></li>
<li><a href="#principles">Die Designprinzipien</a></li>
<li><a href="#principles">Die Design&shy;prinzipien</a></li>
</ul>
</nav>

Expand All @@ -47,7 +46,7 @@ <h2>Wähle eine Sprache:</h2>
<div>
<div class="title-and-illustration">
<h1>
Inklusive Designprinzipien
Inklusive Design&shy;prinzipien
</h1>
<img src="/images/balloons_opt.svg"
alt="Drei Heißluftballons hängen zusammen an einem ruhigen, sonnigen Himmel" />
Expand Down Expand Up @@ -227,7 +226,7 @@ <h3 id="give-control">Kontrolle geben
<p><em>Stelle sicher, dass die Menschen die Kontrolle haben. Menschen sollten in der Lage sein, auf die von
ihnen bevorzugte Weise auf Inhalte zuzugreifen und mit ihnen zu interagieren.</em></p>
<h4>Gesamte Beschreibung</h4>
<p>Unterdrücke oder deaktiviere nicht die Möglichkeit, Standard Browser- und Plattformeinstellungen wie
<p>Unterdrücke oder deaktiviere nicht die Möglichkeit, Standard Browser- und Plattform&shy;einstellungen wie
Ausrichtung, Schriftgröße, Zoom und Kontrast zu ändern. Vermeide außerdem Inhaltsänderungen, die nicht von
Benutzer*innen initiiert wurden, es sei denn, es gibt eine Möglichkeit, dies zu kontrollieren.</p>
<h4>Beispiele</h4>
Expand All @@ -252,7 +251,7 @@ <h4>Beispiele</h4>
</div>
<div class="principle-container">
<div class="intro">
<h3 id="offer-choice">Biete Wahlmöglichkeiten
<h3 id="offer-choice">Biete Wahl&shy;möglichkeiten
</h3>
<button data-expands="offer-choice-content" aria-label="Abschnitt öffnen"
aria-describedby="biete-wahlmöglichkeiten" hidden>
Expand All @@ -270,13 +269,12 @@ <h3 id="offer-choice">Biete Wahlmöglichkeiten
solchen, die komplex oder nicht standardisiert sind.</em></p>
<h4>Gesamte Beschreibung</h4>
<p>Es gibt oft mehr als eine Möglichkeit, eine Aufgabe zu erledigen. Man kann nicht davon ausgehen, welcher Weg
bevorzugt wird. Indem du Alternativen für das Layout und die Aufgabenerledigung bereitstellst, bietest du
Menschen Auswahlmöglichkeiten, die zu ihnen und ihren jeweiligen Umständen passen.</p>
bevorzugt wird. Indem du Alternativen für das Layout und die Aufgaben&shy;erledigung bereitstellst, bietest du Menschen Auswahl&shy;möglichkeiten, die zu ihnen und ihren jeweiligen Umständen passen.</p>
<h4>Beispiele</h4>
<ul class="examples">
<li><strong>Mehrere Möglichkeiten, eine Aktion abzuschließen:</strong> Wenn möglich gebe mehrere Möglichkeiten
zum Abschließen einer Aktion. Auf Mobilgeräten kann das Wischen zum Löschen eines Elements zusammen mit
einer Bearbeitungsschaltfläche unterstützt werden, mit der Elemente ausgewählt und dann gelöscht werden
einer Bearbeitungs&shy;schaltfläche unterstützt werden, mit der Elemente ausgewählt und dann gelöscht werden
können. Ein Beispiel hierfür ist in iOS-Mail.</li>
<li><strong>Layout:</strong> Ziehe bei langen Inhaltslisten in Betracht, eine Raster- oder Listenlayoutoption
anzubieten. Dies unterstützt Personen, die größere Bilder auf dem Bildschirm oder kleinere Zeilen wünschen.
Expand Down Expand Up @@ -366,7 +364,7 @@ <h4>Gesamte Beschreibung</h4>
<p>Funktionen sollten die Benutzbarkeit aufwerten, indem sie effiziente und vielfältige Möglichkeiten bieten,
Inhalte zu finden und mit ihnen zu interagieren. Berücksichtige Gerätefunktionen wie Sprach-,
Geolokalisierungs-, Kamera- und Vibrations-APIs und wie die Integration mit angeschlossenen Geräten oder einem
zweiten Bildschirm Wahlmöglichkeiten bieten könnte.</p>
zweiten Bildschirm Wahl&shy;möglichkeiten bieten könnte.</p>
<h4>Beispiele</h4>
<ul class="examples">
<li><strong>Integration mit angeschlossenen Geräten oder zweitem Bildschirm:</strong> Die Verwendung von
Expand All @@ -376,7 +374,7 @@ <h4>Beispiele</h4>
Plattformfunktionen. Die Vibrations-API macht Benachrichtigungen für gehörlose und schwerhörige Menschen
besser nutzbar, während die Geolokalisierungs-API es Menschen mit Mobilitätseinschränkungen erleichtert,
standortbasierte Dienste zu nutzen.</li>
<li><strong>Erleichtere die Aufgabenerledigung:</strong> Füge den Eingabefeldern eine Schaltfläche „Passwort
<li><strong>Erleichtere die Aufgaben&shy;erledigung:</strong> Füge den Eingabefeldern eine Schaltfläche „Passwort
anzeigen“ hinzu, damit Menschen überprüfen können, ob sie den Text richtig eingegeben haben, oder füge eine
Touch-Identifizierung für passwortgeschützte Bereiche hinzu.</li>
</ul>
Expand Down