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

Lokalen Webserver einrichten und verwenden

Um PHP-Scripte auszuführen benötigt man einen Webserver. Um nun nicht jede Datei zum testen erst per FTP auf seinen Webserver zu laden ist es sinnvoll, sich lokal auf dem Rechner einen sog. lokalen Webserver zu installieren.

Zeitansage in JavaScript

Dieses JavaScript gibt die aktuelle Uhrzeit in Worten aus.

Suchanfrage an eine Datenbank über AJAX senden und empfangen

Ohne das die Seite neu geladen werden muss, kann man über JavaScript eine Suchanfrage an eine PHP-Datei senden (die dann eine DB-Tabelle ausliest) und die Ergebnisse auf der gleichen Seite ausgibt.

Fehler 404 mit .htaccess abfangen

Eine Website wird öfters umgebaut, Seiten kommen hinzu, andere Seiten werden entfernt oder bekommen eine neue Adresse. Eine selbst gestaltete Fehler-Weiterleitungsseite, leitet den Besucher sicher zum Angebot der Webseite.

Abonniere meinen RSS-Feed um über aktuelle Seiten benachrichtigt zu werden.