Responsive Webdesign ist eine großartige Lösung für unser Multi-Screen-Problem, aber aus Drucksicht ist es schwierig, darauf zuzugreifen. Keine feste Seitengröße, keine Millimeter oder Zoll, keine physischen Einschränkungen zum Kämpfen. Design in Pixel nur für Desktops und mobile Geräte ist die Vergangenheitda immer mehr Geräte eine Website öffnen können. Lassen Sie uns einige Grundprinzipien des reaktionsschnellen Webdesigns erläutern.
Responsive Webdesign vs. adaptiv
Es mag gleich erscheinen, ist es aber nicht. Beide Ansätze ergänzen sich, daher gibt es keinen richtigen oder falschen Weg, dies zu tun. Lassen Sie den Inhalt entscheiden.
Der Fluss
Wenn die Bildschirmgröße kleiner wird, nimmt der Inhalt mehr vertikalen Platz ein und alles darunter wird nach unten gedrückt. Dies wird als Flow bezeichnet. Es kann schwierig sein zu verstehen, ob Sie es gewohnt sind, mit Pixeln und Punkten zu entwerfen, aber es ist absolut sinnvoll, wenn Sie sich daran gewöhnen.
Relative Einheiten
Die Leinwand kann ein Desktop, ein mobiler Bildschirm oder etwas dazwischen sein. Die Pixeldichte kann ebenfalls variieren, daher benötigen wir Einheiten, die flexibel sind und überall funktionieren. Hier bieten sich relative Einheiten wie Prozentsätze an. Wenn Sie also etwas mit einer Breite von 50% tun, nimmt es immer die Hälfte des Bildschirms ein (oder das Ansichtsfenster, das der Größe des geöffneten Browserfensters entspricht).
Schnittpunkte
Mit Haltepunkten kann das Layout an vordefinierten Punkten geändert werden, dh mit 3 Spalten auf einem Desktop, aber nur 1 Spalte auf einem mobilen Gerät. Die meisten CSS-Eigenschaften können von einem Haltepunkt zu einem anderen geändert werden. Normalerweise hängt es vom Inhalt ab, wo Sie einen platzieren. Wenn ein Satz gebrochen ist, müssen Sie möglicherweise einen Haltepunkt hinzufügen. Aber Vorsicht: Es kann schnell chaotisch werden, wenn es schwer zu verstehen ist, was was beeinflusst.
Maximal- und Minimalwerte
Manchmal ist es großartig, dass sich Inhalte über die gesamte Breite eines Bildschirms erstrecken, wie auf einem mobilen Gerät, aber es ist oft weniger sinnvoll, denselben Inhalt über die gesamte Breite Ihres Fernsehbildschirms zu haben. Deshalb helfen die Min / Max-Werte. Zum Beispiel würde eine Breite von 100% und eine maximale Breite von 1000 px bedeuten, dass der Inhalt den Bildschirm ausfüllt, jedoch 1000 px nicht überschreitet.
Verschachtelte Objekte
Erinnerst du dich an die relative Position? Es wäre schwierig, viele Gegenstände voneinander abhängig zu machen. Daher ist es viel verständlicher, ordentlicher und ordentlicher, die Gegenstände in einen Behälter zu wickeln. Hier können statische Einheiten wie Pixel helfen. Sie sind nützlich für Inhalte, die Sie nicht skalieren möchten, z. B. Logos und Schaltflächen.
Zuerst mobil oder Desktop
Technisch macht es keinen großen Unterschied, ob ein Projekt von einem kleineren Bildschirm zu einem größeren (zuerst mobil) oder umgekehrt (zuerst Desktop) startet. Die Zukunft sind jedoch mobile Geräte. Menschen beginnen oft an beiden Enden gleichzeitig, sodass Sie wirklich sehen müssen, was für Sie am besten funktioniert.
Webfonts vs Systemfonts
Willst du eine haben Zukunft oder Didot cool auf deiner Website aussehen? Verwenden Sie Webfonts! Obwohl sie beeindruckend aussehen werden, denken Sie daran, dass jeder heruntergeladen wird und je mehr Sie auf Ihrer Website haben, desto länger dauert das Laden der Seite. Systemschriftarten sind dagegen sehr schnell, außer wenn der Benutzer sie nicht lokal hat, wird auf eine Standardschriftart zurückgegriffen.
Bitmap gegen Vektorbilder
Hat Ihr Symbol viele Details und einige ausgefallene Effekte? Wenn ja, verwenden Sie eine Bitmap. Wenn nicht, sollten Sie ein Vektorbild verwenden. Verwenden Sie für Bitmaps ein JPG, PNG oder GIF. Für Vektoren ist die beste Wahl eine SVG- oder Symbolschriftart. Jeder hat einige Vor- und Nachteile. Betrachten wir jedoch die Größe: Kein Bild sollte ohne Optimierung online sein. Eine Seite mit sehr schweren Fotos, die nicht nur die Benutzererfahrung verschlechtert, sondern auch Ihre organische Positionierung betroffen. Vektoren hingegen sind oft klein, aber einige ältere Browser unterstützen dies nicht. Wenn Sie viele Kurven haben, kann diese auch schwerer als eine Bitmap sein. Wählen Sie sie also mit Bedacht aus.
