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

PHP mit Sicherheit

Sicheres Programmieren – Traue niemals den Eingaben des Benutzers! Speichern Sie fremde Benutzereingaben nie ohne eine Überprüfung in einer Datenbank oder in einer Datei ab.

Hinzufügen von Wasserzeichen beim hochladen eines Bildes

Ein Wasserzeichen ist die beste Option, um das Bild vor Diebstahl oder der Wiederverwendung durch eine andere Person zu schützen. Sie können den Besitz anzeigen, indem Sie dem Bild Wasserzeichen hinzufügen. Das Wasserzeichen hilft, den Ersteller zu identifizieren.

Bilder in den Browser laden per File API

Wenn Bilder hoch geladen werden sollen, ist es für dem Benutzer wissenswert welche Bilder er überhaupt ausgewählt hat. Diese JavaScript-Funktion zeigt Bilder vor dem hochladen im Browser an.

Text-Dateien über PHP laden und bearbeiten

Über PHP lassen sich Text-Dateien in ein Formular laden und bearbeiten. Der geänderte Text wird, nach dem absenden des Formulars, wieder in der Datei gespeichert.

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