Responsives Design

Ob ein großer Monitor, ein Tablet oder Smartphone verwendet wird, das Design der Seite sollte sich automatisch der Größe des Gerätes anpassen.

• Das „Responsive Design” einer Website kann man einfach testen indem man die Breite des Browserfensters zusammen schiebt! Horizontale Scrollbalken sollten möglichst nicht mehr erscheinen.

Hier einige Tipps die mir geholfen haben diese Website zu optimieren

• Um das Design möglichst anpassbar zu machen, sollten die Schriftgrößen nicht absolut angegeben werden (px Pixel). Hierzu eignen sich CSS-Angaben wie small und large. Wenn Sie eine genauere Abstufung wünschen, können Sie die Einheit rem verwenden: 1rem ist die voreingestellte Standard-Schriftgröße des Benutzers, 1.5rem ist 50% größer etc.

• Keine festen Angabe von Breite und Höhe eines Elements in CSS verwenden, wenn dann nur bei kleinen Größenangaben.

Schlecht:
width: px;
height: px;

Besser:
min-width: px;
min-height: px;
max-width: px;
max-height: px;
width: %;

• Bilder mit CSS skalieren, die Größenangabe im Bild sollte dabei nicht festgelegt sein (width="" height="")

img {
 max-width: 100%;
 height: auto;
}

• Mit der @media-Regel kann man bestimmen wie groß die Elemente sein sollen wenn die Größe des Bildschirms sich ändert.

/* Nur ein Demo */

body {
 max-width: 45rem;
 padding: 1rem;
}

@media screen and (min-width: 1200px) {
 body {
  max-width: 65rem;
 }
}

@media screen and (max-width: 760px) {
 body {
  padding: 0.3rem;
 }
}

• Keine festen Positionsangaben für Elemente verwenden wie:
position: absolute; top: 500px; left: 300px;

• Hintergrundbilder mit CSS in den "cover"-Modus setzen. Das Bild wird automatisch auf die gesamte Fläche vergrößert. Dabei werden, je nach Bildformat und zur Verfügung stehender Fläche, bestimmte Teile des Bildes eventuell abgeschnitten. Die Bilder sollten bei einer Vergrößerung nicht pixelig aussehen sondern eine höhere Auflösung haben.

element {
 background-image: url(bild.png);
 background-size: Cover;
}

• Den Zeilenumbruch-Tag <br>, sollte man im Fließtext möglichst selten einsetzen.

• Tabellen <table> nicht zum Layout der Seite verwenden sondern nur für tabellarische Angaben. Eine Seite ist keine Zeitung mit fest stehenden Elementen.

• Mit der Angabe float: left/right kann man Text um ein Element herum fließen lassen. Auch andere Elemente lassen sich so nebeneinander darstellen

element {
 float: left;
}

• Größere Block-Elemente können mit overflow: Auto; einen horizontalen Scrollbalken erhalten wenn der Inhalt des Elements über die Breite oder Höhe des Eltern-Elements hinaus geht.

pre {
 white-space: Nowrap;
 overflow: Auto;
}
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.

• Bei großen Monitoren hat man ein Problem wenn die Seite im Vollbild-Modus dargestellt wird oder das Browserfenster vergrößert wird, zerfließt der Inhalt auf der gesamten Breite. Ich habe deshalb eine maximale Breite von: 45rem (720px) eingestellt (Beispiel, siehe oben bei der @media-Regel).

• Die Browser von mobilen Geräten gehen zuerst einmal davon aus, dass Websites nicht für mobile Endgeräte ausgelegt sind und die Website-Breite die Display-Breite um einiges übersteigt. Mit dem Nachteil, dass die Inhalte sehr klein und Schriften nicht lesbar sind, der Besucher muss dementsprechend hinein zoomen.

Die Einstellung des Anzeigebereich (Viewport) lässt sich sehr einfach über den Meta-Tag: <meta name="viewport" content="width=device-width, user-scalable=yes"> einstellen.

Tipps

Browser-Sprachumschaltung
Diese Sprachumschaltung zeigt je nach der verwendeten Sprache (deutsch, englisch, ...) im Browser unterschiedlichen Inhalt an.
Erster Eintrag in eine MySQL-Datenbank mit PHP
Eine Anleitung wie man ein Nachrichten-System mit einer MySQL (oder MariaDB)-Datenbank über PHP realisieren kann. Komplett mit Formularen zum eintragen, anzeigen und bearbeiten der Daten.
Grafik als Zeichenkette speichern und wieder als Grafik ausgeben
Grafiken (Bilder) können problemlos als Zeichenkette gespeichert und wieder ausgelesen werden, wie das genau funktioniert und welchen Sinn es hat erfahren Sie hier.
Diese Schlagwörter könnten Sie interessieren:
JSON Counter Blätterfunktion Seitenformatierung PHPMailer Zeichnen PHP-Fehlermeldungen Silbentrennung Fotoalbum Zeitbalken Wasserzeichen Diashow Sicherheit Marquee localStorage Zeitansage Zugriffsrechte Operatoren Mimetypen SQLite